/* ============================================================
   AURORA JOYERÍA — Sistema de diseño hyperpremium
   Marfil + vino como único acento fuerte + brillo dorado sutil.
   Cormorant Garamond (display) + Jost (cuerpo).
   ============================================================ */

:root{
  --marfil:      #F6F2EA;
  --marfil-deep: #EEE4D8;
  --surface:     #FFFFFF;
  --vino:        #9F4048;
  --vino-deep:   #7A2E35;
  --vino-soft:   rgba(159,64,72,.08);
  --oro:         #C9A96B;
  --oro-soft:    rgba(201,169,107,.35);
  --ink:         #2B1A1D;
  --ink-soft:    rgba(43,26,29,.58);
  --ink-faint:   rgba(43,26,29,.34);
  --line:        rgba(43,26,29,.10);
  --line-oro:    rgba(201,169,107,.45);
  --shadow-sm:   0 2px 10px rgba(43,26,29,.06);
  --shadow-lg:   0 30px 70px rgba(43,26,29,.16);
  --radius:      2px;
  --ease:        cubic-bezier(.22,1,.36,1);
  --dur:         .7s;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.aurora{
  margin:0;
  background:var(--marfil);
  color:var(--ink);
  font-family:'Jost',sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
/* overflow-x:clip, NUNCA overflow-x:hidden en body/html: "hidden" en un solo eje fuerza al
   otro eje (overflow-y) a computar como "auto" (regla del spec CSS Overflow), y eso vuelve a
   <body> el contenedor de scroll para efectos de position:sticky — la galería de producto y la
   joya del bloque destacado dejaban de pegarse y scrolleaban como cualquier elemento normal.
   "clip" no crea un contenedor de scroll, corta el overflow horizontal igual mientras se
   mantiene sticky funcionando contra el viewport real. Bug preexistente, no causado por GSAP
   ni por Lenis (se detectó recién al probar scroll real, nunca en las capturas). */
.aurora h1,.aurora h2,.aurora h3,.aurora h4{
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  letter-spacing:.2px;
  line-height:1.12;
  margin:0;
  color:var(--ink);
}
.aurora em{font-style:italic;color:var(--vino)}
.aurora a{color:inherit;text-decoration:none}
.aurora img{max-width:100%;display:block}
.aurora button{font-family:inherit;cursor:pointer}
.aurora :where(button){background:none;border:none}
/* :where() da especificidad 0: un <button class="a-btn a-btn--fill"> necesita que .a-btn--fill
   (una sola clase) siga ganando el fondo vino; con ".aurora button" normal (clase+etiqueta) el
   reset le ganaba a la clase y el botón "Agregar al carrito" quedaba transparente (lección 2026-09-08). */
.aurora .container{max-width:1240px;margin:0 auto;padding:0 6vw}
@media(max-width:640px){ .aurora .container{padding:0 22px} }

/* ---------- Eyebrow / kicker ---------- */
.a-eyebrow{
  font-family:'Jost',sans-serif;font-size:11px;font-weight:500;letter-spacing:3.5px;
  text-transform:uppercase;color:var(--vino);display:inline-flex;align-items:center;gap:10px;
}
.a-eyebrow::before{content:'';width:22px;height:1px;background:var(--oro)}

/* ---------- Botones ---------- */
.a-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Jost',sans-serif;font-size:12.5px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;
  padding:17px 38px;border:1px solid var(--vino);border-radius:0;color:var(--vino);
  position:relative;overflow:hidden;transition:color .45s var(--ease);
}
.a-btn::before{content:'';position:absolute;inset:0;background:var(--vino);transform:translateX(-101%);transition:transform .45s var(--ease);z-index:0}
.a-btn span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px}
.a-btn:hover{color:#fff}
.a-btn:hover::before{transform:translateX(0)}
.a-btn--fill{background:var(--vino);color:#fff}
.a-btn--fill::before{background:var(--vino-deep)}
.a-btn--ghost{border-color:var(--line);color:var(--ink)}
.a-btn--ghost::before{background:var(--ink)}
.a-btn--sm{padding:11px 16px;font-size:10.5px;letter-spacing:1.2px}

/* ---------- Nav ---------- */
.a-nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  padding:26px 6vw;transition:padding .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
.a-nav.is-scrolled{padding:14px 6vw;background:rgba(246,242,234,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}

/* ---------- Barra de promo (10% primera compra), fila propia arriba del nav ---------- */
.a-promo-bar{order:-1;flex:0 0 calc(100% + 12vw);width:calc(100% + 12vw);box-sizing:border-box;margin:-26px -6vw 18px;padding:9px 40px 9px 16px;background:var(--vino);color:var(--marfil);text-align:center;font-size:12px;letter-spacing:.2px;position:relative;overflow:hidden;transition:margin .4s var(--ease),padding .4s var(--ease)}
.a-promo-bar b{font-family:'Cormorant Garamond',serif;font-weight:600;letter-spacing:.5px}
.a-promo-bar::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.22) 50%,transparent 58%);background-size:220% 100%;animation:a-promo-shine 4s ease-in-out infinite}
@keyframes a-promo-shine{0%{background-position:220% 0}100%{background-position:-60% 0}}
.a-promo-bar-close{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--marfil);opacity:.65;cursor:pointer;font-size:17px;line-height:1;padding:6px;font-family:inherit}
.a-promo-bar-close:hover{opacity:1}
.a-nav.is-scrolled .a-promo-bar{margin:-14px -6vw 10px;padding-top:6px;padding-bottom:6px;font-size:11px}
@media(max-width:640px){ .a-promo-bar{font-size:11px;padding:8px 32px 8px 10px} .a-promo-bar span.a-promo-full{display:none} }

