/**
 * ============================================================
 * NAHUEN GOURMET MARKET — Home (Fase 8, maquetación)
 * ============================================================
 * Capa de composición de la Home. NO redefine tokens ni componentes del
 * framework — solo bloques compositivos propios de esta página (BEM,
 * cero border-radius, tokens de framework.css).
 *
 * Referencias que gobiernan cada bloque (ver home.md):
 *  - Hero banda bordó + medialunas rompiendo el borde ... Crumb Theory
 *  - Marquee de frases de marca ........................ Keeper Coffee
 *  - Accesos rápidos (grid best-sellers) ............... Crumb Theory + Redbrick
 *  - Lo que nos une (foto + iconos dibujados encima) ... Crumb Theory ("proof")
 *  - Sweet Bakery ... FUSIONADO en #lineas (side-space Diamond Rose;
 *    la banda propia se eliminó — cliente 2026-07-06 g)
 *  - Shop (60/40 mostrador + módulos) .................. Redbrick / Norrlands
 *  - Seasonal (foto + sello circular) .................. Crumb Theory (sello) + Tartina
 *  - Locations (foto izq + listado con horarios) ....... Keeper Coffee
 *  - Newsletter (banda bordó + iso watermark) .......... San Felice / L'Essence
 * ============================================================
 */

/* ============================================================
   ACENTO SCRIPT — la palabra en Retro Signature dentro de un titular
   serif (firma compositiva de las referencias: "the proof is in the
   *pastry*", "*lamination*"). Nunca más de una palabra por titular.
   ============================================================ */
.script-accent {
  font-family: var(--font-display-season);
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  /* Ronda cliente 2026-07-06 (Agentation #3/#4): el script va INLINE en el
     titular (no en línea aparte), más grande que antes (1.42em -> 1.55em
     base) y con caja mínima (line-height 0.5) para no inflar el
     interlineado del titular — el glifo desborda su caja sin recorte. */
  display: inline-block;
  font-size: 1.55em;
  line-height: 0.5;
  padding-inline-end: 0.14em; /* aire para el trazo de salida de la script */
  transform: translateY(0.06em);
}

/* ============================================================
   SALTOS DE LÍNEA FIJOS EN TÍTULOS ANIMADOS — fix reflow definitivo
   (ronda cliente 2026-07-06 d). Regla de motion-system.md ("los saltos de
   línea del titular se fijan explícitamente en el HTML, no se delega el
   wrap al navegador"): todo título animado POR CARACTERES lleva sus líneas
   envueltas en .title-line — el navegador jamás decide el quiebre, ni en
   el estado partido (SplitText) ni en el natural. Nada de text-wrap:
   balance en elementos animados. Causa medida del bug "al terminar se
   corta la línea y 'hechas' pasa hacia abajo": con wrap libre, los chars
   inline-block median distinto que el texto natural y el punto de quiebre
   cambiaba entre la animación y el estado final.
   ============================================================ */
.title-line {
  display: block;
  white-space: nowrap;
}
/* En pantallas angostas "hechas con amor" no entra en una línea: "amor"
   pasa a su PROPIA línea fija (sigue sin decidir el navegador — el quiebre
   lo define este breakpoint, no el wrap). Ronda cliente 2026-07-06 e:
   "amor" ya NO lleva tipografía script (pedido dos veces) — mismo DM Serif
   que el resto del titular; el wrapper .title-line__sub queda solo como
   punto de quiebre fijo mobile. */
/* Ronda 2026-07-09 (fix 1): titular en 2 líneas fijas "COSAS RICAS HECHAS" /
   "CON AMOR". En ≤40em la línea 1 no entra → "hechas" pasa a su PROPIA
   línea fija (.title-line__b, mismo patrón que .sub-line__b): 3 líneas
   fijas mobile ("Cosas ricas / hechas / con amor") — nunca decide el
   navegador (el wrapper sobrevive al split words+chars). */
@media (max-width: 40em) {
  .hero-crumb .hero-monumental__title .title-line__b {
    display: block;
  }
  /* Sub del hero (fix 2026-07-06 f): al bajar el sub a body-sm entraba
     JUSTO en una línea a 390px en estado natural pero el split
     (words+chars) lo re-quebraba a dos → el hero (flex centrado) se
     re-acomodaba ±12px al animar. Quiebre FIJO por breakpoint, como el
     titular: nunca decide el navegador. */
  .hero-crumb__sub .sub-line__b {
    display: block;
  }
}

/* ============================================================
   ANTI-FLASH DEL HERO (ronda 2026-07-09, fix 2) — la clase la pone un
   script sincrónico en el <head> de home.html ANTES del primer paint
   (estado inicial SOLO vía JS: sin JS no existe la clase). Cubre la
   ventana primer-paint → DOMContentLoaded en la que los CTAs (bloques de
   color, no dependen de fuentes) aparecían, desaparecían con el
   pre-ocultado de motion.js y volvían a entrar con la secuencia ("doble
   entrada"). initHeroSequence restaura vía estilos inline (ganan a esta
   regla); GSAP ausente o failsafe → home.html retira la clase.
   ============================================================ */
html.hero-seq-pending [data-hero-seq] {
  opacity: 0;
  visibility: hidden;
}

/* ============================================================
   VENTANA PARALLAX — patrón medido en harleyofscotland.com (referencia
   viva del cliente; ver referencias-vivas-estudio.md): contenedor con
   aspect fijo y overflow hidden + imagen interna al 125% del alto que
   recorre el 25% extra con el scroll (initParallaxWindows, motion.js).
   Las TRES fotos laterales de la Home (une / seasonal / locations)
   comparten retrato 4:5 — "altos coherentes", como los retratos de Harley.
   Sin JS o con reduced-motion la imagen queda centrada y estática (el
   -12.5% de top centra verticalmente el excedente).
   ============================================================ */
.parallax-window {
  position: relative;
  overflow: hidden;
}
.parallax-window__img {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -12.5%;
  width: 100%;
  height: 125%;
  object-fit: cover;
}

/* ============================================================
   CALIBRE TIPOGRÁFICO DE BLOQUE — referencia viva Diamond Rose Sanctuary
   (medido: títulos 69-84px vs párrafos 12.24px, ratio ≈5.6-6.8:1; el
   cliente lo pidió dos veces: "título grande pero párrafos chicos").
   Token local de la Home para el texto descriptivo de bloque; los
   titulares conservan su escala display del framework.
   ============================================================ */
:root {
  --text-detail: 0.8125rem; /* 13px — párrafo chico de bloque */
}

/* ============================================================
   ESTÁNDAR DE GRID DEL HOME — fix cliente 2026-07-06 c: "el grid de
   #lineas es el bueno… debe haber coherencia de grid y espaciado en todo
   el home. Me gusta que no llega al 100% sino que tiene aire a los
   costados". El contenedor del panel side-space (marco de 10px + padding
   interno del panel, medidos en Diamond Rose) pasa a ser EL sistema de
   guías laterales de la página:
     · bandas de color (une / seasonal; la del sweet se fusionó en
       #lineas): margen lateral --home-frame — nunca tocan el borde del
       viewport
     · contenido de TODAS las secciones: arranca a
       --home-frame + --home-inset del borde (la misma guía que el texto
       del panel bordó de #lineas)
   Hero, marquee, nav y footer quedan full-bleed a propósito (apertura y
   cierre de página; el estándar aplica "donde queda bien").
   ============================================================ */
:root {
  --home-frame: 10px; /* marco lateral (medido en DR; ya usado por #lineas) */
  --home-inset: clamp(
    1.25rem,
    0.9rem + 1.4vw,
    2rem
  ); /* padding interno del panel DR (28-32px) */
  /* Radio de tarjeta (fix Agentation 2026-07-08): el cliente pidió bordes
     redondeados de ~30px en el hero y en la imagen de "Lo que nos une",
     DECISIÓN QUE ANULA el "cero border-radius / 100% ortogonal" del manual
     del diseñador para esos elementos (queda registrada). */
  --home-radius: 30px;
  /* Radio menor para cards (ronda fondos de marca 2026-07-08, fix 3:
     access-cards a 20px — mismo régimen de excepción que --home-radius). */
  --home-radius-card: 20px;
  /* ── TOKENS DEL CLIENTE (ronda fondos de marca 2026-07-08) ──
     Dos colores nuevos entregados por el cliente junto a las capas de
     ilustración img/bg/ — documentados en home.md:
       · celeste: fondo de la banda #une, color del script "amor" (hero) y
         del script "Nahuen" (título del Shop)
       · manteca: fondo de la zona de imagen de las shop-cards (reemplaza
         al gris #f7f7f5 de la referencia basic.space). */
  --nahuen-celeste: #adc8e8;
  --nahuen-manteca: #f2e4b3;
}
/* Bandas de color: marco lateral (no llegan al 100%).
   #seasonal quedó FUERA de esta regla (ronda 2026-07-08 b): rompe el marco
   a propósito y va a sangre completa al borde del viewport — ver §7 SEASONAL
   y home.md §14. */
