/* ============================================================
   FAQ — hoja compartida por las 8 páginas de faq/.

   Externa a propósito: el resto del sitio inlinea su CSS porque son
   páginas sueltas, pero acá son 8 documentos con el mismo chrome.
   Un archivo cacheado gana contra 8 copias de 12 KB.

   Tokens y componentes (.btn, .eyebrow, .lead, footer) replican los de
   index.html / precios.html. Si allá cambia un color, cambia acá.
   ============================================================ */

:root {
  --indigo: #2B2AE6;
  --indigo-deep: #1E1DC8;
  --indigo-soft: #6E6BFF;
  --indigo-pale: #8F8DFF;
  --orange: #FF5A2C;
  /* El naranja de marca da 2,81:1 sobre --haze — abajo del 4,5 de AA. Sirve
     para superficies (botones, el cursor del footer sobre #0B0B12) pero no
     para texto chico sobre fondo claro. Este tono es el mismo naranja bajado
     a 4,85:1 sobre --haze y 5,37:1 sobre blanco. Todo texto naranja del FAQ
     usa este, no --orange. */
  --orange-ink: #C23A12;
  --ink: #0B0B12;
  --ink-2: #0E0E16;
  --haze: #F3F2FF;

  /* Texto secundario: .68 y no .62 — el paso de contraste del sitio dejó
     el texto chico arriba de 4.5:1 sobre --haze. No bajarlo. */
  --ink-soft: rgba(14, 14, 22, .68);
  /* .60 y no .55: el texto chico de las etiquetas (las secciones de cada
     tarjeta, "SIGUE", "SIGUIENTE") daba 4,11:1 y AA pide 4,5. Con .60 queda
     en 4,88:1 sobre --haze y 5,07:1 sobre blanco. */
  --ink-faint: rgba(14, 14, 22, .6);
  --linea: rgba(14, 14, 22, .1);

  --nav-h: 72px;
  --rail-w: 268px;
  /* Padding lateral del shell Y de los full-bleed de mobile (barra del
     índice, banda del buscador): salen del padding con margen negativo y
     vuelven a alinear su contenido con este mismo valor. Si difieren — antes
     el margen era un clamp() y el shell 32px fijos — quedan desalineados
     en <800px. */
  --shell-x: 32px;
  /* Alto de la barra fija del índice. 0 en desktop, donde no existe. Lo mide el
     JS y lo pisa en documentElement; estos valores son el default hasta que
     corra, y el único valor si no corre. */
  --barra-h: 0px;
}

* { box-sizing: border-box; }

/* Sin scroll-behavior:smooth, a diferencia del resto del sitio. Acá los
   documentos son largos: aterrizar en /faq/plata#pregunta-260 con scroll
   animado tarda ~2 s recorriendo toda la página. El salto al ancla tiene que
   ser instantáneo. Lo que sí anima es el botón de volver arriba, que pide
   behavior:'smooth' explícito en assets/faq.js. */
html, body { margin: 0; min-height: 100%; }

/* NUNCA overflow-x en html/body: en iOS Safari rompe el compositing y la
   página salta sola (bug ya documentado en el README). Lo que sobresale se
   recorta en su propio contenedor. */
body.faq-body {
  background: var(--haze);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  color: var(--ink-2);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
::selection { background: var(--indigo); color: #fff; }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 6px; }
footer :focus-visible { outline-color: var(--indigo-pale); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #EAE8FB; }
::-webkit-scrollbar-thumb { background: #C9C6F2; border-radius: 8px; border: 2px solid #EAE8FB; }
::-webkit-scrollbar-thumb:hover { background: var(--indigo-pale); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--indigo); color: #fff; padding: 10px 18px;
  border-radius: 10px; font: 700 13px 'Space Mono', monospace; text-decoration: none;
  transition: top .2s;
}
.skip:focus { top: 12px; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }

/* ============ nav ============ */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background .3s, box-shadow .3s, border-color .3s;
}
.nav-in {
  max-width: 1160px; margin: 0 auto; padding: 18px 32px;
  display: flex; align-items: center; gap: 28px; transition: padding .3s;
}
.nav.scrolled {
  background: rgba(243, 242, 255, .78);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  box-shadow: 0 16px 44px -26px rgba(43, 42, 230, .4);
}
.nav.scrolled::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(43, 42, 230, .38), transparent);
}
.nav.scrolled .nav-in { padding-top: 12px; padding-bottom: 12px; }

