/* ============================================================
   MIA Jewelry — esqueleto v1 (base: scroll-cinematic-pro v2)
   Tema PROVISIONAL data-theme="perla" ("Luz de Cabo", EL-PLAN §5.3-A).
   TODO color vive en tokens: Ivan dará la dirección de arte final y
   se cambia SOLO este bloque (probado en Aurum noir→salvia).
   Tipografía: Fraunces light (display, caps con tracking) + Outfit.
   ============================================================ */

:root,
[data-theme="perla"] {
  --bg: #fbf8f3;            /* hueso */
  --surface: #f3ede3;       /* marfil */
  --surface-2: #e8e0d0;     /* arena */
  --ink: #1e1a16;           /* tinta */
  --ink-dim: rgba(30, 26, 22, 0.66);
  --accent: #b39a6b;        /* dorado apagado */
  /* El aqua de Imelda (referencia: banner Dune Jewelry / packaging MIA).
     Regla de uso: el claro es FONDO o decoración grande, jamás texto sobre claro;
     el profundo (misma familia, AA ≥4.5 sobre hueso/marfil/aqua) es para texto
     pequeño y acentos. --accent-2 (ex turquesa) ahora apunta aquí: el aqua
     recorre hovers, kickers y detalles sin tocar cada regla. */
  --mia-aqua: #c8e8ec;      /* aqua claro — fondos de sección */
  --mia-aqua-deep: #17696e; /* aqua profundo — texto pequeño / acentos */
  --accent-2: var(--mia-aqua-deep);
  --accent-soft: rgba(179, 154, 107, 0.16);
  --line: rgba(30, 26, 22, 0.12);
  /* Copy sobre el canvas (tema claro): texto claro + sombra para legibilidad */
  --ink-on-media: #fdfbf5;
  --media-text-shadow: 0 1px 24px rgba(10, 8, 6, 0.55), 0 1px 3px rgba(10, 8, 6, 0.5);
  --vignette-opacity: 0.55;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Outfit", system-ui, sans-serif;
}

/* Acto "noche" (propuesta C "Marea", EL-PLAN §5.3-C): tokens noir POR SECCIÓN.
   Provisional — se activa poniendo data-act="noche" en una <section> si Ivan
   elige la dirección híbrida. Mismo sistema de variables, cero estructura nueva. */
[data-act="noche"] {
  --bg: #0b0a09;
  --surface: #161310;
  --surface-2: #1f1a14;
  --ink: #f5f1e8;
  --ink-dim: rgba(245, 241, 232, 0.64);
  --accent: #c9a96a;
  --line: rgba(245, 241, 232, 0.1);
  background: var(--bg);
  color: var(--ink);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Selección de texto en aqua: el color del estuche también al subrayar */
::selection { background: var(--mia-aqua, #c8e8ec); color: var(--ink, #1e1a16); }

/* Focus visible en aqua profundo (links, acordeones y scrollers enfocables);
   sobre las bandas oscuras (CTA con video) el anillo pasa al aqua claro. */
a:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible {
  outline: 2px solid var(--mia-aqua-deep);
  outline-offset: 4px;
}
.cta a:focus-visible { outline-color: var(--mia-aqua); }

html { scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  overflow-x: hidden;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300; /* display LIGHT (patrón Gorjana/Fraunces, EL-PLAN §5.1) */
  line-height: 1.08;
}

a { color: inherit; }

/* ---------- Nav ---------- */
/* Sin mix-blend-mode difference (era para tema noir): tinta sobre claro +
   scrim superior suave para legibilidad sobre el hero. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 32px; /* vertical compensado: el logo creció a 56px (presencia de marca) */
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  background: linear-gradient(180deg, rgba(251, 248, 243, 0.92) 0%, rgba(251, 248, 243, 0.7) 60%, transparent 100%);
}
.nav a { text-decoration: none; }
.nav a:hover, .nav a:focus-visible { color: var(--accent-2); outline-offset: 4px; }
.nav .nav-links { display: flex; gap: 26px; flex-wrap: wrap; }
.nav .brand { display: inline-flex; align-items: center; }
.nav .brand img { height: 56px; width: auto; display: block; }

/* ---------- Sección scrub (sticky) ---------- */
.cinematic {
  position: relative;
  height: 500vh; /* distancia de scroll = duración de reproducción (420–600vh) */
}
.cinematic .sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--surface-2); /* letterbox arena mientras llegan frames */
}
.cinematic canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--vignette-opacity, 1); /* temas claros la bajan via token */
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(0, 0, 0, 0.6) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 25%, transparent 70%, rgba(0, 0, 0, 0.65) 100%);
}