#une,
#seasonal {
  margin-inline: var(--home-frame);
}
/* Guías de contenido unificadas: secciones cream (marco + inset)… */
#accesos > .container,
#shop > .container,
#locations > .container {
  max-width: none;
  padding-inline: calc(var(--home-frame) + var(--home-inset));
}
/* …y bandas ya inset-eadas por su marco (solo inset). #seasonal usa su
   propio contenedor (.seasonal__inner) por ser a sangre completa. */
#une > .container,
#seasonal > .container {
  max-width: none;
  padding-inline: var(--home-inset);
}

/* ============================================================
   1. HERO — DOS PANELES estilo persephone.bio (ronda cliente 2026-07-08,
   clase citada `hero__container items-center !rounded-none`, MEDIDA en su
   sitio real — ver referencias-vivas-estudio.md §6.1): grid de 2 columnas,
   esquinas rectas, contenido centrado en vertical (items-center). Un half =
   VIDEO CONTENIDO (cover, no full-bleed detrás del texto); el otro = panel
   bordó sólido con titular + sub + lead + 2 CTAs. Diferencia Nahuen: la
   banda del hero respeta el aire lateral --home-frame del sistema (nunca
   llega al 100%, como #une/#seasonal). El velo pesado del hero full-bleed
   anterior SALIÓ (el texto vive sobre bordó sólido → AA base cream/bordó);
   queda un tinte leve sobre el video para cohesión tonal con el panel.
   El bordó pleno de .hero-crumb queda de fallback mientras el video carga.
   ============================================================ */
.hero-crumb {
  position: relative;
  overflow: hidden;
  background: var(--nahuen-bordo); /* fallback + base del panel */
  color: var(--color-text-inverse);
  /* Aire lateral del sistema: la banda del hero no llega al 100% (marco
     --home-frame, como las bandas de color de la página). */
  margin-inline: var(--home-frame);
  padding: 0; /* los paneles gobiernan su padding interno */
  border-radius: var(
    --home-radius
  ); /* bordes redondeados 30px (fix Agentation 2026-07-08 — anula el cero-radius del manual para el hero; overflow:hidden recorta el video a las esquinas) */
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 medido en persephone */
  align-items: stretch; /* ambos paneles al mismo alto */
  min-height: min(82svh, 46rem);
}
/* PANEL MEDIA — video contenido a su columna (cover), esquinas rectas. */
.hero-crumb__media {
  position: relative;
  overflow: hidden;
  min-height: 18rem;
}
.hero-crumb__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Tinte leve de cohesión con el panel bordó — el texto NO va sobre el video
   (vive en el panel sólido), así que acá el velo es solo estético, mucho
   más suave que el degradado del hero full-bleed anterior. */
.hero-crumb__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    color-mix(in srgb, var(--nahuen-bordo) 22%, transparent),
    color-mix(in srgb, var(--nahuen-bordo) 36%, transparent)
  );
}
/* PANEL CONTENIDO — bordó sólido, centrado en vertical (items-center),
   texto a la izquierda. */
.hero-crumb__content {
  /* Ronda fondos de marca 2026-07-08 (fix 1): capa de ilustración de trazo
     bg-hero.png (croissants/empanada/alfajores en trazo cream con alfa baja,
     751×525) ARRIBA del bordó del panel — marca de agua que no compite con
     el texto. COVER centrado: el panel es ~cuadrado y la capa apaisada; el
     recorte lateral mantiene los motivos en las esquinas (el centro de la
     ilustración está vacío, donde vive el titular). */
  background-color: var(--nahuen-bordo);
  background-image: url(./img/bg/bg-hero.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centrado vertical = items-center persephone */
  align-items: flex-start;
  text-align: start;
  padding: clamp(2rem, 1.4rem + 3vw, 4rem) clamp(1.75rem, 1rem + 3vw, 3.5rem);
}
.hero-crumb .hero-monumental__title {
  /* En el panel (~mitad del ancho) el titular baja del calibre monumental
     full-bleed a uno que entra en sus 2 líneas FIJAS dentro de la columna.
     Anti-reflow (2026-07-06 d): líneas fijas (.title-line nowrap) + caja
     estable (inline-size 100% del panel) — el navegador nunca decide el
     quiebre, ni en el estado natural ni en el partido (SplitText). Medido:
     rect idéntico antes/después de animar (Δ=0). MAYÚSCULAS (fix
     Agentation 2026-07-06 f) — DM Serif intacto, solo el case. */
  /* Ronda 2026-07-09 (fix 1): la línea 1 pasa a "COSAS RICAS HECHAS"
     (≈9.6em de ancho) — la pendiente del clamp se recalibra para que la
     línea fija entre en el panel en TODO el rango desktop (verificado
     1024-1512; antes 3.2vw desbordaba bajo ~1300px con la línea nueva). */
  /* Ronda 2026-07-09 b (fix nuevo 8): las CAPS bajan 5% (clamp ×0.95 en
     sus tres términos); "amor" NO baja — su em se recompensa en la regla
     del script (3.47em → 3.653em = mismo px absoluto). */
  font-size: clamp(2.28rem, 4.275vw - 0.26125rem, 3.8rem);
  line-height: 0.97;
  text-transform: uppercase;
  max-inline-size: none; /* el ancho del panel acota; los quiebres son fijos */
  margin-inline: 0; /* a la izquierda del panel, no centrado */
  inline-size: 100%;
}
/* "amor" del hero (ronda fondos de marca 2026-07-08, fix 2): VUELVE a Retro
   Signature (.script-accent, tamaño base 1.55em del sistema) en el celeste
   nuevo del cliente. Contraste sobre bordó ≈6.8:1 (display necesita 3:1).
   Anti-reflow: initHeroSequence ignora .script-accent en el split (la
   palabra se anima entera) — re-verificado rect Δ=0 en esta ronda. */
.hero-crumb .hero-monumental__title .script-accent {
  color: var(--nahuen-celeste);
  /* Ronda 2026-07-09 (fix 1): "amor" +60% (1.55em → 2.48em). La caja del
     span colapsa (line-height 0): con lh intermedios la MITAD del leading
     negativo no alcanza y el baseline interno del inline-block empuja la
     línea 2 (medido: 81.7px vs 61.7 de la línea 1 con lh 0.35). Con lh 0
     el baseline del span queda bajo el ascent del strut y la línea 2 mide
     EXACTO igual que la 1 — el glifo desborda su caja sin recorte, como
     el patrón base. */
  /* Ronda 2026-07-09 b (fix 1): +40% más (2.48em → 3.47em), ASENTADO en la
     línea base de "CON" (mismo seat total 0.2em que el "une" de #une) y
     PESO VISUAL BOLD vía text-stroke (Retro Signature no tiene bold —
     mismo calibre óptico 0.012em que el "une").
     El seat se reparte en DOS knobs a propósito: a 3.47em la caja lh 0 del
     inline-block vuelve a inflar la línea 2 (medido: box-top del span =
     (asc−desc)/2 ≈ 0.3em = 66px > ascent del strut ≈ 56px → línea 2 72.2px
     vs 61.7 de la línea 1). vertical-align −0.1em BAJA la caja (66−22 =
     44px < 56 → la línea vuelve a 61.7 EXACTA, medido) y aporta la mitad
     del seat; translateY 0.1em (paint-only) aporta el resto. */
  /* Ronda 2026-07-09 b (fixes nuevos 2 y 8): 3.47em → 3.653em compensa el
     −5% de las caps (mismo px absoluto de "amor"); aire a la izquierda
     0.15em (el swash de la "a" tiene bearing negativo y PISABA la N de
     "CON"); el seat sube ~2px — ajuste fino del cliente.
     FIX BUG de entrada (ronda b, fix 3º-2): la mitad del seat vivía en
     transform:translateY y initHeroSequence anima transforms del span →
     lo PISABA durante el tween ("amor entra arriba y se acomoda al
     final"). El seat pasa a position:relative + top (GSAP no toca top en
     esa animación) → asentado DESDE EL PRIMER FRAME y el y del tween
     compone encima. transform:none mata también el translateY(0.06em)
     del patrón base por la misma razón. Muestreado durante la entrada:
     offset del span vs su línea constante en todos los frames. */
  font-size: 3.653em;
  line-height: 0;
  vertical-align: -0.1em;
  padding-inline-start: 0.15em;
  -webkit-text-stroke: 0.012em currentColor;
  position: relative;
  top: calc(0.1em - 2px);
  transform: none;
}
.hero-crumb__sub {
  font-family: var(--font-accent);
  /* "achicarlo bastante" (fix Agentation 2026-07-06 f): tier body-sm
     (~14-15px). Ronda 2026-07-09 (fix 16): SIN letter-spacing (0) —
     pedido explícito del cliente para el eyebrow. */
  font-size: var(--text-body-sm);
  letter-spacing: 0;
  text-transform: uppercase;
  /* EYEBROW arriba del titular (fix 2026-07-08): sin margen superior (es el
     primer elemento del panel), separación por debajo antes del H1. */
  margin-block-end: var(--space-sm);
  opacity: 0.92;
  inline-size: 100%; /* caja estable para el split (anti-reflow) */
}
.hero-crumb__lead {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: 1.7;
  max-inline-size: 46ch;
  margin-block-start: var(--space-md);
  margin-inline: 0;
  opacity: 0.88;
}
.hero-crumb .cta-cluster {
  justify-content: flex-start;
  margin-block-start: var(--space-xl);
}
/* Mobile: apilado (media arriba, contenido abajo) como persephone @≤md. */
@media (max-width: 64em) {
  .hero-crumb {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero-crumb__media {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
  .hero-crumb__content {
    padding-block: clamp(2.5rem, 2rem + 4vw, 4rem);
  }
}

/* ============================================================
   2. MARQUEE — banda de frases de marca estilo Keeper Coffee, separadas
   por el iso. Animación solo transform; pausa con reduced-motion.
   Fix cliente 2026-07-06 c: PEGADO al borde inferior del hero (sin gap —
   las piezas ya no vuelan sobre el borde) y apenas más grande
   (--text-body-sm en vez de --text-caption).
   ============================================================ */
.marquee {
  background: var(--nahuen-cream);
  color: var(--nahuen-bordo);
  padding-block-start: 0;
  padding-block-end: var(--space-md);
  overflow: hidden;
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--space-xl);
  padding-block: var(--space-md);
  border-block-end: var(--line-thickness) solid
    color-mix(in srgb, var(--nahuen-bordo) 25%, transparent);
  animation: marquee-scroll 38s linear infinite;
}
.marquee__group {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  flex-shrink: 0;
}
.marquee__item {
  font-family: var(--font-body);
  font-weight: 500;
  /* "apenas más grande" (fix cliente 2026-07-06 c) */
  font-size: var(--text-body-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__iso {
  width: 0.75em;
  flex-shrink: 0;
  opacity: 0.55;
}
.marquee__iso svg {
  display: block;
  width: 100%;
  height: auto;
}
@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

/* ============================================================
   3. ACCESOS RÁPIDOS — recreación de .sides_next de Diamond Rose
   Sanctuary (MEDIDA 2026-07-06 en su sitio: fila flex con gap 12px,
   cards de foto full-bleed con overlay en degradado, contenido abajo a
   la izquierda con padding 24px: caption .75em uppercase + titular
   display 4.8em/0.8). Traducción Nahuen: 4 accesos, titular Beaufort al
   MISMO calibre que la lista de #lineas (coherencia), caption con
   nuestro hover-underline (variante nav: línea que se dibuja al hover),
   overlay teñido bordó/tinta (nunca negro puro — regla de paleta).
   Patrón pedido: el PÁRRAFO aparece AL HOVER (grid-rows 0fr→1fr, solo
   transform/opacity animados); en táctil (hover: none) y con
   reduced-motion el párrafo queda SIEMPRE visible (hover-only content
   es inaccesible); teclado: :focus-visible lo muestra.
   ============================================================ */
/* Fix Agentation 2026-07-06 f: aire desparejo ("mucho arriba, poco
   abajo") — la banda del marquee ya aporta cream sobre las cards; el
   padding superior de la sección se reduce a la mitad para que el aire
   percibido (texto del marquee → cards) iguale al inferior (cards →
   banda une). El inferior queda en el token de sección intacto. */
#accesos {
  padding-block-start: calc(var(--space-section-utility) / 2);
}
.access-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px; /* gap medido en DR (.sides_next) */
}
@media (max-width: 64em) {
  .access-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 30em) {
  .access-cards {
    grid-template-columns: 1fr;
    gap: 8px; /* DR mobile: column, row-gap 8px */
  }
}
.access-card {
  position: relative;
  display: block;
  overflow: hidden; /* la foto respeta el radio */
  min-height: clamp(20rem, 14rem + 18vw, 30rem);
  color: var(--color-text-inverse);
  /* Ronda fondos de marca 2026-07-08 (fix 3): 20px PAREJO en las 4 cards. */
  border-radius: var(--home-radius-card);
}
.access-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Overlay medido en DR: linear-gradient(#00000040, #0000 50%, #000000d4).
   Acá teñido con la tinta/bordó de la casa — nunca negro puro. */
.access-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    color-mix(in srgb, var(--nahuen-ink) 25%, transparent),
    transparent 50%,
    color-mix(
      in srgb,
      color-mix(in srgb, var(--nahuen-bordo) 45%, var(--nahuen-ink)) 85%,
      transparent
    )
  );
}
.access-card__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px; /* DR: .titles_next row-gap 10px */
  padding: var(--space-lg); /* DR: 24px */
}
/* Caption = label del acceso (texto aprobado), tier caption small-caps con
   el hover-underline del sitio (variante nav: sin línea en reposo, se
   dibuja de izq a der cuando la CARD recibe hover/focus). */