/* ---------- Popup de bienvenida (10% primera compra), solo Home, 1 vez cada 12h ---------- */
.a-promo-modal{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(43,26,29,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .35s var(--ease)}
.a-promo-modal.is-open{opacity:1}
.a-promo-modal[hidden]{display:none}
.a-promo-card{position:relative;background:var(--marfil);max-width:420px;width:100%;padding:44px 34px 34px;text-align:center;border-top:3px solid var(--vino);box-shadow:var(--shadow-lg);transform:translateY(18px) scale(.97);transition:transform .4s var(--ease)}
.a-promo-modal.is-open .a-promo-card{transform:translateY(0) scale(1)}
.a-promo-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:22px;line-height:1;color:var(--ink-faint);cursor:pointer;padding:6px}
.a-promo-close:hover{color:var(--vino)}
.a-promo-sparkle{width:44px;height:44px;margin:0 auto 14px;border-radius:50%;background:var(--vino);color:var(--marfil);display:flex;align-items:center;justify-content:center;font-size:20px;animation:a-promo-spin 6s linear infinite}
@keyframes a-promo-spin{to{transform:rotate(360deg)}}
.a-promo-card h3{font-family:'Cormorant Garamond',serif;font-size:1.7rem;margin:6px 0 12px;color:var(--ink)}
.a-promo-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.7;margin-bottom:22px}
.a-promo-card code{background:var(--rosa-palido,rgba(159,64,72,.1));color:var(--vino);padding:2px 8px;border-radius:3px;font-weight:600;letter-spacing:.5px}
.a-promo-actions{display:flex;flex-direction:column;gap:12px}
.a-promo-link{font-size:12.5px;color:var(--ink-faint);text-decoration:underline;text-underline-offset:3px}
.a-nav-logo{display:flex;align-items:center;gap:10px}
.a-nav-logo img{height:50px;width:auto;transition:height .4s var(--ease)}
.a-nav.is-scrolled .a-nav-logo img{height:40px}
.a-nav-links{display:flex;align-items:center;gap:38px;list-style:none;margin:0;padding:0}
.a-nav-links a{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-soft);position:relative;padding-bottom:3px}
.a-nav-links a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--vino);transition:right .35s var(--ease)}
.a-nav-links a:hover,.a-nav-links a.active{color:var(--ink)}
.a-nav-links a:hover::after,.a-nav-links a.active::after{right:0}
.a-nav-actions{display:flex;align-items:center;gap:18px}
.a-icon-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--ink);position:relative}
.a-cart-badge{position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;padding:0 3px;border-radius:50%;background:var(--vino);color:#fff;font-size:9px;font-weight:600;display:none;align-items:center;justify-content:center}
.a-hamburger{display:none;flex-direction:column;gap:5px;width:26px}
.a-hamburger span{display:block;height:1px;background:var(--ink)}
@media(max-width:900px){
  .a-nav-links{display:none}
  .a-hamburger{display:flex}
}
.a-mobile-menu{position:fixed;inset:0;z-index:300;background:var(--marfil);display:none;flex-direction:column;padding:100px 8vw 40px;gap:28px}
.a-mobile-menu.open{display:flex}
.a-mobile-menu a{font-family:'Cormorant Garamond',serif;font-size:30px;color:var(--ink)}
.a-mobile-close{position:absolute;top:30px;right:8vw;width:34px;height:34px}

/* ---------- Secciones / viewport ---------- */
.a-section{position:relative;padding:88px 0}
.a-section--tight{padding:60px 0}
.a-full{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
@media(max-width:640px){ .a-section{padding:56px 0} .a-section--tight{padding:40px 0} }

/* ---------- Hero: joya protagonista gigante ---------- */
.a-hero{
  position:relative;min-height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  padding:120px 6vw 60px;gap:40px;overflow:hidden;
}
.a-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 72% 45%, var(--oro-soft), transparent 70%);
  opacity:.5;
}
.a-hero-text{position:relative;z-index:2}
.a-hero-text .a-eyebrow{margin-bottom:22px}
.a-hero-text h1{font-size:clamp(2.6rem,4.6vw,4.6rem);margin-bottom:26px}
.a-hero-text p{font-size:15.5px;line-height:1.8;color:var(--ink-soft);max-width:38ch;margin-bottom:38px;font-weight:300}
.a-hero-visual{position:relative;display:flex;align-items:center;justify-content:center;height:min(72vh,640px)}
.a-hero-jewel{position:relative;width:min(80%,460px);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:var(--shadow-lg);cursor:grab;background:var(--surface)}
.a-hero-jewel:active{cursor:grabbing}
.a-hero-jewel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s linear}
.a-hero-jewel img.is-active{opacity:1}
.a-hero-jewel-ring{position:absolute;inset:-18px;border:1px solid var(--line-oro);border-radius:50%;pointer-events:none;animation:a-spin 40s linear infinite}
@keyframes a-spin{to{transform:rotate(360deg)}}
.a-hero-hint{position:absolute;bottom:-38px;left:50%;transform:translateX(-50%);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;display:flex;align-items:center;gap:8px}
.a-hero-mock-badge{position:absolute;top:14px;left:14px;background:var(--ink);color:var(--marfil);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;padding:4px 9px;border-radius:2px;z-index:3;opacity:.85}
.a-hero-scroll{position:absolute;bottom:36px;left:6vw;display:flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-faint)}
.a-hero-scroll-line{width:1px;height:34px;background:var(--line-oro);position:relative;overflow:hidden}
.a-hero-scroll-line::after{content:'';position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--vino);animation:a-scrollline 2.2s ease-in-out infinite}
@keyframes a-scrollline{0%{top:-100%}50%{top:0}100%{top:100%}}
@media(max-width:900px){
  .a-hero{grid-template-columns:1fr;padding:110px 6vw 40px;text-align:center;gap:8px}
  .a-hero-text{order:2}
  .a-hero-text p{margin-left:auto;margin-right:auto}
  .a-hero-visual{order:1;height:46vh;margin-bottom:12px}
  .a-hero-jewel{width:68%}
  .a-hero-scroll{display:none}
  .a-hero-hint{display:none}
}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="stagger"] > *{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal="stagger"].is-in > *{opacity:1;transform:none}
[data-reveal="stagger"].is-in > *:nth-child(1){transition-delay:.05s}
[data-reveal="stagger"].is-in > *:nth-child(2){transition-delay:.15s}
[data-reveal="stagger"].is-in > *:nth-child(3){transition-delay:.25s}
[data-reveal="stagger"].is-in > *:nth-child(4){transition-delay:.35s}
[data-reveal="stagger"].is-in > *:nth-child(5){transition-delay:.45s}
[data-reveal="stagger"].is-in > *:nth-child(6){transition-delay:.55s}

