:root {
  --bg: #070604;
  --bg-2: #100c08;
  --panel: rgba(18, 13, 8, 0.86);
  --panel-strong: rgba(26, 18, 10, 0.92);
  --text: #f6e4bf;
  --muted: rgba(246, 228, 191, 0.72);
  --faint: rgba(246, 228, 191, 0.52);
  --gold: #d9a45e;
  --gold-2: #f0c984;
  --gold-line: rgba(240, 201, 132, 0.28);
  --danger: #ffd0c7;
  --shadow: rgba(0, 0, 0, 0.46);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
}

body {
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.screen {
  position: fixed;
  inset: 0;
  display: none;
}

.screen.active {
  display: block;
}

.um-toast-host {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1000;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.um-toast {
  padding: 12px 14px;
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  background: rgba(14, 9, 5, 0.94);
  color: var(--text);
  box-shadow: 0 18px 45px var(--shadow);
}

.landing-screen {
  overflow-y: auto;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(7, 6, 4, 0.96), rgba(16, 12, 8, 0.98)),
    repeating-linear-gradient(90deg, rgba(240, 201, 132, 0.04) 0 1px, transparent 1px 112px);
  scroll-behavior: smooth;
  /* El nav va superpuesto y su fondo nunca es opaco (transparente arriba,
     vidrio translúcido al scrollear), así que no descuenta nada: cada
     sección alinea con el tope del viewport. Es además cómo
     está medido Figma — todas las "y" de cada sección arrancan en su
     propio borde, con la banda del nav incluida. */
  scroll-padding-top: 0;
}

/* Franja intermedia (861–1365px): snap por proximidad. Cerca del borde de
   una sección la rueda engancha y cae al inicio de la siguiente; dentro de
   las secciones más altas que la pantalla el scroll sigue libre.
   Desde 1366px NO se usa snap CSS: ahí manda section-scroll.js (una vuelta =
   siguiente sección) y las dos mecánicas se pelearían por el scrollTop.
   En mobile se deja suelto: las secciones son bastante más altas que el
   viewport y el enganche estorbaría al scroll táctil. */
@media (min-width: 861px) and (max-width: 1365px) {
  .landing-screen {
    scroll-snap-type: y proximity;
  }

  #hero-banner,
  #landing-how,
  #landing-find,
  #landing-story,
  #landing-faq,
  #landing-cta-footer {
    scroll-snap-align: start;
  }
}

/* Las alturas de sección en desktop viven al final del archivo
   (bloque "AJUSTE A PANTALLA"): necesitan ganarle en cascada a los
   :hover de .how-card, que se declaran más abajo. */

.landing-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 72px;
  padding: 12px clamp(18px, 5vw, 76px);
  border-bottom: 1px solid var(--gold-line);
  background: rgba(7, 6, 4, 0.7);
  backdrop-filter: blur(20px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

.landing-brand {
  display: grid;
  color: var(--text);
  font-family: var(--serif);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 0.9;
}

.landing-brand span {
  color: var(--muted);
  font-size: 1.05rem;
}

.landing-brand strong {
  color: var(--text);
  font-size: 1.7rem;
  font-weight: 700;
}

.landing-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 32px);
}

.landing-nav-links a {
  color: rgba(246, 228, 191, 0.76);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0;
}

.landing-nav-links a:hover {
  color: var(--gold-2);
}

.landing-nav-actions,
.landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.landing-link-button,
.landing-gold-button,
.landing-ghost-button,
.auth-back-btn,
.premium-button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  color: var(--text);
  background: rgba(20, 14, 8, 0.62);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.landing-gold-button,
.premium-button {
  border-color: rgba(240, 201, 132, 0.52);
  color: #201205;
  background: linear-gradient(135deg, #f0c984, #c4873d);
  font-weight: 800;
}

.landing-ghost-button {
  color: var(--text);
}

.landing-button-lg {
  min-height: 50px;
  padding: 0 24px;
}

.landing-hero {
  position: relative;
  min-height: calc(100svh - 72px);
  padding: 0;
  overflow: hidden;
}

.landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 56% 46%, rgba(240, 201, 132, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(7, 6, 4, 0.05), rgba(7, 6, 4, 0.28) 64%, rgba(7, 6, 4, 0.82));
  z-index: 1;
}

.landing-hero::after {
  content: "";
  position: absolute;
  left: clamp(18px, 5vw, 76px);
  right: clamp(18px, 5vw, 76px);
  bottom: 28px;
  height: 1px;
  background: linear-gradient(90deg, rgba(240, 201, 132, 0.52), transparent);
  z-index: 1;
}

.landing-hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
}

.landing-hero-content {
  position: relative;
  grid-column: 1;
  z-index: 2;
  max-width: 540px;
  padding-top: 0;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.78);
}

.landing-kicker,
.premium-eyebrow {
  margin: 0 0 12px;
  color: var(--gold-2);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.landing-hero h1,
.landing-section-heading h2,
.landing-final-cta h2,
.premium-panel h1,
.profile-panel h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.98;
}

.landing-hero h1 {
  max-width: 560px;
  font-size: clamp(4.1rem, 7vw, 6.25rem);
}

.landing-subtitle {
  max-width: 500px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.75;
}

.landing-hero-actions {
  margin-top: 32px;
}

.landing-hero-rail {
  position: absolute;
  z-index: 2;
  left: clamp(18px, 5vw, 76px);
  bottom: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--gold-2);
  font-family: var(--serif);
  font-size: 1rem;
  text-transform: uppercase;
}

.landing-hero-rail span:not(:last-child)::after {
  content: "·";
  padding-left: 14px;
  color: rgba(240, 201, 132, 0.64);
}

.landing-feature-showcase {
  width: 100%;
  margin: 0;
}

.landing-feature-showcase img {
  width: 100%;
  display: block;
  border: 1px solid rgba(240, 201, 132, 0.3);
  border-radius: 12px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
}

.landing-museum {
  position: relative;
  z-index: 1;
  min-height: 560px;
  display: grid;
  grid-template-columns: 1fr 1.18fr 1fr;
  gap: 22px;
  align-items: end;
  padding: 28px;
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(240, 201, 132, 0.06), transparent 24%),
    linear-gradient(145deg, rgba(30, 22, 14, 0.78), rgba(8, 6, 4, 0.88));
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.48);
}

.landing-museum::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 24px;
  height: 72px;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  transform: perspective(420px) rotateX(68deg);
  background: rgba(240, 201, 132, 0.05);
}

.museum-frame {
  position: relative;
  height: 360px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(240, 201, 132, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(240, 201, 132, 0.08), transparent 18%, transparent 82%, rgba(240, 201, 132, 0.08)),
    linear-gradient(180deg, #152018, #080907);
  box-shadow: inset 0 0 0 8px rgba(240, 201, 132, 0.05), 0 22px 50px rgba(0, 0, 0, 0.38);
}

.museum-frame-right {
  background:
    linear-gradient(90deg, rgba(240, 201, 132, 0.08), transparent 18%, transparent 82%, rgba(240, 201, 132, 0.08)),
    linear-gradient(180deg, #111722, #07080b);
}

.museum-frame span {
  max-width: 160px;
  color: var(--gold-2);
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}

.museum-display {
  height: 430px;
  display: grid;
  align-content: end;
  justify-items: center;
  padding: 34px 22px 58px;
  border: 1px solid rgba(240, 201, 132, 0.3);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(240, 201, 132, 0.08), transparent 34%),
    linear-gradient(180deg, #21180f, #0b0805);
}

.museum-brain-mark {
  width: 104px;
  height: 104px;
  margin-bottom: 40px;
  border: 2px solid var(--gold-2);
  border-radius: 50%;
  position: relative;
}

.museum-brain-mark::before,
.museum-brain-mark::after {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  width: 32px;
  border: 2px solid var(--gold-2);
  border-radius: 50%;
}

.museum-brain-mark::before {
  left: 18px;
}

.museum-brain-mark::after {
  right: 18px;
}

.museum-book {
  width: min(260px, 80%);
  height: 88px;
  border: 1px solid rgba(240, 201, 132, 0.34);
  border-radius: 8px 8px 20px 20px;
  background:
    linear-gradient(90deg, rgba(246, 228, 191, 0.72) 0 49%, rgba(150, 101, 48, 0.72) 49.2% 50.8%, rgba(246, 228, 191, 0.72) 51%),
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(93, 57, 28, 0.2) 12px 13px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.38);
}

.landing-section {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 86px 0;
}

.landing-story,
.landing-evidence-section {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 46px;
  align-items: start;
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}

.landing-section-heading h2,
.landing-final-cta h2 {
  max-width: 760px;
  font-size: 3.35rem;
}

.story-copy p,
.evidence-copy p,
.faq-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 1.14rem;
  line-height: 1.9;
}

.story-copy {
  display: grid;
  gap: 18px;
}

.story-metrics {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.story-metrics span {
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  color: var(--muted);
  background: linear-gradient(180deg, rgba(29, 20, 12, 0.72), rgba(10, 7, 4, 0.76));
}

.story-metrics strong {
  color: var(--gold-2);
  font-family: var(--serif);
  font-size: 1.8rem;
}

.route-grid,
.myth-grid,
.benefit-grid,
.faq-grid {
  display: grid;
  gap: 16px;
  margin-top: 34px;
}

.route-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.route-card,
.myth-card,
.benefit-grid span,
.faq-grid details {
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(29, 20, 12, 0.84), rgba(12, 8, 5, 0.88));
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.3);
}

.route-card {
  min-height: 238px;
  padding: 24px;
}

.route-card span {
  color: var(--gold-2);
  font-family: var(--serif);
  font-size: 2.1rem;
}

.route-card h3,
.myth-card h3,
.glossary-item h2 {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: 0;
}

.route-card p,
.myth-card p,
.glossary-item p {
  color: var(--muted);
  line-height: 1.7;
}

/*
  "¿Cómo funciona?" (Figma 124:1357 desktop / 258:617 mobile). Fondo
  compartido entre ambos breakpoints. En reposo: número chico arriba +
  ícono SVG estático. En hover (solo desktop, con puntero real): el
  ícono cambia a GIF animado y el número crece como marca de agua
  detrás del texto — no hay forma de pausar un <img> GIF con CSS, así
  que el SVG se usa para el reposo y el GIF queda reservado al hover
  (ver nota de la migración: assets/images/GIF_SVG/<nombre>.gif|svg).
*/
.how-section {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: clamp(64px, 10vw, 140px) clamp(20px, 6vw, 160px) 0;
}

.how-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.how-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.how-bg-tint {
  position: absolute;
  inset: 0;
  background: rgba(29, 25, 77, 0.25);
}

.how-title {
  position: relative;
  z-index: 1;
  margin: 0 0 35px;
  text-align: center;
  color: #fdfffe;
  font-family: "Nivella", var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 5.2rem);
  line-height: 1.1;
}

/*
  min-height: 689px = el alto de una card en hover (el estado más alto
  posible). Sin esto, al expandirse una card el contenedor flex crecía
  con ella, empujando toda la sección hacia arriba (se "levantaba" al
  pasar el mouse). Reservando ya ese espacio, las cards en reposo
  (646px) simplemente quedan con hueco vacío arriba dentro de la fila
  (absorbido por align-items:flex-end), y la sección nunca cambia de
  tamaño sin importar cuál card esté en hover.
*/
/*
  flex-wrap:nowrap + cards que encogen (flex:1 1 0): con wrap, el
  navegador acomoda las cards a su ancho base antes de encogerlas, así
  que a 1180 (tablet apaisada / laptop chica) 3 cards de 505 no entraban
  y la fila se partía en 2+1, estirando la sección a 1533. Sin wrap
  reparten el ancho disponible y el tope de 505 mantiene el tamaño de
  Figma en desktop.
*/
.how-cards {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(16px, 2vw, 32px);
  min-height: clamp(470px, 35.89vw, 689px);
  margin-top: auto;
}

/*
  Medidas exactas dadas por el usuario (verificadas contra Figma
  253:1039 cerrado / 253:1040 abierto):
    cerrado: 505x546, padding 100 59, justify-content:flex-end
    abierto: 505x589, padding 60 59, sin justify-content (default
      flex-start) + gap -243px logrado con margin-bottom negativo en
      .how-card-content (mismo truco que mobile: empuja el número
      gigante, que va después en el flujo, hacia arriba).
  Alto SÍ cambia entre estados (43px) — la clave para que no afecte a
  las cards vecinas es .how-cards { align-items: flex-end }, no fijar
  una altura única.
*/
/*
  justify-content: flex-end (spec real de Figma) + p con margin-top:auto:
  el párrafo ya no vive dentro de .how-card-content junto al ícono/
  título — es hermano directo, después del grupo. Con flex-end, TODO el
  espacio libre iría arriba del grupo (empujando número/ícono/título a
  distinta altura según cuánto mida el párrafo — el bug real reportado:
  "01" desalineado vs las demás). Con el párrafo separado y
  margin-top:auto, es EL PÁRRAFO el que absorbe el espacio libre — así
  el grupo número+ícono+título queda siempre a la misma altura fija
  (justo debajo del padding-top) en las 3 cards, Y el párrafo siempre
  toca el padding-bottom (100px del fondo), sin importar sus líneas.
  Alto +100px (546→646, 589→689) para que el texto no quede pegado al
  borde ni se corte.
*/
/*
  Medidas en vw sobre la base 1920 del diseño (505 = 26.3vw, 646 =
  33.65vw, padding 100/59 = 5.21/3.07vw, etc.) con clamp: así la card
  encoge en tablet en vez de desbordar. min-height en vez de height
  fija — con height + overflow:hidden el contenido se cortaba al
  achicarse; el alto de la fila ya está reservado en .how-cards, así
  que el hover sigue sin mover la sección.
*/
.how-card {
  position: relative;
  z-index: 0;
  overflow: hidden;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  max-width: 505px;
  min-height: clamp(430px, 33.65vw, 646px);
  padding: clamp(40px, 5.21vw, 100px) clamp(20px, 3.07vw, 59px);
  border-radius: 40px 40px 0 0;
  background: linear-gradient(180deg, rgba(238, 229, 220, 0.7), rgba(221, 188, 146, 0.7));
  text-align: center;
  transition: min-height 0.4s ease, padding 0.4s ease, background 0.4s ease;
}

.how-card-eyebrow {
  margin: 0 0 8px;
  color: #47280f;
  font-family: "Montserrat", var(--sans);
  font-weight: 600;
  font-size: clamp(40px, 4.17vw, 80px);
  transition: opacity 0.3s ease, height 0.3s ease, margin 0.3s ease;
}

.how-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

/*
  Posicionado absoluto (no margin-bottom negativo atado al contenido):
  el título/descripción varían de largo entre cards (ej. "Guarda tu
  progreso" es 2 líneas vs 1 línea en las otras), así que un offset fijo
  calculado para una card rompía a las demás. Absoluto + centrado
  funciona igual sin importar cuántas líneas tenga cada una.
  z-index:-1 lo manda detrás del contenido (.how-card-content) pero
  sigue delante del fondo de la card (nueva stacking context via
  position:relative en .how-card).
*/
.how-card-bignum {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  color: #47280f;
  font-family: "Montserrat", var(--sans);
  font-weight: 600;
  font-size: clamp(6rem, 16vw, 11rem);
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.how-card-icon {
  position: relative;
  display: block;
  width: clamp(120px, 10.47vw, 201px);
  height: clamp(120px, 10.47vw, 201px);
  flex-shrink: 0;
  transition: width 0.4s ease, height 0.4s ease;
}

.how-card-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.how-card-icon .is-hover {
  opacity: 0;
}

/*
  nowrap: el título puede invadir el padding lateral de la card (a 1920
  "Guarda tu progreso" mide 422 contra 387 de caja de texto, y así está
  en Figma). Sin nowrap ese título parte en 2 líneas y esa card queda
  más alta que las otras dos, rompiendo la alineación de la fila.
*/
.how-card h3 {
  margin: 0;
  white-space: nowrap;
  color: #9a6734;
  font-family: "Montserrat", var(--sans);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.29vw, 2.75rem);
}

.how-card p {
  margin: auto 0 0;
  max-width: 38ch;
  color: #0c152d;
  opacity: 0.8;
  font-family: "Montserrat", var(--sans);
  font-weight: 500;
  font-size: clamp(0.875rem, 0.94vw, 1.125rem);
  line-height: 1.333;
}

/*
  El hover solo debe activarse con mouse real (hover:hover + pointer:fine
  = ninguna de las dos las cumple un dedo en touch). Sin esto, :hover
  igual se evalúa en mobile — algunos navegadores lo activan "pegado"
  al primer tap, chocando con el estado "abierto por defecto" de acá
  abajo. No alcanza con el media query de ancho (860px): un mouse en
  una ventana angosta sigue siendo mouse.
*/
@media (hover: hover) and (pointer: fine) {
  .how-card:hover {
    min-height: clamp(470px, 35.89vw, 689px);
    padding: clamp(28px, 3.13vw, 60px) clamp(20px, 3.07vw, 59px);
    background: linear-gradient(180deg, rgba(238, 229, 220, 0.9), rgba(221, 188, 146, 0.9));
  }

  .how-card:hover .how-card-eyebrow {
    opacity: 0;
    height: 0;
    margin: 0;
  }

  .how-card:hover .how-card-bignum {
    opacity: 0.25;
  }

  .how-card:hover .how-card-icon {
    width: clamp(140px, 12.5vw, 240px);
    height: clamp(140px, 12.5vw, 240px);
  }

  .how-card:hover .how-card-icon .is-rest {
    opacity: 0;
  }

  .how-card:hover .how-card-icon .is-hover {
    opacity: 1;
  }
}

/*
  Mobile (Figma 258:617): no hay hover en touch, así que no hace falta
  el swap SVG->GIF ni el número que aparece — el GIF va siempre visible
  y el número gigante queda fijo detrás del texto (igual que Figma).
  Cards casi a todo el ancho, scroll horizontal con snap (se ve el
  borde de la siguiente card, como en el screenshot de Figma).
*/
.how-cards-mobile {
  display: none;
}