.access-card__caption {
  position: relative;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  opacity: 0.92;
}
.access-card__caption::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: 100%;
  height: 1px;
  background: color-mix(in srgb, currentColor 50%, transparent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.access-card:hover .access-card__caption::after,
.access-card:focus-visible .access-card__caption::after {
  transform: scaleX(1);
  transform-origin: left;
}
/* Titular display — mismo calibre que los ítems del panel #lineas
   (coherencia interna; DR usa 4.8em/0.8 en cards al doble de ancho). */
.access-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
/* Párrafo que aparece al hover: alto con grid-rows (0fr→1fr) y el texto
   con transform/opacity — nunca height/margin animados. */
.access-card__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.access-card__reveal-inner {
  overflow: hidden;
}
.access-card__text {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-detail); /* calibre Diamond Rose */
  line-height: 1.6;
  max-inline-size: 30ch;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.access-card:hover .access-card__reveal,
.access-card:focus-visible .access-card__reveal {
  grid-template-rows: 1fr;
}
.access-card:hover .access-card__text,
.access-card:focus-visible .access-card__text {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: hover) {
  .access-card:hover .access-card__img,
  .access-card:focus-visible .access-card__img {
    transform: scale(1.04);
  }
}
/* Sin hover real (táctil) el párrafo vive SIEMPRE visible — y como el
   bloque de texto sube más alto sobre la foto, el degradado arranca
   antes (contraste del caption/título en la zona media). */
@media (hover: none) {
  .access-card__reveal {
    grid-template-rows: 1fr;
  }
  .access-card__text {
    opacity: 1;
    transform: none;
  }
  .access-card__overlay {
    background: linear-gradient(
      color-mix(in srgb, var(--nahuen-ink) 25%, transparent),
      transparent 32%,
      color-mix(
        in srgb,
        color-mix(in srgb, var(--nahuen-bordo) 45%, var(--nahuen-ink)) 88%,
        transparent
      )
    );
  }
}
@media (prefers-reduced-motion: reduce) {
  .access-card__img,
  .access-card__reveal,
  .access-card__text,
  .access-card__caption::after {
    transition: none !important;
  }
  .access-card__reveal {
    grid-template-rows: 1fr;
  }
  .access-card__text {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   4. LO QUE NOS UNE — banda de color con contenido centrado (esqueleto
   Harley .fw-img-section). RONDA FONDOS DE MARCA 2026-07-08 (fixes 4-8):
   · la FOTO parallax de fondo SALIÓ (con sus reglas .union-band__bg /
     .union-band__media)
   · fondo = CELESTE #ADC8E8 (token cliente --nahuen-celeste) + capa de
     ilustración bg-une.png ARRIBA del color (utensilios de repostería en
     trazo bordó a los laterales, CENTRO VACÍO — calza exacto con el
     contenido centrado; 1437×621 ≈ proporción de la banda → COVER centrado
     casi sin recorte, no-repeat)
   · TODO el texto pasa a bordó #642128 (título, script "une", párrafo y
     underline-link vía currentColor) — contraste bordó/celeste 6.8:1 (AA)
   · script "une" +40%: 2.1em → 2.94em
   · border-radius --home-radius (30px) como el hero (ya existía).
   Marco lateral --home-frame intacto (estándar del home).
   ============================================================ */
.union-band {
  position: relative;
  overflow: hidden; /* recorta la capa de fondo a las esquinas redondeadas */
  padding-block: clamp(7rem, 5rem + 8vw, 11.5rem); /* py-lg escalado */
  border-radius: var(--home-radius); /* 30px, como el hero (fix 8) */
  background-color: var(--nahuen-celeste);
  background-image: url(./img/bg/bg-une.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--nahuen-bordo); /* fixes 5-7: título/párrafo/link en bordó */
}
@media (max-width: 64em) {
  /* Banda apilada angosta: COVER dejaría en cuadro solo el CENTRO VACÍO del
     PNG (los utensilios quedan recortados fuera) — la capa pasa a franja
     inferior a lo ancho, en el aire celeste bajo el CTA (verificado a 390:
     los trazos no tocan el texto). */
  .union-band {
    background-size: 100% auto;
    background-position: center bottom;
  }
}
/* ── Platos reales sobre la banda (ronda 2026-07-09, fix 13) ──
   Dos cutouts PNG (img/bg/plato-arriba 394×526 y plato-abajo 391×521) en
   la MISMA capa que bg-une.png: arriba del celeste (position sobre el
   background del section), debajo del contenido (z 0 < z 1 del content).
   Sangrados al borde: el de arriba pegado al TOP (el overflow hidden de
   la banda recorta) a la IZQUIERDA del centro; el de abajo pegado al
   BOTTOM a la DERECHA del centro (plato-abajo trae ~22% de margen alfa
   inferior en el PNG → el translate lo compensa y suma el sangrado).
   pointer-events none: son decorativos.
   Ronda 2026-07-09 b (fixes 3-5): AHORA son wrapper + img — el wrapper
   conserva la geometría estática (inset + translate de sangrado, media
   queries mobile intactas) y la IMG interna lleva el parallax de scroll
   del sistema (data-motion="parallax", GSAP anima yPercent SOLO en la
   img → cero pelea con el translate del wrapper, y el reduced-motion
   clearProps del sistema la devuelve a identidad). Cambios de la ronda:
   +30% de tamaño (240 → 312px @1512), plato-arriba 30% más a la derecha
   (28% → 36.4%) y más recortado por el top (−14% → −26%), plato-abajo
   50% más a la izquierda (inset-inline-end 20% → 30%). */
.union-band__plate {
  position: absolute;
  z-index: 0;
  /* Fix nuevo 6 (acumulativo): +20% adicional sobre el +30% de la ronda
     (240 → 312 → 374px @1512). */
  inline-size: clamp(15.6rem, 10.14rem + 14.04vw, 24.96rem);
  pointer-events: none;
}
.union-band__plate img {
  display: block;
  width: 100%;
  height: auto;
  /* will-change acotado: solo estos 2 nodos decorativos scroll-linked */
  will-change: transform;
}
/* Fix nuevo 6 — POSICIONES CALIBRADAS AL ESPÍRITU (autorizado): el literal
   "+40%" (51% / 42%) dejaba los platos DETRÁS de la tinta del texto
   centrado (medido a 1512: plato-sup pisaba el cuerpo del script "une"
   50px y el burger quedaba bajo el párrafo Y el CTA). Como el contenido
   está CENTRADO, los platos se anclan al CENTRO con calc(): el de arriba
   arranca 340px a la derecha del centro (= borde derecho del título +
   aire, a CUALQUIER ancho de banda) y el de abajo termina 223px a la
   izquierda del centro (= borde izquierdo del párrafo − aire). Bien a la
   derecha / bien a la izquierda, recortados por overflow, y SIN tocar
   texto en ningún estado del parallax (el de arriba solo sube, el de
   abajo solo baja). */
/* Fix 3º-1 (cliente en vivo): 25% a la IZQUIERDA de donde quedó — 25% del
   ancho del plato (374×0.25 ≈ 94px): 50%+340px → 50%+246px. Al volver
   hacia el título re-aparecía el roce con la cola del swash de "une"
   (ink medido y~310-330 en x 950-1010) → se esconde más en el borde
   (−26% → −36%): recortado por overflow y sin tocar tinta en ningún
   estado del parallax (solo sube). */
.union-band__plate--top {
  inset-block-start: 0;
  inset-inline-start: calc(50% + 77px); /* +20% ancho (~75px) más a la izq (cliente 2026-07-09) */ /* fix cliente ×3 (2026-07-09): 25% del ancho del plato (~94px) MÁS a la izquierda — puede solaparse con el título: el plato vive en la capa de fondo y el texto pinta encima (efecto watermark) */
  transform: translateY(-36%);
}
.union-band__plate--bottom {
  inset-block-end: 0;
  inset-inline-end: calc(50% + 186px); /* 10% (~37px) a la derecha (cliente 2026-07-09) */
  transform: translateY(34%); /* 22% de alfa vacía + sangrado real */
}
@media (max-width: 64em) {
  /* Banda apilada: el título ocupa casi todo el ancho — el plato superior
     no tiene aire sin tocar texto y SALE (medido a 390: pisaba "LO QUE
     NOS"). El inferior queda CENTRADO en el hueco vacío de la franja de
     utensilios (bg-une mobile: trazos a los lados, centro libre). */
  .union-band__plate--top {
    display: none;
  }
  .union-band__plate--bottom {
    inset-inline-end: 50%;
    transform: translate(50%, 34%);
  }
}
.union-band__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Ronda 2026-07-09 (fix 12): "LO QUE NOS" pasa a CREAM #FDFBF7 — solo
   "une" queda bordó. ⚠ Contraste cream/celeste ≈1.6:1 — decisión
   explícita del cliente (mismo régimen decorativo-por-mandato que el
   script "Nahuen" del Shop); párrafo y CTA siguen bordó AA (6.82:1). */
.union-band__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h1);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--nahuen-cream);
}
/* "une" MUCHO más grande que el resto de los acentos script (2.94em ronda
   fondos de marca). Ronda 2026-07-09 (fix 11): +10% → 3.23em, ALINEADO en
   vertical con la frase (la caja del script quedaba alta: translateY
   compensa el baseline de Retro Signature vs Beaufort caps) y con PESO
   VISUAL BOLD — Retro Signature no tiene bold: text-stroke sutil engrosa
   el trazo al calibre óptico del Beaufort 700 vecino. Bordó (fix 12).
   Ronda 2026-07-09 b (fix 2): +50% más (3.23em → 4.85em) — el seat al
   baseline (0.2em) y el stroke (0.012em) son relativos al em del script y
   escalan solos; verificado que no desborda la caja del título.
   Fix nuevo 3: 2px de padding izquierdo — el ink del swash de la "u"
   quedaba a 4.8px de la S de "NOS" (medido por canvas: bearing −11.2px
   sobre 16px de espacio); con los 2px respira a ~7px.
   Fix 3º-3 (cliente en vivo): +2px MÁS → 4px de padding (aire de tinta
   ~9px). */
