/* Fuentes propias (licencia OFL, ver assets/fonts/LICENCIA-*.txt). Solo el subconjunto latino. */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/instrument-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/geist-mono-400.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/geist-mono-700.woff2") format("woff2"); }

/* Concepto: una ficha técnica que se lee como un Kuento. Página en Papel (versión principal),
   cierre en la banda Noche que la marca usa en todos sus documentos, cifras en mono,
   un solo acento: el punto de dato. Modo oscuro opcional con los valores Noche.
   Tokens del Design System Kuento. */
:root {
  color-scheme: light;
  /* Papel */
  --bg: #FFFFFF; --surface: #F3F5FC; --surface-raised: #EEF2FF;
  --line: #E3E7F2; --line-strong: #070B1A;
  --ink: #070B1A; --ink-2: #2A3150; --ink-3: #5E6787;
  --accent: #4D7CFF; --accent-ink: #2F5BEA; --focus: #2F5BEA;
  --series-1: #2F5BEA; --series-2: #E0702A; --neutral: #E3E7F2;
  --borde-control: var(--ink-3);
  --rejilla: var(--line);
  /* Banda: oscura en los dos temas (valores Noche) */
  --band-bg: #070B1A; --band-surface: #0C1328; --band-line: #1A2546; --band-line-strong: #5A6A9E;
  --band-ink: #EEF2FF; --band-ink-soft: #B9C2DE; --band-ink-2: #7F8AAD; --band-accent: #6EE7F9;
  --band-series-2: #D9702E;
  --delta-up: var(--series-1); --delta-down: var(--series-2);

  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 56px; --space-9: 96px;
  --radius-s: 6px; --radius-m: 14px; --radius-l: 24px; --radius-pill: 999px;

  /* Escala de pantalla (propuesta para sumar al Design System: la página web es un medio nuevo). */
  --web-lema: clamp(56px, 13vw, 128px);
  --web-h2: clamp(26px, 4.4vw, 40px);
  --web-lead: clamp(17px, 2.1vw, 20px);
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --ancho: 1120px;

  /* Ritmo del movimiento (propuesta para sumar al Design System, como la escala de pantalla).
     La salida dura 60–70 % de la entrada. Solo la señal del inicio pasa de 900 ms. */
  --dur-micro: 160ms; --dur-ui: 240ms; --dur-revelar: 600ms; --dur-dato: 900ms;
  --dur-salida-micro: 100ms; --dur-salida-ui: 160ms;
  --curva-entrada: cubic-bezier(.2, .7, .2, 1);
  --escalon: 60ms;
}
/* Modo oscuro opcional: valores Noche. La versión clara manda; el oscuro solo aplica si se elige. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070B1A; --surface: #0C1328; --surface-raised: #1B2A5C;
  --line: #1A2546; --line-strong: #5A6A9E;
  --ink: #EEF2FF; --ink-2: #B9C2DE; --ink-3: #7F8AAD;
  --accent: #6EE7F9; --accent-ink: #6EE7F9; --focus: #6EE7F9;
  --series-1: #4D7CFF; --series-2: #D9702E; --neutral: #2A3558;
  --borde-control: var(--line-strong);
  --rejilla: rgba(238,242,255,0.05);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(76px + env(safe-area-inset-top, 0px)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }
a { color: var(--accent-ink); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }

.envoltura { max-width: var(--ancho); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.rotulo { font-family: var(--font-mono); font-size: 11px; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }

/* Logo: arte fijo, una versión para cada fondo */
.logo-oscuro { display: none; }
:root[data-theme="dark"] .logo-claro { display: none; }
:root[data-theme="dark"] .logo-oscuro { display: inline; }