/* ---------- Marquee de colecciones ---------- */
.a-marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.a-marquee-track{display:flex;gap:60px;white-space:nowrap;animation:a-marquee 32s linear infinite;width:max-content}
.a-marquee-track span{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:26px;color:var(--ink-faint);display:flex;align-items:center;gap:60px}
.a-marquee-track span em{font-style:italic;color:var(--vino)}
@keyframes a-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Colecciones (cards grandes con hover a foto puesta) ---------- */
.a-collections{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line);max-width:1240px;margin:0 auto}
.a-collection{display:block;position:relative;aspect-ratio:16/10;max-height:70vh;overflow:hidden;background:var(--surface);cursor:pointer}
/* 5 columnas en vez de 3: las 5 colecciones caben en una sola fila en desktop en vez de
   partirse en 2 filas (bloque de 1580px, 176% del viewport). Lección 2026-09-08. */
.a-collection-img{position:absolute;inset:0}
.a-collection-img img{width:100%;height:100%;object-fit:cover;transition:opacity .6s var(--ease),transform .9s var(--ease)}
.a-collection-img img.a-img-worn{position:absolute;inset:0;opacity:0}
.a-collection:hover .a-collection-img img.a-img-product{opacity:0}
.a-collection:hover .a-collection-img img.a-img-worn{opacity:1}
.a-collection:hover .a-collection-img img{transform:scale(1.06)}
.a-collection-label{position:absolute;left:24px;bottom:24px;z-index:2;color:#fff}
.a-collection-label .a-eyebrow{color:var(--oro)}
.a-collection-label .a-eyebrow::before{background:var(--oro)}
.a-collection-label h3{font-size:1.7rem;color:#fff;margin-top:6px}
.a-collection::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(43,26,29,.62));pointer-events:none}
@media(max-width:900px){ .a-collections{grid-template-columns:1fr 1fr} .a-collection{aspect-ratio:4/5;max-height:none} }
@media(max-width:640px){
  /* En vez de apilar 5 cards enteras (pasaba de 3 pantallas de alto), scroll horizontal:
     se ve toda la sección de un vistazo y se navega deslizando, como cualquier fila de
     categorías de e-commerce. Lección 2026-09-08, ver diseno-premium. */
  .a-collections{display:flex;overflow-x:auto;gap:10px;background:none;padding:0 6vw 6px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .a-collections::-webkit-scrollbar{display:none}
  .a-collection{flex:0 0 68vw;aspect-ratio:3/4;scroll-snap-align:start}
}

/* ---------- Producto destacado con scroll-pin ---------- */
.a-feature{position:relative}
.a-feature-pin{min-height:100svh;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;padding:0 6vw}
.a-feature-img{position:relative;aspect-ratio:4/5;max-height:74vh;margin:0 auto;border-radius:2px;overflow:hidden;box-shadow:var(--shadow-lg)}
/* Sin max-width en .a-feature-pin, en un monitor 1920/2560px de ancho la columna (1fr) crecía
   sin tope y la imagen con aspect-ratio 4/5 pasaba de 1000-1370px de alto: más que la pantalla
   entera. Mismo tope que .container (1240px) + max-height de seguridad. Lección 2026-09-08:
   probar SIEMPRE también en 1920×1080 (monitor típico), no solo 1440×900. */
.a-feature-img img{width:100%;height:100%;object-fit:cover}
/* Collage del set (collar + aretes): un "set" son 2 piezas, una sola foto de collar no lo
   representa. Inset con el segundo producto, en vez de reutilizar la misma imagen en todos
   los lugares. Lección 2026-09-09. */
.a-feature-img-inset{position:absolute;right:16px;bottom:16px;width:34%;aspect-ratio:1/1;border-radius:2px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35);border:3px solid var(--marfil)}
.a-feature-img-inset img{width:100%;height:100%;object-fit:cover}
.a-feature-track{position:relative;height:130vh;margin-top:34px}
.a-feature-track-inner{position:sticky;top:calc(110px + 30vh);height:1px}
.a-feature-spec{position:absolute;top:0;left:0;width:100%;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.a-feature-spec.is-active{opacity:1;transform:translateY(0);pointer-events:auto}
.a-feature-spec-label{display:block;font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--vino);margin-bottom:10px}
.a-feature-spec-value{display:block;font-family:'Cormorant Garamond',serif;font-size:clamp(1.4rem,2.4vw,2rem);color:var(--ink)}
/* .a-bg-deep es marfil oscurecido (claro), NO fondo oscuro — el texto va en tonos ink/vino,
   no marfil/oro, si no queda casi invisible (bajo contraste). Lección: revisar SIEMPRE contra
   qué fondo real cae un color antes de asumir "sección oscura" por el nombre de la clase. */
