/* ==========================================================================
   SAC ADMINISTRACIÓN DE ACTIVOS — Canal digital
   Sistema de diseño

   DIRECCIÓN DE ARTE
   El mark de SAC es una rosa de los vientos hecha de facetas. Orientación.
   Ese es el concepto del sitio entero: la persona perdió el rumbo de su
   cuenta y aquí lo recupera. La brújula aparece como estructura (retículas,
   marcas de grado, ejes) y como progreso (el test se dibuja como una brújula
   que se completa).

   Paleta: azul SAC como suelo institucional (derivado del #001D7E del logo),
   papel gris frío para los actos de lectura, y el azul claro #35A8E6 —de la
   paleta oficial— para las marcas de estructura. Nada de blanco plano; nada
   de gradientes; nada de dark mode conmutable: las secciones oscuras son
   decisión editorial, no una preferencia del visitante.

   Tipografía: una sola superfamilia, IBM Plex. Sans para titulares e
   interfaz —la jerarquía la dan escala y peso, no una segunda familia— y
   Mono para el dato: folio, cuenta enmascarada, etiqueta, cifra. Es lo que
   hace que la consulta se lea como un sistema de registro y no como un
   formulario de contacto.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Azul SAC — suelo institucional. Derivado del #001D7E del logo,
     abierto lo suficiente para que la fotografía y las fichas se despeguen. */
  --ink-900: #0C2166;
  --ink-850: #081A52;
  --ink-800: #102A7A;
  --ink-700: #16337F;
  --ink-600: #2C4499;
  --ink-500: #3E55B4;

  /* Papel — suelo de lectura, gris frío de ficha, nunca blanco plano */
  --paper:      #EFEFF3;
  --paper-deep: #E4E5EB;
  --paper-edge: #D6D8E0;
  --card:       #FFFFFF;

  /* Grafito — el gris de SAC (#9A999E / #C2C3C9) llevado a superficie.
     Equilibra el azul: es el suelo de las secciones de compromiso y del
     panel de consulta. */
  --slate-900: #24262E;
  --slate-800: #2E313A;
  --slate-700: #3A3D48;
  --slate-200: #D3D4DA;
  --slate-100: #E2E3E8;

  /* Marca */
  --navy:       #001D7E;
  --navy-deep:  #001355;
  --navy-tint:  #E5E8F5;
  --grey-brand: #9A999E;
  --grey-light: #C2C3C9;

  /* Acento — azul claro de la paleta oficial de SAC (#028FCC), abierto para
     que cumpla contraste sobre el suelo azul. Sólo estructura: filetes,
     numerales, etiquetas, estados activos. */
  --accent:       #35A8E6;
  --accent-bright:#8FD3F5;
  --accent-deep:  #0A6396;
  --accent-line:  rgba(53, 168, 230, .32);
  --accent-glow:  rgba(53, 168, 230, .13);
  --cta:          #4FB8E8;

  /* Texto sobre el suelo azul */
  --on-ink:      #F4F6FC;
  --on-ink-soft: #BAC4E4;
  --on-ink-mute: #8B95B8;

  /* Texto sobre papel */
  --ink-text: #10142A;
  --ink-body: #444A63;
  --ink-mute: #5A6076;

  /* Semánticos */
  --ok:        #1E6A4C;
  --ok-on-ink: #6FD3A6;
  --ok-bg:     #E4F0EA;
  --warn:      #7A5A12;
  --warn-bg:   #F7EFDC;
  --err:       #A32B25;

  /* Tipografía */
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: var(--sans);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Retícula */
  --wrap: 1200px;
  --wrap-wide: 1360px;
  --wrap-read: 720px;
  --gutter: 22px;
  --r-sm: 3px;
  --r: 5px;
  --r-lg: 8px;

  --hdr-h: 84px;

  --ease: cubic-bezier(.2, .7, .3, 1);
  --slow: cubic-bezier(.16, 1, .3, 1);

  /* Grano: una sola textura, reutilizada en todas las secciones de tinta */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga";
  overflow-x: hidden;
}

img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--ink-text); }

h1, h2, .display {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.033em;
  line-height: 1.04;
  text-wrap: balance;
}
h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.25;
}

h1 { font-size: clamp(2.3rem, 4.5vw, 3.7rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.65rem); }
h3 { font-size: clamp(1.1rem, 1.7vw, 1.25rem); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--navy-deep); }