.union-band__title .script-accent {
  font-size: 4.85em;
  padding-inline-start: 14px; /* fix cliente ×3: 4px eran invisibles a esta escala (la cola de la 'u' tapa el aire) — 14px dan separación de tinta perceptible */
  color: var(--nahuen-bordo);
  -webkit-text-stroke: 0.012em currentColor;
  transform: translateY(0.2em); /* asienta el cuerpo del script en la línea
     base de las caps (medido en Chrome: con el 0.06em del patrón base la
     palabra flotaba ~26px por encima del baseline de "NOS") */
}
.union-band__body {
  margin-block-start: var(--space-lg);
  max-inline-size: 52ch; /* párrafo angosto centrado (~480px en Harley) */
  font-size: var(--text-detail); /* calibre Diamond Rose */
  line-height: 1.6;
  opacity: 0.92;
}
.union-band__cta {
  margin-block-start: var(--space-xl);
}

/* 5. SWEET BAKERY — banda propia ELIMINADA (fusión cliente 2026-07-06 g):
   todo su contenido aprobado vive en el panel side-space #lineas (kicker
   + título con shimmer, ítems Cakes/Chocolates/Masas finas/Pedidos
   especiales, macros dulces como hover-panels, "Ver Sweet Bakery"). */

/* ============================================================
   6. SHOP — ronda cliente 2026-07-06 e: carrusel recreado como
   basic.space (HTML de referencia pegado por el cliente):
   · fila con overflow-x SCROLL NATIVO, sin scrollbar visible
   · gap 16px exacto; cards ~16.6% de ancho en desktop (≈6 visibles,
     la sexta asoma recortada como affordance) / 40vw en mobile
   · imagen 4:5 sobre gris muy claro (#f7f7f5) con el cutout packshot
     en mix-blend-multiply (hover: zoom sutil)
   · debajo SOLO: nombre 14px medium (1 línea), precio 14px, tag chico
     uppercase de categoría con fondo gris claro
   · SIN números, SIN letras con tracking ancho, SIN hairlines.
   Flechas (Lucide 1.5) ARRIBA del carrusel, PEGADAS a él, en la misma
   fila que "Ir al shop". Intro alineada al TOP (fix reporte #4).
   ============================================================ */
/* Ronda fondos de marca 2026-07-08 (fixes 9-10): la intro deja las 2
   columnas (titular izq / párrafo der) y pasa a COLUMNA ÚNICA CENTRADA —
   titular centrado y el párrafo debajo, también centrado. */