.a-feature-dots{display:flex;gap:8px;margin-top:26px}
.a-feature-dots span{width:6px;height:6px;border-radius:50%;background:rgba(43,26,29,.2);transition:background .3s,transform .3s}
.a-feature-dots span.is-active{background:var(--vino);transform:scale(1.4)}
@media(max-width:900px){
  .a-feature-pin{grid-template-columns:1fr;padding:0 6vw;gap:28px;min-height:auto}
  /* En móvil no hay scroll-pin: el track de 100vh dejaba un hueco vacío de ~1000px entre el texto y el botón.
     Las 4 specs se muestran estáticas en una grilla 2x2. (loop 2026-09-16) */
  .a-feature-img{max-height:40svh;aspect-ratio:auto;height:40svh}
  .a-feature-track{height:auto;margin-top:26px}
  .a-feature-track-inner{position:static;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:20px 16px}
  .a-feature-spec{position:static;opacity:1;transform:none;pointer-events:auto}
  .a-feature-spec-value{font-size:1.15rem}
  .a-feature-dots{display:none}
}

/* ---------- Cards de producto: tilt + glare + zoom + foto puesta al hover ---------- */
.a-pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 26px}
.a-pgrid > *{min-width:0}
/* min-width:0 en cada celda: por defecto un grid item no encoge más allá del contenido mínimo
   (un botón con texto que no rompe línea), lo que forzaba columnas de ~241px en vez de 1fr real
   y desbordaba el carrito horizontal en móvil (lección 2026-09-08). */