@media (max-width: 912px) {


  .how-section {
    min-height: 600px;
    padding: 48px 0 0;
  }
}
/*
  ── Lienzo mobile ────────────────────────────────────────────────────
  Todo el diseño mobile de Figma está medido sobre un frame de 360px y
  buena parte se expresó en % / vw (el panel del CTA final mide 233.27%
  del ancho de la sección, por ejemplo). Si se lo deja crecer sin tope,
  a 768 ese panel pasa a medir 1792 y su sección salta de 815 a 1412 de
  alto, con un vacío enorme; lo mismo, en menor medida, con el resto de
  los bloques.

  Por eso el contenido mobile se limita a 480px (1.33x el lienzo
  original, así ningún teléfono real se ve recortado — el más ancho
  ronda los 430) y se centra con --m-gutter. Los fondos siguen
  full-bleed porque son absolute inset:0, no dependen del padding.

  Se usa 100vw y no % porque los porcentajes de padding y de margin
  resuelven contra cajas distintas (el padre vs. el bloque contenedor),
  y necesitamos que el gutter y los márgenes negativos que lo cancelan
  den exactamente el mismo número.
*/
@media (max-width: 860px) {
  .landing-screen {
    --m-gutter: max(16px, (100vw - 480px) / 2);
  }

  .how-section {
    min-height: 800px;
    padding: 48px 0 0;
  }

  /*
    Figma 258:617 (360x800): el carrusel (258:882) va en y=303 con
    496.82 de alto, o sea pegado al borde inferior de la sección
    (303 + 496.82 = 799.82). El título (258:624) queda arriba, en
    y=163 con 88 de alto, dejando 52px hasta las cards.

    Como .how-section es flex column, el margin-top:auto del título
    manda TODO el espacio libre arriba de él: así el bloque
    título + cards queda anclado abajo y las cards tocan siempre el
    borde inferior, sin importar cuánto crezca la sección.
    Comprobación a 800px: 800 - 496.82 - 52 - 88 = 163.18 = la y del
    título en Figma.
  */
  .how-title {
    margin-top: auto;
    margin-bottom: 52px;
    padding-inline: var(--m-gutter);
  }

  /* desktop card (hover interactivo) no aplica en touch, se esconde entera */
  .how-cards {
    display: none;
  }

  /*
    UI propio de mobile (Figma 647:236), sin heredar nada de .how-card:
    ícono + título + descripción arriba, número gigante fijo detrás
    (siempre visible, no hay hover en touch). Carrusel horizontal con
    scroll-snap, se asoma el borde de la siguiente card.
  */
  .how-cards-mobile {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    /* los 8px del nodo, corridos para que la primera card arranque
       alineada con la columna de contenido */
    padding-inline: max(8px, calc(var(--m-gutter) - 8px));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(8px, calc(var(--m-gutter) - 8px));
  }

  /*
    Medidas exactas del nodo card01_abre-libro movil (733:152), sobre una
    card de 328 x 496.821:

      Frame 134      230 de ancho (70.122%), a 50.61 del tope (15.43%)
        icono        202.44 x 202.44                 -> 61.72%
        gap          13.496                          ->  4.115%
        titulo       Montserrat SemiBold 28          ->  8.537%
        parrafo      Montserrat Medium 16, lh 1.333  ->  4.878%
      "01"           Montserrat SemiBold 253.05      -> 77.149%, opacidad .25
                     caja 267 x 308 en (30.5, 193.07): centrada en la card
                     (30.5 + 267/2 = 164 = 328/2) y arrancando al 38.86%
                     del alto. Se sale 4px por abajo, lo recorta el overflow.

    Todo lo de adentro va en cqw (porcentaje del ancho de la card) en vez
    de px, porque la card cambia de ancho entre telefono y la banda de
    tablet y con px fijos el numero y el icono se quedaban clavados en la
    medida del telefono. El 253.05px del "01" estaba puesto como 9rem
    (144px): por eso el numero se veia casi la mitad de lo que pide el
    diseno.

    Los 49/50.61 de margen NO van como padding de la card: el padding en %
    de un flex item se resuelve contra el ancho del CARRUSEL, no contra el
    de la card, y a 768 (donde entran dos cards) eso metia el contenido en
    una columna de 141px. Van como width + margin del Frame 134, que si se
    resuelven contra la card. De paso la card queda sin padding, asi que su
    caja de contenido son los 328 enteros y las cqw de adentro se pueden
    leer directo como % de la card.
  */
  .how-card-mobile {
    position: relative;
    container-type: inline-size;
    overflow: hidden;
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: min(328px, calc(100vw - 32px));
    /* La proporción del nodo en vez de un alto fijo: así el alto acompaña
       al ancho y el "01" (que va al 38.86% de ese alto) cae en su sitio
       también en la banda de tablet, donde la card es más ancha.
       El fit-content es la red: si algún texto crece, la card lo absorbe
       en vez de recortarlo. */
    aspect-ratio: 328 / 496.821;
    min-height: fit-content;
    padding: 0;
    border-radius: 33.74px 33.74px 0 0;
    background: linear-gradient(180deg, rgba(238, 229, 220, 0.9), rgba(221, 188, 146, 0.9));
    text-align: center;
  }

  .how-card-mobile-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4.115cqw;
    /* 230 / 328 centrado deja los 49 de cada lado; 50.61 / 328 arriba */
    width: 70.122%;
    margin: 15.43% auto 0;
  }

  .how-card-mobile-icon {
    display: block;
    width: 61.72cqw;
    height: 61.72cqw;
  }

  .how-card-mobile-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .how-card-mobile h3 {
    margin: 0;
    color: #9a6734;
    font-family: "Montserrat", var(--sans);
    font-weight: 600;
    font-size: 8.537cqw;
    white-space: nowrap;
  }

  .how-card-mobile p {
    margin: 0;
    color: #0c152d;
    opacity: 0.8;
    font-family: "Montserrat", var(--sans);
    font-weight: 500;
    font-size: 4.878cqw;
    line-height: 1.333;
  }

  .how-card-mobile-bignum {
    position: absolute;
    left: 50%;
    top: 38.86%;
    transform: translateX(-50%);
    color: #47280f;
    font-family: "Montserrat", var(--sans);
    font-weight: 600;
    font-size: 77.149cqw;
    /* 308 / 253.05 — el alto de caja que da Figma; con line-height:1 el
       numero quedaba 50px mas arriba de donde va. */
    line-height: 1.2172;
    opacity: 0.25;
    pointer-events: none;
  }
}

/*
  Sección "¿Qué encontrarás?" (Figma 253:1065 desktop / 258:902 mobile).
  Mismo patrón de fondo full-bleed que .how-section (sin heredar
  .landing-section, que trae max-width:1180px centrado).
*/
.find-section {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 108px) clamp(20px, 8.4vw, 162px);
}

.find-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.find-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.find-bg-tint {
  position: absolute;
  inset: 0;
  background: rgba(29, 25, 77, 0.25);
}

.find-intro {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.86fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
}

.find-kicker {
  margin: 0 0 8px;
  color: #fdfffe;
  font-family: "Nivella", var(--serif);
  font-weight: 400;
  font-size: 1.2rem;
}

.find-title {
  margin: 0;
  color: #e8c46a;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
  font-family: "Nivella", var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1.15;
}

.find-copy {
  padding-top: clamp(2px, 1.5vw, 12px);
}

.find-copy p {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  line-height: 1.55;
}

.find-copy ul {
  margin: 0;
  padding-left: 22px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  line-height: 1.6;
}

.find-doors {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Figma: cards en x 162/702/1242 de 518 de ancho -> 22px de gutter */
  gap: clamp(16px, 1.15vw, 22px);
  margin-top: clamp(48px, 8vw, 96px);
}

/*
  "Puerta" (Figma 243:1165, referenciada 3 veces por 253:1106/1107/1108):
  franja superior en degradé sólido (varía de color por ruta) + copy
  debajo sobre fondo translúcido con blur — no es la misma tarjeta que
  .how-card, estructura propia.

  El diseño está medido a 1920px (card 518x267), así que las tipografías
  y el ícono van en vw sobre esa base para conservar la proporción, con
  clamp() para no romperse en pantallas chicas:
    número 56px = 2.92vw · título 32px = 1.67vw · ícono 60px = 3.13vw
    copy 24px = 1.25vw con line-height 44px (1.83) · franja 95px = 4.95vw
*/
.find-door {
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(146deg, rgba(255, 255, 255, 0.02) 6.6%, rgba(255, 255, 255, 0.059) 91.7%);
  backdrop-filter: blur(20px);
}

.find-door-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px clamp(12px, 1.2vw, 20px) 14px;
  min-height: clamp(68px, 4.95vw, 95px);
  /* puertas 02 y 03 van claro -> oscuro (243:1086, 243:1053) */
  background: linear-gradient(90deg, #ddbc92, #8d5d32);
}

/* la puerta 01 invierte el degradé: oscuro -> claro (243:1101) */
.find-door:first-child .find-door-head {
  background: linear-gradient(90deg, #8d5d32, #ddbc92);
}

.find-door-num {
  color: #47280f;
  font-family: "Montserrat", var(--sans);
  font-weight: 300;
  font-size: clamp(2rem, 2.92vw, 3.5rem);
  line-height: 1.18;
}

.find-door-head h3 {
  margin: 0;
  color: #47280f;
  font-family: "Montserrat", var(--sans);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.67vw, 2rem);
  line-height: 1.18;
  text-transform: uppercase;
}

.find-door-icon {
  width: clamp(34px, 3.13vw, 60px);
  height: clamp(34px, 3.13vw, 60px);
  flex-shrink: 0;
}

.find-door-copy {
  /* 16px de gap desde la franja + 24px abajo; laterales (518-475)/2 */
  margin: 0;
  padding: 16px 4.15% 24px;
  color: #fdfffe;
  text-align: center;
  font-family: "Montserrat", var(--sans);
  font-size: clamp(0.95rem, 1.25vw, 1.5rem);
  line-height: 1.83;
}

/* la puerta 03 usa una caja de texto más angosta (444 de 518, 243:1092)
   para que el copy corte en 3 líneas como las otras dos */
.find-door:last-child .find-door-copy {
  padding-inline: 7.15%;
}

/*
  Chips de insight (253:1073..253:1098 desktop / 258:993..258:1018
  mobile). Los 6 son el mismo markup en ambos breakpoints: el DOM va en
  el orden vertical de mobile y acá grid-auto-flow:column los reparte
  columna por columna, que es como caen en desktop
  (x 162/702/1242 · y 768/874 -> 3 columnas x 2 filas, gutter 22x24).
*/
.find-insights {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  gap: 24px clamp(16px, 1.15vw, 22px);
  margin-top: 24px;
}

/* 518x82, pl 24 / pr 25 / py 8, ícono 60, gap 40, texto Nivella 24px */
.find-insight {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.08vw, 40px);
  padding: 8px 25px 8px 24px;
  min-height: clamp(64px, 4.27vw, 82px);
  border-radius: 16px;
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.02) 6.6%, rgba(255, 255, 255, 0.059) 91.7%);
  backdrop-filter: blur(20px);
}

.find-insight img {
  width: clamp(40px, 3.13vw, 60px);
  height: clamp(40px, 3.13vw, 60px);
  flex-shrink: 0;
}

.find-insight span {
  color: #fdfffe;
  font-family: "Nivella", var(--serif);
  font-size: clamp(1rem, 1.25vw, 1.5rem);
}

.find-doors-swiper {
  display: none;
}

/*
  Mobile (Figma 258:902, frame 360x1600). Coordenadas del nodo:
    intro (258:905)        x=16  y=83   328x648  (gap interno 16)
    carrusel (258:1190)    x=0   y=954  360x207  (full-bleed, px 8)
    chips (258:993..1018)  x=16  y=1211..1521, 328x54 cada uno, gap 8
    fin del contenido      1575 -> 25px hasta el borde de la sección
  El hueco intro->carrusel (954 - 731 = 223px) es del diseño: deja ver
  la puerta del fondo antes de que entren las cards.
*/
@media (max-width: 860px) {
  .find-section {
    padding: 83px var(--m-gutter) 25px;
  }

  .find-intro {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* 258:906 — Nivella 15px con line-height 58.88px (caja de 59) */
  .find-kicker {
    margin: 0 0 16px;
    font-size: 0.9375rem;
    line-height: 58.88px;
  }

  /* 258:907 — Nivella 40/44 */
  .find-title {
    font-size: 2.5rem;
    line-height: 1.1;
  }

  /*
    258:914 — Montserrat Regular 16px, line-height 25.9px, viñetas a 24px.
    Estaba en Inter: al ser más angosta metía el párrafo en 5 líneas y las
    viñetas más cortas, así que el bloque entero no coincidía con el nodo.

    Con Montserrat las medidas caen solas en los 337px que reserva el nodo
    258:912: 6 líneas de párrafo + la línea vacía + 6 de viñetas, todas de
    25.9 -> 336.7. Antes eso se forzaba con un min-height.
  */
  .find-copy {
    padding-top: 0;
  }

  .find-copy p,
  .find-copy ul {
    font-family: "Montserrat", var(--sans);
    font-weight: 400;
    font-size: 1rem;
    line-height: 25.9px;
  }

  /* En el nodo hay un renglón vacío entre el párrafo y la lista, no un
     margen: de ahí que la separación sea exactamente un interlineado. */
  .find-copy p {
    margin-bottom: 25.9px;
  }

  .find-copy ul {
    padding-left: 24px;
  }

  /* desktop grid de puertas no aplica en mobile, se esconde entero */
  .find-doors {
    display: none;
  }

  /*
    Carrusel de puertas mobile (Figma 258:1190): mismo contenido que
    .find-door pero clases -mobile propias (328x207, ícono 32px), sin
    heredar nada del desktop. Motor real (Swiper, CDN) en vez de
    scroll-snap manual, para arrastre con inercia consistente en touch.
    Va full-bleed: se sale de los 16px de padding de la sección con
    márgenes negativos y aplica los 8px de padding propios del nodo.
  */
  .find-doors-swiper {
    display: block;
    width: auto;
    margin: 223px calc(-1 * var(--m-gutter)) 0;
    padding-inline: max(8px, calc(var(--m-gutter) - 8px));
  }

  .find-doors-swiper .swiper-slide {
    /* 328 fijo (no vw): a 360 de ancho deja asomando 16px de la
       siguiente card, exactamente como el nodo. */
    width: min(328px, calc(100vw - 32px));
    height: auto;
  }

  /* los 6 chips pasan a una sola columna, 328x54 con 8px de separación */
  .find-insights {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 8px;
    margin-top: 50px;
  }

  .find-insight {
    gap: 16px;
    min-height: 54px;
  }

  .find-insight img {
    width: 32px;
    height: 32px;
  }

  .find-insight span {
    font-size: 1rem;
  }

  .find-door-mobile {
    overflow: hidden;
    /* 258:1065 — alto fijo 207 (95 franja + 16 gap + 72 copy + 24 pb) */
    height: 207px;
    border-radius: 16px;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.02) 6.6%, rgba(255, 255, 255, 0.059) 91.7%);
    backdrop-filter: blur(20px);
  }

  /*
    Valores exactos de Figma 258:1129 ("Component 3 puertas movil"),
    confirmados por get_design_context (no aproximados por metadata):
    número 40px, título 18px, ícono 32px, copy 16px/24px line-height.
  */
  .find-door-mobile-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 20px 14px;
    min-height: 95px;
    background: linear-gradient(90deg, #8d5d32, #ddbc92);
  }

  .find-door-mobile-num {
    color: #47280f;
    font-family: "Montserrat", var(--sans);
    font-weight: 300;
    font-size: 2.5rem;
    line-height: 1.18;
  }

  .find-door-mobile-head h3 {
    margin: 0;
    color: #47280f;
    font-family: "Montserrat", var(--sans);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.18;
    text-transform: uppercase;
  }

  .find-door-mobile-head img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }

  /* 16px de gap desde la franja (no 20) + 24 abajo; caja de 296 de 328 */
  .find-door-mobile p {
    margin: 0;
    padding: 16px 16px 24px;
    color: #fdfffe;
    text-align: center;
    font-family: "Montserrat", var(--sans);
    font-size: 1rem;
    line-height: 1.5;
  }
}

/*
  Acá vivía un min-height de 337px para .find-copy, los que reserva el
  nodo 258:912. Hacía falta porque el bloque estaba en Inter y entraba en
  menos líneas de las que da el diseño. Ya está en Montserrat con el
  renglón vacío del nodo, así que los 337 salen del propio texto y el
  parche sobraba.
*/

/*
  Sección "Historia" (Figma 253:1134): título+párrafo+CTA arriba, bento
  grid de 4 cards abajo. Full-bleed como .how-section/.find-section (no
  hereda .landing-section, que trae max-width:1180px centrado).
*/
.story-section {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 108px) clamp(20px, 8.4vw, 162px);
}

.story-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.story-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-bg-tint {
  position: absolute;
  inset: 0;
  background: rgba(22, 33, 62, 0.35);
}

.story-intro {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
}

.story-kicker {
  margin: 0 0 8px;
  color: #fdfffe;
  font-family: "Nivella", var(--serif);
  font-weight: 400;
  font-size: 1.2rem;
}

.story-title {
  margin: 0;
  color: #e8c46a;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
  font-family: "Nivella", var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 3.75rem);
  line-height: 1.15;
}

.story-copy {
  padding-top: clamp(2px, 1.5vw, 12px);
}

.story-copy p {
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.78);
  font-family: "Montserrat", var(--sans);
  font-size: 1.125rem;
  line-height: 1.44;
}

.story-cta {
  display: inline-flex;
  align-items: center;
  /* .story-copy es un grid: sin esto el boton se estira a todo el ancho
     de la columna. Figma (253:1144) lo da en 341.2 x 60, al contenido. */
  justify-self: start;
  align-self: start;
  /* 0 en reposo (106:772): 25.6 + 274 del texto + 16 de la flecha + 25.6
     = 341.2 exactos. El gap de 8 es del estado hover (106:776), abajo. */
  gap: 0;
  height: clamp(48px, 3.13vw, 60px);
  padding: 11.2px clamp(16px, 1.33vw, 25.6px);
  border: none;
  border-radius: 48px;
  background: #dca249;
  color: #0c152d;
  font-family: "Montserrat", var(--sans);
  font-weight: 700;
  font-size: clamp(1rem, 1.15vw, 1.375rem);
  white-space: nowrap;
  cursor: pointer;
}

/*
  La flecha no va en la tipografía del botón sino en Inter SemiBold
  16.72/25.08 — es lo mismo en desktop (106:775) y en mobile (258:1236).
  Heredando los 22 de Montserrat mide 18 de ancho en vez de 16: el botón
  salía en 343.2 en vez de los 341.2 del nodo y en mobile se pasaba del
  ancho de la sección.
*/
.story-cta > span:not(.story-cta-label) {
  font-family: "Inter", var(--sans);
  font-weight: 600;
  font-size: 16.72px;
  line-height: 25.08px;
}

/*
  Hover del botón (Figma 106:772 "Predeterminada" vs 106:776 "Variante2",
  mismo alto de 60):

    fondo    #dca249 (dorado)  ->  #fdfffe (blanco)
    sombra   ninguna           ->  -2px 21px 17.1px rgba(201,151,58,.25)
    gap      0                 ->  8  (341.2 -> 349.2 de ancho)

  El texto se queda en #0c152d en los dos estados, igual que el nodo.
  La sombra va como box-shadow y no como filter: drop-shadow — el botón
  es un rectángulo relleno, así que da el mismo dibujo sin crear una
  capa de rasterizado aparte (el hero sí usa filter porque su degradado
  se pinta con máscara).

  Los 8px del gap se animan: la flecha se corre a la derecha en vez de
  saltar. El botón crece hacia la derecha (justify-self:start), así que
  no mueve nada del texto de la columna.

  Solo con puntero real: en touch el :hover se queda "pegado" tras el
  primer tap y el botón se quedaría blanco después de abrir el modal.
*/
@media (hover: hover) and (pointer: fine) {
  .story-cta {
    transition:
      background 0.18s ease,
      box-shadow 0.18s ease,
      gap 0.18s ease;
  }

  .story-cta:hover,
  .story-cta:focus-visible {
    gap: 8px;
    background: #fdfffe;
    box-shadow: -2px 21px 17.1px rgba(201, 151, 58, 0.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-cta {
    transition: none;
  }
}

/*
  Bento via grid-template-areas: filas "auto" (no alturas fijas en px)
  para que crecimiento (que abarca las 2 filas) y respaldado (que
  abarca las 2 columnas izquierdas) siempre calcen exactos con la suma
  real de las otras cards + el gap, sin tener que hardcodear 516px a
  mano. Columnas en fr usando el ratio real de anchos de Figma
  (465:623:461), no un grid parejo de 3 columnas.
*/
/*
  minmax(0, Nfr) en vez de Nfr pelado: el mínimo por defecto de una
  columna de grid es min-content, y con el h3 a 40px fijos el
  min-content de "Crecimiento" era mayor que su columna — a 1180 la
  tercera card se salía 39px del viewport. Con el mínimo en 0 las
  columnas pueden encoger y la tipografía (ahora en vw) acompaña.
*/
.story-bento {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 465fr) minmax(0, 623fr) minmax(0, 461fr);
  grid-template-areas:
    "info herr crec"
    "resp resp crec";
  gap: clamp(16px, 1.46vw, 28px);
  margin-top: clamp(40px, 6vw, 72px);
}

.story-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.25vw, 24px);
  padding: clamp(22px, 2.4vw, 46px) clamp(22px, 2.81vw, 54px) clamp(22px, 2.34vw, 45px) clamp(22px, 2.4vw, 46px);
  border-radius: 32px;
  background: rgba(2, 5, 21, 0.8);
}

.story-card.is-informacion {
  grid-area: info;
}

.story-card.is-herramientas {
  grid-area: herr;
}

.story-card.is-crecimiento {
  grid-area: crec;
  justify-content: center;
}

.story-card.is-respaldado {
  grid-area: resp;
  flex-direction: row;
  align-items: flex-start;
}

.story-card-icon {
  width: clamp(56px, 5.21vw, 100px);
  height: clamp(56px, 5.21vw, 100px);
  flex-shrink: 0;
}

.story-card.is-informacion .story-card-icon {
  width: clamp(58px, 5.42vw, 104px);
  height: clamp(58px, 5.42vw, 104px);
}

.story-card h3 {
  margin: 0;
  color: #ddbc92;
  font-family: "Montserrat", var(--sans);
  font-weight: 400;
  font-size: clamp(1.375rem, 2.08vw, 2.5rem);
  line-height: 1.13;
}