.shop__intro {
  display: grid;
  gap: var(--space-lg);
  justify-items: center;
  text-align: center;
}
.shop__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h2);
  text-transform: uppercase;
  line-height: 1.08;
  color: var(--nahuen-bordo);
}
/* Ronda 2026-07-09 (fix 14): LOCKUP editorial — "Nahuen" en su PROPIA
   línea bajo "PARA LLEVARTE UN POCO DE", +40% adicional (2.17em → 3.04em)
   y margen NEGATIVO para que la N suba y la frase pise APENAS la parte
   alta del script (la frase ENCIMA: z-index 1 en la línea de caps).
   ⚠ Contraste celeste/cream ≈1.7:1 — decorativo por mandato del cliente
   (la palabra pertenece a un h2 cuyo resto es bordó AA); registrado. */
.shop__title-line {
  position: relative;
  z-index: 1; /* la frase pisa al script, no al revés */
  display: block;
}
.shop__title .script-accent {
  display: block;
  /* Ronda 2026-07-09 b (fix nuevo 4): +20% (3.04em → 3.65em). El solape
     de la frase sobre la N escala en em (−0.13em) — re-verificado "pisa
     APENAS" y sin desborde a 390. */
  font-size: 3.65em;
  color: var(--nahuen-celeste);
  line-height: 0.62; /* caja contenida: el glifo desborda sin recorte */
  margin-block-start: -0.13em; /* la N sube bajo la frase — solape APENAS
     sobre la parte alta del script (con -0.3em la frase cruzaba el medio
     de la N; medido en Chrome) */
  transform: none; /* línea propia: fuera el ajuste inline del patrón base */
}
.shop__intro-text {
  font-family: var(--font-body);
  font-size: var(--text-detail); /* calibre Diamond Rose */
  line-height: 1.6;
  /* Ronda 2026-07-09 (fix 15): medida para que el párrafo quede en DOS
     líneas (antes 40ch → 3 líneas; verificado 2 líneas en Chrome 1512). */
  max-inline-size: 60ch;
}

/* ---- Fila de control: link de sección + flechas, PEGADA al carrusel ---- */
.shop-carousel {
  margin-block-start: var(--space-xl);
}
.shop__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-block-end: var(--space-md); /* pegada al carrusel */
}
/* Flechas ocultas hasta que el JS del carrusel las engancha
   (initShopCarousel añade .shop-carousel--ready). Sin JS queda solo
   "Ir al shop" y el carrusel scrollea nativo. */
.shop__controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  visibility: hidden;
}
.shop__controls.shop-carousel--ready {
  visibility: visible;
}
.shop-carousel__btn {
  background: none;
  border: 0;
  padding: 0.25rem;
  color: var(--nahuen-bordo);
  cursor: pointer;
  transition: opacity var(--transition-interactive);
}
/* Lucide arrow-left/arrow-right: 24x24, trazo 1.5 */
.shop-carousel__btn svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}
.shop-carousel__btn[disabled] {
  opacity: 0.35; /* eco del estado inactivo del panel #lineas */
  cursor: default;
}

/* ---- Carrusel: scroller NATIVO (basic.space) ---- */
.shop-carousel__viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none; /* sin scrollbar visible */
}
.shop-carousel__viewport::-webkit-scrollbar {
  display: none;
}
/* Drag con mouse sobre el scroller nativo (initShopCarousel,
   data-carousel-native): mientras se arrastra, fuera el snap para que
   el scroll siga 1:1 a la mano. */
.shop-carousel--ready .shop-carousel__viewport {
  cursor: grab;
}
.shop-carousel__viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}
.shop-carousel__track {
  display: flex;
  gap: 16px; /* gap exacto de la referencia basic.space */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- Card basic.space: imagen 4:5 + nombre + precio + tag ---- */
.shop-card {
  flex: 0 0 auto;
  inline-size: 16.6%; /* ≈6 visibles en desktop (referencia) */
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: start;
}
@media (max-width: 64em) {
  .shop-card {
    inline-size: 28%;
  }
}
@media (max-width: 48em) {
  .shop-card {
    inline-size: 40vw; /* mobile de la referencia */
  }
}
/* La CAJA de color manda (4:5 pareja en todas); el cutout se funde con
   mix-blend-multiply, como los packshots de basic.space.
   Ronda fondos de marca 2026-07-08 (fix 11): el gris #f7f7f5 de la
   referencia se reemplaza por el MANTECA del cliente (--nahuen-manteca).
   El multiply sigue funcionando: los blancos del packshot toman el tono
   manteca (cálido, de marca) y los medios apenas se entibian — verificado
   en Chrome sobre los 6 cutouts. */
.shop-card__media {
  background: var(--nahuen-manteca);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: clamp(0.875rem, 6%, 1.5rem);
  margin-block-end: var(--space-sm);
  overflow: hidden;
  /* Ronda 2026-07-09 (fix 6): mismo radio de tarjeta que las access-cards
     (20px) en la zona de imagen manteca; overflow hidden ya recorta. */
  border-radius: var(--home-radius-card);
}
.shop-card__cutout {
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hover: zoom sutil (no hay segunda foto por producto todavía; cuando
   exista la sesión de producto, el hover pasa a swap de imagen). */
@media (hover: hover) {
  .shop-card:hover .shop-card__cutout {
    transform: scale(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  .shop-card__cutout {
    transition: none !important;
  }
}
.shop-card__name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem; /* 14px medium (referencia) */
  line-height: 1.4;
  white-space: nowrap; /* 1 línea (line-clamp-1 de la referencia) */
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-card__price {
  font-family: var(--font-body);
  font-size: 0.875rem; /* 14px (referencia) */
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  margin-block-start: 2px;
}
.shop-card__tag {
  align-self: flex-start;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.625rem; /* tag chico de la referencia */
  letter-spacing: 0.04em; /* mínimo — nada de tracking ancho */
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--nahuen-ink) 6%, var(--nahuen-cream));
  padding: 0.3em 0.6em;
  margin-block-start: var(--space-xs);
}

/* ============================================================
   7. SEASONAL — banda rosa (section--rosa) con el marco lateral del sistema
   (como #une): foto de la torta a la izquierda (parallax + wipe) con el
   sello 25 años flotando, y a la derecha kicker · titular DM Serif mayúsculas
   (líneas fijas, anti-reflow) · bajada · 1 CTA.
   RONDA FONDOS DE MARCA 2026-07-08 (fixes 15-16):
   · columna de la foto a 50/50 con la del texto (antes minmax(0,24rem))
   · foto con border-radius --home-radius (30px; overflow hidden de la
     ventana parallax recorta)
   · capa de ilustración bg-seasonal.png (manos con granos, trazo malva
     claro, 1501×697) ARRIBA del rosa, PEGADA al borde superior derecho
     (top right, no-repeat, tamaño natural en desktop — la ilustración vive
     en la mitad derecha del PNG y asoma tras la columna del texto).
   ============================================================ */
#seasonal {
  background-image: url(./img/bg/bg-seasonal.png);
  background-repeat: no-repeat;
  background-position: top right;
  /* Ronda 2026-07-09 b (fix nuevo 5): la capa 25% MÁS CHICA — 75% de su
     tamaño natural (1501 → 1126px de ancho; el min() evita que desborde
     la banda en desktops angostos). El mobile ≤64em conserva su override
     100% auto (regla posterior). */
  background-size: min(1126px, 100%) auto;
  /* Ronda 2026-07-09 b (fix 7): espaciados top/bottom EMPAREJADOS con la
     sección de arriba — #lineas deja su primer texto a 64px del borde
     (padding nuevo del panel) y #seasonal pasa del tier narrative
     (138.7px @1512) a los MISMOS 64px fijos arriba y abajo. */
  padding-block: 64px;
}
@media (max-width: 64em) {
  /* Apilado: la capa escala al ancho de la banda (las manos no dominan). */
  #seasonal {
    background-size: 100% auto;
  }
}
.seasonal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 (fix 15) */
  gap: clamp(2rem, 1.5rem + 4vw, 5rem);
  align-items: stretch;
}
@media (max-width: 64em) {
  .seasonal__grid {
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 1.2rem + 3vw, 2.75rem);
  }
}
.seasonal__photo {
  width: 100%;
  min-block-size: 26rem;
  border-radius: var(--home-radius); /* 30px (fix 15); overflow ya hidden */
}
@media (max-width: 64em) {
  .seasonal__photo {
    aspect-ratio: 4 / 5;
  }
}
.seasonal__copy {
  align-self: center;
}
.seasonal__title {
  /* Ronda 2026-07-09 (fix 7): misma familia/peso que los demás h2 del
     sitio (Beaufort 700 uppercase, como shop/locations/une) — fuera el
     DM Serif que el cliente veía "distinto". Tamaño --text-h2 intacto;
     líneas fijas + focus-blur-resolve (whole-block, anti-reflow por
     construcción) — re-verificado Δ=0 tras el cambio de fuente. */
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--nahuen-bordo);
  margin-block-start: var(--space-sm);
}
.seasonal__body {
  max-inline-size: 42ch;
  /* Ronda 2026-07-09 (fix 8): mismo calibre que los párrafos de bloque
     de une/locations (--text-detail 13px; antes --text-body-sm 15px). */
  font-size: var(--text-detail);
  line-height: 1.6;
  color: var(--color-text);
  margin-block-start: var(--space-md);
}
.seasonal__cta {
  margin-block-start: var(--space-lg);
}