/* Copy superpuesto con ventanas [data-in, data-out] */
.reveal-line {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 90vw;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 6vw, 5.2rem);
  letter-spacing: 0.02em;
  line-height: 1.08;
  text-align: center;
  opacity: 0;
  will-change: opacity, transform;
  z-index: 10;
}
/* El copy va SOBRE el canvas: en temas claros debe ir claro y con sombra. */
.cinematic .reveal-line { color: var(--ink-on-media, var(--ink)); }
[data-theme] .cinematic .reveal-line { text-shadow: var(--media-text-shadow, none); }
.reveal-line em { font-style: italic; color: inherit; }
.reveal-line .beat-chosen {
  font-style: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mia-aqua); /* el beat climático brilla en el aqua de la marca (sobre el mar oscuro) */
}
/* La PRIMERA línea del hero nace visible: es el candidato LCP de la página.
   Su ventana empieza en negativo (data-in="-0.30") — regla LCP del template. */
.overlay-stack .reveal-line:first-child { opacity: 1; }

/* Solo lectores de pantalla / crawlers (contexto de marca en el H1) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Indicador de carga + progreso del scrub */
.scrub-loading {
  position: absolute;
  bottom: 70px; left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--ink-on-media);
  text-shadow: var(--media-text-shadow, none);
}
.scrub-loading.done { display: none; }
.scrub-progress {
  position: absolute;
  left: 32px; right: 32px; bottom: 44px;
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
  z-index: 12;
}
.scrub-progress-fill { height: 100%; width: 0; background: var(--accent); }

.scroll-hint {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-on-media);
  text-shadow: var(--media-text-shadow, none);
  animation: bob 1.8s ease-in-out infinite;
  transition: opacity 0.4s;
}
@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ---------- Secciones de contenido ---------- */
/* Las <img> de contenido llevan width/height explícitos (reserva de espacio, CLS 0),
   pero la altura RENDERIZADA la decide el CSS (aspect-ratio o proporción natural):
   sin esto, el hint presentacional height="…px" le gana a aspect-ratio y estira. */
main img { height: auto; }

.section { padding: 110px 32px; max-width: 1200px; margin: 0 auto; }
.section .kicker {
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--mia-aqua-deep); /* kicker en aqua profundo (AA sobre hueso/marfil/aqua) */
  margin-bottom: 16px;
}
.section h2 {
  font-size: clamp(1.9rem, 4.5vw, 3.3rem);
  margin-bottom: 24px;
  max-width: 22ch;
  text-transform: uppercase;
  letter-spacing: 0.06em; /* caps con tracking (identidad Gorjana adaptada) */
}
.section h2 em { text-transform: none; letter-spacing: 0.01em; } /* la palabra emotiva, en itálica (patrón Alya) */
.section p.lead { font-size: 1.15rem; color: var(--ink-dim); max-width: 58ch; }

/* ---------- Franja USP de confianza (lección Monica Vinader) ---------- */
.usp-strip {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  /* Banda aqua (patrón banner Dune): el color del estuche MIA con filete profundo */
  border-top: 1px solid var(--mia-aqua-deep);
  border-bottom: 1px solid var(--mia-aqua-deep);
  background: var(--mia-aqua);
}
.usp-strip li {
  padding: 26px 20px;
  text-align: center;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink);
}
.usp-strip li + li { border-left: 1px solid rgba(23, 105, 110, 0.28); }
.usp-strip strong { display: block; color: var(--accent-2); font-weight: 500; margin-bottom: 4px; }

/* ---------- Grid de colecciones ---------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 56px;
}
.tile { display: flex; flex-direction: column; }
.tile figure { margin: 0; }
.tile img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: var(--surface);
  border-radius: 4px;
}
.tile h3 {
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 18px 0 6px;
}
.tile .tile-note { color: var(--ink-dim); font-size: 0.95rem; max-width: 34ch; }
.tile .cta-shopify { margin-top: 14px; align-self: flex-start; }

/* ---------- CTA Shopify (puente a la boutique en línea — NUNCA carrito propio) ----------
   Contrato: TODO link de compra lleva .cta-shopify + data-shopify-url="" (los links
   reales llegan después). El estilo pill NO aplica a las gift-cards (tienen su estilo). */