.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.wordmark { font: 700 17px 'Space Mono', monospace; letter-spacing: -.03em; color: var(--ink-2); }

.nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav-links a {
  font: 600 14px 'Hanken Grotesk', sans-serif; color: var(--ink-soft);
  text-decoration: none; transition: color .2s;
}
/* :not(.btn) — si no, el hover le pisa el color al botón (texto azul sobre fondo azul) */
.nav-links a:not(.btn):hover { color: var(--indigo); }
.nav-links a[aria-current="page"] { color: var(--indigo); }
/* "Entrar" diferenciado, igual que en el menú mobile */
.nav-links a.enter { color: var(--indigo); font-weight: 700; }
.nav-links a.enter:hover { color: var(--indigo-deep); }

/* ============ nav mobile: burger + panel ============ */

.nav-burger {
  display: none; flex: none; width: 42px; height: 42px; padding: 0;
  border: 1px solid rgba(43, 42, 230, .16); border-radius: 12px;
  background: rgba(255, 255, 255, .7); cursor: pointer; position: relative;
}
.nav-burger span {
  position: absolute; left: 11px; width: 20px; height: 2px; border-radius: 2px;
  background: var(--ink-2);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .18s;
}
.nav-burger span:nth-child(1) { top: 14px; }
.nav-burger span:nth-child(2) { top: 20px; }
.nav-burger span:nth-child(3) { top: 26px; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* sin backdrop-filter a propósito: en iOS el nav fijo con blur pinta frames stale */
.nav.menu-open { background: var(--haze); }

/* top:0 + padding-top y no top:var(--nav-h): el nav opaco (z:50 > z:49) pinta
   encima del mismo color, así que aunque --nav-h quede desactualizado mientras
   el nav anima su alto, no hay franja con la página de atrás visible. */
.nav-menu {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0;
  padding-top: var(--nav-h, 72px);
  z-index: 49; overflow-y: auto; overscroll-behavior: contain;
  background: var(--haze); border-bottom: 1px solid rgba(43, 42, 230, .14);
  box-shadow: 0 26px 50px -30px rgba(43, 42, 230, .6);
  opacity: 0; transform: translateY(-10px); pointer-events: none;
  /* visibility y no [hidden]: saca el panel del árbol de accesibilidad y del
     tab order igual, pero difiere hasta el final del fade al cerrar. */
  visibility: hidden;
  transition: opacity .22s, transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s .28s;
}
.nav-menu.on {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity .22s, transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.nav-menu-in { display: flex; flex-direction: column; min-height: 100%; padding: 10px 20px 24px; }
.nav-menu-in a {
  font: 600 15px 'Hanken Grotesk', sans-serif; color: var(--ink-soft);
  text-decoration: none; padding: 13px 4px; border-bottom: 1px solid rgba(14, 14, 22, .06);
}
.nav-menu-in a:active, .nav-menu-in a[aria-current="page"] { color: var(--indigo); }
.nav-menu-in a.enter { color: var(--indigo); font-weight: 700; }
.nav-menu-in a.btn { margin-top: auto; border-bottom: none; justify-content: center; color: #fff; }

/* 980px es el corte del resto del sitio (assets/app.css). Que coincida importa:
   si no, hay un rango donde la home muestra burger y el FAQ no. */
@media (max-width: 980px) {
  .nav-links a:not(.btn) { display: none; }
  .nav-links { margin-left: auto; gap: 12px; }
  .nav-burger { display: block; }
}

@media (min-width: 981px) {
  .nav-menu { display: none; }
}

/* ============ botones ============ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 14px 'Space Mono', monospace; text-decoration: none; border: none;
  cursor: pointer; border-radius: 11px; padding: 13px 22px;
  transition: background .2s, transform .15s, box-shadow .2s, color .2s, border-color .2s;
}
.btn.primary {
  color: #fff; background: var(--indigo);
  box-shadow: 0 14px 30px -14px rgba(43, 42, 230, .7);
  position: relative; overflow: hidden;
}
.btn.primary::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 45%; left: 0;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .32), transparent);
  transform: translateX(-220%) skewX(-20deg);
  transition: transform .65s cubic-bezier(.2, .7, .2, 1); pointer-events: none;
}
.btn.primary:hover { background: var(--indigo-deep); transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(43, 42, 230, .85); }
.btn.primary:hover::after { transform: translateX(340%) skewX(-20deg); }
.btn.ghost { color: var(--ink-2); background: transparent; border: 1px solid rgba(14, 14, 22, .18); }
.btn.ghost:hover { border-color: var(--indigo); color: var(--indigo); transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn.sm { padding: 10px 18px; font-size: 13px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(43, 42, 230, .1); border: 1px solid rgba(43, 42, 230, .22);
  padding: 6px 14px; border-radius: 30px;
  font: 700 11px 'Space Mono', monospace; color: var(--indigo); letter-spacing: .12em;
  text-transform: uppercase; margin: 0;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 9px; background: var(--orange); }
.eyebrow a { text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }

.lead {
  font: 400 clamp(16px, 1.8vw, 19px)/1.6 'Hanken Grotesk', sans-serif;
  color: var(--ink-soft); max-width: 62ch; margin: 20px 0 0;
}
.lead strong { color: var(--ink-2); font-weight: 700; }

/* ============ hero ============ */

.faq-hero { position: relative; overflow: hidden; padding: calc(var(--nav-h) + 62px) 0 44px; }
.faq-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 12% -20%, rgba(110, 107, 255, .26), transparent 62%);
}
.faq-hero.is-parte { padding: calc(var(--nav-h) + 40px) 0 28px; }

.faq-hero-in { position: relative; max-width: 1160px; margin: 0 auto; padding: 0 32px; }

.faq-hero h1 {
  font: 700 clamp(32px, 5vw, 56px)/1.05 'Space Grotesk', sans-serif;
  letter-spacing: -.035em; margin: 20px 0 0; text-wrap: balance; max-width: 18ch;
}
.faq-hero.is-parte h1 { font-size: clamp(28px, 3.6vw, 42px); max-width: 22ch; }

.faq-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.faq-hero-nota { font: 400 12.5px 'Space Mono', monospace; color: var(--ink-faint); }

.faq-trust {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 30px 0 0; padding: 0;
}
.faq-trust li {
  font: 400 12.5px 'Space Mono', monospace; color: var(--ink-soft);
  background: #fff; border: 1px solid var(--linea);
  border-radius: 999px; padding: 6px 13px;
}



/* ============ shell: rail + contenido ============ */

.faq-shell {
  max-width: 1160px; margin: 0 auto; padding: 0 var(--shell-x) 96px;
  display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr);
  gap: 56px; align-items: start;
}