ul { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.on-ink :focus-visible { outline-color: var(--accent-bright); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 14px; top: -80px; z-index: 999;
  background: var(--accent); color: var(--ink-900);
  padding: 12px 20px; border-radius: 0 0 var(--r) var(--r);
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .09em; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: var(--ink-900); }

/* --------------------------------------------------------------------------
   3. Estructura y suelos
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--wrap-wide); }
.wrap--read { max-width: var(--wrap-read); }

.band { position: relative; padding-block: clamp(76px, 9.5vw, 148px); }
.band--tight { padding-block: clamp(54px, 6vw, 92px); }

/* Suelo de tinta: color + grano + filete de latón arriba */
.ink {
  background: var(--ink-900);
  color: var(--on-ink-soft);
  position: relative;
  isolation: isolate;
}
.ink::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--grain);
  opacity: .035;
  pointer-events: none;
}
.ink h1, .ink h2, .ink h3, .ink h4 { color: var(--on-ink); }
.ink a:not(.btn) { color: var(--accent-bright); }
.ink a:not(.btn):hover { color: #fff; }
.ink--deep { background: var(--ink-850); }
.ink--rule { border-top: 1px solid var(--accent-line); }

.paper-deep { background: var(--paper-deep); }
.paper-soft { background: var(--slate-100); }

/* Suelo de grafito: mismo tratamiento de grano que el azul */
.slate {
  background: var(--slate-900);
  color: #C7C9D2;
  position: relative; isolation: isolate;
}
.slate::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--grain); opacity: .04; pointer-events: none;
}
.slate h2, .slate h3, .slate h4 { color: #F2F3F6; }
.slate .label { color: var(--grey-light); }
.slate a:not(.btn) { color: #fff; }

/* --------------------------------------------------------------------------
   4. Micro-tipografía
   -------------------------------------------------------------------------- */
.label {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 20px;
  display: flex; align-items: center; gap: 12px;
}
.label::before { content: ""; width: 30px; height: 1px; background: currentColor; flex: none; opacity: .7; }
.label--plain::before { display: none; }
.ink .label { color: var(--accent); }

.lede {
  font-size: clamp(1.08rem, 1.55vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-body);
  max-width: 54ch;
}
.ink .lede { color: var(--on-ink-soft); }

.micro {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute);
}
.ink .micro { color: var(--on-ink-mute); }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.center { text-align: center; }
.center .label { justify-content: center; }

/* --------------------------------------------------------------------------
   5. Botones
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 56px; padding: 16px 30px;
  border: 1px solid var(--navy); border-radius: var(--r);
  background: var(--navy); color: #fff;
  font-family: var(--sans); font-size: 15.5px; font-weight: 600;
  letter-spacing: -.005em; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; transform: translateY(-1px); }
.btn:active { transform: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn__arrow { transition: transform .22s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Latón: la acción principal sobre tinta */
.btn--accent { background: var(--cta); border-color: var(--cta); color: #06123A; }
.btn--accent:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: #06123A; }

/* Contorno sobre tinta */
.btn--outline-ink { background: transparent; border-color: rgba(186,196,228,.38); color: var(--on-ink); }
.btn--outline-ink:hover { background: rgba(255,255,255,.06); border-color: var(--on-ink); color: var(--on-ink); }

/* Contorno sobre papel */
.btn--outline { background: transparent; border-color: var(--paper-edge); color: var(--ink-text); }
.btn--outline:hover { background: #fff; border-color: var(--navy); color: var(--navy); }

.btn--wide { width: 100%; }
.btn--sm { min-height: 42px; padding: 10px 18px; font-size: 14px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* --------------------------------------------------------------------------
   6. Encabezado
   -------------------------------------------------------------------------- */
.site-header {
  position: relative; z-index: 60;
  margin-bottom: calc(-1 * var(--hdr-h));
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: var(--hdr-h);
}
.site-header .wrap { max-width: var(--wrap-wide); }

.site-header.is-stuck {
  position: fixed; top: 0; left: 0; right: 0;
  margin-bottom: 0;
  background: rgba(8, 26, 82, .90);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--accent-line);
  animation: dropIn .35s var(--slow);
}
@keyframes dropIn { from { transform: translateY(-100%); } to { transform: none; } }

.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.brand img { width: 146px; }

.site-nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); }
.site-nav a {
  font-family: var(--mono);
  font-size: 12px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-ink-soft); text-decoration: none; white-space: nowrap;
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.site-nav a:hover { color: var(--on-ink); border-bottom-color: var(--accent); }

.header-actions { display: flex; align-items: center; gap: 14px; flex: none; }

.nav-toggle { display: none; }

@media (max-width: 1080px) {
  .site-nav { display: none; }
  .header-actions .btn { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; background: transparent;
    border: 1px solid rgba(186,196,228,.34); border-radius: var(--r); cursor: pointer;
  }
  .nav-toggle span { display: block; width: 18px; height: 1px; background: var(--on-ink); position: relative; }
  .nav-toggle span::before, .nav-toggle span::after {
    content: ""; position: absolute; left: 0; width: 18px; height: 1px; background: var(--on-ink);
    transition: transform .22s var(--ease), opacity .22s var(--ease);
  }
  .nav-toggle span::before { top: -6px; }
  .nav-toggle span::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

  .mobile-nav {
    display: none; background: var(--ink-850);
    border-top: 1px solid var(--accent-line);
    padding: 8px var(--gutter) 26px;
  }
  .mobile-nav.is-open { display: block; }
  .mobile-nav a {
    display: block; padding: 16px 2px;
    font-family: var(--mono); font-size: 13px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--on-ink); text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .mobile-nav .btn { margin-top: 22px; width: 100%; font-family: var(--sans); }
}
@media (min-width: 1081px) { .mobile-nav { display: none !important; } }
@media (max-width: 560px) { :root { --hdr-h: 68px; } .brand img { width: 120px; } }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: calc(var(--hdr-h) + clamp(30px, 4.5vw, 62px)) clamp(58px, 7vw, 92px);
  overflow: hidden;
}
.hero .wrap { max-width: var(--wrap-wide); position: relative; z-index: 2; }