.story-card p {
  margin: 0;
  color: #ddbc92;
  font-family: "Montserrat", var(--sans);
  font-weight: 500;
  font-size: clamp(0.875rem, 0.83vw, 1rem);
  line-height: 1.4;
}

.story-cards-mobile {
  display: none;
}

/*
  Mobile (Figma 258:1218, frame 360x1600). El contenido (258:1221) va
  en x=16, y=185, 328x1391, con gap 16 UNIFORME entre todos sus hijos:
    kicker 59 · título 176 · párrafo 104 · botón 60 · 4 cards de 220
  185 + 1391 + 24 de aire abajo = 1600.
*/
@media (max-width: 860px) {
  .story-section {
    padding: 185px var(--m-gutter) 24px;
  }

  /* minmax(0,...) y no 1fr a secas: el mínimo automático de una columna
     de grilla es su min-content, así que el botón —que va con nowrap—
     podía estirar la columna más allá del ancho de la sección. */
  .story-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  /* 258:1222 — Nivella 15px con line-height 58.88px (caja de 59) */
  .story-kicker {
    margin: 0 0 16px;
    font-size: 0.9375rem;
    line-height: 58.88px;
  }

  /* 258:1223 — Nivella 40/44 */
  .story-title {
    font-size: 2.5rem;
    line-height: 1.1;
  }

  /* 258:1226 — Montserrat 16px, line-height 25.9px */
  .story-copy {
    padding-top: 0;
  }

  .story-copy p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.62;
  }

  /*
    Figma 258:1233 — el botón mide 328x60, o sea exactamente lo mismo
    que las cards de abajo, con Montserrat Bold 22 (#0c152d sobre
    #dca249).

    El nodo lo declara con 25.6 de padding a los dos lados, pero su
    propio contenido no entra ahí: el texto va de 25.6 a 299.6 (274 de
    ancho, sin cortes) y la flecha de 299.6 a 315.6, o sea que el lado
    derecho queda en 12.4. Se replica ese padding asimétrico en vez del
    simétrico del nodo, que es lo que el diseño realmente dibuja.
  */
  .story-cta {
    width: 100%;
    justify-content: space-between;
    gap: 0;
    height: 60px;
    padding: 11.2px 12.4px 11.2px 25.6px;
    font-size: 1.375rem;
  }

  /* bento de desktop no aplica en mobile (las 4 cards mobile son todas
     del mismo tamaño, sin spans) — se esconde entero */
  .story-bento {
    display: none;
  }

  /*
    Figma 258:1218: 4 cards idénticas en tamaño (328x220), en columna,
    contenido centrado vertical y horizontalmente dentro de cada una
    (no ancladas arriba/abajo como en desktop) — clases -mobile propias,
    íconos propios (assets distintos a desktop, confirmado por hash).
  */
  .story-cards-mobile {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
  }

  /*
    258:1479 — card de 328x220 fija, padding 16 (17 a la izquierda),
    radio 32. El contenido (258:1480) es un bloque de 263 alineado a la
    izquierda pero CENTRADO en la card, no estirado: por eso va en un
    wrapper propio y no como hijos directos (con align-items:center
    sobre los hijos, el ícono de 32 quedaba centrado en vez de pegado
    al borde izquierdo del bloque).
  */
  .story-card-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(328px, 100%);
    height: 220px;
    padding: 16px 16px 16px 17px;
    border-radius: 32px;
    background: rgba(2, 5, 21, 0.8);
  }

  .story-card-mobile-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 263px;
    max-width: 100%;
  }

  .story-card-mobile img {
    width: 32px;
    height: 32px;
  }

  .story-card-mobile h3 {
    margin: 0;
    text-align: left;
    color: #ddbc92;
    font-family: "Montserrat", var(--sans);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.13;
  }

  /* 258:1484 y hermanos — el nodo da las bajadas en 40/60/60/80 de alto,
     siempre múltiplos de 20: ese es el interlineado, no el "normal" de
     Chrome (19.5), que dejaba cada card 2px corta. */
  .story-card-mobile p {
    margin: 0;
    text-align: left;
    color: #ddbc92;
    font-family: "Montserrat", var(--sans);
    font-weight: 500;
    font-size: 1rem;
    line-height: 20px;
  }
}

/*
  258:1221 "Frame 127" — el contenedor de la sección mide 328 de ancho,
  y de ahí salen tanto el intro como las cards.

  El lienzo mobile (--m-gutter) lo deja crecer hasta 480, así que en
  cualquier teléfono más ancho que 360 el intro y el botón se estiraban
  —358 a 390px, 398 a 430px, 448 a 480px— mientras las cards se quedaban
  clavadas en sus 328. De ahí que el botón terminara más ancho que las
  cards de abajo. Topeando el contenedor entero en los 328 del nodo, las
  tres cosas miden lo mismo a cualquier ancho.

  Va aparte y no dentro del bloque de 860 porque no debe entrar en la
  banda de tablet (601–860), donde las cards van en grilla 2x2 sobre un
  lienzo más ancho a propósito.
*/
@media (max-width: 600px) {
  .story-intro,
  .story-cards-mobile {
    width: min(328px, 100%);
    margin-inline: auto;
  }
}

/*
  A 22px + el padding del nodo, "Conoce nuestra historia" con nowrap se
  pasa del ancho disponible en teléfonos más angostos que el lienzo de
  360 de Figma. El corte estaba en 380 y se comía justo los 360, que es
  la medida para la que está diseñada la sección: el botón salía en
  16.8px en vez de los 22 del nodo. Baja a 359 para que solo afecte a
  pantallas realmente más chicas.
*/
@media (max-width: 359px) {
  .story-cta {
    padding: 11.2px 12px;
    font-size: 1.05rem;
  }
}

/*
  Sección FAQ (Figma 253:1174 desktop / 258:1512 mobile). Acordeón
  single-open: comportamiento confirmado por Figma mostrando solo 1
  pregunta abierta a la vez (270:2797 desktop-width-independiente,
  270:2857 con 2 variantes de estado). El plus/X es el MISMO svg
  (verificado byte a byte, sin diferencia), rotado 45° por CSS en vez
  de un segundo asset.
*/
/*
  min-height:100vh en la SECCIÓN misma (no solo en .faq-list), en
  ambos breakpoints — mismo fix que ya funcionó en .how-section. El
  cálculo interno de .faq-list (519px) es una estimación que puede no
  cubrir el line-wrapping real del navegador; al no ser techo sino
  piso, si el contenido real necesita más espacio la sección igual
  crecía durante la animación, y como el fondo usa object-fit:cover
  (recalcula su recorte en cada resize del contenedor), eso se veía
  como que el fondo "se movía". Reservando 100vh en la sección misma
  (no solo internamente) queda cubierto sin depender de ese cálculo.
  A diferencia de .how-section, acá SÍ aplica igual en mobile porque el
  acordeón (con su propio open/close) también vive en mobile, no es
  una interacción solo-desktop como el hover de las cards de "cómo
  funciona".
*/
.faq-section {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: clamp(64px, 8vw, 108px) clamp(20px, 8.4vw, 162px);
  text-align: center;
}

.faq-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.faq-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.faq-bg-tint {
  position: absolute;
  inset: 0;
  background: rgba(29, 25, 77, 0.25);
}

.faq-title {
  position: relative;
  z-index: 1;
  margin: 0 0 clamp(32px, 5vw, 56px);
  color: #fdfffe;
  font-family: "Nivella", var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.5rem);
}

/* 253:1179 — "(FAQ's)" va a 60 contra los 100 del resto: 0.6, no 0.75. */
.faq-title span {
  font-size: 0.6em;
}

/*
  min-height reserva el espacio de "3 preguntas cerradas + 1 abierta" desde el
  arranque — así abrir cualquier pregunta no hace crecer la sección ni empuja
  el contenido de abajo; el espacio ya estaba reservado, solo se "llena".

  El valor lo mide faq.js y lo publica en --faq-list-h: el 519 de Figma
  (82 cerrado + 201 abierto + 24 de gap x3) es una estimación que NO sobrevive
  al line-wrapping real en pantallas angostas, donde las respuestas ocupan más
  líneas y la lista termina creciendo al abrir. Queda solo como fallback si el
  JS no corre.
*/
.faq-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: var(--faq-list-h, 519px);
  max-width: 886px;
  margin: 0 auto;
}

/*
  Estado de medición (lo pone y quita faq.js dentro del mismo frame, nunca se
  llega a pintar): sin transiciones, para no medir un fotograma intermedio de
  la animación, y sin techo de max-height, para leer el alto natural real de
  la respuesta en vez de los 200px del tope.
*/
.faq-list.is-measuring .faq-item,
.faq-list.is-measuring .faq-answer {
  transition: none !important;
}

.faq-list.is-measuring .faq-item.is-open .faq-answer {
  max-height: none !important;
}

/*
  .faq-item cubre AMBOS estados (cerrado/abierto) con un solo elemento
  <button> — no hay dos nodos separados, solo se agregan/quitan estilos
  vía .is-open. La respuesta vive siempre en el DOM (para que el toggle
  sea instantáneo) pero se colapsa con max-height + opacity cuando
  cerrada.
*/
/*
  Sin gap en el contenedor: la respuesta colapsada mide 0 de alto pero
  el gap del flex se sigue aplicando, así que cada pregunta cerrada
  medía 92 en vez de los 82 del nodo. Los 8px de separación los pone la
  respuesta cuando se abre.
*/
.faq-item {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 8px 25px 8px 24px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: linear-gradient(173deg, rgba(255, 255, 255, 0.02) 6.6%, rgba(255, 255, 255, 0.059) 91.7%);
  backdrop-filter: blur(20px);
  text-align: left;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

.faq-item.is-open {
  padding: 16px;
  border-color: #dca249;
  background: rgba(12, 21, 45, 0.75);
  box-shadow: 0 1px 12px rgba(255, 215, 0, 0.1);
}

.faq-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 66px;
}

.faq-question {
  color: #fff;
  font-family: "Nivella", var(--serif);
  font-size: 1.5rem;
  line-height: 1.15;
}

.faq-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.faq-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.faq-icon .is-open {
  opacity: 0;
}

.faq-item.is-open .faq-icon .is-rest {
  opacity: 0;
}

.faq-item.is-open .faq-icon .is-open {
  opacity: 1;
  transform: rotate(45deg);
}

.faq-answer {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  color: #dca249;
  font-family: "Montserrat", var(--sans);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  transition: max-height 0.35s ease, margin 0.35s ease, opacity 0.25s ease;
}

/* El tope sale medido (--faq-answer-h) para que no recorte donde el texto pasa
   de 200px; el 200 queda de fallback sin JS. */
.faq-item.is-open .faq-answer {
  max-height: var(--faq-answer-h, 200px);
  margin-top: 8px;
  opacity: 1;
}

/*
  Mobile (Figma 258:1512, frame 360x800): título (258:1515) en x=16,
  y=104, 328x132 (3 líneas de 44) y la lista (270:2857) en y=265,
  328x400 — 4 preguntas cerradas de 82 con 24 de gap. Los 29px de
  separación salen de 265 - (104 + 132).

  La lista es la MISMA que en desktop (antes había dos copias idénticas
  del markup, .faq-list y .faq-list-mobile): solo cambian medidas.
*/
@media (max-width: 860px) {
  /* el bottom es chico a propósito: la sección ya reserva 100vh (=800
     en el frame de Figma) y la lista reserva los 519 del estado abierto */
  .faq-section {
    padding: 104px var(--m-gutter) 16px;
  }

  /* 258:1515 — a diferencia de desktop, acá "(FAQ's)" NO va más chico:
     el nodo mobile es un solo texto a 40/44 para toda la frase. */
  .faq-title {
    margin-bottom: 29px;
    font-size: 2.5rem;
    line-height: 1.1;
  }

  .faq-title span {
    font-size: 1em;
  }

  /* 270:2671 — Nivella 20px con line-height 32px: 2 líneas = 64, que
     con los 8+8 de padding y el borde dan los 82 del nodo cerrado */
  .faq-question {
    font-size: 1.25rem;
    line-height: 1.6;
  }

  /*
    733:527 — el Frame 140 mide 280 y adentro el texto ocupa 247 con el
    ícono pegado en 248: o sea que entre uno y otro NO hay separación.
    Con los 16px de gap que traía de desktop al texto le quedaban 229 y
    dos de las cuatro preguntas pasaban a 3 líneas, así que esas tarjetas
    medían 114 en vez de los 82 del nodo y la lista entera se descuadraba.

    El padding-right baja a 24 (contra los 25 del nodo) para compensar el
    borde transparente de 1px que .faq-item lleva siempre —está para que
    al abrir no salte el layout— y así el texto recupera sus 247.
  */
  .faq-item {
    padding-right: 24px;
  }

  .faq-item-head {
    gap: 0;
    min-height: 64px;
  }

  .faq-question {
    flex: 1;
    min-width: 0;
  }
}

/*
  Sección final CTA + Footer (Figma 204:623 desktop / 258:1632 mobile).
  El botón reutiliza .hero-banner-cta / .hero-banner-cta-sparkle-* tal
  cual (mismo mecanismo animado del hero, confirmado por assets
  idénticos byte-a-byte en la versión mobile). El "panel" oscuro detrás
  del título en Figma usa un recorte SVG (mask-image) complejo; se
  aproxima acá con un gradiente que va de sólido (donde va el texto) a
  transparente (revelando la foto de la puerta a la derecha) — mismo
  efecto visual, sin la complejidad del mask exacto.
*/
.cta-footer-section {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 108px) clamp(20px, 8.4vw, 162px) 48px;
}

.cta-footer-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cta-footer-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

/*
  Rectangle 3913 (Figma 253:1207, dentro de fondo-CTA-footer 258:1631).
  Va ENCIMA de la foto con mix-blend-mode:lighten — estaba en z-index:-1
  y sin blend, o sea detrás y solo oscureciendo, que es justo lo contrario:
  el lighten es lo que levanta el brillo cálido del centro.

  El degradado de Figma es una elipse inscrita exacta en la caja: el
  gradientTransform mapea el círculo unidad a radios 960 x 640.5 sobre
  1920 x 1281, o sea 50% y 50%. Sin ese tamaño explícito, CSS asume
  farthest-corner y estira el degradado de más.
*/
.cta-footer-bg-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  mix-blend-mode: lighten;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    #2f1a09 0%,
    #180d06 50%,
    #0c0704 75%,
    #000002 100%
  );
}

.cta-footer-panel {
  position: relative;
  z-index: 1;
  min-height: 527px;
  display: flex;
  align-items: center;
  max-width: 1067px;
  margin: 0 auto;
}

/*
  Antes esto era un rectángulo completo (object-fit:cover) con un
  gradiente encima simulando el panel oscuro. El vector real de Figma
  (252:696 / panel-mask.svg) recorta la foto en la forma exacta que usa
  el diseño — mismo mecanismo que Figma (mask-image), en vez de
  aproximarlo con un fade. La única foto real dentro del recorte ya
  trae su propio lado oscuro (interior del cuarto) donde va el texto,
  así que ya no hace falta el gradiente para dar contraste.
*/
.cta-footer-panel-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  mask-image: url("../../../assets/images/cta-footer/panel-mask.svg");
  -webkit-mask-image: url("../../../assets/images/cta-footer/panel-mask.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
}

.cta-footer-panel-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-footer-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  /* Tope alineado con la pared del recorte (68.69% de 1067 menos el
     margen izquierdo) para que el título no invada la puerta cuando la
     sección no está en el lienzo congelado. */
  max-width: 624px;
  padding: 56px clamp(24px, 4vw, 64px);
  background: linear-gradient(90deg, rgba(2, 5, 21, 0.55) 0%, rgba(2, 5, 21, 0.55) 55%, rgba(2, 5, 21, 0) 100%);
}

.cta-footer-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: "Nivella", var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 6.5rem);
  line-height: 1.05;
}

.cta-footer-title .is-light {
  color: #fdfffe;
}

.cta-footer-title .is-gold {
  color: #e8c46a;
}

/*
  Cluster glow+doodle+blob propio (más grande que el del hero: acá el
  botón es el mismo 220x74, pero el halo alrededor es más grande).
  Offsets calculados a partir de las coordenadas reales de Figma
  (252:715 y sus hijos), mismo criterio que el hero.
*/
.cta-footer-cta-wrap {
  position: relative;
  width: 288px;
  height: 118px;
}

.cta-footer-blob {
  position: absolute;
  left: 25px;
  top: 11px;
  width: 250px;
  opacity: 0.9;
  pointer-events: none;
}

.cta-footer-doodle {
  position: absolute;
  left: 85px;
  top: 16px;
  width: 195px;
  opacity: 0.7;
  mix-blend-mode: screen;
  pointer-events: none;
}

.cta-footer-doodle-2 {
  transform: scaleY(-1);
}

.cta-footer-glow {
  position: absolute;
  mix-blend-mode: color-dodge;
  pointer-events: none;
}

.cta-footer-glow-left {
  left: 5px;
  top: 0;
  width: 73px;
}

.cta-footer-glow-right {
  left: 234px;
  top: 14px;
  width: 53px;
  opacity: 0.5;
}

.cta-footer-cta-wrap .hero-banner-cta {
  position: absolute;
  left: 28px;
  top: 19px;
}

.cta-footer-social-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.cta-footer-avatars {
  display: flex;
}

.cta-footer-avatars img {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  border: 2px solid #020010;
  object-fit: cover;
}

.cta-footer-avatars img:not(:first-child) {
  margin-left: -10px;
}

.cta-footer-social-proof p {
  margin: 0;
  color: rgba(232, 229, 224, 0.6);
  font-family: "Montserrat", var(--sans);
  font-size: 0.8rem;
  line-height: 1.4;
}

.site-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1596px;
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.site-footer-copyright,
.site-footer-tagline {
  margin: 0;
  text-transform: capitalize;
  font-family: "Poppins", var(--sans);
  font-size: 1rem;
}

.site-footer-copyright {
  color: #fff;
}

.site-footer-tagline {
  color: #ddbc92;
}

.site-footer-social {
  display: flex;
  gap: 20px;
}

.site-footer-social-icon {
  position: relative;
  display: block;
  width: 35px;
  height: 35px;
}

.site-footer-social-icon img:first-child {
  width: 100%;
  height: 100%;
}

.site-footer-social-icon .icon-glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.cta-footer-panel-mobile,
.site-footer-mobile {
  display: none;
}