@media(max-width:1100px){ .a-pgrid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:760px){ .a-pgrid{grid-template-columns:repeat(2,1fr);gap:22px 14px} }
@media(max-width:640px){ .a-pcard-actions .a-btn--ghost{display:none} .a-pcard-actions .a-btn--fill{width:100%} }
.a-pcard{position:relative;perspective:1200px}
.a-pcard-inner{position:relative;transform-style:preserve-3d;transition:transform .25s var(--ease)}
.a-pcard-img{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--surface);margin-bottom:16px}
/* .a-pcard-img es un <a>: sin display:block un enlace inline no respeta aspect-ratio/width y
   colapsa a 0x0 porque su único contenido (las imágenes) está position:absolute (lección 2026-09-08). */
.a-pcard-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.a-pcard-img img.a-img-worn{opacity:0}
.a-pcard:hover .a-pcard-img img.a-img-product{opacity:0}
.a-pcard:hover .a-pcard-img img.a-img-worn{opacity:1}
.a-pcard:hover .a-pcard-img img{transform:scale(1.05)}
.a-pcard-glare{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 60%);opacity:0;transition:opacity .3s;pointer-events:none;mix-blend-mode:screen}
.a-pcard:hover .a-pcard-glare{opacity:1}
.a-pcard-badge{position:absolute;top:12px;left:12px;background:var(--ink);color:var(--marfil);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;padding:5px 10px;z-index:2}
.a-pcard-wish{position:absolute;top:10px;right:10px;width:32px;height:32px;background:rgba(246,242,234,.9);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);z-index:2}
.a-pcard-cat{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
.a-pcard-name{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:500;margin-bottom:8px;display:block}
.a-pcard-price{font-size:14px;color:var(--vino);display:flex;gap:10px;align-items:baseline}
.a-pcard-price .orig{color:var(--ink-faint);text-decoration:line-through;font-size:12px}

/* ---------- Lookbook (mosaico asimétrico) ---------- */
.a-lookbook{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:74px;gap:12px}
.a-look-item{position:relative;overflow:hidden;border-radius:2px}
.a-look-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.a-look-item:hover img{transform:scale(1.06)}
.a-look-1{grid-column:span 3;grid-row:span 4}
.a-look-2{grid-column:span 3;grid-row:span 3}
.a-look-3{grid-column:span 2;grid-row:span 3}
.a-look-4{grid-column:span 4;grid-row:span 3}
@media(max-width:760px){
  .a-lookbook{grid-template-columns:repeat(2,1fr);grid-auto-rows:110px}
  .a-look-1,.a-look-2,.a-look-3,.a-look-4{grid-column:span 2;grid-row:span 2}
}

/* ---------- Cita / testimonio grande ---------- */
.a-quote{max-width:760px;margin:0 auto;text-align:center}
.a-quote p{font-family:'Cormorant Garamond',serif;font-size:clamp(1.5rem,2.6vw,2.2rem);font-style:italic;line-height:1.5;color:var(--ink)}
.a-quote cite{display:block;margin-top:24px;font-style:normal;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- Video/proceso loop ---------- */
/* Sin video propio todavía: efecto Ken Burns (zoom+pan lento) para no quedar 100% estático.
   Reemplazar .a-process img por <video autoplay muted loop playsinline> en cuanto haya un
   loop real grabado por Lucero. */
.a-process{position:relative;aspect-ratio:16/8;overflow:hidden;background:var(--ink)}
.a-process img,.a-process video{width:110%;height:110%;object-fit:cover;opacity:.8;animation:a-kenburns 18s ease-in-out infinite alternate}
@keyframes a-kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.12) translate(-2%,-1%)}}
.a-process-caption{position:absolute;left:6vw;bottom:36px;color:var(--marfil);max-width:38ch}