/* Brújula: el mark de SAC a escala de arquitectura, sangrando por la derecha */
.hero__compass {
  position: absolute;
  right: -18%; top: 46%; transform: translateY(-50%);
  width: min(122vh, 1140px); aspect-ratio: 1;
  opacity: .62; z-index: 1; pointer-events: none;
  mask-image: radial-gradient(closest-side, #000 72%, transparent 99%);
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 99%);
}
.hero__compass img { width: 100%; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

.hero__kicker {
  font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 30px;
}
.hero__kicker span { opacity: .55; }

.hero h1 { margin-bottom: 26px; }
.hero h1 em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent-bright);
  box-shadow: inset 0 -.09em 0 var(--accent-line);
}

.hero__sub {
  font-size: clamp(1.05rem, 1.45vw, 1.22rem);
  line-height: 1.6; color: var(--on-ink-soft);
  max-width: 46ch; margin-bottom: 38px;
}

/* Entrada de búsqueda: la invitación real del hero. Un solo campo. */
.hero__search { max-width: 540px; }
.hero__form {
  display: flex; gap: 10px; align-items: stretch;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(186,196,228,.28);
  border-radius: var(--r);
  padding: 8px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.hero__form:focus-within { border-color: var(--accent); background: rgba(255,255,255,.08); }
.hero__form input {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: 0; outline: none;
  padding: 12px 14px;
  font-size: 16.5px; color: var(--on-ink);
}
.hero__form input::placeholder { color: var(--on-ink-mute); }
.hero__form .btn { flex: none; min-height: 50px; padding-inline: 24px; }

.hero__assure {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 18px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--on-ink-mute);
}
.hero__assure svg { color: var(--accent); flex: none; }
.hero__assure b { color: var(--on-ink-soft); font-weight: 400; }

/* Columna de imagen: filete de latón, ficha superpuesta */
.hero__figure { position: relative; margin: 0; }
.hero__figure img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  outline: 1px solid var(--accent-line); outline-offset: -1px;
  box-shadow: 0 24px 60px rgba(4, 12, 48, .5);
}

/* Ficha: el vistazo al premio */
.ficha {
  position: absolute; left: -34px; bottom: 34px;
  min-width: 268px;
  background: rgba(6, 18, 58, .92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--accent-line);
  padding: 16px 20px 15px;
}
.ficha__top {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
  padding-bottom: 11px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.ficha__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok-on-ink); flex: none; }
.ficha__row { display: flex; justify-content: space-between; gap: 22px; align-items: baseline; }
.ficha__row + .ficha__row { margin-top: 8px; }
.ficha__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-mute); }
.ficha__v { font-family: var(--mono); font-size: 15px; color: var(--on-ink); letter-spacing: .04em; }
.ficha__v--ok { color: var(--ok-on-ink); font-size: 12px; letter-spacing: .06em; }