@media (max-width: 1000px) {
  /* block y no grid de una columna: un sticky dentro de un ítem de grid queda
     preso de su celda, que acá mide lo que mide la barra — o sea, no viaja. */
  .faq-shell { display: block; padding-bottom: 64px; }
  .faq-main { padding-top: 24px; }
}

/* ============ rail ============ */

.faq-rail {
  position: sticky; top: calc(var(--nav-h) + 16px);
  max-height: calc(100vh - var(--nav-h) - 32px);
  /* dvh donde existe: 100vh en iOS incluye la barra del navegador y el final
     del rail quedaba abajo del borde visible. */
  max-height: calc(100dvh - var(--nav-h) - 32px);
  /* SIN overscroll-behavior:contain acá: el rail no parece un panel aparte, y
     con contain la rueda sobre el índice dejaba la página congelada al llegar
     el rail a su borde ("scrolleo y no pasa nada"). Con el encadenado normal
     el rail scrollea hasta su fin y la página sigue sola. En los overlays
     (hoja mobile, menú) contain sí corresponde y se queda. */
  overflow-y: auto;
  padding-bottom: 24px; scrollbar-width: thin;
}

/* Señal de que el índice es su propio scroll: un degradé pegado al borde de
   abajo del scrollport mientras queda contenido cortado. Al llegar al final
   (o si el índice entra entero) cae sobre el padding, del color del fondo,
   y desaparece solo — no hace falta JS. */