/* Sello 25 años giratorio: flota en la esquina superior derecha de la foto,
   en bordó (sobre la foto clara de la torta). */
.seal {
  position: absolute;
  inset-block-start: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  inset-inline-end: clamp(-0.75rem, -1.25rem + 2vw, 1.25rem);
  width: clamp(5.5rem, 4rem + 5vw, 8.5rem);
  color: var(--nahuen-bordo);
  filter: var(--shadow-cutout);
  animation: seal-rotate 45s linear infinite;
  z-index: 3;
}
.seal svg {
  display: block;
  width: 100%;
  height: auto;
}
@keyframes seal-rotate {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .seal {
    animation: none;
  }
}

/* ============================================================
   8. LOCATIONS — patrón Keeper: foto de sede a la izquierda; a la
   derecha intro script + serif y el listado de sedes con dirección,
   horario y teléfono, separadas por línea fina.
   Fix cliente 2026-07-06 c: "achicar BASTANTE el alto" — menos padding
   vertical de sección, foto contenida (columna acotada, ya no 55% del
   ancho) y ritmo del listado más compacto. Parallax 125% y datos de
   sedes intactos.
   ============================================================ */
#locations {
  padding-block: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
}
.locations__grid {
  display: grid;
  /* foto contenida: columna con techo, el texto respira al lado */
  grid-template-columns: minmax(0, 21rem) 1fr;
  gap: clamp(2rem, 1.5rem + 4vw, 5rem);
  /* RÉGIMEN ÚNICO DE IMÁGENES (fixes 1+2+9): la caja de la foto = su
     columna (21rem) ALINEADA a la columna de al lado — el alto lo define
     la caja (stretch a la fila del listado), la imagen se adapta (cover). */
  align-items: stretch;
}
@media (max-width: 64em) {
  .locations__grid {
    grid-template-columns: 1fr;
  }
}
.locations__photo {
  width: 100%;
  min-block-size: 22rem; /* piso razonable si el listado se compacta */
  /* Ronda 2026-07-09 (fix 9): radio de tarjeta 20px — la ventana parallax
     ya recorta con overflow hidden. */
  border-radius: var(--home-radius-card);
}
@media (max-width: 64em) {
  /* Apilado: la caja declara su alto (sin columna vecina de referencia). */
  .locations__photo {
    aspect-ratio: 4 / 5;
  }
}
.locations__script-intro {
  font-family: var(--font-display-season);
  font-size: var(--text-season);
  color: var(--nahuen-bordo);
  line-height: 1;
}
.locations__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h2);
  text-transform: uppercase;
  line-height: 1.1;
  max-inline-size: 18ch;
  margin-block-start: var(--space-sm);
  color: var(--nahuen-bordo);
}
.locations__list {
  margin-block-start: var(--space-lg); /* ritmo compacto (fix cliente) */
}
.location-row {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-lg);
  row-gap: var(--space-xs);
  align-items: baseline;
  padding-block: var(--space-sm); /* filas más bajas (fix cliente) */
  border-block-start: var(--line-thickness) solid
    color-mix(in srgb, var(--color-text) 15%, transparent);
}
.location-row:last-of-type {
  border-block-end: var(--line-thickness) solid
    color-mix(in srgb, var(--color-text) 15%, transparent);
}
.location-row__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-h3);
}
.location-row__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: end;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: 1.5;
}
.location-row__hours {
  font-weight: 500;
  letter-spacing: 0.06em;
}
.location-row__phone {
  color: var(--nahuen-bordo-detalle);
}
/* .locations__cta eliminado (fix cliente 2026-07-06 d, #10: fuera el botón
   "Encontrar sede" — el listado de sedes cierra el bloque). */

/* ============================================================
   FLECHA LARGA EDITORIAL — fix Agentation #6/#7: el "→" tipográfico se
   sustituye por SVG de línea fina + punta pequeña. El hover lo gobierna
   GSAP (initLinkArrowHover, motion.js): el shaft se extiende + shift sutil.
   ============================================================ */
.link-arrow__arrow svg {
  display: block;
  width: 1.75em;
  height: auto;
  overflow: visible;
}
/* Con GSAP activo (clase añadida por initLinkArrowHover) se anula el
   translateX del framework para no duplicar el movimiento; sin GSAP, ese
   translateX CSS queda como fallback del hover. */
.link-arrow--gsap:hover .link-arrow__arrow,
.link-arrow--gsap:focus-visible .link-arrow__arrow {
  transform: none;
}

/* ============================================================
   UNDERLINE-LINK — hover de subrayado copiado EXACTO de
   harleyofscotland.com (mandato del cliente, leído de su CSS real,
   assets/css/main.css, 2026-07-06):
     · dos líneas de 1px al 50% de alfa apiladas en bottom
     · reposo: ::before visible (scaleX 1, origen derecha)
     · hover: ::before colapsa hacia la derecha (0.3s) y ::after se
       redibuja de IZQUIERDA a DERECHA (0.3s con 0.3s de delay),
       ambas con cubic-bezier(0.645, 0.045, 0.355, 1)
     · al salir: reset instantáneo (transition 0s), como Harley.
   ES el hover de enlaces de texto del sitio (ronda cliente fix #3):
   reemplaza al link-arrow con flecha en toda la Home.
   Tipografía: mismo tier caption small-caps del sistema (Harley usa
   13px/0.1em — coincide con --text-caption + tracking 0.1em).
   ============================================================ */