.cta-shopify:not(.gift-card) {
  display: inline-block;
  padding: 12px 26px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.cta-shopify:not(.gift-card):hover, .cta-shopify:not(.gift-card):focus-visible {
  background: var(--mia-aqua-deep); /* hover en el aqua profundo de la marca */
  border-color: var(--mia-aqua-deep);
  color: #fdfaf4;
  outline-offset: 4px;
}

/* Botón grande genérico (CTA principal) */
.btn {
  display: inline-block;
  margin-top: 32px;
  padding: 16px 44px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
.btn:hover, .btn:focus-visible { background: var(--mia-aqua-deep); border-color: var(--mia-aqua-deep); color: #fdfaf4; outline-offset: 4px; }

/* ---------- Experiencia AR ---------- */
/* Banda aqua full-bleed (patrón banner Dune): la sección conserva su contenedor
   de 1200px; box-shadow 100vmax + clip-path pintan el fondo de borde a borde. */
#experience {
  background: var(--mia-aqua);
  box-shadow: 0 0 0 100vmax var(--mia-aqua);
  clip-path: inset(0 -100vmax);
}
.ar-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 48px;
}
.ar-grid img { width: 100%; border-radius: 4px; display: block; }
.affirmations { list-style: none; margin-top: 28px; }
.affirmations li {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  font-style: italic;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.affirmations li::before { content: "— "; color: var(--accent); font-style: normal; }

/* Columna de medios de la experiencia AR (arte que cobra vida + packaging) */
.ar-media { display: grid; gap: 26px; align-content: start; }

/* ---------- Loops ambientales (.ambient-loop — patrón C10 generalizado) ----------
   Video real como media secundaria: muted + preload=none + poster; effects.js
   los reproduce solo en vista y los deja en su poster con reduced-motion/saveData. */
.designer-media { display: grid; gap: 26px; align-content: start; }
.designer-loop video, .ar-demo video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  background: var(--surface-2);
}
.media-caption {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 10px;
}

/* ---------- La diseñadora (hook para paint-reveal mouse-6 futuro) ---------- */
.designer-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: center;
  margin-top: 48px;
}
.designer-grid img { width: 100%; border-radius: 4px; display: block; }
.designer-grid blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  margin: 24px 0 0;
  padding-left: 20px;
  border-left: 2px solid var(--accent);
  color: var(--ink-dim);
}

/* ---------- Del boceto a la joya (copy deck §8) ----------
   Estática por ahora: el efecto svg-5 ("el boceto se dibuja al scroll") llegará
   después y se engancha en [data-sketch-pair] sin tocar la estructura. */
.sketch-pairs { display: grid; gap: 72px; margin-top: 56px; }
.sketch-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.sketch-pair figure { margin: 0; }
.sketch-pair img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  background: var(--surface);
}
.sketch-pair .pair-caption {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 10px;
}
.sketch-pair .pair-info { grid-column: 1 / -1; max-width: 58ch; }
.sketch-pair .pair-info h3 {
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.sketch-pair .pair-info p { color: var(--ink-dim); }
.sketch-pair .pair-info .cta-shopify { margin-top: 16px; }

/* ---------- Regalos (hub de tarjetas, lección Kendra §5.1) ---------- */
.gift-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 48px;
}
.gift-card {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 34px 28px;
  transition: border-color 0.25s, transform 0.25s;
}
.gift-card:hover, .gift-card:focus-visible {
  border-color: var(--mia-aqua-deep);
  transform: translateY(-3px);
  outline-offset: 4px;
}
.gift-card img {
  width: 100%;
  aspect-ratio: 1 / 1; /* cuadrado: la mayoría de las fotos son 1024x1024 (cero recorte) */
  object-fit: cover;
  display: block;
  border-radius: 4px;
  margin-bottom: 18px;
  background: var(--bg);
}
.gift-card .gift-kicker {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
  margin-bottom: 10px;
}
.gift-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.gift-card p { color: var(--ink-dim); font-size: 0.95rem; }
.gift-card .gift-go { display: inline-block; margin-top: 16px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }

/* ---------- Figuras K9 aprobadas por Ivan (ronda 2, tarea 5) ---------- */
/* K9E — figura protagonista de La Promesa (la perla en su piel = confianza) */
.promise-figure { margin: 48px 0 0; }
.promise-figure img { width: 100%; height: auto; display: block; border-radius: 4px; background: var(--surface); }
/* K9H — banner full-bleed de entrada de Visítanos (limpio, sin texto encima) */
.visit-banner { margin: 56px calc(50% - 50vw) 0; }
.visit-banner img { width: 100%; height: auto; display: block; background: var(--surface); }

/* ---------- La promesa (acordeón <details>: funciona SIN JS) ---------- */
.promise-acc { margin-top: 48px; border-top: 1px solid var(--line); }
.promise-acc details { border-bottom: 1px solid var(--line); }
.promise-acc summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px 4px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
}
.promise-acc summary::-webkit-details-marker { display: none; }
.promise-acc summary::after { content: "+"; font-family: var(--font-body); color: var(--accent); font-size: 1.4rem; }
.promise-acc details[open] summary::after { content: "–"; }
.promise-acc summary:hover, .promise-acc summary:focus-visible { color: var(--accent-2); outline-offset: 4px; }
.promise-acc .acc-body { padding: 0 4px 28px; color: var(--ink-dim); max-width: 65ch; }
.promise-acc .acc-body ul { margin: 12px 0 0 18px; }

/* ---------- Puntos de venta ---------- */
.pos-list {
  list-style: none;
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.pos-list li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 26px 24px;
}
.pos-list strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; margin-bottom: 6px; }
.pos-list span { color: var(--ink-dim); font-size: 0.95rem; }

/* CTA final */
.cta { text-align: center; }

/* Footer — cierre OSCURO del sitio: el monograma MIA (los rombos) en blanco
   sobre noche cálida. Los tokens se redefinen en el scope del footer, así el
   efecto cortina (background: var(--bg)) hereda el telón oscuro sin tocarse. */
.footer-monogram {
  /* OJO: sin flex-basis:100% — en un flex item la basis pisa al width y el
     monograma se estiraba al ancho completo (bug cazado en la ronda 2).
     Solo en su fila: el siguiente item (tagline, width:100%) siempre envuelve. */
  display: block;
  width: min(150px, 38vw); /* ~120-160px: presencia generosa sin gritar */
  height: auto;
  margin: 0 auto 26px;
}
/* Entrada del monograma (fade + leve ascenso) — solo con JS vivo; effects.js
   pone .in al llegar al cierre. reduced-motion/saveData: visible y estático. */
html.js .footer-monogram {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 1.1s ease, transform 1.1s ease;
}
html.js .footer-monogram.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .footer-monogram { opacity: 1; transform: none; transition: none; }
}
.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink);
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
}
.footer {
  --bg: #12100d;
  --ink: #f5f1e8;
  --ink-dim: rgba(245, 241, 232, 0.62);
  --line: rgba(245, 241, 232, 0.14);
  background: var(--bg);
  padding: 72px 32px 56px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  color: var(--ink-dim);
  font-size: 0.9rem;
}
.footer a:focus-visible { outline-color: var(--mia-aqua); }

/* Reveals genéricos */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Accesibilidad / degradación ---------- */
/* Sin JavaScript: todo visible y estático (mismas reglas que reduced-motion) */
.no-js .cinematic { height: 100vh; }
.no-js .reveal-line { position: static; transform: none; opacity: 1 !important; margin: 8px 0; }
.no-js .overlay-stack {
  position: absolute; inset: 0; z-index: 10;
  display: grid; place-content: center; text-align: center; padding: 24px;
}
.no-js .reveal { opacity: 1; transform: none; transition: none; }
.no-js .scroll-hint, .no-js .scrub-progress, .no-js .scrub-loading { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cinematic { height: 100vh; } /* sin distancia de scrub: un solo viewport */
  .reveal-line { position: static; transform: none; opacity: 1 !important; margin: 8px 0; }
  .cinematic .overlay-stack {
    position: absolute; inset: 0; z-index: 10;
    display: grid; place-content: center; text-align: center; padding: 24px;
  }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-hint, .scrub-progress { display: none; }
}
/* saveData / 2g-3g: modo poster, todo visible sin scrub */
.save-data .cinematic { height: 100vh; }
.save-data .reveal-line { position: static; transform: none; opacity: 1 !important; margin: 8px 0; }
.save-data .overlay-stack {
  position: absolute; inset: 0; z-index: 10;
  display: grid; place-content: center; text-align: center; padding: 24px;
}
.save-data .scroll-hint, .save-data .scrub-progress, .save-data .scrub-loading { display: none; }