.faq-rail::after {
  content: ""; position: sticky; bottom: 0; display: block;
  height: 32px; margin-top: -32px;
  background: linear-gradient(to bottom, rgba(243, 242, 255, 0), var(--haze));
  pointer-events: none;
}

/* ── mobile: barra fija + hoja a pantalla completa ──────── */

@media (max-width: 1000px) {
  /* El rail queda pegado abajo del nav y sólo mide lo que mide la barra: la
     lista sale del flujo (fixed) cuando se abre, así que no empuja nada.
     Antes el índice era un bloque arriba del contenido y, una vez que bajabas,
     no había forma de navegar sin volver al principio. */
  :root { --barra-h: 46px; }

  .faq-rail {
    position: sticky; top: var(--nav-h); z-index: 45;
    max-height: none; overflow: visible; padding: 0;
    margin: 0 calc(var(--shell-x) * -1);
    background: var(--haze);
    border-bottom: 1px solid var(--linea);
    box-shadow: 0 10px 20px -18px rgba(43, 42, 230, .5);
  }

  .rail-det > summary {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    list-style: none; padding: 13px var(--shell-x);
  }
  .rail-barra-txt {
    display: flex; align-items: baseline; gap: 9px; min-width: 0; flex: 1;
    font: 400 14px 'Hanken Grotesk', sans-serif; color: var(--ink-soft);
  }
  .rail-barra-txt b {
    flex: none; font: 700 10.5px 'Space Mono', monospace;
    letter-spacing: .12em; text-transform: uppercase; color: var(--indigo);
  }
  /* El nombre de la sección puede ser largo: una línea y elipsis, así la barra
     nunca cambia de alto — cualquier cambio de alto acá empuja el documento. */
  #railDonde { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .rail-barra-ico {
    flex: none; width: 16px; height: 16px; color: var(--indigo);
    transition: transform .2s;
  }
  .rail-det[open] .rail-barra-ico { transform: rotate(180deg); }

  /* Sin padding arriba: cualquier espacio entre el borde de la hoja y la banda
     del buscador es una franja por la que se ve pasar el índice al scrollear.
     El aire lo pone la banda con su propio padding. El `top` lo fija el JS
     contra el borde de abajo de la barra — la barra es sticky, así que con la
     página arriba de todo no está pegada al nav y calcularlo con --nav-h daba
     una hoja 177px más alta que la barra. */
  .rail-hoja {
    position: fixed; left: 0; right: 0; bottom: 0;
    top: calc(var(--nav-h) + var(--barra-h));
    z-index: 46; overflow-y: auto; overscroll-behavior: contain;
    background: var(--haze);
    padding: 0 var(--shell-x) 40px;
  }

  /* Pegado arriba de la hoja: al abrir, la hoja se posiciona en la sección
     actual, así que un buscador estático quedaría fuera de pantalla justo
     cuando alguien abre para buscar. */
  /* Los márgenes negativos sacan la banda del padding de la hoja: si no, los
     renglones del índice pasan por el costado del input al scrollear. */
  .faq-buscador {
    position: sticky; top: 0; z-index: 2;
    margin: 0 calc(var(--shell-x) * -1) 14px;
    padding: 14px var(--shell-x);
    /* Opaca y no un degradado: con el fade se veían pasar los renglones del
       índice por atrás del input, que es justo lo que la banda tiene que tapar. */
    background: var(--haze);
    border-bottom: 1px solid var(--linea);
  }
  .faq-buscador input { padding: 13px 15px; font-size: 16px; } /* 16px: menos de eso, iOS hace zoom al enfocar */

  /* En la hoja se despliegan todas las partes: es el mapa completo, y para eso
     se abrió. */
  .rail-parte-a { font-size: 15px; padding: 10px; }
  .rail-parte .rail-sec {
    display: block; padding: 9px 10px 9px 20px;
    margin-left: 10px; border-left: 2px solid var(--linea);
    font: 400 14px 'Hanken Grotesk', sans-serif; color: var(--ink-soft);
    text-decoration: none; line-height: 1.35;
  }
  .rail-parte .rail-sec.is-activa {
    color: var(--indigo); font-weight: 600; border-left-color: var(--indigo);
  }
}