/*
  ============================================================
  CTA + Footer — MOBILE (Figma 258:1632, frame de 360x800)
  ------------------------------------------------------------
  Medidas reales del nodo (viewport visible = x 468..828 del frame):

    258:1633 fondo-historia   x=468  w=360  h=800   → full-bleed, opacity .5
    258:1634 Rectangle 3913   x=468  w=280  h=800   → tint, mix-blend lighten
    258:1918 Frame 151 panel  x=117.93 w=839.78 h=527, y=64
             → en coords de viewport: left -350.07 .. 489.71
               (desborda por AMBOS lados, no es una tarjeta)
    258:1982 contenido        x=379.07 (dentro del panel) w=328
             → viewport x=29
    258:1889 footer           x=484 (=16 del viewport) w=328 y=591
             (591 = 64+527, arranca justo donde termina el panel)

  El oscuro detrás del texto NO es un panel de color: es la pared
  oscura de la propia foto de la puerta. Por eso el contenido va sin
  background (antes tenía un gradiente azul que se veía como caja
  sobrepuesta). El mask (258:1920) recorta la foto: rectángulo desde
  y=167.855 hacia abajo + el arco de la puerta asomando arriba a la
  derecha (x 569..840 del mask).
  ============================================================
*/
@media (max-width: 860px) {
  /*
    Base oscura propia. La foto de fondo va al 50% de opacidad y en
    mobile el tint pasó a ir ENCIMA (mix-blend lighten, como Figma),
    así que ya nada tapa el fondo de .landing-screen — que es un
    gradiente cálido (rgba(7,6,4)/rgba(16,12,8), R>B). Ese marrón se
    colaba por la mitad transparente de la foto y mataba el violeta
    (medido: B-R pasaba de +18 arriba a -42 abajo). Con la base
    #000002 (el stop exterior del propio gradiente de Figma) la foto
    compone sobre negro-azulado y el tono frío se conserva.
  */
  .cta-footer-section {
    padding: 0 0 48px;
    background-color: #000002;
  }

  .cta-footer-panel {
    display: none;
  }

  .site-footer {
    display: none;
  }

  /*
    258:1633 — foto de fondo full-bleed al 50%.
    Figma la escala a 1199x800 y la corre a left:-516px, o sea deja
    visible la franja x 826..1403 del original (1920 ancho) — centro
    en el ~58%, no en el 50%. Con object-position al 50% el penacho
    violeta se salía por la izquierda y entraba el reflejo dorado del
    libro, que volvía cálido el borde inferior (medido: B-R -15 abajo
    contra +0 de Figma). El 61% reproduce ese mismo centro sin
    deformar la imagen (equivalente al crop de Figma para esta altura
    de seccion).
  */
  .cta-footer-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 61% 50%;
  }

  /*
    258:1634 — el degradado va ENCIMA en mix-blend-mode:lighten (no
    detrás como en desktop) y solo ocupa 280 de 360 de ancho,
    alineado a la izquierda. Eso es lo que da el brillo cálido en vez
    de solo oscurecer.
  */
  .cta-footer-bg-tint {
    right: auto;
    width: 77.78%;
    z-index: 1;
    mix-blend-mode: lighten;
    background: radial-gradient(
      ellipse 50% 50% at 50% 50%,
      #2f1a09 0%,
      #180d06 50%,
      #0c0704 75%,
      #000002 100%
    );
  }

  /*
    Panel: 839.78 de ancho arrancando en -350.07 sobre un lienzo de 360
    → 2.3327x y 0.9724x el lienzo. Se calcula contra --m-canvas (el
    lienzo topado en 480) y no contra el ancho de la sección: con % del
    viewport, a 768 el panel medía 1792x1124 y estiraba la sección de
    815 a 1412 de alto. El aspect-ratio real (839.78x527) mantiene el
    arco en su sitio y el overflow:hidden de la sección recorta el
    excedente.
  */
  .cta-footer-panel-mobile {
    --m-canvas: min(100vw, 480px);
    position: relative;
    z-index: 1;
    display: block;
    left: calc((100vw - var(--m-canvas)) / 2 - 0.9724 * var(--m-canvas));
    width: calc(2.3327 * var(--m-canvas));
    aspect-ratio: 839.78 / 527;
    min-height: 0;
    margin: 64px 0 0;
  }

  .cta-footer-panel-mobile .cta-footer-panel-photo {
    mask-image: url("../../../assets/images/cta-footer/panel-mask-mobile.svg");
    -webkit-mask-image: url("../../../assets/images/cta-footer/panel-mask-mobile.svg");
  }

  /*
    258:1921 — la foto dentro del mask es más grande que el panel
    (1105.94x738.49 vs 839.78x527) y va corrida hacia arriba 72.81px,
    para que la pared oscura quede detrás del texto y la puerta a la
    derecha.
  */
  .cta-footer-panel-mobile .cta-footer-panel-photo img {
    position: absolute;
    top: -13.82%;
    left: 0;
    width: 131.69%;
    height: auto;
    max-width: none;
    object-fit: unset;
  }

  /*
    Contenido: sin background (el oscuro lo pone la foto).
    Vertical: 32.83% del panel = y=237 del viewport (Figma 258:1982).

    Horizontal: a pedido del cliente el bloque "Empieza tu recorrido"
    se corre para quedar PEGADO A LA IZQUIERDA (antes 45.14% del panel
    = 29px en el frame de 360, que en pantallas más anchas se iba a 31+).
    El panel arranca en (100vw - canvas)/2 - 0.9724*canvas, así que para
    dejar el contenido a 16px del borde del lienzo alcanza con:
        left = 0.9724 * canvas + 16px
    (mismo gutter de 16px que usa el footer mobile, y se mantiene aunque
    el lienzo quede topado en 480 y centrado).
  */
  .cta-footer-panel-mobile .cta-footer-content {
    position: absolute;
    left: calc(0.9724 * var(--m-canvas) + 16px);
    top: 32.83%;
    width: 328px;
    max-width: calc(var(--m-canvas) - 32px);
    gap: 16px;
    padding: 0;
    background: none;
  }

  /*
    El wrap del CTA hereda `align-self: center` del hero mobile, que acá
    dejaba el botón corrido ~44px a la derecha del título. En esta
    sección el cluster tiene que arrancar en la misma vertical que
    "Empieza" — el padding-left:0 del wrap hace que el borde del botón
    coincida con el del texto.
  */
  .cta-footer-panel-mobile .hero-banner-cta-wrap {
    align-self: flex-start;
  }

  .cta-footer-panel-mobile .cta-footer-title {
    font-size: 2.4rem;
    line-height: 1.23;
  }

  /* 258:2042/2043 — el bloque de texto mide 240px y va a 12px, 2 líneas. */
  .cta-footer-panel-mobile .cta-footer-social-proof p {
    width: 240px;
    font-size: 0.75rem;
    line-height: 1.49;
  }

  /*
    El CTA wrap mobile ya no usa .cta-footer-cta-wrap (eso es solo para
    el cluster grande de desktop) — reutiliza .hero-banner-cta-wrap tal
    cual, que ya trae su propio CSS mobile completo y probado (ver
    @media(max-width:860px) .hero-banner-cta-wrap más abajo en el
    archivo). Nada que overridear acá.
  */

  /*
    258:1889 — arranca en y=591, justo donde termina el panel (64+527),
    de ahí margin-top:0. Ancho 328 centrado (16px por lado en 360).
    La línea divisoria (258:1890) va arriba y el contenido 24px abajo.
  */
  .site-footer-mobile {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 328px;
    max-width: calc(100% - 32px);
    margin: 0 auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    text-align: center;
  }

  .site-footer-mobile .site-footer-copyright,
  .site-footer-mobile .site-footer-tagline {
    font-size: 0.875rem;
  }
}

.landing-evidence-section {
  grid-template-columns: 0.75fr 1.25fr;
}

.evidence-layout {
  display: grid;
  gap: 24px;
}

.evidence-copy {
  display: grid;
  gap: 18px;
}

.evidence-copy ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.evidence-copy li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  line-height: 1.7;
}

.evidence-copy li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold-2);
  transform: rotate(45deg);
}

.faq-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.faq-grid details {
  min-height: 122px;
  padding: 20px 22px;
}

.faq-grid summary {
  color: var(--text);
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.12;
}

.faq-grid summary::marker {
  color: var(--gold-2);
}

.faq-grid p {
  margin-top: 14px;
  font-size: 0.98rem;
  line-height: 1.7;
}

.myth-section {
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}

.myth-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.myth-card {
  padding: 24px;
}

.myth-label,
.truth-label {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.myth-label {
  color: #f1a695;
}

.truth-label {
  color: var(--gold-2);
}

.myth-card h3 {
  margin: 10px 0 22px;
}

.benefit-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.benefit-grid span {
  min-height: 88px;
  display: flex;
  align-items: center;
  padding: 18px;
  color: var(--text);
  font-weight: 700;
}

.landing-final-cta {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto 72px;
  padding: 64px;
  border: 1px solid rgba(240, 201, 132, 0.36);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(240, 201, 132, 0.12), transparent),
    linear-gradient(180deg, rgba(29, 20, 12, 0.92), rgba(10, 7, 4, 0.94));
  box-shadow: 0 30px 86px rgba(0, 0, 0, 0.42);
}

.landing-final-cta button {
  margin-top: 28px;
}

.landing-footer {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 28px 0 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--gold-line);
  color: var(--muted);
}

.landing-footer p {
  margin: 0;
  text-align: center;
}

.auth-screen {
  overflow-y: auto;
  background: #050403;
}

.auth-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.auth-bg::before {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 9%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 201, 132, 0.48), transparent);
}

.auth-bg-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.auth-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(240, 201, 132, 0.08), transparent 30%),
    linear-gradient(90deg, rgba(5, 4, 3, 0.62), rgba(5, 4, 3, 0.18), rgba(5, 4, 3, 0.62)),
    linear-gradient(180deg, rgba(5, 4, 3, 0.2), rgba(5, 4, 3, 0.58));
}

.auth-bg-door {
  position: absolute;
  top: 18%;
  width: 22%;
  max-width: 320px;
  min-width: 180px;
  height: 62%;
  border: 1px solid rgba(240, 201, 132, 0.2);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(33, 24, 15, 0.72), rgba(8, 6, 4, 0.28));
}

.auth-bg-door-left {
  left: 5%;
}

.auth-bg-door-right {
  right: 5%;
}

.auth-bg-light {
  position: absolute;
  left: 50%;
  top: 8%;
  width: 260px;
  height: 66%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(240, 201, 132, 0.18), transparent);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  opacity: 0.8;
}

.auth-back-btn {
  position: fixed;
  z-index: 8;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.auth-content-host {
  position: relative;
  z-index: 3;
  width: min(680px, calc(100vw - 32px));
  min-height: 100svh;
  margin: 0 auto;
  display: grid;
  place-items: center;
  padding: 76px 0 30px;
}

.lp-auth-card {
  width: 100%;
  max-width: 420px;
  padding: 28px 32px;
  border: 1px solid rgba(240, 201, 132, 0.32);
  border-radius: 18px;
  background: rgba(14, 10, 6, 0.76);
  color: var(--text);
  backdrop-filter: blur(20px);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.4);
}

.lp-auth-card--login-h {
  max-width: 420px;
}

.lp-auth-card--wide-h {
  max-width: 640px;
}

.lp-auth-head {
  text-align: center;
  margin-bottom: 16px;
}

.lp-auth-brain {
  width: 42px;
  height: 42px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  color: var(--gold-2);
  border: 1px solid var(--gold-line);
  border-radius: 50%;
}

.lp-auth-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 2.28rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.lp-auth-sub {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.lp-auth-row {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.lp-auth-row--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lp-auth-row--3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lp-auth-field {
  display: grid;
  gap: 5px;
}

.lp-auth-field label,
.auth-field-group label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.lp-auth-field input,
.lp-auth-field select,
.auth-input {
  min-height: 44px;
  width: 100%;
  border: 1px solid rgba(240, 201, 132, 0.24);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  background: rgba(7, 6, 4, 0.55);
  outline: none;
}

.lp-auth-field input:focus,
.lp-auth-field select:focus,
.auth-input:focus {
  border-color: rgba(240, 201, 132, 0.72);
  box-shadow: 0 0 0 3px rgba(240, 201, 132, 0.14);
}

.lp-auth-section-title {
  margin-top: 14px;
  color: var(--gold-2);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.lp-auth-section-title span {
  color: var(--muted);
  font-weight: 500;
}

.lp-auth-forgot a,
.lp-auth-switch {
  color: var(--muted);
  font-size: 0.78rem;
}

.lp-auth-forgot {
  margin: 8px 0 0;
  text-align: right;
}

.lp-auth-forgot a,
.lp-auth-switch button {
  color: var(--gold-2);
}

.lp-auth-error {
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 166, 149, 0.45);
  border-radius: 8px;
  color: #ffd6d2;
  background: rgba(120, 28, 22, 0.22);
}

.lp-auth-cta,
.btn-dark {
  min-height: 46px;
  margin-top: 14px;
  border: 1px solid rgba(240, 201, 132, 0.58);
  border-radius: 999px;
  color: #201205;
  background: linear-gradient(135deg, #f0c984, #c4873d);
  font-weight: 800;
}

.lp-auth-switch {
  margin-top: 12px;
  text-align: center;
}

.lp-auth-switch button {
  border: 0;
  background: transparent;
  text-decoration: underline;
}

.app-shell,
.app-content {
  width: 100%;
  height: 100%;
}

.visual-page,
.premium-page {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  background: #050403;
}

.visual-page {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(240, 201, 132, 0.1), transparent 44%),
    #050403;
}

.visual-page::before {
  content: "";
  position: absolute;
  inset: -42px;
  background-image: var(--visual-bg);
  background-size: cover;
  background-position: center;
  filter: blur(28px);
  opacity: 0.42;
  transform: scale(1.08);
  pointer-events: none;
  z-index: 0;
}

.visual-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 46%, transparent 32%, rgba(5, 4, 3, 0.32) 72%),
    linear-gradient(90deg, rgba(5, 4, 3, 0.38), transparent 20%, transparent 80%, rgba(5, 4, 3, 0.38));
  pointer-events: none;
  z-index: 0;
}

.visual-stage {
  position: relative;
  z-index: 1;
  width: min(100vw, 150svh);
  aspect-ratio: 3 / 2;
  max-width: 100vw;
  max-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 70px rgba(0, 0, 0, 0.42);
}

.visual-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}

.visual-hotspot-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.visual-hotspot {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
}

.debug-hotspots .visual-hotspot {
  border: 1px solid rgba(255, 43, 43, 0.9);
  background: rgba(255, 0, 0, 0.14);
}

.visual-hotspot:focus-visible {
  outline: 2px solid rgba(240, 201, 132, 0.95);
  outline-offset: 3px;
}

.certificate-page .visual-stage {
  animation: certificateFade 240ms ease both;
}

.certificate-stage-lobby {
  width: min(100vw, 66.666svh);
  aspect-ratio: 2 / 3;
}

.certificate-image {
  pointer-events: none;
}

.certificate-lock-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.certificate-lock {
  position: absolute;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(240, 201, 132, 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 36%, rgba(240, 201, 132, 0.16), transparent 28%),
    linear-gradient(145deg, rgba(5, 4, 3, 0.64), rgba(15, 10, 6, 0.86));
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 184, 0.08),
    inset 0 0 28px rgba(0, 0, 0, 0.42),
    0 14px 34px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(5px) saturate(0.72);
}

.certificate-lock::before {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(240, 201, 132, 0.24);
  border-radius: 6px;
  background:
    linear-gradient(135deg, transparent 0 44%, rgba(240, 201, 132, 0.12) 45% 47%, transparent 48%),
    linear-gradient(225deg, transparent 0 44%, rgba(240, 201, 132, 0.08) 45% 47%, transparent 48%);
}

.certificate-lock::after {
  content: "LOCKED";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(112px, 70%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(240, 201, 132, 0.6);
  border-radius: 50%;
  color: rgba(240, 201, 132, 0.72);
  font-size: clamp(0.42rem, 0.68vw, 0.64rem);
  font-weight: 900;
  letter-spacing: 0;
  transform: translate(-50%, -50%) rotate(-12deg);
  background: rgba(8, 6, 4, 0.5);
  box-shadow: 0 0 28px rgba(240, 201, 132, 0.12);
}

.certificate-lock-seal {
  position: relative;
  z-index: 2;
  max-width: 82%;
  margin-top: 42%;
  padding: 0.45em 0.75em;
  border: 1px solid rgba(240, 201, 132, 0.42);
  border-radius: 999px;
  color: var(--gold-2);
  background: rgba(5, 4, 3, 0.6);
  font-size: clamp(0.48rem, 0.74vw, 0.72rem);
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
}

@keyframes certificateFade {
  from {
    opacity: 0;
    transform: scale(0.992);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.visual-back {
  position: fixed;
  z-index: 22;
  top: calc(24px + env(safe-area-inset-top));
  left: calc(32px + env(safe-area-inset-left));
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  color: var(--text);
  background: rgba(8, 6, 4, 0.58);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
}

.visual-menu-button {
  position: fixed;
  z-index: 24;
  top: calc(18px + env(safe-area-inset-top));
  left: calc(18px + env(safe-area-inset-left));
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 10px 0;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: rgba(8, 6, 4, 0.58);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
}

.visual-menu-button span {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--text);
  box-shadow: 0 0 14px rgba(240, 201, 132, 0.5);
}

.visual-menu-panel {
  position: fixed;
  z-index: 23;
  top: 0;
  left: 0;
  width: min(310px, 86vw);
  height: 100svh;
  padding: calc(88px + env(safe-area-inset-top)) 18px 22px;
  transform: translateX(-104%);
  transition: transform 220ms ease;
  border-right: 1px solid var(--gold-line);
  background: rgba(10, 7, 4, 0.86);
  backdrop-filter: blur(26px);
  box-shadow: 24px 0 70px rgba(0, 0, 0, 0.42);
}

.visual-menu.is-open .visual-menu-panel {
  transform: translateX(0);
}

.visual-menu-brand {
  padding: 4px 8px 22px;
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: 0;
}

.visual-menu-brand span,
.visual-menu-brand strong {
  display: block;
}

.visual-menu-brand span {
  color: var(--muted);
  font-size: 1.2rem;
}

.visual-menu-brand strong {
  color: var(--text);
  font-size: 2rem;
}

.visual-menu-panel button {
  width: 100%;
  min-height: 46px;
  margin: 4px 0;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  background: transparent;
  text-align: left;
}

.visual-menu-panel button:hover {
  border-color: var(--gold-line);
  background: rgba(240, 201, 132, 0.1);
}

.visual-menu-panel .visual-menu-danger {
  margin-top: 16px;
  color: var(--danger);
}

.premium-page {
  padding: 88px 16px 28px;
  background:
    linear-gradient(180deg, rgba(7, 6, 4, 0.98), rgba(16, 12, 8, 0.98)),
    repeating-linear-gradient(90deg, rgba(240, 201, 132, 0.035) 0 1px, transparent 1px 120px);
}

.premium-panel,
.profile-panel {
  width: min(640px, calc(100vw - 32px));
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid rgba(240, 201, 132, 0.32);
  border-radius: 8px;
  background: var(--panel);
  text-align: center;
  backdrop-filter: blur(24px);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.46);
}

.premium-panel h1,
.profile-panel h1 {
  font-size: 4.2rem;
}

.premium-button {
  margin-top: 28px;
}

.profile-panel {
  text-align: left;
}

.profile-list {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
}

.profile-list div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid rgba(240, 201, 132, 0.18);
}

.profile-list dt {
  color: var(--gold-2);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.profile-list dd {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.glossary-panel {
  width: min(960px, calc(100vw - 32px));
}

.glossary-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.glossary-item {
  min-height: 142px;
  padding: 18px;
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.glossary-item h2 {
  margin: 0;
  font-size: 1.6rem;
}

.glossary-item p {
  margin: 10px 0 0;
}

.route-gallery-panel,
.learning-panel {
  width: min(1120px, calc(100vw - 32px));
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid rgba(240, 201, 132, 0.32);
  border-radius: 8px;
  background: var(--panel);
  backdrop-filter: blur(24px);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.46);
}

.route-gallery-panel h1,
.learning-panel h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 4.2rem;
  line-height: 0.98;
  letter-spacing: 0;
}

.route-gallery-panel > p,
.learning-head p,
.assessment-panel p {
  color: var(--muted);
  line-height: 1.7;
}

.learning-head p,
.assessment-panel p {
  white-space: pre-line;
}

.route-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.route-gallery-card {
  position: relative;
  min-height: 180px;
  overflow: hidden;
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  background: rgba(10, 7, 4, 0.78);
  color: var(--text);
  text-align: left;
}

.route-gallery-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  transition: transform 220ms ease, opacity 220ms ease;
}

.route-gallery-card span {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 1;
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.05;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75);
}

.route-gallery-card:hover img {
  opacity: 0.68;
  transform: scale(1.035);
}

.learning-panel {
  width: min(1040px, calc(100vw - 32px));
}

.learning-head {
  max-width: 780px;
}

.learning-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gold-line);
  color: var(--muted);
}

.learning-topbar button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
}

.learning-topbar span {
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.book-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.76fr) minmax(0, 1.24fr);
  gap: 22px;
}

.book-cover-card,
.book-modules-card {
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.book-cover-card {
  min-height: 560px;
  display: flex;
  flex-direction: column;
  padding: 28px;
  background:
    radial-gradient(circle at 50% 12%, rgba(240, 201, 132, 0.15), transparent 34%),
    linear-gradient(180deg, rgba(32, 22, 12, 0.72), rgba(7, 6, 4, 0.88));
}

.book-cover-card h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 3rem;
  line-height: 0.98;
  letter-spacing: 0;
}

.book-cover-card h2 {
  margin: 12px 0 0;
  color: var(--gold-2);
  font-family: var(--serif);
  font-size: 1.48rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
}

.book-cover-card p {
  color: var(--muted);
  line-height: 1.7;
  white-space: pre-line;
}

.book-cover-card dl {
  display: grid;
  gap: 10px;
  margin: auto 0 0;
}

.book-cover-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
  border-top: 1px solid rgba(240, 201, 132, 0.16);
}

.book-cover-card dt {
  color: var(--gold-2);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.book-cover-card dd {
  margin: 0;
  color: var(--text);
}

.book-progress {
  height: 8px;
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.24);
}