@media (max-width: 960px) {
  .hero { padding-block: calc(var(--hdr-h) + 26px) 52px; }
  .hero__grid { grid-template-columns: 1fr; gap: 38px; }
  .hero__figure img { aspect-ratio: 5 / 4; }
  .hero__compass { right: -44%; top: 62%; opacity: .26; width: 150vw; }
  .hero__kicker { font-size: 10px; letter-spacing: .13em; gap: 9px; margin-bottom: 24px; }
  .hero__assure { font-size: 10px; letter-spacing: .06em; gap: 7px; }
  .ficha { left: 14px; bottom: 14px; min-width: 240px; }
  .hero__sub { max-width: none; }
  .hero__form { flex-wrap: wrap; }
  .hero__form .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   8. Franja institucional
   -------------------------------------------------------------------------- */
.proof { border-top: 1px solid rgba(255,255,255,.1); }
.proof__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.proof__item {
  padding: 30px 30px 28px;
  border-right: 1px solid rgba(255,255,255,.09);
  display: grid; grid-template-columns: 22px 1fr; gap: 16px; align-items: start;
}
.proof__item svg { color: var(--grey-light); margin-top: 2px; }
.proof__item:first-child { padding-left: 0; }
.proof__item:last-child { border-right: 0; padding-right: 0; }
.proof__n {
  display: block;
  font-family: var(--sans); font-weight: 600;
  font-size: 15.5px; line-height: 1.3;
  color: #F2F3F6; margin-bottom: 6px; letter-spacing: -.012em;
}
.proof__k { font-size: 13.5px; color: #A9ACB8; line-height: 1.55; }
@media (max-width: 860px) {
  .proof__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .proof__item { padding: 24px 20px; border-bottom: 1px solid rgba(255,255,255,.07); }
  .proof__item:nth-child(odd) { padding-left: 0; }
  .proof__item:nth-child(even) { border-right: 0; padding-right: 0; }
  .proof__item:nth-last-child(-n+2) { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   9. Acto: por qué se pierde el rastro
   -------------------------------------------------------------------------- */
.split {
  display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(42px, 6vw, 96px); align-items: start;
}
.split__figure { margin: 0; }
.split__figure img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  outline: 1px solid var(--paper-edge); outline-offset: -1px;
}
.split__cap {
  margin-top: 14px; padding-left: 16px;
  border-left: 1px solid var(--accent);
  font-family: var(--mono); font-size: 12px; letter-spacing: .02em;
  line-height: 1.5; color: var(--ink-mute);
}

.causes { margin-top: 44px; border-top: 1px solid var(--paper-edge); }
.causes__item {
  display: grid; grid-template-columns: 34px minmax(0, 1fr);
  gap: 22px; align-items: start;
  padding: 26px 0;
  border-bottom: 1px solid var(--paper-edge);
}
.causes__mark { width: 34px; height: 34px; color: var(--navy); opacity: .9; }
.causes__item h3 { margin-bottom: 6px; color: var(--ink-text); }
.causes__item p { font-size: 15.5px; color: var(--ink-body); margin: 0; }

.pull {
  margin: 46px 0 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.3vw, 1.85rem);
  line-height: 1.28; letter-spacing: -.026em;
  color: var(--ink-text);
  padding-left: 26px;
  border-left: 2px solid var(--accent);
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split__figure img { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   10. Test — brújula de progreso
   -------------------------------------------------------------------------- */
.quiz-band { position: relative; overflow: hidden; }
.quiz__shell {
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px); align-items: start;
  max-width: 940px; margin-inline: auto;
}

.quiz__dial { position: relative; }
.quiz__dial svg { width: 100%; height: auto; overflow: visible; }
.quiz__dial-wedge { transition: opacity .5s var(--slow), fill .5s var(--slow); }
.quiz__dial-label {
  margin-top: 18px; text-align: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}

.quiz__panel {
  border: 1px solid var(--accent-line);
  background: rgba(255,255,255,.025);
  padding: clamp(26px, 3.4vw, 44px);
  min-height: 396px;
  display: flex; flex-direction: column;
}

.quiz__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.quiz__count { font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--on-ink-mute); }
.quiz__restart {
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-ink-mute); border-bottom: 1px solid rgba(255,255,255,.2);
}
.quiz__restart:hover { color: var(--accent); border-bottom-color: var(--accent); }

.quiz__question {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.8vw, 2.05rem);
  line-height: 1.16; letter-spacing: -.018em;
  color: var(--on-ink); margin: 0 0 28px;
}

.quiz__options { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.quiz__option {
  display: flex; align-items: center; gap: 16px; width: 100%;
  min-height: 60px; padding: 14px 20px;
  background: transparent;
  border: 1px solid rgba(186,196,228,.22);
  border-radius: var(--r-sm);
  color: var(--on-ink); font-size: 16px; font-weight: 450;
  text-align: left; cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), padding-left .18s var(--ease);
}
.quiz__option:hover { border-color: var(--accent); background: var(--accent-glow); padding-left: 24px; }
.quiz__option.is-picked { border-color: var(--accent); background: var(--accent-glow); }
.quiz__key {
  flex: none; width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 1px solid rgba(186,196,228,.3); border-radius: 50%;
  font-family: var(--mono); font-size: 10.5px; color: var(--on-ink-mute);
  transition: border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease);
}
.quiz__option:hover .quiz__key, .quiz__option.is-picked .quiz__key {
  border-color: var(--accent); color: var(--ink-900); background: var(--accent);
}

.quiz__back {
  margin-top: auto; padding-top: 22px;
  background: none; border: 0; cursor: pointer;
  align-self: flex-start;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-ink-mute); display: inline-flex; align-items: center; gap: 8px;
}
.quiz__back:hover { color: var(--accent); }

.quiz__done h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.02em;
  color: var(--on-ink); margin-bottom: 14px;
}
.quiz__done p { color: var(--on-ink-soft); max-width: 50ch; }
.quiz__read {
  margin: 26px 0 30px; border-top: 1px solid rgba(255,255,255,.1);
}
.quiz__read div {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.07);
  font-family: var(--mono); font-size: 12.5px;
}
.quiz__read dt { color: var(--on-ink-mute); letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px; margin: 0; }
.quiz__read dd { margin: 0; color: var(--on-ink); text-align: right; }

@media (max-width: 800px) {
  .quiz__shell { grid-template-columns: 1fr; gap: 28px; }
  .quiz__dial { width: 150px; margin-inline: auto; }
  .quiz__panel { min-height: 0; padding: 22px 18px 24px; }
}

/* --------------------------------------------------------------------------
   11. Consulta — panel de registro
   -------------------------------------------------------------------------- */