.underline-link {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Harley usa line-height 2 (línea a ~6px del texto); fix Agentation
     2026-07-06 #6: subrayado más pegado — caja más baja. */
  line-height: 1.5;
}
.underline-link::before,
.underline-link::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: 100%;
  height: 1px;
  background: color-mix(in srgb, currentColor 50%, transparent);
  will-change: transform;
  transition: transform 0s;
}
.underline-link::before {
  transform: scaleX(1);
  transform-origin: right;
}
.underline-link::after {
  transform: scaleX(0);
  transform-origin: left;
}
.underline-link:hover::before,
.underline-link:focus-visible::before {
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.underline-link:hover::after,
.underline-link:focus-visible::after {
  transform: scaleX(1);
  transition: transform 0.3s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media (prefers-reduced-motion: reduce) {
  .underline-link::before,
  .underline-link::after {
    transition: none !important;
  }
}

/* ============================================================
   BOTÓN RELLENO — ronda cliente 2026-07-06 (fix #4): el CTA primario
   pasa a ser un botón LLENO (forma recta intacta, radius 0 del sistema).
   .btn--solid          → bordó pleno + texto cream (la variante que pidió
                          el cliente; para fondos claros — la usa el
                          botón-bloque primario del nav).
   .btn--solid-inverse  → cream pleno + texto bordó (la ejecución del
                          relleno SOBRE la banda bordó del hero: bordó
                          sobre bordó es invisible; el par filled/outline
                          mantiene la jerarquía pedida).
   ============================================================ */
.btn--solid {
  background: var(--nahuen-bordo);
  border-color: var(--nahuen-bordo);
  color: var(--color-text-inverse);
}
.btn--solid:hover,
.btn--solid:focus-visible {
  background: transparent;
  color: var(--nahuen-bordo);
}
.btn--solid-inverse {
  background: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
  color: var(--nahuen-bordo);
}
/* Ronda 2026-07-09 b (fix nuevo 7): hover del "Pedir en línea" del hero →
   CELESTE de marca con texto bordó (antes: transparente + texto cream).
   Contraste bordó/celeste 6.82:1 (AA). La transición 350ms del sistema ya
   viene de .btn (background/color var(--transition-interactive)). */
.btn--solid-inverse:hover,
.btn--solid-inverse:focus-visible {
  background: var(--nahuen-celeste);
  border-color: var(--nahuen-celeste);
  color: var(--nahuen-bordo);
}

/* ============================================================
   NAV-BAR — header copiado de diamondrosesanctuary.com (mandato del
   cliente, MEDIDO 2026-07-06 en su sitio real):
     · header fijo de 52px, SIEMPRE opaco (DR no cambia al scroll)
     · celdas separadas por hairlines verticales al 25% de alfa
     · celda 1: wordmark · celda 2: info de dos líneas (11px) ·
       celda 3: menú (links chicos, gap 24px) · celdas finales: DOS
       botones-bloque de altura completa (265×52 en DR; acá fluidos),
       el primario RELLENO pleno (su "Book Now") y el secundario claro.
   Traducción Nahuen: cream de fondo, tinta bordó, hairlines bordó 25%,
   botón primario bordó pleno + texto cream (el "filled" pedido en el
   fix #4, acá sobre fondo claro donde es visible).
   ============================================================ */
:root {
  --nav-bar-h: 3.25rem; /* 52px medidos en Diamond Rose */
}
.nav-bar {
  height: var(--nav-bar-h);
  padding: 0; /* las celdas gobiernan su propio padding */
  background: var(--nahuen-cream);
  color: var(--nahuen-ink);
  border-block-end: var(--line-thickness) solid
    color-mix(in srgb, var(--nahuen-bordo) 25%, transparent);
  gap: 0;
}
/* DR no tiene estado de scroll: neutralizamos la sombra de .nav--solid */
.nav-bar.nav--solid {
  background: var(--nahuen-cream);
  box-shadow: none;
}
.nav-bar .nav__logo {
  display: flex;
  align-items: center;
  align-self: stretch;
  height: auto;
  padding-inline: var(--space-lg) var(--space-md);
  border-inline-end: var(--line-thickness) solid
    color-mix(in srgb, var(--nahuen-bordo) 25%, transparent);
  color: var(--nahuen-bordo);
}
.nav-bar .nav__logo svg {
  height: clamp(1rem, 0.85rem + 0.6vw, 1.25rem);
  width: auto;
}
.nav-bar__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px; /* medido en DR (.flex_txt) */
  align-self: stretch;
  padding-inline: var(--space-md);
  border-inline-end: var(--line-thickness) solid
    color-mix(in srgb, var(--nahuen-bordo) 25%, transparent);
  font-family: var(--font-body);
  font-size: 0.6875rem; /* 11px — medido en DR (11.34px) */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.nav-bar__info-top {
  opacity: 0.55;
}
.nav-bar__info-bottom {
  font-weight: 500;
  color: var(--nahuen-bordo);
}
.nav-bar__menu {
  gap: var(--space-lg); /* DR: 24px entre links */
  padding-inline: var(--space-md);
  margin-inline-end: auto;
}
.nav-bar .nav__link {
  font-size: 0.6875rem; /* tier chico del header DR */
  letter-spacing: 0.08em;
}
.nav-bar__actions {
  display: none;
  align-self: stretch;
}
.nav-bar__block-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem; /* medido en DR (12.1px) */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    background var(--transition-interactive),
    color var(--transition-interactive);
}
.nav-bar__block-btn--primary {
  /* el "Book Now" de DR = relleno pleno de marca + texto claro */
  background: var(--nahuen-bordo);
  color: var(--color-text-inverse);
}
.nav-bar__block-btn--primary:hover,
.nav-bar__block-btn--primary:focus-visible {
  background: var(--nahuen-bordo-detalle);
  color: var(--color-text-inverse);
}
.nav-bar__block-btn--secondary {
  background: var(--nahuen-cream);
  color: var(--nahuen-ink);
  border-inline-start: var(--line-thickness) solid
    color-mix(in srgb, var(--nahuen-bordo) 25%, transparent);
}
.nav-bar__block-btn--secondary:hover,
.nav-bar__block-btn--secondary:focus-visible {
  background: var(--nahuen-rosa);
}
@media (min-width: 64em) {
  .nav-bar__actions {
    display: flex;
  }
}
@media (max-width: 63.9375em) {
  .nav-bar__info {
    display: none;
  }
  .nav-bar .hamburger {
    margin-inline-end: var(--space-md);
  }
}
/* El header ahora es una barra opaca: el hero arranca debajo de ella
   (en DR la sección de apertura también nace bajo su header de 52px). */
main > .hero-crumb {
  /* Despeja la nav fija + gap superior igual al marco lateral (fix Agentation
     2026-07-08: "separación en el top con el header, la misma que a los
     costados"). */
  margin-block-start: calc(var(--nav-bar-h) + var(--home-frame));
}

/* ============================================================
   SIDE-SPACE — recreación 1:1 de la sección .space_side de la Home de
   Diamond Rose Sanctuary (MEDIDA 2026-07-06 en su sitio):
     · sección de viewport completo con MARCO de 10px sobre el fondo
       (su body beige → nuestro cream) y gap central de 10px
     · mitad izquierda: panel de color pleno (su verde → nuestro bordó)
       con padding 32/28/42: título corto arriba (~42px), lista de
       ítems display (~48px, line-height 0.9, gap 10px, inactivos al
       35% de opacidad, activo con flecha) y caption chico abajo
       (~13px, medida angosta ~375px)
     · mitad derecha: imágenes apiladas en absolute que se funden con
       blur(10px) → 0 al cambiar de ítem (initHoverPanels, motion.js).
   Fallback sin JS: la primera imagen y el primer caption visibles.
   FUSIÓN 2026-07-06 g: el contenido del panel es ahora el del Sweet
   Bakery (banda propia eliminada) — título aprobado, ítems dulces,
   macros reales, cierre "Ver Sweet Bakery". Ronda Agentation 2026-07-06 h:
   kicker "Sweet Bakery" eliminado y título sin script-accent (script
   vetado también en este panel).
   ============================================================ */
/* Ronda fondos de marca 2026-07-08 (fix 13): #lineas pasa a SANGRE COMPLETA
   — fuera el marco cream de 10px y el gap central; panel y muro de fotos
   pegados, borde a borde del viewport. */
.side-space {
  background: var(--nahuen-cream);
  padding: 0;
}
.side-space__frame {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0; /* columnas pegadas (fix 13) */
  /* Ronda 2026-07-09 (fix 10): sección APENAS más baja (−15%: 50rem →
     42.5rem, 100svh → 86svh) — el panel no tiene padding-block propio,
     el alto lo gobierna este min-height. */
  min-height: min(86svh, 42.5rem);
}
.side-space__panel {
  background: var(--nahuen-bordo);
  color: var(--color-text-inverse);
  display: flex;
  flex-direction: column;
  /* Ronda 2026-07-09 b (fix 6): comprimir el interior — título más abajo
     (padding-top 32 → 64px) y CTA más arriba (padding-bottom 42 → 64px);
     la lista sigue centrada (margin-block auto absorbe el resto) y el
     bloque queda más junto y centrado en el panel.
     Fix nuevo 1: el lateral pasa de los 28px de DR al ESTÁNDAR de guías
     del home (--home-frame + --home-inset = 42px @1512 — la misma guía
     del contenido de #accesos/#shop/#locations; #lineas es full-bleed,
     así que el padding del panel ES su guía). */
  padding: 64px calc(var(--home-frame) + var(--home-inset));
}
.side-space__title {
  font-family: var(--font-heading);
  font-weight: 700;
  /* Ronda 2026-07-09 (fix 5): MISMO tamaño que el título del Shop
     (--text-h2 ≈48px) — se revierte el ×1.5 (72px) de la ronda anterior.
     El wrap sigue en palabras (split words+chars sin revert) —
     anti-reflow re-verificado Δ=0. */
  font-size: var(--text-h2);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  max-inline-size: 16ch; /* 3 líneas, sin huérfana (DR rompe en 2) */
}
.side-space__list {
  display: flex;
  flex-direction: column;
  gap: 10px; /* gap medido en DR (.list_hovers) */
  margin-block: auto; /* lista centrada verticalmente, como en DR */
  align-items: flex-start;
}
.side-space__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(
    1.45rem,
    1.15rem + 1.35vw,
    2.15rem
  ); /* achicado (fix Agentation 2026-07-08); antes ~48px */
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: inherit;
  opacity: 0.35; /* inactivo medido en DR */
  cursor: pointer;
  text-align: start;
  transition:
    opacity var(--transition-interactive),
    padding var(--transition-interactive);
}
.side-space__item:hover,
.side-space__item:focus-visible {
  opacity: 0.7;
}
.side-space__item.is-active {
  opacity: 1;
  /* sitio para la flecha + aire (DR: 16px + 10px) */
  padding-inline-start: calc(2em * 0.55 + 12px);
}
.side-space__arrow {
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  translate: 0 -50%;
  width: 1.1em;
  opacity: 0;
  transform: scale(0);
  transform-origin: left center;
  pointer-events: none;
}
.side-space__arrow svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.side-space__captions {
  position: relative;
  max-inline-size: 42ch; /* medida angosta del caption DR (~375px) */
  /* Alto reservado de base (el JS lo ajusta al caption más alto, como DR);
     evita el colapso del contenedor con hijos absolute sin JS. */
  min-height: 5.5em;
}
.side-space__caption {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  font-family: var(--font-body);
  font-size: var(--text-detail); /* calibre Diamond Rose (12-13px) */
  line-height: 1.6;
  opacity: 0;
  visibility: hidden;
}
/* Fallback sin JS/GSAP: primer caption y primera imagen visibles */
.side-space__caption:first-child {
  opacity: 1;
  visibility: visible;
}
/* Cierre del panel (fusión g): salida a la página Sweet Bakery, mismo
   underline-link Harley del sitio, bajo el bloque de captions. */
