/* Diseño base de Fondos Dharma (prototipo del 19-oct-2026, commit 907b4793: data/proyectos/champs_jewelry/diseno). Imagen 3 «Champs Urbano». Las imágenes de ambiente son ilustraciones digitales y no son piezas a la venta. */
/* Champs Jewelry — prototipo de diseño (imagen 3 «Champs Urbano», elegida el 19-oct).
   Imágenes de ambiente hechas con IA (OpenArt, uso comercial). Las piezas a la venta van SOLO con fotos reales del cliente. */
:root{--negro:#000;--carbon:#0b0b0b;--grafito:#151515;--oro:#F3D36B;--oro-hondo:#C9A227;--rojo:#E2342B;--crema:#F1EAD6;--gris:#9c9585;
  --oro-grad:linear-gradient(100deg,#8a6a12 0%,#F3D36B 28%,#fff3c4 45%,#F3D36B 60%,#b48a1c 100%);
  --anton:'Anton',Impact,sans-serif;--manrope:'Manrope',system-ui,sans-serif;--suave:cubic-bezier(.32,.72,0,1)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--negro);color:var(--crema);font:400 16px/1.6 var(--manrope);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.ancho{max-width:1240px;margin:0 auto;padding:0 24px}
.et{font:800 12px/1 var(--manrope);letter-spacing:.32em;text-transform:uppercase;color:var(--oro)}
.oro-txt{background:var(--oro-grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:brillo 6s var(--suave) infinite}
@keyframes brillo{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.boton{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:999px;font:800 13px/1 var(--manrope);letter-spacing:.14em;text-transform:uppercase;transition:transform .5s var(--suave),box-shadow .5s var(--suave)}
.boton:hover{transform:translateY(-2px)}
.b-oro{background:var(--oro-grad);background-size:200% 100%;color:#000;box-shadow:0 10px 40px -10px rgba(243,211,107,.55)}
.b-linea{border:1px solid rgba(243,211,107,.5);color:var(--oro)}
.b-rojo{background:var(--rojo);color:#fff}
.pendiente{font-size:12px;color:var(--gris);border:1px dashed #4a4436;border-radius:8px;padding:2px 8px;display:inline-block}

/* barra */
.barra{position:fixed;inset:0 0 auto 0;z-index:50;background:linear-gradient(#000c,#0000);backdrop-filter:blur(2px)}
.barra .ancho{display:flex;align-items:center;justify-content:space-between;height:76px}
.marca{display:flex;align-items:center;gap:12px;font:400 26px/1 var(--anton);letter-spacing:.04em;color:var(--oro)}
.marca small{display:block;font:800 9px/1 var(--manrope);letter-spacing:.45em;color:var(--crema);margin-top:4px}
.menu{display:flex;gap:28px;font:700 12px/1 var(--manrope);letter-spacing:.2em;text-transform:uppercase;color:#d9d1bd}
.menu a:hover{color:var(--oro)}
@media(max-width:860px){.menu{display:none}}
@media(max-width:600px){.barra .boton{display:none}.ancho{padding:0 16px}.et{letter-spacing:.2em;line-height:1.5}.metal{padding:32px 20px}.paso{padding:28px}section{padding:84px 0}}
html,body{overflow-x:hidden}

/* héroe */
.heroe{position:relative;min-height:min(100vh,960px);display:flex;align-items:flex-end;overflow:hidden}
.heroe::before{content:"";position:absolute;inset:0;background:url("/img/heroe-cadena.jpg") center/cover;transform:scale(1.05);animation:respira 18s ease-in-out infinite alternate}
@keyframes respira{to{transform:scale(1.12)}}
.heroe::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 35%,transparent 0%,#0008 55%,#000 92%),linear-gradient(180deg,transparent 40%,#000 100%)}
.heroe .ancho{position:relative;z-index:2;padding-bottom:12vh;width:100%}
.heroe h1{font:400 clamp(64px,13vw,190px)/.86 var(--anton);letter-spacing:-.01em;text-transform:uppercase;margin:22px 0 26px}
.heroe p{max-width:520px;font-size:18px;color:#ddd4bd;margin-bottom:34px}
.heroe .acciones{display:flex;gap:14px;flex-wrap:wrap}

/* cinta */
.cinta{background:var(--oro-grad);color:#000;overflow:hidden;white-space:nowrap;border-block:1px solid #000}
.cinta div{display:inline-block;padding:18px 0;font:400 30px/1 var(--anton);letter-spacing:.06em;animation:cinta 28s linear infinite}
.cinta span{margin:0 26px}.cinta i{font-style:normal;color:var(--rojo)}
@keyframes cinta{to{transform:translateX(-50%)}}

/* secciones */
section{padding:120px 0}
.cab{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:54px;flex-wrap:wrap}
.cab h2{font:400 clamp(44px,6.5vw,86px)/.95 var(--anton);text-transform:uppercase}
.cab p{max-width:420px;color:#bdb5a1}

/* franja */
.franja{height:clamp(220px,32vw,460px);background:url("/img/franja-oro-plata.jpg") center/cover;position:relative}
.franja::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#000 0%,#0000 25%,#0000 75%,#000 100%)}

/* categorías */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:960px){.cats{grid-template-columns:repeat(2,1fr)}}
.cat{position:relative;aspect-ratio:3/4;border-radius:22px;overflow:hidden;padding:6px;background:var(--oro-grad);background-size:200% 200%}
.cat .in{position:relative;height:100%;border-radius:17px;overflow:hidden;background:#000;display:flex;flex-direction:column;justify-content:flex-end;padding:24px}
.cat .in::before{content:"";position:absolute;inset:0;background:url("/img/textura-oro.jpg") center/cover;opacity:.32;transition:opacity .7s var(--suave),transform .9s var(--suave)}
.cat:hover .in::before{opacity:.55;transform:scale(1.06)}
.cat .foto{position:absolute;inset:22% 18% 38%;border:1px dashed #F3D36B88;border-radius:14px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;color:#e7dcbc;background:#0007;padding:8px}
.cat h3{position:relative;font:400 38px/1 var(--anton);text-transform:uppercase;color:var(--oro)}
.cat span{position:relative;font-size:13px;color:#cfc6b0}

/* oro y plata */
.metales{display:grid;grid-template-columns:1fr 1fr;min-height:620px}
@media(max-width:860px){.metales{grid-template-columns:1fr}}
.metal{position:relative;display:flex;align-items:flex-end;padding:56px;overflow:hidden}
.metal.oro::before{content:"";position:absolute;inset:0;background:url("/img/metal-oro.jpg") center/cover}
.metal.plata::before{content:"";position:absolute;inset:0;background:url("/img/metal-plata.jpg") center/cover}
.metal.oro::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000e 10%,#0002 60%)}
.metal.plata{background:radial-gradient(circle at 30% 20%,#ffffff 0%,#d9dde2 18%,#8e959e 45%,#2a2d31 80%,#0b0b0b 100%)}
.metal.plata::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000e 10%,#0000 65%)}
.metal div{position:relative;z-index:2}
.metal h3{font:400 clamp(70px,9vw,130px)/.9 var(--anton);text-transform:uppercase}
.metal.plata h3{background:linear-gradient(100deg,#7d848c,#ffffff 45%,#aab1b9 70%,#6c7279);-webkit-background-clip:text;background-clip:text;color:transparent}
.metal p{color:#e4dbc4;max-width:380px;margin-top:10px}

/* cómo comprar */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.pasos{grid-template-columns:1fr}}
.paso{background:var(--grafito);border:1px solid #2a2a2a;border-radius:24px;padding:38px;position:relative;overflow:hidden}
.paso b{font:400 90px/1 var(--anton);position:absolute;right:20px;top:6px;color:#F3D36B14}
.paso h3{font:400 30px/1.05 var(--anton);text-transform:uppercase;color:var(--oro);margin-bottom:14px}
.paso p{color:#bdb5a1}

/* colección */
.coleccion{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:960px){.coleccion{grid-template-columns:repeat(2,1fr)}}
.pieza{border-radius:20px;overflow:hidden;background:var(--grafito);border:1px solid #262626;transition:border-color .5s var(--suave),transform .6s var(--suave)}
.pieza:hover{border-color:#F3D36B66;transform:translateY(-4px)}
.pieza .marco{aspect-ratio:1;background:radial-gradient(circle at 50% 40%,#2a2414,#0b0b0b 70%);display:flex;align-items:center;justify-content:center;color:#8e866f;font-size:12px;text-align:center;padding:20px;border-bottom:1px solid #262626}
.pieza .marco svg{opacity:.6;margin-bottom:8px}
.pieza .d{padding:18px 20px}
.pieza h4{font:700 15px/1.3 var(--manrope);color:var(--crema)}
.pieza .d span{font-size:12px;color:var(--gris)}

/* llamado */
.llamado{position:relative;overflow:hidden;text-align:center;padding:150px 0}
.llamado::before{content:"";position:absolute;inset:0;background:url("/img/llamado-cadena-ciudad.jpg") center/cover;opacity:.7}
.llamado::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,#0006,#000 75%)}
.llamado .ancho{position:relative;z-index:2}
.llamado h2{font:400 clamp(54px,9vw,140px)/.9 var(--anton);text-transform:uppercase;margin:20px 0 34px}

/* preguntas */
.faq{max-width:860px;margin:0 auto}
details{border-bottom:1px solid #2a2a2a;padding:24px 0}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font:700 18px/1.4 var(--manrope)}
summary::after{content:"+";font:400 28px/1 var(--anton);color:var(--oro)}
details[open] summary::after{content:"–"}
details p{color:#bdb5a1;margin-top:12px}

/* pie */
footer{border-top:1px solid #1f1f1f;padding:60px 0 40px;color:#8e866f;font-size:14px}
footer .fila{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
footer nav a:hover{color:var(--oro)}
.creditos{margin-top:30px;font-size:11px;color:#5f594b}

/* aparecer */
.ap{opacity:0;transform:translateY(30px);transition:opacity 1s var(--suave),transform 1s var(--suave)}
.ap.visto{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.ap{opacity:1;transform:none}}
.wa-flota{position:fixed;right:22px;bottom:22px;z-index:60;width:60px;height:60px;border-radius:50%;background:var(--oro-grad);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -8px #F3D36B99}

/* Componentes de Forja Labs sobre el diseño de Fondos Dharma: catálogo con filtros, pedido por WhatsApp con datos, páginas interiores. */
.banda-previa{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--rojo);color:#fff;text-align:center;padding:8px 16px;font:800 13px/1.3 var(--manrope)}
.interior{padding:150px 0 90px;min-height:70vh}
.interior h1{font:400 clamp(48px,8vw,96px)/.92 var(--anton);text-transform:uppercase;margin:16px 0 28px}
.interior h2{font:400 32px/1.05 var(--anton);text-transform:uppercase;color:var(--oro);margin:34px 0 10px}
.interior p,.interior li{max-width:68ch;color:#d9d1bd}
.filtros{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.filtros button{min-height:44px;padding:8px 20px;border-radius:999px;border:1px solid rgba(243,211,107,.35);background:transparent;color:var(--crema);font:700 12px/1 var(--manrope);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.filtros button[aria-pressed="true"]{background:var(--oro-grad);border-color:transparent;color:#000}
.pieza[hidden]{display:none}
.pieza .d{display:flex;flex-direction:column;gap:8px}
.pieza .precio{font:800 18px/1 var(--manrope);color:var(--oro)}
.pieza .boton{margin-top:6px;justify-content:center;padding:13px 18px}
.pieza .marco img{width:100%;height:100%;object-fit:cover}
.pieza .marco{overflow:hidden}
form.pedido{display:grid;gap:18px;max-width:640px;margin-top:26px}
form.pedido label{display:grid;gap:6px;font-weight:700}
form.pedido input,form.pedido textarea{min-height:50px;padding:12px 16px;border-radius:14px;border:1px solid #3a3526;background:var(--grafito);color:var(--crema);font:inherit}
form.pedido input:focus,form.pedido textarea:focus{outline:2px solid var(--oro);outline-offset:2px}
form.pedido .ch{display:flex;gap:12px;align-items:flex-start;font-weight:400;color:#d9d1bd}.ch input{min-height:auto;margin-top:6px}
.err{color:#ff8a80;font-size:14px;min-height:18px}
.aviso{border-left:3px solid var(--oro);padding:4px 0 4px 18px;color:#cfc6b0;max-width:62ch}
.lista-piezas{display:grid;gap:8px;margin:0;padding:0;list-style:none;max-width:640px}
.lista-piezas li{padding:12px 16px;border:1px solid #2a2a2a;border-radius:14px;background:var(--grafito)}
.fila a{margin-right:0}
.a11y-salto{position:absolute;left:-9999px}.a11y-salto:focus{left:12px;top:12px;z-index:100;background:var(--oro);color:#000;padding:8px 14px;border-radius:8px}

.boton.desactivado{opacity:.6;cursor:default;pointer-events:none;user-select:none}
.menu a{white-space:nowrap}

/* tarjetas de categoría con ilustración de ambiente (sin piezas) */
.cat.c-cadenas .in::before{background-image:url("/img/cat-cadenas.jpg")}
.cat.c-esclavas .in::before{background-image:url("/img/cat-esclavas.jpg")}
.cat.c-dijes .in::before{background-image:url("/img/cat-dijes.jpg")}
.cat.c-anillos .in::before{background-image:url("/img/cat-anillos.jpg")}
.cat[class*="c-"] .in::before{opacity:.9}.cat[class*="c-"]:hover .in::before{opacity:1;transform:scale(1.06)}
.cat[class*="c-"] .in::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,#000c 100%);pointer-events:none}
.cat[class*="c-"] h3{z-index:2;text-shadow:0 2px 14px #000a}

/* panel de plata con ilustración de ambiente */
.metal.plata{background:#000}