.lookup__grid {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(40px, 5vw, 84px); align-items: start;
}
.lookup__points { list-style: none; padding: 0; margin: 34px 0 0; border-top: 1px solid var(--paper-edge); }
.lookup__points li {
  display: flex; gap: 14px; align-items: flex-start; margin: 0;
  padding: 15px 0; border-bottom: 1px solid var(--paper-edge);
  font-size: 15px; color: var(--ink-body);
}
.lookup__points svg { flex: none; margin-top: 3px; color: var(--accent-deep); }

/* El panel oscuro es el foco de la página: aquí es donde pasa lo importante */
.console {
  background: var(--slate-900);
  border: 1px solid var(--slate-700);
  color: var(--on-ink-soft);
  position: relative; isolation: isolate;
  box-shadow: 0 26px 64px rgba(36, 38, 46, .30);
}
.console::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--grain); opacity: .04; pointer-events: none;
}
.console__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 24px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.console__head span { color: var(--on-ink-mute); letter-spacing: .1em; }
.console__body { padding: clamp(24px, 3vw, 34px); }
.console h3 { color: var(--on-ink); font-size: 18px; margin-bottom: 6px; }
.console__hint { font-size: 14px; color: var(--on-ink-mute); margin-bottom: 26px; }

.field { margin-bottom: 18px; }
.field > label {
  display: block; margin-bottom: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-ink-mute);
}
.field__opt { opacity: .65; }
.input {
  width: 100%; min-height: 54px; padding: 14px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(186,196,228,.22);
  border-radius: var(--r-sm);
  color: var(--on-ink); font-size: 16.5px;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.input::placeholder { color: var(--on-ink-mute); }
.input:hover { border-color: rgba(186,196,228,.4); }
.input:focus { outline: 0; border-color: var(--accent); background: rgba(255,255,255,.07); }
.input[aria-invalid="true"] { border-color: #C9605A; }
select.input { appearance: none; background-image: linear-gradient(45deg,transparent 50%,var(--on-ink-mute) 50%),linear-gradient(135deg,var(--on-ink-mute) 50%,transparent 50%); background-position: calc(100% - 20px) 24px, calc(100% - 14px) 24px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
select.input option { background: var(--ink-800); color: var(--on-ink); }

.field__error { display: none; margin-top: 7px; font-family: var(--mono); font-size: 11.5px; color: #E59A95; }
.field.has-error .field__error { display: block; }

.consent { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 22px; }
.consent input { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.consent label { font-size: 13px; line-height: 1.55; color: var(--on-ink-mute); }
.consent a { color: var(--on-ink-soft); }

.form-legal { font-size: 12.5px; line-height: 1.55; color: var(--on-ink-mute); }
.form-legal a { color: var(--on-ink-soft); }

/* Resultado */
.result { margin-top: 26px; }
.result__panel { border: 1px solid var(--accent-line); }
.result__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--accent-line);
  background: rgba(111, 211, 166, .07);
}
.result__head svg { flex: none; color: var(--ok-on-ink); }
.result__head strong { font-size: 14.5px; font-weight: 500; color: var(--on-ink); }
.result__panel--none .result__head { background: rgba(198,161,91,.08); }
.result__panel--none .result__head svg { color: var(--accent); }

.result__body { padding: 20px; }
.result__rows { margin: 0; display: grid; }
.result__rows > div {
  display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.07);
}
.result__rows > div:last-child { border-bottom: 0; }
.result__rows dt { margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--on-ink-mute); }
.result__rows dd { margin: 0; text-align: right; color: var(--on-ink); font-size: 15px; }
.mono { font-family: var(--mono); letter-spacing: .05em; font-variant-numeric: tabular-nums; }

.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 99px;
  border: 1px solid rgba(111,211,166,.35); background: rgba(111,211,166,.1);
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ok-on-ink);
}

.result__note {
  margin-top: 16px; padding: 13px 15px;
  border-left: 2px solid var(--accent-line);
  font-size: 13px; line-height: 1.55; color: var(--on-ink-mute);
}

.result__next { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--accent-line); }
.result__next h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem); letter-spacing: -.018em;
  color: var(--on-ink); margin-bottom: 8px;
}

.channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 22px; }
.channel {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 84px; padding: 12px 8px;
  border: 1px solid rgba(186,196,228,.22); border-radius: var(--r-sm);
  cursor: pointer; text-align: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-ink-soft);
  transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.channel svg { color: var(--on-ink-mute); transition: color .18s var(--ease); }
.channel input { position: absolute; opacity: 0; pointer-events: none; }
.channel:hover { border-color: var(--accent); background: var(--accent-glow); color: var(--on-ink); }
.channel:hover svg { color: var(--accent); }
.channel:has(input:checked) { border-color: var(--accent); background: var(--accent-glow); color: var(--on-ink); }
.channel:has(input:checked) svg { color: var(--accent); }
.channel:has(input:focus-visible) { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

/* Confirmación */
.confirm { text-align: center; padding: 8px 0 4px; }
.confirm__seal { width: 64px; height: 64px; margin: 0 auto 22px; display: grid; place-items: center; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); }
.confirm h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 2.8vw, 1.95rem); letter-spacing: -.02em; color: var(--on-ink); margin-bottom: 12px;
}
.confirm p { color: var(--on-ink-soft); max-width: 44ch; margin-inline: auto; }
.confirm .form-legal { max-width: 48ch; margin-inline: auto; }
.folio { display: inline-block; margin: 24px 0 8px; padding: 14px 26px; border: 1px solid var(--accent-line); background: var(--accent-glow); }
.folio span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-ink-mute); margin-bottom: 6px; }
.folio strong { font-family: var(--mono); font-size: 20px; letter-spacing: .08em; color: var(--accent-bright); font-weight: 500; }