.faq-buscador { margin: 0 0 18px; }
.faq-buscador input {
  width: 100%; font: 400 14px 'Hanken Grotesk', sans-serif;
  padding: 11px 14px; border: 1px solid rgba(14, 14, 22, .16);
  border-radius: 11px; background: #fff; color: var(--ink-2);
  transition: border-color .2s, box-shadow .2s;
}
.faq-buscador input::placeholder { color: var(--ink-faint); }
.faq-buscador input:focus-visible {
  outline: none; border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(43, 42, 230, .16);
}

/* En desktop el <summary> no existe y el índice está siempre desplegado.
   En mobile ese mismo <summary> es la barra fija y .rail-hoja la hoja.
   Acotado a min-width y no suelto: suelto pisaba al bloque mobile, que está
   más arriba en el archivo y tiene la misma especificidad. */
@media (min-width: 1001px) {
  .rail-det > summary { display: none; }
}
.rail-det > summary::-webkit-details-marker { display: none; }

.rail-lista { list-style: none; margin: 0; padding: 0; }

.rail-parte { margin-bottom: 4px; }
.rail-parte-a {
  display: block; padding: 7px 10px; border-radius: 8px; text-decoration: none;
  font: 700 13px 'Hanken Grotesk', sans-serif; color: var(--ink-2);
  transition: background .18s, color .18s;
}
.rail-parte-a:hover { background: rgba(43, 42, 230, .07); color: var(--indigo); }
.rail-parte.is-actual > .rail-parte-a { color: var(--indigo); }

/* Las secciones sólo se despliegan en la parte que estás leyendo: el rail
   muestra el documento entero, pero sin 33 renglones a la vez. */
.rail-sec { display: none; }

.rail-parte.is-actual .rail-sec {
  display: block; padding: 5px 10px 5px 20px;
  margin-left: 10px; border-left: 2px solid var(--linea);
  font: 400 13px 'Hanken Grotesk', sans-serif; color: var(--ink-soft);
  text-decoration: none; line-height: 1.35;
  transition: color .18s, border-color .18s;
}
.rail-parte.is-actual .rail-sec:hover { color: var(--ink-2); border-left-color: var(--indigo-pale); }
.rail-parte.is-actual .rail-sec.is-activa {
  color: var(--indigo); font-weight: 600; border-left-color: var(--indigo);
}

/* ============ contenido ============ */

.faq-main { min-width: 0; padding-top: 8px; }

.faq-sec { scroll-margin-top: calc(var(--nav-h) + var(--barra-h) + 20px); margin-bottom: 64px; }

/* El popstate de la lectura continua aterriza en el arranque de una parte:
   sin este margen, el título quedaría tapado por el nav fijo y la barra. */
.faq-parte { scroll-margin-top: calc(var(--nav-h) + var(--barra-h) + 20px); }

.faq-sec > h2 {
  font: 700 clamp(23px, 2.6vw, 30px)/1.15 'Space Grotesk', sans-serif;
  letter-spacing: -.028em; margin: 0 0 8px; text-wrap: balance;
  display: flex; align-items: baseline; gap: 12px;
}
.faq-sec > h2 .num {
  font: 400 12px 'Space Mono', monospace; color: var(--orange-ink);
  letter-spacing: .04em; flex: 0 0 auto;
}