.side-space__cta {
  margin-block-start: var(--space-lg);
}
.side-space__media {
  position: relative;
  overflow: hidden;
  min-height: 20rem;
}
.side-space__img {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
}
.side-space__img:first-child {
  opacity: 1;
  visibility: visible;
}
.side-space__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Ronda fondos de marca 2026-07-08 (fix 14): cada panel del muro es también
   ventana parallax (data-parallax-window, imagen al 125% — Harley). Esta
   regla re-gana el height que .side-space__img img (0,1,1) le pisaba a
   .parallax-window__img (0,1,0); position/inset/top -12.5% llegan de la
   clase base. El hover-swap NO pelea: anima autoAlpha/blur del contenedor,
   el parallax anima yPercent de la img — nodos y propiedades disjuntos. */
.side-space__img .parallax-window__img {
  height: 125%;
}
@media (max-width: 64em) {
  .side-space__frame {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .side-space__panel {
    min-height: 26rem;
    gap: var(--space-xl);
  }
  .side-space__media {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
}

/* ============================================================
   FOOTER-IM — layout copiado 1:1 de insidermadeira.com (mandato del
   cliente, MEDIDO 2026-07-06 en su sitio):
     · franja superior: logo grande centrado (padding ~30px) sobre
       hairline de ancho completo
     · cuerpo 50/50 con hairline vertical central: izquierda grilla
       2×2 de grupos (título serif 21px + links 14px, row-gap ~47px,
       padding-block 47/79), derecha newsletter CENTRADO (tagline 14px,
       claim serif ~19px/1.2 centrado, campo email compacto subrayado
       con OK, consentimiento 10px)
     · sub-footer: hairline superior, fila de 3 celdas a 10px
       (© / legales / crédito), ~39px de alto.
   Traducción Nahuen: banda bordó del sistema, hairlines cream 25%,
   serif Beaufort para los títulos de grupo.
   ============================================================ */
.footer-im {
  padding-block: 0; /* el padding lo gobiernan las franjas */
  /* Ronda fondos de marca 2026-07-08 (fix 17): capa de ilustración
     bg-footer.png (mate NAHUEN, baguette y torta en trazo cream de alfa
     muy baja, 1437×698) ARRIBA del bordó, cubriendo el footer COMPLETO
     (top + main + sub): COVER centrado = marca de agua uniforme a
     cualquier alto/ancho, sin repetir motivos. */
  background-image: url(./img/bg/bg-footer.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.footer-im__top {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  border-block-end: var(--line-thickness) solid
    color-mix(in srgb, var(--nahuen-cream) 25%, transparent);
}
.footer-im__logo {
  display: block;
  width: clamp(11rem, 9rem + 10vw, 19rem); /* logo grande, pieza de cierre */
  height: auto;
}
.footer-im__main {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.footer-im__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: clamp(2rem, 1.5rem + 2vw, 3rem); /* ~47px medidos */
  padding-block: clamp(2.5rem, 2rem + 1.5vw, 3rem)
    clamp(3.5rem, 3rem + 2vw, 5rem); /* 47/79 medidos */
  padding-inline: var(--space-section-x) var(--space-xl);
}
.footer-im__group-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.3125rem; /* 21px medidos (GT Super 21/21) */
  line-height: 1;
  margin-block-end: 1.3125rem; /* 21px medidos */
}
.footer-im__link {
  display: block;
  font-family: var(--font-body);
  font-size: 0.875rem; /* 14px medidos (PP Mori) */
  line-height: 1.2;
  padding-block: var(--space-xs);
  color: var(--color-text-inverse);
  opacity: 0.9;
  transition: opacity var(--transition-feedback);
}
.footer-im__link:hover,
.footer-im__link:focus-visible {
  opacity: 1;
  text-decoration: underline;
}
.footer-im__news {
  display: flex;
  justify-content: center;
  align-items: center;
  border-inline-start: var(--line-thickness) solid
    color-mix(in srgb, var(--nahuen-cream) 25%, transparent);
  padding: var(--space-2xl) var(--space-xl);
}
.footer-im__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-inline-size: 32rem; /* columna de 506px medida */
}
.footer-im__tagline {
  font-family: var(--font-body);
  font-size: 0.875rem; /* 14px medidos */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-block-end: 1.3125rem; /* 21px medidos */
}
.footer-im__claim {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); /* ~19px medidos */
  line-height: 1.2;
  max-inline-size: 30ch;
}
.footer-im__field {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block-start: 1.5rem; /* ~24px medidos */
  margin-block-end: 0.5rem; /* ~8px medidos */
  border-block-end: var(--line-thickness) solid var(--nahuen-cream);
}
.footer-im__input {
  /* Fix cliente 2026-07-06 d (#11): apenas más ancho que los ~171px
     medidos en Insider Madeira. */
  width: 15rem;
  padding-block: 0.5rem;
  background: transparent;
  border: 0;
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-size: 0.8125rem;
}
.footer-im__input::placeholder {
  color: color-mix(in srgb, var(--nahuen-cream) 60%, transparent);
}
.footer-im__input:focus-visible {
  outline: none;
}
.footer-im__field:focus-within {
  border-color: var(--color-text-inverse);
}
.footer-im__submit {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--color-text-inverse);
  padding-block: 0.5rem;
  cursor: pointer;
}
.footer-im__consent {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.footer-im__consent label {
  font-family: var(--font-body);
  font-size: 0.6875rem; /* letra chica (10px medidos; 11px por AA) */
  opacity: 0.8;
}
.footer-im__sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  min-height: 2.4375rem; /* 39px medidos */
  padding-block: var(--space-xs);
  padding-inline: var(--space-section-x);
  border-block-start: var(--line-thickness) solid
    color-mix(in srgb, var(--nahuen-cream) 25%, transparent);
  font-family: var(--font-body);
  font-size: 0.6875rem; /* letra chica del sitio (fix Agentation #11) */
  letter-spacing: 0.03em;
  opacity: 0.7;
}
.footer-im__sub a {
  color: var(--color-text-inverse);
}
.footer-im__sub a:hover,
.footer-im__sub a:focus-visible {
  text-decoration: underline;
}
@media (max-width: 64em) {
  .footer-im__main {
    grid-template-columns: 1fr;
  }
  .footer-im__news {
    border-inline-start: 0;
    border-block-start: var(--line-thickness) solid
      color-mix(in srgb, var(--nahuen-cream) 25%, transparent);
  }
  .footer-im__links {
    padding-inline: var(--space-section-x);
  }
}
@media (max-width: 30em) {
  .footer-im__links {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   COHERENCIA DE HOVER (fix Agentation 2026-07-06 #12) — el wipe del
   underline-link (Harley) es EL hover de enlaces del sitio: también en el
   menú del nav, el menú móvil, la celda de announcement y el footer.
   En nav/footer el estado de reposo va SIN línea (son listas de
   navegación, no CTAs en texto corrido): hover = la línea se dibuja de
   izquierda a derecha; al salir, se retira hacia la derecha (swap de
   transform-origin, mismo 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)).
   ============================================================ */
.nav-bar .nav__link,
.nav__mobile .nav__link,
.nav-bar__info-bottom,
.footer-im__link,
.footer-im__sub a {
  position: relative;
}
.footer-im__link {
  width: fit-content;
}
/* Los legales del sub-footer van sin clase — anular el subrayado por
   defecto de a:not([class]) del framework: acá el subrayado lo dibuja el
   wipe del hover, como en el resto de los enlaces del sitio. */
.footer-im__sub a {
  text-decoration: none;
}
.nav-bar .nav__link::after,
.nav__mobile .nav__link::after,
.nav-bar__info-bottom::after,
.footer-im__link::after,
.footer-im__sub a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: 100%;
  height: 1px;
  background: color-mix(in srgb, currentColor 50%, transparent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.nav-bar .nav__link:hover,
.nav-bar .nav__link:focus-visible,
.nav__mobile .nav__link:hover,
.nav__mobile .nav__link:focus-visible {
  border-color: transparent; /* fuera el hover de borde del framework */
}
.footer-im__link:hover,
.footer-im__link:focus-visible,
.footer-im__sub a:hover,
.footer-im__sub a:focus-visible {
  text-decoration: none; /* fuera el subrayado nativo: lo dibuja el wipe */
}
.nav-bar .nav__link:hover::after,
.nav-bar .nav__link:focus-visible::after,
.nav-bar .nav__link[aria-current="page"]::after,
.nav__mobile .nav__link:hover::after,
.nav__mobile .nav__link:focus-visible::after,
.nav-bar__info:hover .nav-bar__info-bottom::after,
.nav-bar__info:focus-visible .nav-bar__info-bottom::after,
.footer-im__link:hover::after,
.footer-im__link:focus-visible::after,
.footer-im__sub a:hover::after,
.footer-im__sub a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
@media (prefers-reduced-motion: reduce) {
  .nav-bar .nav__link::after,
  .nav__mobile .nav__link::after,
  .nav-bar__info-bottom::after,
  .footer-im__link::after,
  .footer-im__sub a::after {
    transition: none !important;
  }
}

/* ============================================================
   LENIS (scroll suave) — CSS recomendado por la librería. El resto de la
   integración vive en motion.js (initSmoothScroll, patrón oficial GSAP).
   ============================================================ */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}