/* ---------- Franja de confianza (4 beneficios con ícono) ---------- */
.a-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.a-benefit{background:var(--marfil);padding:30px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.a-benefit svg{width:26px;height:26px;stroke:var(--vino)}
.a-benefit b{font-family:'Cormorant Garamond',serif;font-size:1rem;font-weight:600}
.a-benefit span{font-size:12px;color:var(--ink-soft);line-height:1.5}
@media(max-width:900px){ .a-benefits{grid-template-columns:repeat(2,1fr)} }

/* ---------- WhatsApp flotante ---------- */
/* Icono real de WhatsApp (círculo verde reconocible), no una foto de "asesora" ficticia
   — lección 2026-09-09: un avatar de stock genérico confunde más de lo que ayuda. */
.a-wa-float{position:fixed;bottom:26px;right:26px;z-index:150;display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--marfil);padding:10px 20px 10px 10px;border-radius:50px;box-shadow:var(--shadow-lg);transition:transform .3s var(--ease)}
.a-wa-float:hover{transform:translateY(-3px)}
/* Una regla genérica de enlaces pintaba el texto del flotante en --ink sobre fondo --ink (invisible en escritorio). loop 2026-09-16 */
.a-wa-float,.a-wa-float .a-wa-float-text,.a-wa-float .a-wa-float-text b{color:var(--marfil)}
.a-wa-icon{width:42px;height:42px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 0 0 3px rgba(37,211,102,.22)}
.a-wa-icon svg{width:22px;height:22px;fill:#fff}
.a-wa-float-text{font-size:12px;line-height:1.3}
.a-wa-float-text b{display:block;font-family:'Cormorant Garamond',serif;font-size:14px;font-weight:600}
@media(max-width:640px){ .a-wa-float-text{display:none} .a-wa-float{padding:6px} }

/* ---------- Footer ---------- */
.a-footer{background:var(--ink);color:rgba(246,242,234,.65);padding:80px 0 30px}
.a-footer h4{color:var(--marfil);font-size:12px;letter-spacing:1.6px;text-transform:uppercase;font-family:'Jost',sans-serif;font-weight:500;margin-bottom:20px}
.a-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(246,242,234,.12)}
.a-footer-grid a{display:block;font-size:13.5px;padding:6px 0;color:rgba(246,242,234,.65)}
.a-footer-grid a:hover{color:var(--oro)}
.a-footer-logo img{height:54px;margin-bottom:18px}
/* Antes: filter:brightness(0) invert(1) sobre el logo vino, que lo aplanaba a una mancha
   blanca sin matices. Ahora se usa el archivo marfil real de la marca (logo-iv-marfil.png),
   nítido sobre el footer oscuro. Lección 2026-09-09. */