.faq-nota {
  max-width: 64ch; margin: 0 0 26px;
  font: 400 15px/1.6 'Hanken Grotesk', sans-serif; color: var(--ink-soft);
}

.qa {
  max-width: 68ch; padding: 22px 0 4px;
  border-top: 1px solid var(--linea);
  scroll-margin-top: calc(var(--nav-h) + var(--barra-h) + 20px);
}

.qa > h3 {
  position: relative;
  font: 700 17.5px/1.4 'Space Grotesk', sans-serif; letter-spacing: -.015em;
  margin: 0 0 10px; text-wrap: balance;
}

/* Ancla por pregunta: lo que hace que cada respuesta sea citable y
   compartible por separado. Aparece al hover, siempre alcanzable con teclado.

   --indigo y no --indigo-pale: el pale da 2,55:1 sobre --haze, abajo del 4,5
   que pide AA para texto de 15px. Como el ancla arranca en opacity 0, axe la
   saltea y nunca la reportó — pero al tabular hasta acá se pone en opacity 1 y
   un usuario de teclado se comía el 2,83:1 completo. Mismo caso que
   --orange-ink: el tono de marca sirve para superficies, no para texto chico
   sobre fondo claro. */
.qa-link {
  position: absolute; left: -22px; top: 1px;
  font: 700 15px 'Space Mono', monospace; color: var(--indigo);
  text-decoration: none; opacity: 0; transition: opacity .18s, color .18s;
}
.qa:hover .qa-link, .qa-link:focus-visible { opacity: 1; }
.qa-link:hover { color: var(--indigo-deep); }

/* scroll-margin-top no se hereda del .qa contenedor: al tabular hasta acá el
   navegador hace su propio scroll-into-view y el nav fijo tapa el foco. */
.faq-sec :focus-visible { scroll-margin-top: calc(var(--nav-h) + var(--barra-h) + 20px); }

@media (max-width: 720px) { .qa-link { display: none; } }

.qa-a { font: 400 16px/1.65 'Hanken Grotesk', sans-serif; color: var(--ink-soft); }
.qa-a p { margin: 0 0 12px; }
.qa-a p:last-child { margin-bottom: 0; }
.qa-a ul, .qa-a ol { margin: 8px 0 12px; padding-left: 20px; }
.qa-a li { margin-bottom: 6px; }
.qa-a li:last-child { margin-bottom: 0; }
.qa-a strong { color: var(--ink-2); font-weight: 700; }
.qa-a .no { color: var(--orange-ink); font-weight: 700; }

/* ============ banda de CTA ============ */

.faq-banda {
  max-width: 68ch; margin: 40px 0 8px; padding: 30px 30px 32px;
  border-radius: 18px; border: 1px solid rgba(43, 42, 230, .16);
  background:
    radial-gradient(130% 190% at 100% 0%, rgba(110, 107, 255, .16), transparent 62%),
    #fff;
  box-shadow: 0 18px 44px -32px rgba(43, 42, 230, .5);
}
.faq-banda h2 {
  font: 700 clamp(19px, 2.1vw, 23px)/1.2 'Space Grotesk', sans-serif;
  letter-spacing: -.025em; margin: 0; text-wrap: balance;
}
.faq-banda p {
  margin: 12px 0 0; max-width: 56ch;
  font: 400 15px/1.6 'Hanken Grotesk', sans-serif; color: var(--ink-soft);
}
.faq-banda-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* ============ hub: cards de valor ============ */