/* Overlays estáticos (no-js/reduced/save-data) en tema claro: el texto claro
   necesita seguir siendo legible aunque el canvas no pinte — panel suave. */
.no-js .overlay-stack, .save-data .overlay-stack { background: rgba(20, 16, 12, 0.45); }
@media (prefers-reduced-motion: reduce) {
  .cinematic .overlay-stack { background: rgba(20, 16, 12, 0.45); }
}

/* ---------- Móvil ---------- */
@media (max-width: 820px) {
  .nav { padding: 12px 18px; }
  .nav .nav-links { gap: 14px; }
  /* Móvil: nav esencial (logo + Shop + idioma) — las secciones se navegan
     scrolleando y desde el footer; evita la pila de 3 renglones sobre el logo */
  .nav .nav-links a:not(.cta-shopify):not(.lang-link) { display: none; }
  .nav .brand img { height: 44px; }
  .section { padding: 80px 20px; }
  .usp-strip { grid-template-columns: 1fr 1fr; }
  .usp-strip li:nth-child(3) { border-left: none; }
  .usp-strip li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .tiles { grid-template-columns: 1fr; }
  .ar-grid, .designer-grid { grid-template-columns: 1fr; gap: 28px; }
  .gift-cards { grid-template-columns: 1fr; }
  .pos-list { grid-template-columns: 1fr; }
  .sketch-pair { grid-template-columns: 1fr; }
  .scrub-progress { left: 18px; right: 18px; }
}

/* Hit-area táctil cómoda en links de texto (WCAG 2.5.8) sin mover el layout */
.nav a, .footer a {
  padding: 12px 8px;
  margin: -12px -8px;
  display: inline-block;
}

/* ============================================================
   EFECTOS (effects.js — ports del pack awwwards-effects)
   Todo lo de este bloque es enhancement: los selectores que
   dependen de JS van tras html.js; reduced-motion los apaga.
   ============================================================ */

/* ---------- 1. svg-5 · el boceto se dibuja al scroll ----------
   El SVG calca el object-fit:cover del <img> (mismo box 3/4 +
   preserveAspectRatio slice). Solo existe cuando JS lo inyecta. */
.sketch-fx { position: relative; }
.sketch-draw {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  aspect-ratio: 3 / 4; /* mismo box que .sketch-pair img (no tapa el figcaption) */
  pointer-events: none;
  color: #4b423a; /* grafito del lápiz */
}
.sketch-draw path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

/* ---------- 2. hover-1 · grid de colecciones que respira ----------
   Mientras el efecto está armado las fotos llevan altura FIJA
   (medida al armar): las columnas respiran a lo ancho sin empujar
   el layout vertical. Solo desktop con cursor. */
@media (hover: hover) and (pointer: fine) {
  .tiles[data-breathe] { align-items: start; }
  .tiles[data-breathe] .tile img { aspect-ratio: auto; height: var(--tile-h, auto); }
}

/* ---------- 3. Micro-hovers premium (solo transform/opacity) ----------
   (a) subrayado sweep en links de nav/footer: entra de izquierda a
       derecha y sale hacia el mismo lado (patrón de agencia);
   (b) zoom 1.04 en fotos de tiles (patrón Monica Vinader);
   (c) el imán de CTAs vive en effects.js (transform, tope 6px). */
@media (hover: hover) {
  .nav .nav-links a:not(.cta-shopify), .footer a { position: relative; }
  .nav .nav-links a:not(.cta-shopify)::after, .footer a::after {
    content: "";
    position: absolute;
    left: 8px; right: 8px; bottom: 9px; /* dentro de la hit-area (padding 12x8) */
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform 0.35s cubic-bezier(0.25, 0.6, 0.2, 1);
  }
  .nav .nav-links a:not(.cta-shopify):hover::after,
  .nav .nav-links a:not(.cta-shopify):focus-visible::after,
  .footer a:hover::after,
  .footer a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: 0 50%;
  }
}
@media (hover: hover) and (pointer: fine) {
  .tile figure { overflow: clip; border-radius: 4px; } /* clip, no hidden: no rompe sticky (gotcha 12) */
  .tile img { transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1); }
  .tile:hover img, .tile:focus-within img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .nav .nav-links a::after, .footer a::after { transition: none; }
  .tile img { transition: none; transform: none !important; }
}