/* Cabecera fija */
.cabecera { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color var(--dur-ui) var(--curva-entrada); }
.cabecera.con-borde { border-bottom-color: var(--line); }
.cabecera .envoltura { display: flex; align-items: center; gap: var(--space-4); padding-block: 14px; }
.cabecera .marca { display: inline-flex; line-height: 0; border-radius: 4px; margin-right: auto; padding-block: 9px; margin-block: -9px; } /* área de toque de 44 px sin cambiar el dibujo */
.cabecera nav { display: flex; gap: var(--space-5); }
.cabecera nav a { color: var(--ink-2); text-decoration: none; font-size: 14px; }
.cabecera nav a:hover { color: var(--ink); }
@media (max-width: 820px) { .cabecera nav { display: none; } }
@media (max-width: 440px) { .cabecera .envoltura { gap: var(--space-2); } .cabecera .boton-chico { padding: 0 14px; } }
.tema { width: 44px; height: 44px; flex: none; display: inline-grid; place-items: center; background: transparent; border: 1px solid var(--line); border-radius: var(--radius-pill); cursor: pointer; color: var(--ink); }
.tema:hover { border-color: var(--ink-3); }
.tema i { width: 16px; height: 16px; border-radius: var(--radius-pill); border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 20px; border-radius: var(--radius-pill); font: 700 15px/1 var(--font-sans); text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.boton-principal { background: var(--ink); color: var(--bg); }
.boton-principal:hover { background: var(--ink-2); }
.boton-borde { background: transparent; color: var(--ink); border-color: var(--borde-control); }
.boton-borde:hover { border-color: var(--ink); }
.boton-chico { padding: 0 16px; font-size: 14px; }

/* Inicio */
.inicio { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.inicio::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--rejilla) 1px, transparent 1px); background-size: 100% 24px; -webkit-mask-image: linear-gradient(90deg, transparent 52%, #000 80%); mask-image: linear-gradient(90deg, transparent 52%, #000 80%); }
@media (max-width: 760px) { .inicio::before { -webkit-mask-image: linear-gradient(180deg, transparent 62%, #000 92%); mask-image: linear-gradient(180deg, transparent 62%, #000 92%); } }
.inicio .envoltura { position: relative; padding-block: clamp(40px, 8vw, 96px) clamp(120px, 16vw, 200px); }
.inicio .para { display: block; margin-top: var(--space-2); font-size: 15px; color: var(--ink-2); }
.lema { margin-top: var(--space-5); font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: var(--web-lema); line-height: .92; letter-spacing: -.02em; color: var(--ink); }
.inicio .lead { margin-top: var(--space-6); max-width: 34ch; font-size: clamp(19px, 2.6vw, 24px); line-height: 1.4; letter-spacing: -.01em; color: var(--ink-2); }
.inicio .tesis { margin-top: var(--space-4); max-width: 40ch; font-size: var(--web-lead); font-weight: 700; color: var(--ink); }
.acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.sistemas { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.sistemas .rotulo { margin-right: var(--space-1); }
.sistemas span:not(.rotulo) { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 5px 11px; background: var(--bg); }
.senal { position: absolute; right: 0; bottom: 0; width: min(100%, 980px); height: auto; display: block; pointer-events: none; }
.senal polyline { stroke: var(--series-1); stroke-opacity: .75; stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 0; }
.senal .punto { fill: var(--accent); }
.senal .halo { fill: none; stroke: var(--accent); stroke-opacity: .35; }

/* Secciones */
.seccion { padding-block: clamp(56px, 9vw, 104px); border-bottom: 1px solid var(--line); }
.cabeza { display: grid; gap: var(--space-3); max-width: 760px; margin-bottom: clamp(28px, 5vw, 48px); }
.cabeza h2 { font-size: var(--web-h2); line-height: 1.12; letter-spacing: -.025em; font-weight: 700; }
.cierre-cta { margin-top: clamp(28px, 5vw, 44px); display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Historia */
.historia .envoltura { display: grid; gap: var(--space-5); }
.historia p { max-width: 46ch; font-size: clamp(20px, 3vw, 28px); line-height: 1.35; letter-spacing: -.015em; color: var(--ink-3); }
.historia p + p { color: var(--ink); }

/* Servicios */
.servicios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 760px) { .servicios { grid-template-columns: minmax(0, 1fr); } }
.servicio { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); min-width: 0; }
.servicio .tipo { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.servicio h3 { font-size: 21px; line-height: 1.2; letter-spacing: -.015em; }
.servicio p { color: var(--ink-2); max-width: 52ch; }
.servicio .pie { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.precio { display: grid; gap: 2px; }
.precio .monto { font-family: var(--font-mono); font-size: 15px; color: var(--ink); white-space: nowrap; }
.precio .nota { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* Proceso */
.etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 760px) { .etapas { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } }
.etapas li { position: relative; padding-top: calc(var(--space-4) + 3px); min-width: 0; display: grid; gap: var(--space-2); align-content: start; }
.etapas li::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--c); transform-origin: left center; }
.etapas .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--accent-ink); }
.etapas h3 { font-size: 20px; letter-spacing: -.015em; }
.etapas p { color: var(--ink-2); }

/* Caso */
.caso-texto { display: grid; gap: var(--space-4); max-width: 62ch; margin-bottom: var(--space-6); }
.caso-texto p { color: var(--ink-2); font-size: 17px; }
.tablero { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(16px, 3vw, 28px); display: grid; gap: var(--space-5); }
.tablero .arriba { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.chip { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--borde-control); border-radius: var(--radius-pill); padding: 4px 10px; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 760px) { .kpis { grid-template-columns: minmax(0, 1fr); } }
.kpi { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-2); min-width: 0; }
.kpi .valor { font-family: var(--font-mono); font-size: clamp(22px, 3vw, 28px); line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.kpi .unidad { font-size: 14px; color: var(--ink-3); margin-left: 4px; }
.delta { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13px; color: var(--ink-2); }
.delta .g { font-size: 9px; }
.delta.up .g { color: var(--delta-up); }
.delta.down .g { color: var(--delta-down); }
.delta .v { font-family: var(--font-mono); color: var(--ink); white-space: nowrap; }
.delta .b { color: var(--ink-3); }
.paneles { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-5); }
@media (max-width: 860px) { .paneles { grid-template-columns: minmax(0, 1fr); } }
.panel { display: grid; gap: var(--space-3); align-content: start; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-4) var(--space-5); }
.panel h3 { font-size: 15px; letter-spacing: -.005em; }
.grafica svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafica .rej { stroke: var(--line); }
.grafica .base { stroke: var(--line-strong); }
.grafica .eje { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-3); }
.grafica .lbl { font-family: var(--font-mono); font-size: 11px; fill: var(--ink); }
.grafica .ctx { fill: var(--neutral); }
.grafica .s1 { fill: var(--series-1); }
.grafica .dato { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: 0 var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--line-strong); }
.tabla td { padding: 11px var(--space-3) 11px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.tabla .num { text-align: right; font-family: var(--font-mono); white-space: nowrap; padding-left: var(--space-3); }
.tabla th:last-child, .tabla td:last-child { padding-right: 0; }
.tabla .num .g { font-size: 9px; color: var(--delta-down); margin-right: 4px; }
.tabla .sub { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); }
.nota-ejemplo { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-3); }
.credencial { margin-top: var(--space-5); max-width: 62ch; color: var(--ink-2); }