@media (max-width: 900px) { .lookup__grid { grid-template-columns: 1fr; gap: 34px; } }
@media (max-width: 420px) {
  .channels { grid-template-columns: 1fr; }
  .channel { flex-direction: row; justify-content: flex-start; min-height: 56px; gap: 12px; padding-inline: 16px; }
}

/* --------------------------------------------------------------------------
   12. Qué pasa después — secuencia real, por eso va numerada
   -------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 8px; border-top: 1px solid var(--paper-edge); }
.step { padding: 34px 32px 34px 0; border-right: 1px solid var(--paper-edge); }
.step:last-child { border-right: 0; }
.step:not(:first-child) { padding-left: 32px; }
.step__n {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  color: var(--accent-deep); margin-bottom: 18px;
}
.step h3 { margin-bottom: 8px; }
.step p { font-size: 15px; margin: 0; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
  .step { padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--paper-edge); }
  .step:not(:first-child) { padding-left: 0; }
  .step:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   13. SAC institucional
   -------------------------------------------------------------------------- */
.firm__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 88px); align-items: start; }
.figures { margin: 0; border-top: 1px solid var(--accent-line); }
.figures > div { padding: 26px 0; border-bottom: 1px solid var(--accent-line); display: grid; grid-template-columns: minmax(0,auto) minmax(0,1fr); gap: 26px; align-items: baseline; }
.figures dt {
  font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1; letter-spacing: -.02em;
  color: var(--accent-bright); margin: 0; white-space: nowrap;
}
.figures dd { margin: 0; font-size: 14.5px; color: var(--on-ink-soft); }

.services { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 0; }
.services li {
  display: flex; gap: 14px; align-items: center; margin: 0;
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 15.5px; color: var(--on-ink-soft);
}
.services li:first-child { border-top: 1px solid rgba(255,255,255,.08); }
.services svg { flex: none; color: var(--accent); }

@media (max-width: 900px) { .firm__grid { grid-template-columns: 1fr; gap: 36px; } }

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--paper-edge); }
.faq details { border-bottom: 1px solid var(--paper-edge); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 26px 2px;
  font-size: clamp(1.02rem, 1.6vw, 1.14rem); font-weight: 600; color: var(--ink-text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-top: 7px;
  border-right: 1px solid var(--accent-deep); border-bottom: 1px solid var(--accent-deep);
  transform: rotate(45deg); transition: transform .24s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 11px; }
.faq__answer { padding: 0 2px 26px; max-width: 70ch; font-size: 16px; }

/* --------------------------------------------------------------------------
   15. Cierre
   -------------------------------------------------------------------------- */
.closing { position: relative; overflow: hidden; text-align: center; }
.closing__compass {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 820px); aspect-ratio: 1; opacity: .4; pointer-events: none;
  mask-image: radial-gradient(closest-side, #000 40%, transparent 92%);
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 92%);
}
.closing .wrap { position: relative; z-index: 2; }
.closing h2 { margin-bottom: 20px; }
.closing p { color: var(--on-ink-soft); max-width: 48ch; margin: 0 auto 34px; font-size: 1.08rem; }
.closing .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   16. Pie
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink-850); color: var(--on-ink-mute); padding-block: clamp(48px, 6vw, 76px) 30px; font-size: 14px; border-top: 1px solid var(--accent-line); }
.site-footer a { color: var(--on-ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--accent-bright); text-decoration: underline; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: 40px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.09); }
.footer__brand img { width: 168px; margin-bottom: 20px; }
.footer__brand p { max-width: 40ch; font-size: 14px; line-height: 1.6; }
.site-footer h4 { font-family: var(--mono); color: var(--accent); font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 18px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.site-footer li { margin: 0; }
.footer__bottom { padding-top: 26px; display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--on-ink-mute); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr; gap: 32px; } }

/* --------------------------------------------------------------------------
   17. Avisos de demostración
   -------------------------------------------------------------------------- */