.a-footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:11.5px;color:rgba(246,242,234,.4);flex-wrap:wrap;gap:12px}
.a-footer-made{color:rgba(246,242,234,.4)}
.a-footer-made a{color:rgba(246,242,234,.65);text-decoration:none;border-bottom:1px solid rgba(246,242,234,.25)}
.a-footer-made a:hover{color:var(--oro);border-color:var(--oro)}
@media(max-width:760px){ .a-footer-grid{grid-template-columns:1fr 1fr;gap:32px} }

/* ---------- Accordion (contenido largo) ---------- */
.a-accordion-item{border-bottom:1px solid var(--line)}
.a-accordion-head{width:100%;display:flex;justify-content:space-between;align-items:center;padding:22px 0;text-align:left;font-family:'Cormorant Garamond',serif;font-size:19px}
.a-accordion-icon{width:16px;height:16px;position:relative;flex-shrink:0}
.a-accordion-icon::before,.a-accordion-icon::after{content:'';position:absolute;background:var(--vino);transition:transform .3s}
.a-accordion-icon::before{left:0;top:7px;width:16px;height:1px}
.a-accordion-icon::after{left:7px;top:0;width:1px;height:16px}
.a-accordion-item.open .a-accordion-icon::after{transform:rotate(90deg);opacity:0}
.a-accordion-body{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.a-accordion-body p{padding:0 0 22px;font-size:14px;line-height:1.8;color:var(--ink-soft)}

/* ---------- Formularios ---------- */
.a-field{margin-bottom:18px}
.a-field label{display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.a-field input,.a-field select,.a-field textarea{
  width:100%;border:none;border-bottom:1px solid var(--line);background:transparent;padding:10px 2px;font-size:14.5px;
  font-family:'Jost',sans-serif;color:var(--ink);outline:none;transition:border-color .3s;
}
.a-field input:focus,.a-field select:focus,.a-field textarea:focus{border-color:var(--vino)}

/* ---------- Fondos alternos ---------- */
.a-bg-deep{background:var(--marfil-deep)}
.a-bg-ink{background:var(--ink);color:var(--marfil)}
.a-bg-ink h1,.a-bg-ink h2,.a-bg-ink h3{color:var(--marfil)}

/* ---------- TikTok (home, solo si hay videos) ---------- */
.a-tiktok-row{display:flex;gap:16px;overflow-x:auto;padding:24px 6vw 8px;scroll-snap-type:x mandatory;scrollbar-width:none;max-width:1240px;margin:0 auto}
.a-tiktok-row::-webkit-scrollbar{display:none}
.a-tiktok-item{flex:0 0 325px;height:578px;scroll-snap-align:start;border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-lg)}
.a-tiktok-item iframe{width:100%;height:100%;border:0}
@media(max-width:640px){ .a-tiktok-item{flex:0 0 78vw;height:calc(78vw*1.78)} }