/* Preguntas */
.preguntas { border-top: 1px solid var(--line); max-width: 820px; }
.preguntas details { border-bottom: 1px solid var(--line); }
.preguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 44px; padding: 18px 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font-family: var(--font-mono); font-weight: 400; font-size: 20px; color: var(--ink-3); transition: transform var(--dur-salida-ui) var(--curva-entrada); }
.preguntas details[open] summary::after { transition-duration: var(--dur-ui); }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding: 0 0 22px; max-width: 62ch; color: var(--ink-2); }

/* Contacto: la banda Noche, oscura en los dos temas (como la cabecera de los documentos) */
.banda {
  --bg: var(--band-bg); --surface: var(--band-surface); --line: var(--band-line); --line-strong: var(--band-line-strong);
  --ink: var(--band-ink); --ink-2: var(--band-ink-soft); --ink-3: var(--band-ink-2);
  --accent: var(--band-accent); --accent-ink: var(--band-accent); --focus: var(--band-accent);
  --borde-control: var(--band-line-strong); --series-2: var(--band-series-2);
  background: var(--bg); color: var(--ink); border-top: 1px solid var(--band-line);
}
.contacto .envoltura { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 72px); align-items: start; }
@media (max-width: 860px) { .contacto .envoltura { grid-template-columns: minmax(0, 1fr); } }
.contacto .cabeza { margin-bottom: 0; }
.contacto .cabeza p { color: var(--ink-2); font-size: 17px; }
.correo { font-family: var(--font-mono); font-size: 14px; color: var(--ink); overflow-wrap: anywhere; text-decoration: none; }
a.correo:hover { text-decoration: underline; }
form { display: grid; gap: var(--space-4); }
.fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 560px) { .fila { grid-template-columns: minmax(0, 1fr); } }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.campo label small { font-size: inherit; letter-spacing: inherit; text-transform: none; }
.campo input, .campo select, .campo textarea { width: 100%; font: 16px/1.4 var(--font-sans); color: var(--ink); background: var(--surface); border: 1px solid var(--borde-control); border-radius: var(--radius-s); padding: 12px 14px; min-height: 48px; }
.campo textarea { min-height: 120px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--ink-3); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.campo .error { font-size: 13px; color: var(--ink); }
.campo .error::before { content: "▲ "; font-size: 9px; color: var(--series-2); }
.campo [aria-invalid="true"] { border-color: var(--series-2); }
/* Turnstile en modo «solo si hace falta»: oculto (atributo hidden) salvo cuando pide una prueba */
.verificacion { min-width: 0; }
.boton:disabled { cursor: progress; opacity: .7; }
.envio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.aviso { padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); display: grid; gap: var(--space-2); }
.aviso .rotulo { color: var(--accent-ink); }