.demo-bar {
  background: var(--ink-850); color: var(--accent);
  border-bottom: 1px solid var(--accent-line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  padding: 8px 0; position: relative; z-index: 70;
}
.demo-bar .wrap { display: flex; gap: 10px; align-items: center; justify-content: center; text-align: center; }
.demo-bar b { font-weight: 500; color: var(--accent-bright); }
.demo-bar .demo-bar__short { display: none; }
@media (max-width: 760px) {
  .demo-bar { font-size: 10px; letter-spacing: .06em; }
  .demo-bar .demo-bar__long { display: none; }
  .demo-bar .demo-bar__short { display: inline; }
}

.demo-note {
  display: flex; gap: 11px; align-items: flex-start;
  margin-top: 20px; padding: 13px 15px;
  border: 1px dashed var(--accent-line);
  font-family: var(--mono); font-size: 11px; line-height: 1.6; letter-spacing: .04em;
  color: var(--on-ink-mute);
}
.demo-note svg { flex: none; margin-top: 2px; color: var(--accent); }
.demo-note b { color: var(--accent); font-weight: 500; }

/* --------------------------------------------------------------------------
   18. Barra fija móvil
   -------------------------------------------------------------------------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(8, 26, 82, .95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--accent-line);
  transition: transform .3s var(--ease);
}
.mobile-cta .btn { width: 100%; min-height: 52px; }
@media (max-width: 760px) { .mobile-cta { display: block; } body { padding-bottom: 78px; } }

/* --------------------------------------------------------------------------
   19. Páginas legales
   -------------------------------------------------------------------------- */
.legal { padding-block: clamp(120px, 12vw, 160px) clamp(60px, 7vw, 90px); }
.legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 12px; }
.legal__meta { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 44px; }
.legal h2 { font-family: var(--sans); font-weight: 600; font-size: clamp(1.1rem, 1.9vw, 1.3rem); letter-spacing: -.012em; margin-top: 44px; margin-bottom: 12px; }
.legal p, .legal li { font-size: 16px; }
.legal ul, .legal ol { padding-left: 1.3em; }
.legal .demo-note { color: var(--ink-mute); border-color: var(--paper-edge); background: var(--paper-deep); }
.legal .demo-note svg, .legal .demo-note b { color: var(--accent-deep); }
.legal .demo-note a { color: var(--navy); }

/* Cabecera sobre papel (legales, 404, dashboard) */
.site-header--solid { position: static; background: var(--ink-900); border-bottom: 1px solid var(--accent-line); }

/* --------------------------------------------------------------------------
   20. Dashboard de demostración
   -------------------------------------------------------------------------- */
.dash { background: var(--paper); min-height: 100vh; }
.dash__head { background: var(--ink-900); border-bottom: 1px solid var(--accent-line); padding-block: 20px; }
.dash__head .wrap { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; max-width: var(--wrap-wide); }
.dash__title { display: flex; align-items: center; gap: 18px; }
.dash__title img { width: 122px; }
.dash__title span { padding-left: 18px; border-left: 1px solid var(--accent-line); font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
.dash main { padding-block: 34px 70px; }
.dash .wrap { max-width: var(--wrap-wide); }

.sim-banner { background: var(--warn-bg); border-bottom: 1px solid #E6D6AE; color: var(--warn); font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; padding: 10px 0; }
.sim-banner .wrap { display: flex; gap: 10px; align-items: center; justify-content: center; text-align: center; }
.sim-banner svg { flex: none; }
.sim-banner b { font-weight: 500; }

.kpis { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 0; margin: 0 0 30px; border: 1px solid var(--paper-edge); background: var(--card); }
.kpi { padding: 22px 20px; border-right: 1px solid var(--paper-edge); }
.kpi:last-child { border-right: 0; }
.kpi dt { font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 12px; line-height: 1.5; }
.kpi dd { margin: 0; }
.kpi dd span { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1; color: var(--ink-text); letter-spacing: -.02em; }
.kpi dd small { display: block; margin-top: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-mute); }
@media (max-width: 1080px) { .kpis { grid-template-columns: repeat(3, minmax(0,1fr)); } .kpi:nth-child(3n) { border-right: 0; } .kpi:nth-child(-n+3) { border-bottom: 1px solid var(--paper-edge); } }
@media (max-width: 620px) { .kpis { grid-template-columns: repeat(2, minmax(0,1fr)); } .kpi { border-right: 1px solid var(--paper-edge); border-bottom: 1px solid var(--paper-edge); } .kpi:nth-child(2n) { border-right: 0; } }

.panel { background: var(--card); border: 1px solid var(--paper-edge); padding: clamp(20px, 2.6vw, 30px); margin-bottom: 20px; }
.panel__head { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; justify-content: space-between; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--paper-edge); }
.panel h2 { font-family: var(--sans); font-size: 16px; font-weight: 600; margin: 0; letter-spacing: -.012em; }
.panel__sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }

.funnel { display: grid; gap: 12px; }
.funnel__row { display: grid; grid-template-columns: 186px minmax(0,1fr) 116px; gap: 18px; align-items: center; }
.funnel__label { font-size: 14.5px; color: var(--ink-text); }
.funnel__track { height: 30px; background: var(--paper-deep); overflow: hidden; }
.funnel__bar { height: 100%; width: 0; transition: width 1s var(--slow); }
.funnel__bar[data-step="1"] { background: var(--ink-900); }
.funnel__bar[data-step="2"] { background: var(--ink-700); }
.funnel__bar[data-step="3"] { background: var(--ink-500); }
.funnel__bar[data-step="4"] { background: #46548C; }
.funnel__bar[data-step="5"] { background: var(--accent); }
.funnel__val { text-align: right; }
.funnel__val strong { display: block; font-family: var(--mono); font-size: 14.5px; font-weight: 500; color: var(--ink-text); font-variant-numeric: tabular-nums; }
.funnel__val span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-mute); }
@media (max-width: 680px) {
  .funnel__row { grid-template-columns: 1fr; gap: 6px; }
  .funnel__val { text-align: left; display: flex; gap: 10px; align-items: baseline; }
  .funnel__val strong { display: inline; }
}