/* ---------- 4. Marquee de afirmaciones (única cinta del sitio) ----------
   Animación CSS pura por transform (compositor). effects.js solo
   gobierna el play-state por IntersectionObserver + visibilitychange.
   reduced-motion y saveData la dejan estática; el contenido íntegro
   vive también en la lista de la sección AR. */
.affirm-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: 30px 0;
}
.affirm-marquee {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.affirm-track {
  display: flex;
  width: max-content;
  animation: affirm-marq 46s linear infinite;
}
.affirm-track.paused { animation-play-state: paused; }
.affirm-seq {
  white-space: nowrap;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  color: var(--ink);
}
.affirm-seq em { color: var(--mia-aqua-deep); font-style: normal; padding: 0 0.55em; } /* separadores en aqua */
@keyframes affirm-marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .affirm-track { animation: none; } }
.save-data .affirm-track { animation: none; }

/* ---------- 5. Footer cortina (sticky footer, ~CSS puro) ----------
   El main viaja POR ENCIMA del footer fijo y al terminar lo revela
   como telón. effects.js añade html.fx-curtain (solo sin saveData)
   y mide el alto real del footer en --footh. Sin JS o con
   reduced-motion: footer en flujo normal, cero cambios. */
@media (prefers-reduced-motion: no-preference) {
  html.fx-curtain main {
    position: relative;
    z-index: 1;
    background: var(--bg);
    margin-bottom: var(--footh, 0px);
  }
  html.fx-curtain .footer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 0;
    background: var(--bg);
  }
}

/* ---------- 6. mouse-6 · paint reveal en La Diseñadora ----------
   Capas montadas por effects.js SOLO en desktop pointer:fine:
   debajo la foto oculta, encima el canvas-cubierta que el cursor
   despinta. Sin JS/móvil/reduced no existe nada de esto. */
#designer-portrait { position: relative; }
#designer-portrait .pr-wrap {
  position: absolute;
  inset: 0;
  overflow: clip;
  border-radius: 4px;
  pointer-events: none;
}
#designer-portrait .pr-under {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important; /* gana al main img{height:auto}: la capa llena el marco */
  object-fit: cover;
}
#designer-portrait .pr-cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}


/* == 4c. Pearl still — el scroll se detiene; la foto respira sola == */
.pearl-still { position: relative; }
.pearl-still figure { margin: 0; position: relative; }
.pearl-still img { display: block; width: 100%; height: auto; }
.pearl-still figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(24px, 6vw, 72px);
  background: linear-gradient(to top, rgba(20,16,12,.55), transparent 70%);
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.pearl-still .still-line {
  font-family: var(--font-display, serif); font-weight: 300;
  font-size: clamp(1.5rem, 4.2vw, 3rem); letter-spacing: .04em;
  color: #fdfaf4; text-shadow: 0 2px 24px rgba(0,0,0,.45); margin: 0;
}
.pearl-still .still-line em { font-style: italic; }
@media (prefers-reduced-motion: no-preference) {
  .pearl-still img { animation: pearl-breathe 14s ease-in-out infinite alternate; transform-origin: 50% 40%; }
  @keyframes pearl-breathe { from { transform: scale(1); } to { transform: scale(1.03); } }
}

/* ---------- Las Mujeres MIA (galería de clientas, cinta horizontal) ----------
   Capa base SIN JS: overflow-x nativo con scroll-snap (funciona con rueda,
   flechas con foco y touch). effects.js añade drag con inercia SOLO en
   desktop pointer:fine (clase drag-armed). Alturas variadas = ritmo editorial. */