.book-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f0c984, #c4873d);
}

.book-modules-card {
  padding: 24px;
}

.book-modules-card .learning-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 2.4rem;
  letter-spacing: 0;
}

.competency-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(240, 201, 132, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}

.competency-list span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.competency-list span::before {
  content: "•";
  margin-right: 8px;
  color: var(--gold-2);
}

.learning-loading {
  min-height: 220px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.module-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.module-row {
  min-height: 82px;
  display: grid;
  grid-template-columns: 110px 1fr 132px;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  text-align: left;
}

.module-row span,
.module-row small {
  color: var(--gold-2);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.module-row strong {
  font-family: var(--serif);
  font-size: 1.42rem;
  line-height: 1.05;
}

.module-row.is-locked {
  opacity: 0.58;
  cursor: not-allowed;
}

.module-row.is-progress {
  background: rgba(240, 201, 132, 0.1);
}

.premium-button:disabled,
.module-row:disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

.module-progress {
  margin-bottom: 22px;
}

.module-grid,
.module-detail-grid {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.module-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.module-card,
.module-detail-grid section {
  min-height: 154px;
  padding: 18px;
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  text-align: left;
}

.module-card span,
.module-detail-grid span {
  color: var(--gold-2);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.module-card strong,
.module-detail-grid h2 {
  display: block;
  margin-top: 12px;
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.05;
}

.module-card small,
.module-detail-grid p {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.6;
}

.module-card-exam {
  background: linear-gradient(180deg, rgba(240, 201, 132, 0.13), rgba(255, 255, 255, 0.035));
}

.module-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.learning-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

@media (max-width: 1120px) {
  .landing-hero {
    grid-template-columns: minmax(280px, 0.48fr) minmax(0, 0.52fr);
  }

  .landing-hero h1 {
    font-size: 4.8rem;
  }

  .landing-museum {
    min-height: 480px;
  }

  .route-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .landing-nav {
    align-items: center;
    min-height: 70px;
    padding: 12px 16px;
  }

  .landing-nav-links {
    display: none;
  }

  .landing-brand strong {
    font-size: 1.35rem;
  }

  .landing-nav-actions {
    justify-content: flex-end;
  }

  .landing-link-button,
  .landing-gold-button,
  .landing-ghost-button {
    min-height: 38px;
    padding: 0 12px;
    font-size: 0.9rem;
  }

  .landing-hero {
    min-height: auto;
    min-height: calc(100svh - 70px);
    padding: 0;
  }

  .landing-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    object-position: center;
    box-shadow: none;
  }

  .landing-hero-content {
    grid-column: 1;
    grid-row: 1;
    max-width: 680px;
  }

  .landing-hero-rail {
    position: relative;
    left: auto;
    bottom: auto;
    grid-column: 1;
    grid-row: 3;
  }

  .landing-hero h1 {
    font-size: 3.65rem;
  }

  .landing-subtitle {
    font-size: 1.02rem;
    line-height: 1.7;
  }

  .landing-museum {
    min-height: 430px;
    grid-template-columns: 1fr 1fr;
  }

  .museum-display {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 260px;
  }

  .museum-frame {
    height: 260px;
  }

  .museum-frame span {
    font-size: 1.35rem;
  }

  .landing-story,
  .landing-evidence-section,
  .story-metrics,
  .route-grid,
  .myth-grid,
  .benefit-grid,
  .faq-grid,
  .book-layout,
  .lp-auth-row--2col,
  .lp-auth-row--3col,
  .profile-list div,
  .glossary-list,
  .module-grid,
  .module-detail-grid {
    grid-template-columns: 1fr;
  }

  .landing-section {
    padding: 64px 0;
  }

  .landing-section-heading h2,
  .landing-final-cta h2 {
    font-size: 2.5rem;
  }

  .landing-final-cta {
    padding: 34px 22px;
  }

  .landing-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .landing-footer p {
    text-align: left;
  }

  .visual-stage {
    width: 100vw;
  }

  .visual-back {
    top: calc(24px + env(safe-area-inset-top));
    left: calc(32px + env(safe-area-inset-left));
  }

  .premium-panel h1,
  .profile-panel h1,
  .route-gallery-panel h1,
  .learning-panel h1 {
    font-size: 3rem;
  }

  .route-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .module-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .landing-nav {
    position: relative;
  }

  .landing-nav-actions {
    gap: 8px;
  }

  .landing-hero h1 {
    font-size: 3.05rem;
  }

  .landing-hero-bg {
    aspect-ratio: auto;
    object-position: center;
  }

  .landing-hero-rail {
    font-size: 0.86rem;
  }

  .landing-hero-actions {
    flex-direction: column;
  }

  .landing-hero-actions button,
  .landing-final-cta button {
    width: 100%;
  }

  .landing-museum {
    padding: 14px;
    gap: 12px;
  }

  .museum-display {
    height: 230px;
    padding: 22px 14px 38px;
  }

  .museum-frame {
    height: 210px;
  }

  .lp-auth-title {
    font-size: 2.05rem;
  }

  .auth-content-host {
    width: min(calc(100vw - 20px), 420px);
    padding-top: 74px;
  }

  .lp-auth-card {
    padding: 24px 18px;
    border-radius: 16px;
  }

  .route-gallery-grid {
    grid-template-columns: 1fr;
  }

  .route-gallery-card {
    min-height: 160px;
  }
}

/* === Hero banner (rediseño Neurooms) === */

@font-face {
  font-family: "Nivella";
  /*
    La ruta era "assets/fonts/..." y las url() de un CSS se resuelven
    contra el propio archivo, no contra la página: apuntaba a
    src/shared/css/assets/fonts/ y daba 404. La tipografía nunca cargó y
    todo lo serif del sitio venía saliendo en Cormorant Garamond, el
    fallback — de ahí que las medidas de texto no cuadraran con Figma.
  */
  src: url("../../../assets/fonts/nivella.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.um-old-hero {
  display: none;
}

.hero-banner {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #05040a;
}

.hero-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-banner-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-banner-tint {
  position: absolute;
  inset: 0;
  background: rgba(29, 25, 77, 0.25);
  mix-blend-mode: color;
}

.hero-banner-nav-root {
  position: sticky;
  top: 0;
  z-index: 3;
  /* El nav va antes del hero en el flujo. Se solapa sobre él (en vez de
     empujarlo) para que transparente deje ver la imagen del hero y no la
     franja de fondo de .landing-screen. El sticky sigue funcionando: su
     posición de flujo es el tope del documento. */
  margin-bottom: calc(-1 * var(--hero-nav-h, 0px));
}

.hero-banner-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(14px, 2.4vw, 28.7px) clamp(18px, 8vw, 160px);
  /* Arriba del todo el nav va transparente sobre el hero; el fondo entra
     recién con scroll (.is-scrolled lo pone hero-nav.js). */
  background: transparent;
  /* Solo el fondo hace fade. El backdrop-filter entra de golpe a propósito:
     interpolarlo desde `none` parpadea en Chrome y, con el degradé tan
     tenue, el cambio de blur no se percibe igual. Mismo criterio que
     .is-menu-open, que ya aplica su blur sin transición. */
  transition: background 0.25s ease;
}

/*
  Estado scrolleado: el nav toma el mismo vidrio translúcido que el cuerpo
  de las puertas de "¿Qué encontrarás?" (.find-door) — mismo degradé de
  blanco al 2%→5.9% y mismo blur de 20px. Es el único fondo que tiene: no
  se vuelve opaco, solo deja de ser 100% transparente para que el texto del
  nav se despegue del contenido que pasa por debajo.

  El umbral (20px de scroll) vive en NAV_SCROLLED_AT, en hero-nav.js.
*/
.hero-banner-nav-root.is-scrolled .hero-banner-nav {
  background: linear-gradient(146deg, rgba(255, 255, 255, 0.02) 6.6%, rgba(255, 255, 255, 0.059) 91.7%);
  backdrop-filter: blur(20px);
}

/* El menú mobile abierto sí necesita fondo sólido y va después a propósito:
   misma especificidad que .is-scrolled, así que le gana por orden. */
.hero-banner-nav-root.is-menu-open .hero-banner-nav {
  background: #08061b;
}

.hero-banner-nav-root.is-menu-open .hero-banner-nav {
  backdrop-filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner-nav {
    transition: none;
  }
}

.hero-banner-menu-toggle {
  display: none;
  padding: 0;
  border: none;
  background: transparent;
  width: 40px;
  height: 40px;
}

.hero-banner-menu-toggle img {
  width: 100%;
  height: 100%;
}

.hero-mobile-menu {
  display: none;
}

.hero-banner-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.hero-banner-brand-mark {
  /* Figma 252:815 — 36.727 x 44.809. */
  width: clamp(28px, 1.92vw, 36.73px);
  height: auto;
}

.hero-banner-brand span {
  font-family: "Montserrat", var(--sans);
  font-weight: 500;
  /* Figma 252:816 — 25.752px, tracking 5.408px (0.21em). */
  font-size: clamp(1.2rem, 1.34vw, 25.75px);
  letter-spacing: 0.21em;
  text-shadow: 0 1.03px 1.03px rgba(0, 0, 0, 0.25);
  background: linear-gradient(180deg, #8d5d32 37%, #503217 68%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-banner-nav-links {
  display: flex;
  align-items: center;
  /* Figma 252:817 — gap 45.942px sobre 1920 (2.39vw). */
  gap: clamp(18px, 2.4vw, 45.94px);
  /* Temporal (pre-lanzamiento): con los botones de sesión ocultos, el
     space-between del nav dejaría los links pegados al borde derecho.
     Ocupando el espacio libre quedan centrados entre marca y borde.
     Al volver a mostrar los botones, borrar estas dos líneas. */
  flex: 1;
  justify-content: center;
}

/* menu_* (Figma 106:396 y hermanos). Tres estados:
   default #fff · Over #dca249 + subrayado dorado · Variante3 (sección
   actual) #ddbc92 sin subrayado. El subrayado es del HOVER, no del activo. */
.hero-banner-nav-links a {
  position: relative;
  padding-bottom: 6px;
  color: #fff;
  font-family: "Montserrat", var(--sans);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.05vw, 20.1px);
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 0.18s ease;
}

.hero-banner-nav-links a.is-active {
  color: #ddbc92;
}

.hero-banner-nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #dca249;
  box-shadow: 0 0 6px rgba(220, 162, 73, 0.85);
  opacity: 0;
  transition: opacity 0.18s ease;
}

/* Flare: el destello 21px en color-dodge que el diseño pone detrás del
   texto y sube al hacer hover (Figma 103:389). */
.hero-banner-nav-links a::before {
  content: "";
  position: absolute;
  left: 24px;
  bottom: 2px;
  width: 21px;
  height: 21px;
  background: url("../../../assets/images/hero-banner/nav-flare.png") center / contain no-repeat;
  mix-blend-mode: color-dodge;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .hero-banner-nav-links a:hover {
    color: #dca249;
  }

  .hero-banner-nav-links a:hover::after,
  .hero-banner-nav-links a:hover::before {
    opacity: 1;
  }
}

.hero-banner-nav-actions {
  display: flex;
  align-items: center;
  /* Figma 252:823 — gap 17.228px. */
  gap: 17.23px;
}

.hero-banner-btn-ghost,
.hero-banner-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* "Crear cuenta" es un <a> a /onboarding, no un <button>: sin esto se
     subraya y hereda el azul de enlace del navegador. */
  text-decoration: none;
  cursor: pointer;
  /* Figma 72:574 / 72:588 — 60px de alto, texto Montserrat 22px. */
  min-height: clamp(48px, 3.13vw, 60px);
  padding: 0 clamp(18px, 1.34vw, 25.6px);
  border-radius: 999px;
  font-family: "Montserrat", var(--sans);
  font-size: clamp(1rem, 1.15vw, 22px);
  border: none;
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.hero-banner-btn-ghost {
  border: 1.436px solid #ddbc92;
  background: transparent;
  color: #e8c46a;
}

.hero-banner-btn-gold {
  background: linear-gradient(164.49deg, #b8832a 0%, #e8b84b 100%);
  color: #020010;
  font-weight: 700;
}

/* Hovers (Figma "Variante2" de cada botón). */
@media (hover: hover) and (pointer: fine) {
  .hero-banner-btn-ghost:hover {
    border-color: #fff;
    color: #fff;
    box-shadow: 0 4px 12.2px #dca249;
  }

  /*
    El "Variante2" de Figma (72:590) pone el texto en blanco, pero sobre el
    degradado dorado queda sin contraste y se lee peor que el estado normal.
    A pedido se queda en #020010; del hover sobrevive solo el resplandor.
  */
  .hero-banner-btn-gold:hover {
    filter: drop-shadow(0 13px 15.25px rgba(201, 151, 58, 0.4));
  }
}

/*
  Foco por teclado: el botón fantasma toma el mismo blanco del hover (borde
  y texto), que es el indicador que pide el diseño. Sustituye al anillo por
  defecto — de ahí el outline:none, el borde ya marca el foco.

  Va con :focus además de :focus-visible a propósito. :focus-visible depende
  de una heurística del navegador (solo marca cuando el foco vino del
  teclado); si por lo que sea no la aplica, el botón se quedaba sin ningún
  indicador visible. Con los dos, el estado aparece siempre que el botón
  tenga el foco, y como el hover ya es este mismo blanco, no desentona
  cuando el foco llega por click.
*/
.hero-banner-btn-ghost:focus,
.hero-banner-btn-ghost:focus-visible {
  outline: none;
  border-color: #fff;
  color: #fff;
  box-shadow: 0 4px 12.2px #dca249;
}

.hero-banner-btn-gold:focus,
.hero-banner-btn-gold:focus-visible {
  outline: none;
  filter: drop-shadow(0 13px 15.25px rgba(201, 151, 58, 0.4));
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner-btn-ghost,
  .hero-banner-btn-gold,
  .hero-banner-nav-links a,
  .hero-banner-nav-links a::after,
  .hero-banner-nav-links a::before {
    transition: none;
  }
}

.hero-banner-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 24px;
  /* El nav se superpone al hero (margin-bottom negativo en .hero-banner-nav-root),
     así que su alto se recupera acá para que el contenido siga centrado en la
     franja libre y no se meta debajo del nav. */
  padding: calc(var(--hero-nav-h, 0px) + 48px) clamp(18px, 8vw, 160px) 0;
}

.hero-banner-title {
  max-width: 788px;
  margin: 0;
  font-family: "Nivella", var(--serif);
  font-weight: 400;
  line-height: 0.96;
  font-size: clamp(2.75rem, 2.6vw + 2.4rem, 7.125rem);
}

.hero-banner-title span {
  display: block;
}

.hero-banner-title-light {
  color: #fdfffe;
}

.hero-banner-title-gold {
  color: #e8c46a;
}

.hero-banner-copy {
  max-width: 420px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--sans);
  font-size: 1.1rem;
  line-height: 1.6;
}

.hero-banner-copy strong {
  font-weight: 700;
}

.hero-banner-cta-wrap {
  position: relative;
  display: inline-flex;
  width: fit-content;
  padding: 20px 24px 20px 0;
}

.hero-banner-cta-glow,
.hero-banner-cta-blob,
.hero-banner-cta-doodle {
  position: absolute;
  pointer-events: none;
}

.hero-banner-cta-blob {
  left: 0;
  top: 50%;
  width: 260px;
  transform: translateY(-50%);
  opacity: 0.9;
}

.hero-banner-cta-doodle {
  left: 4px;
  top: 50%;
  width: 205px;
  transform: translateY(-58%);
  opacity: 0.7;
  mix-blend-mode: screen;
}

.hero-banner-cta-doodle-2 {
  transform: translateY(-58%) scaleY(-1);
}

.hero-banner-cta-glow {
  mix-blend-mode: color-dodge;
  transition: opacity 0.6s linear, transform 0.6s linear;
}

.hero-banner-cta-glow-left {
  left: -18px;
  top: -8px;
  width: 76px;
}

.hero-banner-cta-glow-right {
  right: -8px;
  bottom: -4px;
  width: 56px;
  opacity: 0.6;
}

/*
  Transición real exportada desde Figma Dev Mode (nodos 61:227-61:235, variante
  "Default" del componente CTA): 0.6s linear. Se omiten los deltas de sub-píxel
  (ruido de Smart Animate entre variantes) y el cambio de bg-color con alpha 0
  en ambos extremos (invisible); se traduce lo que sí cambia de forma visible:
  los sparkles aclaran, el texto oscurece un poco y el glow se expande.
*/
.hero-banner-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 0 32px 0 40px;
  border: none;
  border-radius: 999px;
  background-color: #dca249;
  background-image: radial-gradient(
    circle,
    #fffcf4 0%,
    #fce8b8 18%,
    #f0c674 38%,
    #dca249 60%,
    #b9812f 82%,
    #8a5a1f 100%
  );
  background-size: 220% 220%;
  background-position: 20% 20%;
  background-repeat: no-repeat;
  color: #0c152d;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.05rem;
  animation: hero-cta-hover-shine 2.4s linear infinite;
}

/*
  Sin transform de tamaño (confirmado por el usuario) — es el fill del botón
  el que cambia. Las 3 variantes de Figma (Default/Variant2/Variant3, node
  61:226) muestran el mismo dorado base con un brillo radial que se mueve de
  posición; Variant4 (estado normal) es el punto de partida. El gradiente de
  esas variantes no exporta como asset (fill de Figma no serializable), así
  que se aproxima a ojo. Para que el movimiento sea fluido en vez de saltar
  entre estados, se anima `background-position` sobre un único gradiente fijo
  (más grande que el botón) en vez de reemplazar todo el `background` por
  keyframe — eso sí interpola continuo en CSS.
*/
@keyframes hero-cta-hover-shine {
  0% {
    background-position: 20% 20%;
  }
  33% {
    background-position: 75% 15%;
  }
  66% {
    background-position: 30% 80%;
  }
  100% {
    background-position: 20% 20%;
  }
}

.hero-banner-cta-wrap:hover .hero-banner-cta-glow,
.hero-banner-cta-wrap:focus-within .hero-banner-cta-glow {
  opacity: 1;
  transform: scale(1.15);
}

/*
  Cada variante de Figma (Default/Variant2/Variant3/Variant4, node 61:226)
  usa un vector de sparkle distinto en cada una de las 3 posiciones, no el
  mismo ícono reposicionado. Cada "slot" apila las 4 versiones y se hace
  crossfade entre ellas en loop, sincronizado con el desplazamiento del
  brillo (hero-cta-hover-shine, mismos cortes 0/33/66/100%).
*/
.hero-banner-cta-sparkle {
  position: absolute;
  pointer-events: none;
  width: 8px;
  height: 8px;
}

.hero-banner-cta-sparkle-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.hero-banner-cta-sparkle-frame.is-frame-rest {
  opacity: 0;
}

.hero-banner-cta-sparkle-frame.is-frame-a {
  animation: hero-cta-sparkle-a 2.4s linear infinite;
}

.hero-banner-cta-sparkle-frame.is-frame-b {
  animation: hero-cta-sparkle-b 2.4s linear infinite;
}

.hero-banner-cta-sparkle-frame.is-frame-c {
  animation: hero-cta-sparkle-c 2.4s linear infinite;
}

@keyframes hero-cta-sparkle-a {
  0%,
  30% {
    opacity: 0.85;
  }
  34%,
  96% {
    opacity: 0;
  }
  100% {
    opacity: 0.85;
  }
}

@keyframes hero-cta-sparkle-b {
  0%,
  30%,
  67%,
  100% {
    opacity: 0;
  }
  34%,
  63% {
    opacity: 0.85;
  }
}

@keyframes hero-cta-sparkle-c {
  0%,
  63% {
    opacity: 0;
  }
  67%,
  96% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
  }
}

.hero-banner-cta-sparkle-1 {
  left: 8px;
  top: 22%;
}

.hero-banner-cta-sparkle-2 {
  left: 14px;
  top: 30%;
  width: 20px;
  height: 20px;
}

.hero-banner-cta-sparkle-3 {
  left: 8px;
  bottom: 22%;
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner-cta,
  .hero-banner-cta-glow,
  .hero-banner-cta-sparkle-frame {
    transition: none;
    animation: none;
  }

  .hero-banner-cta-sparkle-frame.is-frame-rest {
    opacity: 0.85;
  }
}

.hero-banner-social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-banner-avatars {
  display: flex;
}