.valores {
  list-style: none; margin: 0; padding: 0;
  /* min(): que la card ceda antes de desbordar en pantallas de <314px. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1px; background: var(--linea);
  border: 1px solid var(--linea); border-radius: 16px; overflow: hidden;
}
.valor { background: #fff; padding: 24px 22px 26px; display: flex; flex-direction: column; gap: 8px; }
.valor-tag {
  font: 700 10.5px 'Space Mono', monospace; letter-spacing: .12em;
  text-transform: uppercase; color: var(--orange-ink);
}
.valor b {
  font: 700 19px/1.2 'Space Grotesk', sans-serif; letter-spacing: -.025em;
}
.valor b em { font-style: normal; color: var(--indigo); }
.valor p { margin: 0; font: 400 14.5px/1.55 'Hanken Grotesk', sans-serif; color: var(--ink-soft); }

/* ============ hub: claims ============ */

.claims { list-style: none; margin: 0 0 8px; padding: 0; max-width: 68ch; }
.claims li {
  padding: 18px 0 19px; border-top: 1px solid var(--linea);
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 12px;
  font: 400 15.5px/1.6 'Hanken Grotesk', sans-serif; color: var(--ink-soft);
}
.claims li::before {
  content: "→"; font: 400 15px 'Space Mono', monospace; color: var(--orange-ink); line-height: 1.6;
}
.claims b { color: var(--ink-2); font-weight: 700; }

/* ============ hub: tarjetas de parte ============ */

.partes-grid {
  list-style: none; margin: 0; padding: 0;
  /* min(): que la card ceda antes de desbordar en pantallas de <332px. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr)); gap: 14px;
}
.parte-card a {
  display: flex; flex-direction: column; gap: 7px; height: 100%;
  background: #fff; border: 1px solid var(--linea); border-radius: 16px;
  padding: 22px 22px 24px; text-decoration: none;
  box-shadow: 0 1px 2px rgba(14, 14, 22, .04), 0 18px 44px -34px rgba(43, 42, 230, .4);
  transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s cubic-bezier(.2, .7, .2, 1), border-color .2s;
}
.parte-card a:hover {
  transform: translateY(-3px); border-color: rgba(43, 42, 230, .3);
  box-shadow: 0 2px 4px rgba(14, 14, 22, .05), 0 28px 56px -30px rgba(43, 42, 230, .55);
}
.parte-card-n {
  font: 700 10.5px 'Space Mono', monospace; letter-spacing: .1em;
  text-transform: uppercase; color: var(--orange-ink);
}
.parte-card b { font: 700 19px/1.2 'Space Grotesk', sans-serif; letter-spacing: -.025em; }
.parte-card p { margin: 0; font: 400 14.5px/1.55 'Hanken Grotesk', sans-serif; color: var(--ink-soft); }
.parte-card-secs {
  margin-top: auto; padding-top: 12px;
  font: 400 12px/1.5 'Space Mono', monospace; color: var(--ink-faint);
}

/* ============ salto entre partes ============ */

.faq-salto {
  max-width: 68ch; margin: 20px 0 0; padding: 26px 0 0;
  border-top: 2px solid var(--ink-2);
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.faq-salto-label {
  font: 700 10.5px 'Space Mono', monospace; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.faq-salto-a {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font: 700 clamp(20px, 2.4vw, 26px) 'Space Grotesk', sans-serif;
  letter-spacing: -.028em; color: var(--ink-2); transition: color .2s;
}
.faq-salto-a:hover { color: var(--indigo); }
.faq-salto-a svg { width: 17px; height: 17px; flex: none; }

/* Cargando la parte siguiente. */
.faq-salto.is-cargando .faq-salto-a { color: var(--ink-faint); }
.faq-salto.is-cargando .faq-salto-a svg { animation: faqPulso 1s ease-in-out infinite; }
@keyframes faqPulso { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(3px); opacity: .4; } }

/* Cuando el JS ya appendeó la parte siguiente, el salto pasa a ser el título
   del capítulo que arranca abajo — assets/faq.js lo envuelve en un <h1>. El
   link se conserva y sigue clickeable (baja a la parte), sólo pierde la flecha
   de "cargar". */
.faq-salto-h { margin: 0; font: inherit; }
.faq-salto.is-consumido .faq-salto-a svg { display: none; }
.faq-salto.is-consumido { margin-bottom: 34px; }

/* ============ paso anterior / siguiente ============ */

.faq-paso {
  max-width: 68ch; margin-top: 56px; padding-top: 26px;
  border-top: 1px solid var(--linea);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.faq-paso a {
  display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  font: 700 15px 'Space Grotesk', sans-serif; letter-spacing: -.02em;
  color: var(--ink-2); transition: color .2s;
}
.faq-paso a:hover { color: var(--indigo); }
.faq-paso a span {
  font: 400 11px 'Space Mono', monospace; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.faq-paso-next { text-align: right; margin-left: auto; }

/* ============ resultados de búsqueda ============ */

.faq-resultados { margin-bottom: 40px; }
.faq-resultados-n {
  font: 400 12.5px 'Space Mono', monospace; color: var(--ink-faint); margin: 0 0 16px;
}
.faq-hits { list-style: none; margin: 0; padding: 0; max-width: 68ch; }
.faq-hits li { border-top: 1px solid var(--linea); }
.faq-hits a {
  display: block; padding: 15px 12px 16px; margin: 0 -12px;
  border-radius: 10px; text-decoration: none; transition: background .18s;
}
.faq-hits a:hover { background: #fff; }
.faq-hits b { display: block; font: 700 15.5px/1.4 'Space Grotesk', sans-serif; letter-spacing: -.015em; }
.faq-hits p {
  margin: 5px 0 0; font: 400 14px/1.55 'Hanken Grotesk', sans-serif;
  color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.faq-hits .hit-sec {
  display: block; margin-top: 6px;
  font: 400 11px 'Space Mono', monospace; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.faq-hits mark { background: rgba(255, 90, 44, .22); color: inherit; border-radius: 3px; padding: 0 2px; }

/* Mientras se busca, la portada y la cadena se ocultan sin desmontarse. */
body.faq-buscando .faq-cadena,
body.faq-buscando .faq-salto,
body.faq-buscando .faq-paso { display: none; }

/* ============ volver arriba ============ */

.faq-totop {
  position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px);
  z-index: 40; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 17px; border: none; border-radius: 999px; cursor: pointer;
  font: 700 13px 'Space Mono', monospace; color: #fff; background: var(--ink);
  box-shadow: 0 18px 40px -18px rgba(11, 11, 18, .8);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, background .2s;
}
.faq-totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.faq-totop:hover { background: var(--indigo); }
.faq-totop svg { width: 13px; height: 13px; }

/* ============ footer ============ */

footer {
  background: var(--ink); color: rgba(255, 255, 255, .55);
  border-top: 1px solid rgba(255, 255, 255, .07); padding: 64px 0 44px;
}
/* Copiado de assets/app.css: el footer tiene que ser el mismo en las cuatro
   páginas. Acá había otro con el wordmark a 92px y un cursor titilando. */
.foot-brand {
  display: flex; align-items: center; gap: 11px;
  font: 700 19px 'Space Grotesk', sans-serif; letter-spacing: -.01em;
  color: rgba(255, 255, 255, .78); margin-bottom: 30px;
}
.foot { display: flex; flex-direction: column; align-items: flex-start; gap: 34px; }
.foot-links { display: flex; gap: 28px 56px; flex-wrap: wrap; }
.foot-col { display: flex; flex-direction: column; gap: 11px; min-width: 132px; }
.foot-tag {
  font: 700 10px 'Space Mono', monospace; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: 2px;
}
.foot-links a {
  font: 600 13px 'Hanken Grotesk', sans-serif; color: rgba(255, 255, 255, .6);
  text-decoration: none; transition: color .2s;
}
.foot-links a:hover { color: var(--indigo-pale); }
.foot-base { font: 400 12px 'Space Mono', monospace; }
.foot-base a { color: rgba(255, 255, 255, .78); text-decoration: underline; text-underline-offset: 2px; }
.foot-base a:hover { color: var(--indigo-pale); }

/* ============ reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .btn:hover, .parte-card a:hover { transform: none; }
}