.recovery { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; margin: 0; border: 1px solid var(--paper-edge); }
.recovery > div { padding: 22px; border-right: 1px solid var(--paper-edge); }
.recovery > div:last-child { border-right: 0; }
.recovery dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 12px; line-height: 1.5; }
.recovery dd { margin: 0; font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.05; color: var(--navy); letter-spacing: -.02em; }
@media (max-width: 720px) { .recovery { grid-template-columns: 1fr; } .recovery > div { border-right: 0; border-bottom: 1px solid var(--paper-edge); } .recovery > div:last-child { border-bottom: 0; } }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.leads { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 760px; }
table.leads th, table.leads td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--paper-edge); white-space: nowrap; }
table.leads th { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; background: var(--paper-deep); }
table.leads tbody tr:hover { background: var(--paper); }
.empty { padding: 34px 10px; text-align: center; color: var(--ink-mute); font-size: 14px; }
.badge { display: inline-block; padding: 3px 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--none { background: var(--warn-bg); color: var(--warn); }

/* --------------------------------------------------------------------------
   21. Entrada en escena
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .75s var(--slow), transform .75s var(--slow); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* El hero entra solo, sin observer: debe verse completo en el primer fotograma */
.rise { animation: rise .9s var(--slow) both; }
.rise-1 { animation-delay: .04s; }
.rise-2 { animation-delay: .12s; }
.rise-3 { animation-delay: .2s; }
.rise-4 { animation-delay: .28s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } }

@media print {
  .site-header, .mobile-cta, .demo-bar, .site-footer { display: none !important; }
  body { color: #000; background: #fff; }
}

/* --------------------------------------------------------------------------
   22. Medidor de claridad — la recompensa del test
   Cada respuesta sube un escalón: el número crece, la etiqueta cambia y la
   brújula gana una faceta. La sensación buscada es "voy avanzando", no
   "voy contestando".
   -------------------------------------------------------------------------- */
.gauge { text-align: center; margin-top: 22px; }
.gauge__k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--on-ink-mute); display: block; margin-bottom: 6px;
}
.gauge__n {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(2.1rem, 3.4vw, 2.7rem); line-height: 1;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  color: var(--accent-bright);
  transition: color .5s var(--slow);
}
.gauge__n sup { font-size: .45em; font-weight: 500; vertical-align: super; margin-left: 2px; }
.gauge__state {
  margin-top: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
  min-height: 1.4em;
  transition: color .5s var(--slow);
}
.gauge.is-full .gauge__n { color: var(--ok-on-ink); }
.gauge.is-full .gauge__state { color: var(--ok-on-ink); }

/* --------------------------------------------------------------------------
   23. Ficha viva del hero
   Al escribir el nombre, la tarjeta de la derecha muestra un registro de
   ejemplo con ESE nombre. Es una simulación y así queda rotulada.
   -------------------------------------------------------------------------- */
.ficha__name { color: var(--on-ink); font-weight: 500; letter-spacing: -.01em; font-family: var(--sans); font-size: 14px; }
.ficha__sim {
  display: block; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.09);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-ink-mute);
}
.ficha.is-searching .ficha__dot { background: var(--accent); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.ficha__row { transition: opacity .3s var(--ease); }
.ficha.is-searching .ficha__row { opacity: .35; }

/* --------------------------------------------------------------------------
   24. Salud financiera
   -------------------------------------------------------------------------- */
.why { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; border-top: 1px solid var(--slate-200); }
.why__item { padding: 32px 30px 32px 0; border-right: 1px solid var(--slate-200); }
.why__item:last-child { border-right: 0; }
.why__item:not(:first-child) { padding-left: 30px; }
.why__mark {
  width: 30px; height: 30px; margin-bottom: 20px;
  color: var(--accent-deep);
}
.why__item h3 { margin-bottom: 8px; }
.why__item p { font-size: 15px; margin: 0; }
@media (max-width: 860px) {
  .why { grid-template-columns: 1fr; }
  .why__item { padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--slate-200); }
  .why__item:not(:first-child) { padding-left: 0; }
  .why__item:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   25. Titulares en pantalla chica
   Los <br> de los titulares están calculados para escritorio (dos líneas).
   En el teléfono cada mitad puede partirse una vez más; se baja la escala
   lo justo para que ninguna línea deje una palabra huérfana.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  h1 { font-size: clamp(1.7rem, 7.4vw, 2.05rem); letter-spacing: -.03em; }
  h2 { font-size: clamp(1.45rem, 6.2vw, 1.8rem); letter-spacing: -.028em; }
  .hero__sub, .lede { font-size: 1rem; }
  .pull { font-size: 1.25rem; padding-left: 18px; }
}