.hero-banner-avatars img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #020010;
  object-fit: cover;
  margin-left: -10px;
}

.hero-banner-avatars img:first-child {
  margin-left: 0;
}

.hero-banner-social p {
  margin: 0;
  color: rgba(232, 229, 224, 0.6);
  font-size: 0.8rem;
  line-height: 1.4;
}

.hero-banner-pillars {
  position: relative;
  z-index: 2;
  margin: 0 clamp(18px, 4.2vw, 82px) 0;
  padding: 45px clamp(16px, 3vw, 40px);
  border-top: 1px solid rgba(201, 151, 58, 0.15);
  border-radius: 32px 32px 0 0;
  background: rgba(2, 5, 21, 0.75);
  backdrop-filter: blur(10px);
}

.hero-banner-pillars-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 25px;
}

.hero-banner-pillar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 25px 0 0;
}

.hero-banner-pillar:last-child {
  padding-right: 0;
}

/*
  Misma estructura que ya teníamos con border-right (posición confiable,
  pegada al borde de cada pillar) pero con la imagen real (Figma
  line.svg, node 299:672 y análogos) en vez de border-color — un
  ::after con background-image, en el mismo lugar donde vivía el borde.
  El SVG es horizontal con preserveAspectRatio="none", así que
  background-size:100% 100% lo estira solo, sin rotate.
*/
.hero-banner-pillar::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 80px;
  transform: translateY(-50%);
  background-image: url("../../../assets/images/hero-banner/pillar-line.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.hero-banner-pillar:last-child::after {
  content: none;
}

.hero-banner-pillar img {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.hero-banner-pillar-title {
  margin: 0 0 4px;
  color: #dca249;
  font-family: "Nivella", var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}

.hero-banner-pillar-copy {
  margin: 0;
  color: #ddbc92;
  font-size: 0.85rem;
  line-height: 1.25;
}

.hero-banner-tagline {
  margin: 44px 0 0;
  text-align: center;
  color: #fff;
  font-family: "Nivella", var(--serif);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
}

@media (max-width: 1280px) {
  .hero-banner-nav-links {
    display: none;
  }

  /*
    Acá ya no está la nav de desktop (que va transparente sobre el hero)
    sino el componente mobile menu_movil (Figma 270:2384): fondo sólido
    #08061b con blur de 2px, en todos sus estados, no solo al abrir el
    menú. Es el mismo color/blur que usa .is-menu-open.
  */
  .hero-banner-nav {
    padding: 16px;
    background: #08061b;
    backdrop-filter: blur(2px);
  }

  /*
    El logo del componente mobile (270:2373 / 270:2374) NO está reducido:
    mide lo mismo que en desktop — marca 36.727 x 44.809 y texto 25.752px
    con tracking 5.408 (0.21em). Con eso la barra cerrada da los 77px de
    alto del nodo 270:2384 (44.809 + 16 de padding arriba y abajo).
    El vw deja que se encoja en pantallas menores a 360 en vez de desbordar.
  */
  .hero-banner-brand-mark {
    width: clamp(28px, 10.2vw, 36.73px);
  }

  .hero-banner-brand span {
    font-size: clamp(1.05rem, 7.15vw, 25.752px);
    letter-spacing: 0.21em;
  }

  .hero-banner-nav-actions {
    gap: 0;
  }

  .hero-banner-nav-actions .hero-banner-btn-ghost,
  .hero-banner-nav-actions .hero-banner-btn-gold {
    display: none;
  }

  .hero-banner-menu-toggle {
    display: block;
  }

  .hero-mobile-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 16px;
    background: #08061b;
    backdrop-filter: blur(2px);
    border-radius: 0 0 32px 32px;
  }

  .hero-mobile-menu-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
  }

  /*
    Figma 270:2493 y hermanos — Montserrat Regular 24px, interlineado
    30.15 (1.256) y tracking 0.402px (0.0168em). Estaba en Inter 21.6px,
    de ahí que la tipografía no coincidiera con el nodo.
  */
  .hero-mobile-menu-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-family: "Montserrat", var(--sans);
    font-size: 1.5rem;
    line-height: 1.256;
    letter-spacing: 0.0168em;
    text-decoration: none;
  }

  .hero-mobile-menu-flare {
    position: absolute;
    right: -24px;
    top: 50%;
    width: 21px;
    height: 21px;
    transform: translateY(-50%);
    mix-blend-mode: color-dodge;
    pointer-events: none;
  }

  .hero-mobile-menu-actions {
    display: flex;
    flex-direction: column;
    gap: 17px;
    width: 100%;
  }

  /* 270:2284 / 270:2285 — los dos botones van a 22px, igual que en
     desktop; el 1.1rem que tenían los dejaba visiblemente más chicos. */
  .hero-mobile-menu-actions .hero-banner-btn-ghost,
  .hero-mobile-menu-actions .hero-banner-btn-gold {
    width: 100%;
    justify-content: center;
    min-height: 60px;
    font-size: 1.375rem;
  }

  /*
    ── Apertura del menú (Figma 270:2384 default -> 270:2385 extendido) ──
    El panel se descubre de arriba hacia abajo con clip-path en vez de
    animar el alto: no hay que medirlo, no dispara reflow y respeta el
    redondeo de 32px de las esquinas inferiores. Va sobre position:absolute,
    así que nada del contenido de abajo se mueve mientras dura.

    El contenido entra escalonado detrás del borde que baja, que es lo que
    da la sensación de que el panel "despliega" los enlaces.
  */
  .hero-mobile-menu {
    clip-path: inset(0 0 0 0 round 0 0 32px 32px);
  }

  .hero-mobile-menu-enter-active {
    transition:
      clip-path 0.42s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.18s ease;
  }

  .hero-mobile-menu-leave-active {
    transition:
      clip-path 0.26s cubic-bezier(0.4, 0, 1, 1),
      opacity 0.2s ease 0.06s;
  }

  .hero-mobile-menu-enter-from,
  .hero-mobile-menu-leave-to {
    clip-path: inset(0 0 100% 0 round 0 0 32px 32px);
    opacity: 0;
  }

  .hero-mobile-menu-enter-active .hero-mobile-menu-links a,
  .hero-mobile-menu-enter-active .hero-mobile-menu-actions > * {
    animation: hero-mobile-menu-item 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .hero-mobile-menu-enter-active .hero-mobile-menu-links a:nth-child(1) { animation-delay: 0.04s; }
  .hero-mobile-menu-enter-active .hero-mobile-menu-links a:nth-child(2) { animation-delay: 0.08s; }
  .hero-mobile-menu-enter-active .hero-mobile-menu-links a:nth-child(3) { animation-delay: 0.12s; }
  .hero-mobile-menu-enter-active .hero-mobile-menu-links a:nth-child(4) { animation-delay: 0.16s; }
  .hero-mobile-menu-enter-active .hero-mobile-menu-links a:nth-child(5) { animation-delay: 0.2s; }
  .hero-mobile-menu-enter-active .hero-mobile-menu-actions > *:nth-child(1) { animation-delay: 0.24s; }
  .hero-mobile-menu-enter-active .hero-mobile-menu-actions > *:nth-child(2) { animation-delay: 0.28s; }

  /* La X entra girando; el ícono de hamburguesa no lleva la clase, así que
     esto no corre al cargar la página. */
  .hero-banner-menu-toggle img.is-close {
    animation: hero-mobile-menu-close 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@keyframes hero-mobile-menu-item {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
}

@keyframes hero-mobile-menu-close {
  from {
    opacity: 0;
    transform: rotate(-90deg) scale(0.75);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mobile-menu-enter-active,
  .hero-mobile-menu-leave-active {
    transition: none;
  }

  .hero-mobile-menu-enter-active .hero-mobile-menu-links a,
  .hero-mobile-menu-enter-active .hero-mobile-menu-actions > *,
  .hero-banner-menu-toggle img.is-close {
    animation: none;
  }
}

@media (max-width: 860px) {
  /*
    258:495 "Frame 121" — arranca en x=16, y=84 y es una columna de 328
    con 16px entre bloques. Los altos del nodo cierran exacto:

      titulo 128 + 16 + parrafo 152 + 16 + CTA 87.74 + 16 + social 40
      = 455.74, el alto del frame.

    El y=84 iba sin poner: el bloque quedaba centrado a lo alto de la
    franja libre y el titulo terminaba ~50px mas arriba de donde va,
    casi pegado al nav. De ahi el flex-start + padding-top.
  */
  .hero-banner-content {
    justify-content: flex-start;
    padding: 84px var(--m-gutter) 0;
    gap: 16px;
    min-width: 0;
  }

  .hero-banner-title,
  .hero-banner-copy {
    max-width: 100%;
  }

  /*
    258:496 — Nivella 48 con interlineado 58.88 (los dos renglones van a
    59 uno del otro). Estaba en 0.96 (45.85), asi que las dos lineas se
    apretaban 13px de mas.

    El nodo deja 20.86 de aire arriba del primer renglon y cierra la caja
    en 128, o sea 10.62 menos de lo que ocupan los renglones: eso es el
    medio-interlineado que Figma recorta y que aca se saca con el margen
    negativo, para que el gap de 16 con el parrafo caiga donde debe.
  */
  .hero-banner-title {
    font-size: 48px;
    line-height: 58.88px;
    padding-top: 20.86px;
    margin-bottom: -10.62px;
  }

  /*
    258:500 — Montserrat Regular 16/25.9. Estaba en Inter 16/25.6.
    El frame 258:499 mide 152 aunque su texto mide 156: los 4 de
    diferencia son el recorte de Figma y salen por margen negativo, si no
    el CTA y el social bajan 4px de mas.
  */
  .hero-banner-copy {
    font-family: "Montserrat", var(--sans);
    font-size: 1rem;
    line-height: 25.9px;
    margin-bottom: -4px;
    max-width: 100%;
  }

  /* 258:607 — el contenedor del social lleva 4px de aire arriba (pt-4),
     que es lo que lo lleva de 36 a los 40 del nodo. */
  .hero-banner-social {
    padding-top: 4px;
  }

  /* 258:615 — Montserrat Regular 12/17.92 en una caja de 240. */
  .hero-banner-social p {
    width: 240px;
    max-width: 100%;
    font-family: "Montserrat", var(--sans);
    font-size: 12px;
    line-height: 17.92px;
  }

  .hero-banner-cta-wrap {
    align-self: center;
    /*
      No es "sin padding": el padding vertical reserva el mismo espacio
      que en Figma ocupa el bounding box completo de "Group 48095324"
      (87.74px) contra el botón (48px) — ese sobrante (21px arriba /
      19px abajo, sacado de get_metadata) es donde el flare/doodle
      sangra fuera del botón, y es también el gap real entre esta
      sección y el párrafo/social de arriba y abajo. Sin este padding,
      el botón queda pegado al párrafo y las partículas absolutas
      pierden su punto de referencia (quedan corridas).
    */
    padding: 21px 0 19px;
  }

  /* Tamaño real confirmado contra Figma (258:1240, botón dentro de
     "Group 48095324"): 241x48px fijo, no hug-content como en desktop. */
  .hero-banner-cta {
    width: 241px;
    height: 48px;
    min-height: 48px;
    padding: 0 20px;
    font-size: 1rem;
    justify-content: center;
  }

  /*
    Mobile usa sparkles propios (Figma node 258:1237, "Group 48095324"),
    no los 3 vectores de desktop escalados — son SVGs distintos. Solo
    existe el frame estático (sin Default/Variant2/Variant3 para mobile),
    así que el crossfade se apaga y queda fijo. Posición en % relativa a
    la caja del propio botón (258:1239), no en px del wrap — así no
    importa si el ancho real del botón difiere del mockup de Figma.
  */
  .hero-banner-cta-sparkle {
    left: auto;
    top: auto;
    width: auto;
    height: auto;
  }

  .hero-banner-cta-sparkle-1 {
    inset: 32.09% 84.48% 53.23% 12.6%;
  }

  .hero-banner-cta-sparkle-2 {
    inset: 32.09% 79.06% 32.27% 14.27%;
  }

  .hero-banner-cta-sparkle-3 {
    inset: 59.35% 84.48% 30.17% 13.02%;
  }

  .hero-banner-cta-sparkle-frame.is-frame-rest {
    opacity: 0.85;
    animation: none;
  }

  .hero-banner-cta-sparkle-frame.is-frame-a,
  .hero-banner-cta-sparkle-frame.is-frame-b,
  .hero-banner-cta-sparkle-frame.is-frame-c {
    display: none;
  }

  /*
    Flares (Figma 258:538/539, "Group 48095324") — mismos glows del botón
    pero en assets propios de mobile. Posición calculada relativa a la
    caja real del botón (241x48, ya confirmada), no al mockup completo.
  */
  .hero-banner-cta-glow-left {
    left: -33px;
    top: 0;
    width: 84px;
    bottom: auto;
    right: auto;
  }

  .hero-banner-cta-glow-right {
    left: 229px;
    top: 11px;
    width: 61px;
    opacity: 0.5;
    bottom: auto;
    right: auto;
  }

  /*
    Doodle de "polvo dorado" (Figma 258:505/521, dentro de "Group
    48095324") — mismo asset (son casi idénticos, sin espejo real, se
    verificó byte a byte) usado dos veces, superpuesto sobre el lado
    derecho del botón (no simétrico izq/der como en desktop — acá las
    dos capas de polvo caen del centro hacia la derecha, dando más
    densidad de ese lado). Posiciones de get_metadata + padding-top del
    wrap (21px) para pasarlas a coordenadas del padding-box.
  */
  .hero-banner-cta-doodle {
    top: auto;
    width: 223px;
    height: 72px;
    opacity: 0.7;
    mix-blend-mode: normal;
  }

  .hero-banner-cta-doodle-1 {
    left: 58px;
    top: 15px;
    transform: none;
  }

  .hero-banner-cta-doodle-2 {
    left: 184px;
    top: 3px;
    transform: none;
  }

  .hero-banner-social p {
    font-size: 0.75rem;
  }

  /*
    299:659 "Container" — la franja mide 360x221.57 y arranca en y=578,
    o sea justo debajo del bloque de contenido. Adentro, Frame 120 va en
    (26.61, 17.04) con 306.78 de ancho, dos filas de 79.83 separadas
    13.04, y el claim abajo.

    Las columnas van SIN gap y de 153.39 (la mitad de 306.78): así los
    bordes de columna caen exactamente donde el nodo pone las líneas
    (0, 153.39, 306.78) y el ::after de una celda coincide con el borde
    izquierdo de la siguiente. Los 13.04 que el nodo deja antes del ícono
    son padding-left de la celda, no gap de la grilla.
  */
  .hero-banner-pillars {
    margin: 0;
    border-radius: 16px 16px 0 0;
    padding: 17.04px 26.61px 7.92px;
  }

  .hero-banner-pillars-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 79.83px);
    gap: 13.04px 0;
  }

  .hero-banner-pillar {
    gap: 4.174px;
    padding: 0 0 0 13.04px;
  }

  .hero-banner-pillar:last-child {
    padding-right: 0;
  }

  /*
    Mobile: además del ::after (medida real 0.522x73.043px) cada card
    necesita re-habilitarlo en el último item (TRANSFORMA sí tiene borde
    derecho propio acá, a diferencia de desktop) y sumar un ::before
    solo en el primer item de cada fila (CONOCE, ATRAE) para el borde
    izquierdo — nth-child(2)/(4) NO llevan ::before porque coincidiría
    con el ::after del item anterior (misma línea, duplicada).
  */
  .hero-banner-pillar::after {
    width: 0.522px;
    height: 73.043px;
  }

  .hero-banner-pillar:last-child::after {
    content: "";
  }

  .hero-banner-pillar:nth-child(1)::before,
  .hero-banner-pillar:nth-child(3)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 0.522px;
    height: 73.043px;
    transform: translateY(-50%);
    background-image: url("../../../assets/images/hero-banner/pillar-line.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
  }

  .hero-banner-pillar img {
    width: 31.3px;
    height: 31.3px;
  }

  /*
    299:670 / 299:671 — Nivella en las dos: 14/9.391 con tracking 0.7513
    para el rótulo y 12/12 para la bajada, que además iba en Inter.
    Los 3.9 de margen salen de la distancia del nodo entre ambos topes
    (14.72 - 1.43 = 13.29) menos el interlineado del rótulo.
  */
  .hero-banner-pillar-title {
    margin: 0 0 3.9px;
    font-size: 14px;
    line-height: 9.391px;
    letter-spacing: 0.0537em;
    white-space: nowrap;
  }

  .hero-banner-pillar-copy {
    font-family: "Nivella", var(--serif);
    font-size: 12px;
    line-height: 12px;
  }

  /* 299:702 — Nivella 6.261/9.391 con tracking 1.5652 (0.25em). */
  .hero-banner-tagline {
    margin: 13.91px 0 0;
    font-size: 6.261px;
    line-height: 9.391px;
    letter-spacing: 0.25em;
  }
}

/*
  ── AJUSTE A PANTALLA (desktop) ──────────────────────────────────────
  Requisito: al navegar o scrollear, cada sección se ve COMPLETA en una
  pantalla, sin scroll residual para alcanzar el resto.

  El nav es sticky y opaco al scrollear, así que tapa una franja de
  --hero-nav-h en todas las secciones menos el hero (ahí va transparente
  encima). El alto útil es entonces --view-h = 100vh - nav, y el hero es
  la excepción: pantalla entera.

  La causa de que las secciones se pasaran de alto era que TODO el ritmo
  vertical (paddings, márgenes entre bloques, min-height de las cards)
  estaba en vw. En una pantalla ancha y baja — 1600x900, 1366x768 — el vw
  no baja pero el alto sí, y el contenido desborda. Acá ese ritmo pasa a
  ser fracción de --view-h, y el bloque de contenido de cada sección
  absorbe el resto con flex en vez de tener un alto propio.

  Las fracciones salen de la proporción del diseño a 1920x1080 (Figma
  252:812), así que en la pantalla de referencia se ve igual que antes y
  recién comprime cuando hace falta.

  Va al final del archivo a propósito: tiene que ganarle en cascada a
  .how-card:hover, declarado más arriba con la misma especificidad.

  ── Por qué la condición no es solo min-width ──
  Ajustar a pantalla solo tiene sentido en un viewport apaisado. En un
  tablet vertical (912x1368) el ancho pasa el breakpoint pero la sección
  quedaría de 1368 de alto: las cards se estiraban a ~1100px con un hueco
  enorme entre el icono y el texto, y todo se veía roto. Por eso:

    min-aspect-ratio: 1/1  -> descarta cualquier viewport vertical
    min-height: 600px      -> descarta un teléfono apaisado (ancho de
                              sobra, alto insuficiente), donde el
                              overflow:hidden recortaría contenido

  Debajo de esa condición las secciones vuelven a su alto natural y
  scrollean normal. TODOS los bloques que usan --view-h llevan la misma
  condición: si se agrega otro, tiene que repetirla o --view-h queda sin
  definir y los calc() fallan.
*/
@media (min-width: 861px) and (min-aspect-ratio: 1/1) and (min-height: 600px) {
  .landing-screen {
    /* El nav va superpuesto y nunca opaco: no descuenta alto. Cada
       sección es la pantalla entera, igual que en Figma (1920x1080). */
    --view-h: 100vh;
  }

  #hero-banner {
    min-height: 100vh;
  }

  #landing-how,
  #landing-find,
  #landing-story,
  #landing-faq,
  #landing-cta-footer {
    height: var(--view-h);
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /*
    ── ¿Cómo funciona? (Figma 253:1033, seccion de 1081) ──
    Frame 127 (titulo) y=296  -> 27.38%
    card01 en hover y=492 h=589 -> arranca en 45.5%, alto 54.48%
    card02/03 default y=535 h=546 -> 92.7% del alto del contenedor
    Las cards terminan en el borde inferior (492+589 = 1081).

    El 6% que tenia antes metia el titulo debajo del nav, que ahora es
    siempre transparente y flota sobre todas las secciones.
  */
  .how-section {
    padding-top: calc(var(--view-h) * 0.2738);
    padding-bottom: 0;
  }

  .how-title {
    flex: 0 0 auto;
    margin-bottom: 0;
  }

  /*
    0.5448 (spec Figma) * 1.2: la card necesita 20% más de alto del que
    le daba la proporción pura. Con 0.5448 el alto útil a 1080 era 545 y
    el contenido pide ~613 (padding 100+100, número 97, ícono 201,
    título, párrafo), así que el número quedaba FUERA del borde superior
    de la card y el overflow:hidden se lo comía — de ahí que solo se
    viera al alejar el zoom (más px de viewport = más alto de card).
    flex-shrink sigue en 1: si la pantalla no da para tanto, la fila
    cede en vez de meterse debajo del título.
  */
  .how-cards {
    flex: 0 1 calc(var(--view-h) * 0.6538);
    min-height: 0;
    margin-top: auto;
  }

  /*
    El "abre-libro" (Figma 130:1554): la card crece hacia arriba al hacer
    hover, anclada abajo. Antes eran dos min-height en px; acá es la misma
    proporción exacta (646/689 = 93.76%) sobre el alto que le tocó al
    contenedor, así que el gesto sobrevive a cualquier alto de pantalla.
  */
  .how-card {
    min-height: 0;
    height: 92.7%;
    padding: calc(var(--view-h) * 0.0926) clamp(20px, 3.07vw, 59px);
  }

  /*
    ── Interior de la card, proporcional a la pantalla (Figma 253:1039) ──
    El alto de la card ya es fracción de --view-h, pero su contenido
    seguía midiéndose en vw: en 1920x1080 REAL (viewport útil ~940 con la
    barra del navegador) el contenido pedía 613px dentro de una card de
    548 y, como la card es justify-content:flex-end + overflow:hidden, lo
    que sobra se sale por ARRIBA: el número (primer hijo) desaparecía.
    Por eso solo se veía alejando el zoom, que agranda el viewport en px.

    Ratios sobre los 1080 del diseño: padding 100 -> 9.26%, número 80 ->
    7.41%, ícono 201 -> 18.61%, gap 16 -> 1.48%, título 44 -> 4.07%,
    párrafo 18 -> 1.67%. Los tipos van con min() contra su clamp en vw
    para que en una pantalla alta y angosta no crezcan de más.
    line-height 1 en número y título: en Figma esas cajas de texto miden
    exactamente el tamaño de fuente, no 1.2x.
  */
  .how-card-eyebrow {
    margin-bottom: calc(var(--view-h) * 0.0074);
    font-size: min(clamp(40px, 4.17vw, 80px), calc(var(--view-h) * 0.0741));
    line-height: 1;
  }

  .how-card-content {
    gap: calc(var(--view-h) * 0.0148);
    margin-bottom: calc(var(--view-h) * 0.0148);
  }

  .how-card-icon {
    width: min(clamp(120px, 10.47vw, 201px), calc(var(--view-h) * 0.1861));
    height: min(clamp(120px, 10.47vw, 201px), calc(var(--view-h) * 0.1861));
  }

  .how-card h3 {
    font-size: min(clamp(1.25rem, 2.29vw, 2.75rem), calc(var(--view-h) * 0.0407));
    line-height: 1.1;
  }

  .how-card p {
    font-size: min(clamp(0.875rem, 0.94vw, 1.125rem), calc(var(--view-h) * 0.0167));
  }

  /*
    ── ¿Qué encontrarás? (253:1065, 1080) ──   titulo y=209 -> 19.35%
       puertas y=477 h=267 -> gap 2.96%, alto 24.72%
       insights y=768 -> gap 2.22%;  ultima fila termina en 956 -> 11.48% abajo
    ── Historia (253:1134, 1081) ──            titulo y=209 -> 19.33%
       bento y=424, termina en 941 -> gap 3.52%, alto 47.83%, 12.95% abajo
    ── FAQ (253:1174, 1081) ──                 titulo y=222 -> 20.54%
       lista y=388 h=400 -> gap 4.44%, alto 37%, 27.1% abajo
  */
  /*
    Mismo caso que Historia: en 900 físicos (~678 útiles) el intro (que lo
    manda la columna derecha, no el título) es fijo y, con estos paddings
    proporcionales, la fila de puertas se comprimía por debajo de su
    contenido y recortaba el copy de 3 líneas. Padding con recta de más
    pendiente anclada en 1080 (ahí da 209 y 124, idéntico al diseño) para
    liberar alto solo en pantallas bajas.
  */
  .find-section {
    padding-top: calc(var(--view-h) * 0.2836 - 97.3px);
    padding-bottom: calc(var(--view-h) * 0.1791 - 69.4px);
  }

  /*
    El bento pedía más alto del que le dejaban estos paddings en pantallas
    de 900 físicos (~678 útiles): a 1080 el 19.33% + 12.95% son 209 y 140,
    que se ven bien, pero al escalar en proporción pura seguían comiéndose
    un 32% del alto y las cards de la fila de arriba recortaban su texto.
    Se usa una recta con más pendiente ANCLADA en 1080 (ahí da exactamente
    209 y 140, idéntico al diseño): el término en px es negativo, así que
    baja más rápido que la proporción y libera alto justo en las pantallas
    bajas, sin tocar la vista de 1080.
  */
  .story-section {
    padding-top: calc(var(--view-h) * 0.283 - 96.8px);
    padding-bottom: calc(var(--view-h) * 0.1738 - 47.8px);
  }

  .faq-section {
    padding-top: calc(var(--view-h) * 0.2054);
    padding-bottom: calc(var(--view-h) * 0.271);
  }

  .find-intro,
  .story-intro,
  .faq-title {
    flex: 0 0 auto;
  }

  /*
    El intro de Historia (kicker + título) NO encoge (flex:0 0 auto) y el
    título estaba solo en vw, así que medía lo mismo a 1080 que en una
    pantalla de 900 reales (~678 útiles con la barra del navegador): las
    tres líneas + los paddings proporcionales le comían el alto al bento,
    que quedaba más corto que su contenido y overflow:hidden lo recortaba
    (se perdía la última línea de "Respaldado por expertos"). Se topa el
    título por altura igual que el hero y las how-card: a 1080 el min()
    elige el valor original y no se nota; recién comprime en pantallas
    bajas, donde libera el alto que necesita el bento.
  */
  .story-title {
    font-size: min(clamp(1.9rem, 3.4vw, 3.75rem), calc(var(--view-h) * 0.053));
  }

  /*
    La puerta necesita ~184px (banda + copy de 3 líneas con line-height
    1.83); el alto puro 0.2472 daba 167 a 678 y recortaba. La base sube
    con una recta más suave anclada en 1080 (267 exactos): a 678 da ~190,
    suficiente para el copy completo, sin tocar el diseño de 1080.
  */
  .find-doors {
    flex: 0 1 calc(var(--view-h) * 0.1915 + 60.2px);
    min-height: 0;
    margin-top: calc(var(--view-h) * 0.0296);
  }

  .find-insights {
    flex: 0 1 auto;
    min-height: 0;
    margin-top: calc(var(--view-h) * 0.0222);
  }

  .story-bento {
    flex: 0 1 calc(var(--view-h) * 0.4783);
    min-height: 0;
    margin-top: calc(var(--view-h) * 0.0352);
  }

  .faq-title {
    margin-bottom: calc(var(--view-h) * 0.0444);
  }

  .faq-list {
    flex: 0 1 calc(var(--view-h) * 0.37);
    min-height: 0;
  }

  /* ── CTA + footer ── */
  .cta-footer-section {
    padding-top: calc(var(--view-h) * 0.06);
    padding-bottom: calc(var(--view-h) * 0.03);
  }

  .cta-footer-panel {
    flex: 1 1 auto;
    min-height: 0;
  }

  .site-footer {
    flex: 0 0 auto;
    margin-top: calc(var(--view-h) * 0.03);
  }
}