/* Página 404 */
.no-encontrada { min-height: 60vh; border-bottom: 0; }
.no-encontrada h1 { font-size: var(--web-h2); line-height: 1.12; letter-spacing: -.025em; font-weight: 700; }

/* Pie */
.pie-pagina .envoltura { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); padding-block: var(--space-7) calc(var(--space-7) + env(safe-area-inset-bottom, 0px)); color: var(--ink-3); font-size: 14px; }
.pie-pagina .datos { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.pie-pagina .legal { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

/* ───────────────────────────────────────────────────────────────────────────
   Movimiento: «El dato se cuenta». Primero la pregunta, después la cifra,
   después la comparación y al final la conclusión.
   Reglas: solo transform, opacity y colores; nada en bucle; todo visible sin JS
   (los estados ocultos dependen de .js, que pone el <head>, o de .revela, que pone
   kuento.js); con movimiento reducido no hay desplazamientos.
   ─────────────────────────────────────────────────────────────────────────── */

/* Respuesta al cursor y al toque (en todos los casos) */
.boton, .tema { touch-action: manipulation; transition: background-color var(--dur-salida-micro) var(--curva-entrada), border-color var(--dur-salida-micro) var(--curva-entrada), color var(--dur-salida-micro) var(--curva-entrada), transform var(--dur-salida-micro) var(--curva-entrada); }
.boton:hover, .tema:hover { transition-duration: var(--dur-micro); }
.boton:active, .tema:active { transform: scale(.98); transition-duration: var(--dur-salida-micro); }
.servicio { transition: transform var(--dur-salida-ui) var(--curva-entrada), border-color var(--dur-salida-ui) var(--curva-entrada); }
@media (hover: hover) and (pointer: fine) {
  .servicio:hover { transform: translateY(-2px); border-color: var(--line-strong); transition-duration: var(--dur-ui); }
}
@media (prefers-reduced-motion: reduce) {
  .boton:active, .tema:active, .servicio:hover { transform: none; }
}

/* Cambio de tema: círculo desde el botón (View Transitions; lo anima kuento.js) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

@media (prefers-reduced-motion: no-preference) {

  /* 1. Inicio: la señal se dibuja y aterriza en el punto de dato; un solo pulso. */
  .senal polyline { animation: trazo 1150ms var(--curva-entrada) both; }
  .senal .punto, .senal .halo { transform-box: fill-box; transform-origin: center; }
  .senal .punto { animation: punto var(--dur-ui) var(--curva-entrada) 1050ms both; }
  .senal .halo { animation: pulso 480ms var(--curva-entrada) 1100ms both; }
  @keyframes trazo { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }
  @keyframes punto { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
  @keyframes pulso { 0% { opacity: 0; transform: scale(.5); } 55% { opacity: 1; transform: scale(1.45); } 100% { opacity: 1; transform: none; } }

  /* El lema entra palabra por palabra, con una máscara de abajo hacia arriba. */
  .js .lema .p { display: inline-block; clip-path: inset(-40% -12% -.3em -12%); }
  .js .lema .p > span { display: inline-block; animation: palabra var(--dur-revelar) var(--curva-entrada) backwards; }
  .js .lema .p:nth-child(1) > span { animation-delay: 100ms; }
  .js .lema .p:nth-child(2) > span { animation-delay: calc(100ms + var(--escalon)); }
  .js .lema .p:nth-child(3) > span { animation-delay: calc(100ms + 2 * var(--escalon)); }
  @keyframes palabra { from { opacity: 0; transform: translateY(115%); } to { opacity: 1; transform: none; } }

  /* Después, el texto y los botones, escalonados (todo termina antes de 1.6 s). */
  .js .inicio .lead, .js .inicio .tesis, .js .inicio .acciones, .js .inicio .sistemas { animation: subir var(--dur-revelar) var(--curva-entrada) backwards; }
  .js .inicio .lead { animation-delay: 480ms; }
  .js .inicio .tesis { animation-delay: calc(480ms + var(--escalon)); }
  .js .inicio .acciones { animation-delay: calc(480ms + 2 * var(--escalon)); }
  .js .inicio .sistemas { animation-delay: calc(480ms + 3 * var(--escalon)); }
  @keyframes subir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  /* Encabezados de sección y tarjetas de servicio: suben 12 px, escalonados. */
  .revela .cabeza:not(.visto) > *, .revela .servicios:not(.visto) > .servicio { opacity: 0; }
  .revela .cabeza.visto > *, .revela .servicios.visto > .servicio { animation: subir var(--dur-revelar) var(--curva-entrada) backwards; animation-delay: calc(var(--i, 0) * var(--escalon)); }

  /* 2. El tablero de ejemplo se arma en el orden de lectura: cifras, barras, el mes que cuenta, filas, variaciones.
     Tres bloques [data-arma] (KPI, gráfica, tabla). En escritorio se arman juntos; en teléfono, cada uno al entrar.
     --base (inicio de la tabla) y --fin (triángulos de los KPI) los pone kuento.js según el caso. */
  .revela [data-arma]:not(.armando):not(.armado) :is(.valor, tbody tr, .g, .dato, .lbl) { opacity: 0; }
  .revela [data-arma]:not(.armando):not(.armado) .barra { transform: scaleY(0); }
  .revela [data-arma]:not(.armando):not(.armado) .s1 { fill: var(--neutral); }
  .grafica .barra { transform-box: fill-box; transform-origin: center bottom; }
  .tabla .num .g { display: inline-block; }

  [data-arma].armando .valor { animation: aparecer var(--dur-micro) var(--curva-entrada) both; }
  [data-arma].armando .delta .g { animation: punto var(--dur-ui) var(--curva-entrada) var(--fin, 1800ms) both; }
  [data-arma].armando .barra { animation: crecer var(--dur-revelar) var(--curva-entrada) both; animation-delay: calc(300ms + var(--i, 0) * var(--escalon)); }
  [data-arma].armando .s1 { animation: crecer var(--dur-revelar) var(--curva-entrada) both, encender var(--dur-ui) var(--curva-entrada) both; animation-delay: calc(300ms + var(--i, 0) * var(--escalon)), 1400ms; }
  [data-arma].armando .dato { animation: punto var(--dur-ui) var(--curva-entrada) 1500ms both; }
  [data-arma].armando .lbl { animation: aparecer var(--dur-ui) var(--curva-entrada) 1560ms both; }
  [data-arma].armando tbody tr { animation: subir var(--dur-revelar) var(--curva-entrada) both; animation-delay: calc(var(--base, 0ms) + var(--i, 0) * 2 * var(--escalon)); }
  [data-arma].armando .tabla .g { animation: punto var(--dur-ui) var(--curva-entrada) calc(var(--base, 0ms) + 700ms) both; }
  @keyframes crecer { from { transform: scaleY(0); } to { transform: none; } }
  @keyframes encender { from { fill: var(--neutral); } to { fill: var(--series-1); } }
  @keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

  /* La historia del lunes: la respuesta se enciende al llegar al centro de la pantalla.
     Cómo trabajamos: el filete de cada etapa se llena al bajar, como una barra de avance. */
  @supports (animation-timeline: view()) {
    .historia p + p { animation: encender-texto linear both; animation-timeline: view(); animation-range: entry 100% cover 50%; }
    .etapas li { view-timeline: --etapa block; }
    .etapas li::before { animation: llenar linear both; animation-timeline: --etapa; animation-range: entry 100% cover 30%; }
    @media (min-width: 761px) {
      .etapas { view-timeline: --etapas block; }
      .etapas li::before { animation-timeline: --etapas; }
      .etapas li:nth-child(1)::before { animation-range: entry 100% cover 30%; }
      .etapas li:nth-child(2)::before { animation-range: cover 25% cover 40%; }
      .etapas li:nth-child(3)::before { animation-range: cover 35% cover 50%; }
    }
  }
  @keyframes encender-texto { from { color: var(--ink-3); } to { color: var(--ink); } }
  @keyframes llenar { from { transform: scaleX(0); } to { transform: none; } }
  /* Sin animación ligada al scroll: lo mismo con IntersectionObserver (kuento.js). */
  .revela.sin-timeline .historia p + p:not(.encendido) { color: var(--ink-3); }
  .revela.sin-timeline .historia p + p { transition: color var(--dur-revelar) var(--curva-entrada); }
  .revela.sin-timeline .etapas:not(.visto) li::before { transform: scaleX(0); }
  .revela.sin-timeline .etapas li::before { transition: transform var(--dur-revelar) var(--curva-entrada); transition-delay: calc(var(--i, 0) * var(--dur-ui)); }

  /* Preguntas frecuentes: abren y cierran con altura suave donde hay soporte. */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .preguntas details::details-content { block-size: 0; overflow-y: clip; transition: block-size var(--dur-salida-ui) var(--curva-entrada), content-visibility var(--dur-salida-ui) allow-discrete; }
    .preguntas details[open]::details-content { block-size: auto; transition-duration: var(--dur-ui); }
  }
}
.pie-pagina a.correo { padding-block: 12px; margin-block: -12px; } /* área de toque de 44 px en el teléfono */