.women .women-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 56px;
  padding-block: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;              /* la cinta se ve limpia; sigue scrolleable */
  -webkit-overflow-scrolling: touch;
  /* full-bleed: escapa del contenedor de 1200px pero alinea el primer card con él */
  margin-inline: calc(50% - 50vw);
  padding-inline: max(32px, calc(50vw - 568px));
}
.women .women-strip::-webkit-scrollbar { display: none; }
.women .women-strip:focus-visible { outline: 2px solid var(--mia-aqua-deep); outline-offset: 2px; }
.women .women-strip.drag-armed { cursor: grab; user-select: none; }
.women .women-strip.dragging { cursor: grabbing; }
.women .women-strip.dragging, .women .women-strip.gliding { scroll-snap-type: none; } /* la inercia JS no pelea con el snap */
.women .women-card { margin: 0; flex: 0 0 auto; scroll-snap-align: center; }
.women .women-card img {
  height: 440px;
  width: auto; /* 3:4 natural — el alto manda, el ancho acompaña */
  display: block;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
}
/* alturas variadas (efecto editorial tipo moodboard) */
.women .women-card:nth-child(even) img { height: 356px; }
.women .women-card:nth-child(3n) img { height: 396px; }
.women .women-hint {
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (hover: hover) and (pointer: fine) {
  .women .women-card img { transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1), border-color 0.5s, box-shadow 0.5s; }
  .women .women-card:hover img {
    transform: scale(1.03);
    border-color: var(--mia-aqua-deep);           /* el aqua como marco */
    box-shadow: 0 12px 34px rgba(23, 105, 110, 0.24); /* glow aqua suave */
  }
}
@media (prefers-reduced-motion: reduce) {
  .women .women-card img { transition: none; transform: none !important; }
  .women .women-strip { scroll-behavior: auto; }
}
@media (max-width: 820px) {
  .women .women-strip { gap: 12px; padding-inline: 20px; }
  .women .women-card img { height: 320px; }
  .women .women-card:nth-child(even) img { height: 262px; }
  .women .women-card:nth-child(3n) img { height: 292px; }
}

/* Skip-link (a11y): invisible hasta recibir foco */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink, #1e1a16); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

/* == CTA final con loop ambiental (C10: ella con su perla) == */
/* Fondo oscuro de respaldo: el poster llega lazy (data-poster) y sin JS no
   llega — el texto claro del CTA necesita base oscura SIEMPRE. */
.cta { position: relative; overflow: clip; background: #14100c; }
.cta .cta-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cta .cta-scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(20,16,12,.30), rgba(20,16,12,.55)); }
.cta > :not(.cta-loop):not(.cta-scrim) { position: relative; z-index: 2; }
.cta .kicker, .cta h2, .cta .lead { color: #fdfaf4; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
@media (prefers-reduced-motion: reduce) { .cta .cta-loop { display: none; }
  .cta { background-image: url("/assets/img/c10-poster.webp"); background-size: cover; background-position: center; } }

/* ══ FIXES del barrido en vivo 2026-07-07 ══ */
/* 1. CTA final legible sobre el video (especificidad > .section p.lead) */
.section.cta p.lead { color: #fdfaf4; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.cta .btn.cta-shopify, .cta a.cta-shopify {
  color: #fdfaf4; border-color: rgba(253,250,244,.85);
  background: rgba(20,16,12,.34); text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
.cta .cta-scrim { background: linear-gradient(to bottom, rgba(20,16,12,.35), rgba(20,16,12,.68)); }
/* 2. Pearl still: botón legible + el Ken Burns no desborda el viewport */
.pearl-still figure { overflow: hidden; }
html { overflow-x: clip; }
.pearl-still figcaption .cta-shopify {
  color: #fdfaf4; border-color: rgba(253,250,244,.85);
  background: rgba(20,16,12,.34); text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
/* 3. Nav con estado de scroll: fondo constante, se acabó el texto-sobre-texto */
.nav--scrolled { background: linear-gradient(to bottom, rgba(251,248,243,.97), rgba(251,248,243,.93)) !important;
  box-shadow: 0 1px 0 rgba(30,26,22,.08); }
@media (min-width: 821px) { .nav--scrolled { backdrop-filter: blur(8px); } }
/* 4. Sin JS: los scrubs muestran su primer frame y los videos no son cajas negras */
.no-js .cinematic .sticky { background-size: cover; background-position: center; }
.no-js #hero-scrub .sticky { background-image: url("/assets/frames/hero/desktop/frame_0001.webp"); }
.no-js #acto1b-scrub .sticky { background-image: url("/assets/frames/acto1b/desktop/frame_0001.webp"); }
.no-js #acto2-scrub .sticky { background-image: url("/assets/frames/acto2/desktop/frame_0001.webp"); }
.no-js .ambient-loop { display: none; }
.no-js .cta { background-image: url("/assets/img/c10-poster.webp"); background-size: cover; background-position: center; }
/* 5. Overlay del acto1b con sombra reforzada (frames claros de la concha) */
#acto1b-scrub .reveal-line { text-shadow: 0 2px 22px rgba(0,0,0,.55); }