@media (min-width: 861px) and (min-aspect-ratio: 1/1) and (min-height: 600px) and (hover: hover) and (pointer: fine) {
  /* Abierta (Figma 253:1040): padding 60 -> 5.56%, ícono 240 -> 22.2%. */
  .how-card:hover {
    min-height: 0;
    height: 100%;
    padding: calc(var(--view-h) * 0.0556) clamp(20px, 3.07vw, 59px);
  }

  .how-card:hover .how-card-icon {
    width: min(clamp(140px, 12.5vw, 240px), calc(var(--view-h) * 0.2222));
    height: min(clamp(140px, 12.5vw, 240px), calc(var(--view-h) * 0.2222));
  }
}

/*
  Hero: mismo requisito, con dos diferencias. Ocupa 100vh completos (el nav
  va transparente encima) y su contenido es tipográfico, así que no alcanza
  con comprimir espaciados: en pantallas bajas (1366x768 son 673px útiles)
  el texto por sí solo se pasa. Cada medida se topea con su equivalente en
  vh vía min(), tomando como referencia 1920x1080 — ahí el min() elige
  siempre el valor original y no se nota, y recién comprime más abajo.

  Reparto de Figma (252:852): contenido 77.3% del alto, pilares 22.7%.
*/
@media (min-width: 861px) and (min-aspect-ratio: 1/1) and (min-height: 600px) {
  #hero-banner {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }

  .hero-banner-content {
    flex: 1 1 auto;
    min-height: 0;
    gap: min(24px, 2.2vh);
    padding-top: calc(var(--hero-nav-h, 0px) + min(48px, 4.4vh));
  }

  .hero-banner-title {
    font-size: min(clamp(2.75rem, 2.6vw + 2.4rem, 7.125rem), 8.4vh);
  }

  .hero-banner-copy {
    font-size: min(1.1rem, 2vh);
  }

  .hero-banner-cta-wrap {
    padding-top: min(20px, 1.9vh);
    padding-bottom: min(20px, 1.9vh);
  }

  .hero-banner-cta {
    min-height: min(64px, 6.3vh);
  }

  .hero-banner-pillars {
    flex: 0 0 auto;
    padding-top: min(45px, 4.2vh);
    padding-bottom: min(45px, 4.2vh);
  }

  .hero-banner-pillar-copy {
    font-size: min(0.9rem, 1.6vh);
  }

  .hero-banner-tagline {
    margin-top: min(44px, 4vh);
  }
}

/*
  El bento de Historia se apretaba pero sus filas no: las cards mantenían
  su alto intrínseco y el contenido se salía de la caja (lo recortaba el
  overflow de la sección). Las filas pasan a repartirse el alto disponible
  con la proporción de Figma (253:1145 = 308 y 253:1148 = 179), y la card
  cede padding e icono para que su contenido entre.
*/
@media (min-width: 861px) and (min-aspect-ratio: 1/1) and (min-height: 600px) {
  .story-bento {
    grid-template-rows: minmax(0, 308fr) minmax(0, 179fr);
  }

  .story-card {
    min-height: 0;
    overflow: hidden;
    padding-top: min(32.4px, 2.6vh);
    padding-bottom: min(32.4px, 2.6vh);
    gap: min(24px, 2vh);
  }

  .story-card-icon {
    height: min(73px, 6.8vh);
    flex: 0 0 auto;
  }

  /*
    El ícono de información es más grande por diseño y su regla propia
    (más específica) se saltaba el tope de arriba: en pantallas bajas
    quedaba en ~77px y era lo único que seguía recortando esa card. Se
    topa con un vh calibrado para que a 1080 el min() elija su valor
    original (nada cambia) y solo comprima más abajo.
  */
  .story-card.is-informacion .story-card-icon {
    height: min(clamp(58px, 5.42vw, 104px), calc(var(--view-h) * 0.072));
  }

  /*
    El h3 también se topa por altura: a 1080 el min() elige su valor en vw
    (nada cambia), pero en pantallas bajas cede junto al ícono y el padding
    para que el párrafo de las cards de arriba (información/herramientas)
    entre sin recortarse.
  */
  .story-card h3 {
    font-size: min(clamp(1.375rem, 2.08vw, 2.5rem), calc(var(--view-h) * 0.036));
    line-height: 1.1;
  }
}

/*
  FAQ: la lista vuelve a absorber el alto sobrante (flex:1) en vez de
  reservar 519px fijos, y sus medidas se topean por altura igual que el
  resto. Así el estado abierto — que agrega ~104px (Figma 220:647: 82 -> 186)
  — entra dentro de la sección sin empujarla ni quedar recortado.
*/
@media (min-width: 861px) and (min-aspect-ratio: 1/1) and (min-height: 600px) {
  .faq-list {
    flex: 1 1 auto;
    min-height: 0;
    gap: min(24px, 2.7vh);
  }

  .faq-item-head {
    min-height: min(66px, 7.4vh);
  }

  .faq-answer {
    max-height: 0;
  }

  .faq-item.is-open .faq-answer {
    max-height: min(200px, 22vh);
  }
}

/*
  ── CTA final + footer, contra la estructura real ────────────────────
  Frame 151 (Figma 252:780) x=435.5 y=225 w=1066.5 h=669.276 sobre el
  frame de 1920x1080. Dentro tiene DOS hijos, y acá estaba mi error:

    Mask group (252:697)  0,0  1066.5 x 669.276
      - Vector 15 (252:696): la forma del recorte, del tamaño del grupo
      - background 1 (252:694): la foto, 1404.5 x 937.9 en -0.2,-92.5
        (o sea MÁS GRANDE que el recorte y corrida hacia arriba)
    Frame 121 (252:709)   41.5, 254.41   680 x 374.727

  Yo había tomado por "el panel" la zona oscura que se ve, que en realidad
  es solo el interior de la foto recortada — el panel de verdad es el mask
  group entero, empieza mucho más arriba y es bastante más alto. De ahí
  que todo el bloque quedara chico y mal ubicado.

  Proporciones sobre los 1080 de la vista (el nav no descuenta):
    panel        y 225 -> 20.83%   alto 669.276 -> 61.97%
    aspecto      1066.5 / 669.276 = 1.5935 (hay que respetarlo o se
                 deforma el recorte y la foto de adentro)
    contenido    x 3.89%  y 38.01%  ancho 63.76%  alto 55.99%
                 -> NO va centrado: 38% de aire arriba y 6% abajo

  Y el título: 114px estaba bien, lo que estaba mal era el interlineado.
  Figma lo da con leading 58.88px y las dos líneas a 103px una de otra
  (103/114 = 0.9035), no el 1.05 que tenía — por eso medía 239 en vez
  de los 185 del diseño.
*/
@media (min-width: 861px) and (min-aspect-ratio: 1/1) and (min-height: 600px) {
  .cta-footer-section {
    padding-top: calc(var(--view-h) * 0.2083);
    padding-bottom: calc(var(--view-h) * 0.03);
  }

  .cta-footer-panel {
    flex: 0 0 auto;
    height: calc(var(--view-h) * 0.6197);
    width: auto;
    aspect-ratio: 1066.5 / 669.276;
    max-width: 1067px;
    min-height: 0;
    /* El contenido se apoya abajo, no al medio. El 6% es del ALTO del
       panel; en % el padding resolvería contra el ancho, así que va
       calculado: 0.6197 * 0.06 = 3.72% del alto de vista. */
    align-items: flex-end;
    padding-bottom: calc(var(--view-h) * 0.0372);
  }

  /*
    El recorte del panel (panel-mask.svg) pone el borde de la pared
    oscura en x=732.53 de 1066.5 = 68.69% — de ahí a la derecha ya es el
    arco y la jamba de la puerta. El contenido arrancaba en 3.89% y medía
    63.76%, o sea terminaba en 67.65%: el título quedaba a ~20px de la
    puerta y la pisaba visualmente. Se baja a 58.5% para que el bloque
    entero cierre en 62.4% y quede un aire de ~6.3% (≈67px sobre el panel
    de 1066) antes de la jamba: el texto queda DENTRO del cuarto.
  */
  .cta-footer-content {
    width: 58.5%;
    max-width: none;
    margin-left: 3.89%;
    padding: 0;
    gap: calc(var(--view-h) * 0.0148);
    /* Sin gradiente propio: el lado oscuro lo trae la foto dentro del
       recorte, como en el diseño. */
    background: none;
  }

  /*
    Las dos líneas van a 103px una de otra (103/114 = 0.9035) — ese es el
    espaciado real del diseño. Pero con ese interlineado el bloque mide
    2 x 0.9035 x fs = 19.08% de la vista, contra el 17.13% (185/1080) que
    da Figma: la diferencia es el medio-interlineado que sobra arriba y
    abajo, porque las cajas de texto de Figma son más ajustadas que las
    cajas de línea del navegador. Se recorta con margen negativo para que
    el bloque ocupe lo que ocupa en el diseño sin tocar el espaciado.
  */
  .cta-footer-title {
    /* 0.1056 (114px @1080) dejaba "tu recorrido" en 61.9% del panel, que
       con el margen de 3.89% llegaba hasta la puerta. 0.0966 lo deja en
       ~56.6% y entra completo en la pared. */
    font-size: calc(var(--view-h) * 0.0966);
    line-height: 0.9035;
    margin-top: calc(var(--view-h) * -0.00975);
    margin-bottom: calc(var(--view-h) * -0.00975);
  }

  /* Piso de 220px (el ancho del CTA en Figma): por debajo de eso el
     botón se estrecha y "Comienza tu viaje" parte en dos líneas. */
  .cta-footer-cta-wrap {
    width: max(220px, calc(var(--view-h) * 0.2659));
    height: calc(var(--view-h) * 0.109);
  }

  .cta-footer-cta-wrap .hero-banner-cta {
    white-space: nowrap;
  }

  /* Una línea, como en Figma (253:1268 / 253:1270). */
  .site-footer-copyright,
  .site-footer-tagline {
    white-space: nowrap;
  }

  /*
    Al volver la sección un flex column, .site-footer dejó de ocupar el
    ancho: sus márgenes laterales `auto` (los que lo centraban cuando era
    un bloque) anulan el stretch del flex, así que se encogía al ancho de
    su contenido (1183 en vez de 1583) y el copyright y los iconos se
    metían hacia adentro en vez de quedar contra los márgenes de la
    sección. El width:100% le devuelve el ancho; el max-width y los
    márgenes auto siguen centrándolo en pantallas más anchas que 1596.
  */
  .site-footer {
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto;
  }
}

/*
  ── La foto dentro del recorte (Figma 252:694 "background 1") ────────
  No cubre el panel: es MÁS GRANDE y va anclada abajo a la derecha.
  Sobre un panel de 1066.5 x 669.276 la foto mide 1404.514 x 937.867 en
  (-0.21, -92.47), o sea:

    ancho    1404.514 / 1066.5 = 131.69%
    alto      937.867 / 669.276 = 140.13%
    desborde  337.8 a la derecha (31.67%) y 176.1 abajo (26.31%)

  Y la máscara se aplica DENTRO de esa caja, no sobre el panel:
    mask-size      1067.537 / 1404.514 = 76.01%  x  670.276 / 937.867 = 71.47%
    mask-position   -0.292 / 336.977 = -0.09%    x   91.966 / 267.591 = 34.37%

  Con eso la esquina del card cae donde debe: el path de la máscara la
  pone en V229.171 de 670.276 (34.2% del alto del panel) y el borde
  izquierdo del panel queda en 435.5 de 1920 = 22.68vw, entre donde
  termina el logo (420) y donde arranca "Inicio" (474).

  El asset ya viene con el aspecto exacto de esa caja (1535x1025 =
  1.4976 contra 1404.514/937.867 = 1.4976), así que no se deforma.
*/
@media (min-width: 861px) and (min-aspect-ratio: 1/1) and (min-height: 600px) {
  .cta-footer-panel {
    /* Ancho derivado del alto por el aspecto del recorte, para poder
       anclar la esquina izquierda sin que el panel se salga. */
    --cta-panel-w: min(1067px, calc(var(--view-h) * 0.98748));
    margin-left: max(
      0px,
      min(
        calc(22.68vw - clamp(20px, 8.4vw, 162px)),
        calc(100% - var(--cta-panel-w))
      )
    );
    margin-right: auto;
  }

  .cta-footer-panel-photo {
    inset: auto -31.67% -26.31% auto;
    width: 131.69%;
    height: 140.13%;
    mask-size: 76.01% 71.47%;
    -webkit-mask-size: 76.01% 71.47%;
    mask-position: -0.09% 34.37%;
    -webkit-mask-position: -0.09% 34.37%;
  }
}


/*
  Banda sin ajuste a pantalla (tablet vertical o viewport muy bajo, de
  861px de ancho para arriba). Ahí las secciones vuelven a su alto natural,
  pero el nav sigue siendo transparente y flotando encima, así que el
  título de cada sección quedaba debajo. Se les da la altura del nav como
  piso de padding superior.
*/
@media (min-width: 861px) and (max-aspect-ratio: 1/1),
       (min-width: 861px) and (max-height: 599px) {
  .how-section,
  .find-section,
  .story-section,
  .faq-section,
  .cta-footer-section {
    padding-top: max(48px, calc(var(--hero-nav-h, 0px) + 24px));
  }
}

/*
  Puertas de "¿Qué encontrarás?" (find-door): 5px menos de tipografía en
  desktop, a pedido. Se resta sobre el mismo clamp() original para que siga
  escalando igual con el ancho; mobile usa .find-door-mobile-* y no se toca.
*/
@media (min-width: 861px) {
  .find-door-num {
    font-size: calc(clamp(2rem, 2.92vw, 3.5rem) - 5px);
  }

  .find-door-head h3 {
    font-size: calc(clamp(1.05rem, 1.67vw, 2rem) - 5px);
  }

  .find-door-copy {
    font-size: calc(clamp(0.95rem, 1.25vw, 1.5rem) - 5px);
  }
}

/*
  Hover de las puertas (Figma 248:1186 default vs 248:1188 Variante2,
  mismo tamaño 518x267 — el hover NO cambia medidas, solo color):

    banda del header: degradado #ddbc92->#8d5d32  ->  blanco sólido #fdfffe
    card:             sin borde                   ->  borde 1px #fdfffe

  El texto se queda en #47280f (café oscuro) en ambos estados.
  El borde se hace con inset box-shadow en vez de border para no correr el
  layout 1px al entrar el hover.
*/
@media (hover: hover) and (pointer: fine) {
  .find-door {
    transition: box-shadow 0.18s ease;
  }

  .find-door-head {
    transition: background 0.18s ease;
  }

  .find-door:hover {
    box-shadow: inset 0 0 0 1px #fdfffe;
  }

  /* Gana sobre la regla de :first-child, que invierte el degradado. */
  .find-door:hover .find-door-head,
  .find-door:first-child:hover .find-door-head {
    background: #fdfffe;
  }
}

@media (prefers-reduced-motion: reduce) {
  .find-door,
  .find-door-head {
    transition: none;
  }
}

/*
  ── Banda tablet vertical (601–860px) ────────────────────────────────
  Debajo de 861 se aplica el lienzo mobile, que está calculado sobre el
  frame de 360 de Figma y topea el contenido en 480px. En un tablet de
  768 eso deja el contenido encajonado en el centro con muchísimo aire a
  los lados, y los carruseles (cards de 328 fijos) muestran 2,3 tarjetas
  con la tercera cortada. Se ve mal, pero no hay frame de Figma para este
  ancho, así que se adapta el lienzo mobile en vez de inventar un diseño:

    · el contenido pasa a topear en 720 en vez de 480
    · Historia: las 4 cards van en grilla 2x2 (pedido explícito)
    · ¿Cómo funciona? y ¿Qué encontrarás?: los carruseles muestran
      exactamente 2 tarjetas, en vez de 2 y un pedazo

  No toca nada por debajo de 601 (teléfonos), que sigue igual.
*/
@media (min-width: 601px) and (max-width: 860px) {
  .landing-screen {
    --m-gutter: max(24px, (100vw - 720px) / 2);
  }

  /* Dos cards justas dentro del scroller horizontal (gap 8). El padding
     del 14.94% del nodo se queda: ahora que el texto va en cqw escala con
     la card, así que la proporción se mantiene y ya no parte "Entra a /
     una sala" como pasaba con los tamaños fijos en px. */
  .how-card-mobile {
    width: calc((100% - 8px) / 2);
  }

  /* Swiper corre con slidesPerView:'auto', así que respeta este ancho
     (spaceBetween: 8 en find-doors-swiper.js). */
  .find-doors-swiper .swiper-slide {
    width: calc((100% - 8px) / 2);
  }

  /* Los 223px de margen salen del frame de 360, donde el intro ocupa
     muchas más líneas. Acá el texto entra en menos alto y ese margen fijo
     dejaba un hueco enorme antes de las puertas. */
  .find-doors-swiper {
    margin-top: 40px;
  }

  /* Historia: 2x2 en vez de una sola columna. */
  .story-cards-mobile {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .story-card-mobile {
    width: auto;
    height: auto;
    min-height: 220px;
  }
}

/*
  ── Modal "Nuestra Historia" ─────────────────────────────────────────
  Figma 106:970 (desktop, 900x560) y 270:2656 (mobile, 328x560). Los dos
  nodos son la MISMA tarjeta con distintas medidas, así que hay un solo
  markup y acá solo cambian los números por breakpoint:

    tarjeta   560 de alto, borde 1px #dca249, radio 16, degradado
              #0c152d -> #08061b, sombra 0 4px 2px rgba(0,0,0,.25),
              padding 24 a los lados y abajo, gap 24
    head      título Montserrat SemiBold 24/1.3 #dca249 + botón de cierre
    cuerpo    Montserrat Regular 16/1.5 #fdfffe, con <strong> en Bold
    logo      mismo lockup del nav, a 30.713px (desktop) / 27.733 (mobile)

  El aire de arriba (29.28 en desktop, 10.87 en mobile) NO es padding:
  la tarjeta es justify-center con alto fijo y ese hueco es lo que sobra.
  Sale la cuenta en los dos nodos — desktop: (560-24-477.44)/2 = 29.28;
  mobile: (560-24-514.26)/2 = 10.87 — así que se replica igual y no como
  un padding-top a mano.

  Diferencias reales entre los dos nodos, no inventadas:
    - desktop centra el título (778 de ancho de 828) y el cuerpo;
      mobile los alinea a la izquierda (231 de 294)
    - la caja del cuerpo mide 344 en desktop y 386 en mobile, y en mobile
      el nodo la declara con overflow-y:auto (270:2665) porque el texto
      no entra. Acá los dos scrollean: el de desktop no lo necesita al
      alto del diseño, pero sí en pantallas más bajas.
*/
.story-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.story-modal[hidden] {
  display: none;
}

.story-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 21, 0.72);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.24s ease;
}

.story-modal.is-open .story-modal-backdrop {
  opacity: 1;
}

.story-modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: min(900px, 100%);
  height: 560px;
  max-height: calc(100vh - 48px);
  padding: 0 24px 24px;
  border: 1px solid #dca249;
  border-radius: 16px;
  background: linear-gradient(180deg, #0c152d, #08061b);
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.25));
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition:
    opacity 0.26s ease,
    transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Recibe el foco al abrir (tabindex="-1") pero no es un control: no debe
   dibujar anillo. */
.story-modal-card:focus {
  outline: none;
}

.story-modal.is-open .story-modal-card {
  opacity: 1;
  transform: none;
}

/* 124:1325 — 828 de ancho (todo el interior), gap 16. */
.story-modal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

.story-modal-head h2 {
  flex: 1;
  margin: 0;
  color: #dca249;
  font-family: "Montserrat", var(--sans);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  text-align: center;
}

/* 106:971 — 34 de ancho con 8 de padding alrededor del vector de 16. */
.story-modal-close {
  flex: 0 0 auto;
  display: flex;
  width: 34px;
  padding: 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.18s ease;
}

.story-modal-close img {
  width: 16px;
  height: 16px;
}

@media (hover: hover) and (pointer: fine) {
  .story-modal-close:hover {
    opacity: 0.7;
  }
}

.story-modal-close:focus-visible {
  outline: 1px solid #dca249;
  outline-offset: 2px;
}

/* 106:973 — caja de 344 de alto. Va como flex-basis y no como height
   fija para que en pantallas más bajas que 560 se encoja (y scrollee)
   en vez de desbordar la tarjeta. */
.story-modal-body {
  flex: 0 1 344px;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  color: #fdfffe;
  font-family: "Montserrat", var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}

/*
  En el nodo la separación entre párrafos es un renglón vacío, no un
  margen: por eso vale exactamente un interlineado (16 * 1.5).
*/
.story-modal-body p {
  margin: 0;
}

.story-modal-body p + p {
  margin-top: 24px;
}

.story-modal-body strong {
  font-weight: 700;
}

/* 106:992 — mismo lockup del nav; el degradado y el tracking salen de
   .hero-banner-brand, acá solo cambia el tamaño (30.713px). */
.story-modal-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.story-modal-logo img {
  width: 43.8px;
  height: auto;
}

.story-modal-logo span {
  font-family: "Montserrat", var(--sans);
  font-weight: 500;
  font-size: 30.713px;
  letter-spacing: 0.21em;
  text-shadow: 0 1.229px 1.229px rgba(0, 0, 0, 0.25);
  background: linear-gradient(180deg, #8d5d32 37%, #503217 68%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 270:2656 — mismo componente a 328 de ancho: título y cuerpo alineados
   a la izquierda y logo un punto más chico. */
@media (max-width: 860px) {
  .story-modal {
    padding: 16px;
  }

  .story-modal-card {
    width: min(328px, 100%);
    max-height: calc(100vh - 32px);
  }

  .story-modal-head h2 {
    text-align: left;
  }

  /* 270:2665 — acá la caja del cuerpo es de 386, no de 344. */
  .story-modal-body {
    flex: 0 1 386px;
    text-align: left;
  }

  .story-modal-logo img {
    width: 39.55px;
  }

  .story-modal-logo span {
    font-size: 27.733px;
    text-shadow: 0 1.109px 1.109px rgba(0, 0, 0, 0.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-modal-backdrop,
  .story-modal-card {
    transition: none;
  }
}

/*
  ── Hover de las cards de Historia (desktop) ─────────────────────────
  Figma: 121:1261 (informacion), 123:1293 (herramientas), 123:1315
  (crecimiento) y 124:1340 (respaldado). Las cuatro variantes coinciden:

    fondo    rgba(2,5,21,.8) sólido
             -> degradado vertical rgba(8,6,27,.9) a rgba(38,29,129,.9)
    borde    ninguno -> 2px #fdfffe
    textos   #ddbc92 -> #fdfffe
    tamaño   x1.01 (465->471.04, 623->629.23, 461->465.61, 1111->1122.11)

  El nodo de "informacion" trae el degradado a .7 en vez de .9 y una
  sombra que las otras tres no tienen; se toma el .9 de la mayoría para
  que las cuatro se vean iguales al pasar el mouse.

  El crecimiento va por transform y el borde por inset box-shadow, no
  por width/height ni border: así el bento no re-maqueta al entrar el
  hover (son celdas de una grilla; cualquier cambio de caja movería a
  las vecinas). El z-index sube para que la card crecida pase por
  encima de las de al lado en vez de meterse debajo.

  Va al final del archivo para ganarle al bloque de ajuste a pantalla,
  que vuelve a tocar .story-card más arriba.
*/
.story-card {
  position: relative;
  transition:
    transform 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease,
    color 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .story-card:hover {
    z-index: 1;
    transform: scale(1.01);
    background: linear-gradient(180deg, rgba(8, 6, 27, 0.9), rgba(38, 29, 129, 0.9));
    box-shadow: inset 0 0 0 2px #fdfffe;
  }

  .story-card:hover h3,
  .story-card:hover p {
    color: #fdfffe;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-card {
    transition: none;
  }

  .story-card:hover {
    transform: none;
  }
}

/*
  ── LIENZO EN PANTALLAS > 1920 (2K / QHD y más) ──────────────────────
  Hasta 1920 no se toca NADA: todo este bloque arranca en 1921px.

  El diseño está medido sobre un lienzo de 1920 en el que el contenido de
  cada sección vive entre x=162 y x=1758 (1596 de ancho útil). Hasta esa
  medida las secciones coinciden, pero pasando 1920 cada bloque escalaba
  con una regla distinta y se separaban:

    .how-section   padding clamp(20px, 6vw, 160px)   -> se topa en 160
    .how-card      max-width 505px + fila centrada   -> deja de crecer
    .find-section  padding clamp(20px, 8.4vw, 162px) -> se topa en 162
    .find-door     sin tope                          -> sigue creciendo

  A 2560 eso daba cards de "¿Cómo funciona?" entre 490 y 2070, contra
  puertas de "¿Qué encontrarás?" entre 162 y 2398: casi 330px de desfase
  por lado. A 1920 la diferencia era de 8px y por eso no se notaba.

  La corrección es dejar de estirar: por encima de 1920 el lienzo se
  congela en sus 1596 de ancho y se centra, así que TODAS las secciones
  comparten los mismos bordes y las mismas 3 columnas (517.33 + 22 de
  gutter, las medidas de Figma). Las cards de la sección 2 caen entonces
  exactamente sobre las puertas de la sección 3.

  Los fondos no se ven afectados: son `position:absolute; inset:0`, siguen
  ocupando el ancho completo de la pantalla.
*/
@media (min-width: 1921px) {
  .how-section,
  .find-section,
  .story-section,
  .faq-section,
  .cta-footer-section {
    /* (100% - 1596px) / 2 == 162px justo en 1920 y crece desde ahí */
    padding-inline: calc((100% - 1596px) / 2);
  }

  /* mismo gutter que .find-doors / .find-insights (Figma: 518 x 22) */
  .how-cards {
    gap: 22px;
  }

  /*
    El tope de 505 es la medida de Figma para la card sola; acá manda la
    columna del lienzo, que es la que tiene que coincidir con la puerta de
    la sección siguiente.
  */
  .how-card {
    max-width: none;
  }
}


/*
  ============================================================
  WAITLIST — modal de lista de espera (pre-lanzamiento)
  ------------------------------------------------------------
  Toma la paleta y el andamiaje del modal de Historia (.story-modal):
  borde #dca249, fondo #0c152d→#08061b, tipografía Montserrat, misma
  transición de entrada y mismo z-index. Lo propio de acá es el
  formulario: campos con borde dorado tenue que se enciende al foco,
  select con caret dibujado en CSS (el nativo de Windows es blanco y
  rompía el tono) y un CTA con el mismo degradado del botón dorado del
  nav (.hero-banner-btn-gold).
  ============================================================
*/
.wl-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.wl-modal[hidden] {
  display: none;
}

.wl-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 21, 0.72);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.24s ease;
}

.wl-modal.is-open .wl-modal-backdrop {
  opacity: 1;
}

.wl-modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(468px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 40px;
  border: 1px solid #dca249;
  border-radius: 16px;
  background: linear-gradient(180deg, #0c152d, #08061b);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition:
    opacity 0.26s ease,
    transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.wl-modal.is-open .wl-modal-card {
  opacity: 1;
  transform: none;
}

/* Recibe el foco al abrir (tabindex="-1") pero no es un control. */
.wl-modal-card:focus {
  outline: none;
}

.wl-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  width: 34px;
  padding: 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  transition: opacity 0.18s ease;
}

.wl-modal-close img {
  width: 16px;
  height: 16px;
}

.wl-modal-close:focus-visible {
  outline: 1px solid #dca249;
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .wl-modal-close:hover {
    opacity: 0.7;
  }
}

.wl-modal-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wl-modal-eyebrow {
  margin: 0;
  color: #dca249;
  font-family: "Montserrat", var(--sans);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Mismo lockup de dos líneas del hero y del bloque final: la primera en
   claro y la segunda en dorado. */
.wl-modal-head h2 {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: "Nivella", var(--serif);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.1;
}

.wl-modal-head h2 .is-light {
  color: #fdfffe;
}

.wl-modal-head h2 .is-gold {
  color: #e8c46a;
}

.wl-modal-sub {
  margin: 0;
  color: rgba(253, 255, 254, 0.7);
  font-family: "Montserrat", var(--sans);
  font-size: 0.875rem;
  line-height: 1.55;
}

.wl-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wl-form[hidden] {
  display: none;
}

.wl-row {
  display: grid;
  grid-template-columns: 1fr 104px;
  gap: 12px;
}

.wl-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.wl-field label {
  color: rgba(253, 255, 254, 0.82);
  font-family: "Montserrat", var(--sans);
  font-weight: 500;
  font-size: 0.8125rem;
}

.wl-field input,
.wl-field select {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(220, 162, 73, 0.32);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #fdfffe;
  font-family: "Montserrat", var(--sans);
  font-size: 0.9375rem;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.wl-field input::placeholder {
  color: rgba(253, 255, 254, 0.32);
}

.wl-field input:focus,
.wl-field select:focus {
  outline: none;
  border-color: #dca249;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(220, 162, 73, 0.16);
}

.wl-field.has-error input,
.wl-field.has-error select {
  border-color: #e88b7d;
  box-shadow: 0 0 0 3px rgba(232, 139, 125, 0.14);
}

/*
  El select nativo dibuja su propia flecha con el color del sistema (en
  Windows queda blanca sobre el panel oscuro y desentona). Se apaga la
  apariencia nativa y el caret se dibuja acá en dorado.
*/
.wl-select-wrap {
  position: relative;
}

.wl-select-wrap select {
  padding-right: 36px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* El desplegable sí es nativo: se le fija el fondo para que las opciones
   no se pinten blancas. */
.wl-select-wrap select option {
  background: #0c152d;
  color: #fdfffe;
}

.wl-select-caret {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #dca249;
  border-bottom: 1.5px solid #dca249;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.wl-error {
  margin: 0;
  color: #e88b7d;
  font-family: "Montserrat", var(--sans);
  font-size: 0.75rem;
  line-height: 1.35;
}

.wl-error[hidden] {
  display: none;
}

/* Mismo degradado del botón dorado del nav (.hero-banner-btn-gold). */
.wl-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  margin-top: 4px;
  padding: 0 24px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #f0c984 0%, #d9a45e 100%);
  color: #1a1204;
  font-family: "Montserrat", var(--sans);
  font-weight: 600;
  font-size: 0.9375rem;
  box-shadow: 0 10px 26px rgba(217, 164, 94, 0.22);
  transition:
    transform 0.16s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

.wl-submit.is-ghost {
  background: transparent;
  border: 1px solid rgba(220, 162, 73, 0.5);
  color: #e8c46a;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .wl-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(217, 164, 94, 0.3);
  }
}

.wl-submit:focus-visible {
  outline: 2px solid #f0c984;
  outline-offset: 3px;
}

.wl-submit:disabled {
  cursor: progress;
  opacity: 0.72;
}

.wl-submit-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(26, 18, 4, 0.28);
  border-top-color: #1a1204;
  border-radius: 50%;
  animation: wl-spin 0.7s linear infinite;
}

.wl-submit.is-loading .wl-submit-spinner {
  display: block;
}

.wl-submit.is-loading .wl-submit-label {
  opacity: 0.75;
}

@keyframes wl-spin {
  to {
    transform: rotate(360deg);
  }
}

.wl-form-status {
  margin: 0;
  color: rgba(253, 255, 254, 0.72);
  font-family: "Montserrat", var(--sans);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.wl-form-status.is-error {
  color: #e88b7d;
}

.wl-form-status[hidden] {
  display: none;
}

.wl-legal {
  margin: 0;
  color: rgba(253, 255, 254, 0.4);
  font-family: "Montserrat", var(--sans);
  font-size: 0.6875rem;
  line-height: 1.5;
}

.wl-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px 0 4px;
  text-align: center;
}

.wl-success[hidden] {
  display: none;
}

.wl-success-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(220, 162, 73, 0.45);
  border-radius: 50%;
  background: rgba(220, 162, 73, 0.1);
  color: #e8c46a;
  font-size: 1.5rem;
}

.wl-success h3 {
  margin: 0;
  color: #fdfffe;
  font-family: "Nivella", var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
}

.wl-success p {
  margin: 0;
  color: rgba(253, 255, 254, 0.7);
  font-family: "Montserrat", var(--sans);
  font-size: 0.875rem;
  line-height: 1.55;
}

.wl-success .wl-submit {
  width: 100%;
  margin-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .wl-modal-backdrop,
  .wl-modal-card,
  .wl-submit {
    transition: none;
  }

  .wl-submit-spinner {
    animation-duration: 2s;
  }
}

@media (max-width: 860px) {
  .wl-modal {
    padding: 16px;
    /* Con el teclado abierto el diálogo centrado deja el campo activo
       debajo del teclado; anclado arriba siempre queda a la vista. */
    align-items: flex-start;
  }

  .wl-modal-card {
    gap: 20px;
    margin-top: 24px;
    max-height: calc(100dvh - 48px);
    padding: 32px 20px 24px;
  }

  .wl-modal-head h2 {
    font-size: 1.75rem;
  }
}

@media (max-width: 359px) {
  /* A 320px la columna fija de 104 para la edad deja el select en 150 y
     "Prefiero no decirlo" no entra: se apilan. */
  .wl-row {
    grid-template-columns: 1fr;
  }
}