/* PressF8 — sitio público. Sin recursos externos: la CSP de producción
   prohíbe todo lo que no sea 'self'. Tipografía autoalojada.
   Identidad: marfil + tinta, UN acento: coral (decisión de Álvaro,
   2026-09-06). Los colores semánticos de la revisión (rojo / ámbar / verde /
   teal) no son el acento y no se tocan.

   2026-09-27 (rediseño móvil + lenguaje de página de producto): una idea por
   sección, titulares cortos con un subtítulo, mucho aire, fondos planos que
   alternan (marfil / blanco) en vez de bordes, el detalle en acordeones
   <details> o en las páginas internas. Nada depende de anchos fijos: todo
   cabe desde 320 px (iPhone con «pantalla ampliada»). Animaciones solo con
   transform/opacity, apagadas con prefers-reduced-motion, y sin JS nada
   queda oculto (landing.js solo esconde lo que aún está bajo el pliegue). */

/* Tipografía del sitio desde 2026-09-28 (elegida por Álvaro entre seis): Plus
   Jakarta Sans, OFL, alojada aquí (sin llamadas a Google). Variable 200–800.
   El reel de la portada (canvas) usa esta misma fuente, pesos 500/700/800. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/static/fonts/PlusJakartaSans-latin.woff2") format("woff2"); }

/* Temas = los de la app (frontend/app.css), por BLOQUE de ancho completo
   (decisión de Álvaro, 2026-09-27: «que el sitio se vea como dentro de
   PressF8»). Oscuro para el encabezado y las secciones de producto/demos
   (parecen capturas vivas de la app); claro para las de lectura y las
   páginas legales. Contraste WCAG medido (fórmula de luminancia relativa):
     oscuro  texto #e2e8f0: 15,3 bg / 13,6 superficie
             secundario #9aa5b8: 7,6 / 6,8 (el #718096 de la app da 4,19 sobre
             superficie: sirve para rótulos de la app, no para párrafos web)
             coral #ff6a3d: 6,6 / 5,9 · texto coral #ff8a66: 8,2 / 7,3
             botón: #0f1117 sobre #ff6a3d 6,6 (hover #d9502a 4,6)
     claro   texto #1f1a16: 12,5 / 13,9 · secundario #574e45: 5,9 / 6,5
             ladrillo #9a3a1c: 5,1 / 5,6 · botón blanco sobre ladrillo 7,0
   Marcas de la demo = las reales de la app (tema oscuro): fondo rojizo
   wc-1..4 al 28 % (4,6:1 medido en app.css), subrayado ámbar #f6ad55 de
   3 px para correcciones, teal #4fd1c5 para preferencias. */
:root, .t-dark {
  --bg: #0f1117; --surface: #1a1d27; --surface-2: #151823; --border: #2a2d3e; --border-strong: #3d4258;
  --text: #e2e8f0; --text-dim: #9aa5b8; --text-faint: #718096;
  --accent: #ff6a3d; --accent-dim: #d9502a; --accent-soft: #311d1c; --accent-text: #ff8a66; --on-accent: #0f1117;
  --wc-1: #ff9a9a; --wc-2: #ff90e4; --wc-3: #ffa07a; --wc-4: #e0a6ff;
  --warning: #f6ad55; --preference: #4fd1c5; --ok: #68d391;
  --sombra: 0 30px 70px -30px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
.t-light {
  --bg: #e0dbd1; --surface: #eae6de; --surface-2: #e5e0d7; --border: #cbc1b0; --border-strong: #8a7d68;
  --text: #1f1a16; --text-dim: #574e45; --text-faint: #6d6258;
  --accent: #9a3a1c; --accent-dim: #86311a; --accent-soft: #e6d6cb; --accent-text: #86311a; --on-accent: #ffffff;
  --wc-1: #a51c1c; --wc-2: #9c1275; --wc-3: #a3380f; --wc-4: #8a1f9c;
  --warning: #6f4909; --preference: #1d5863; --ok: #1e5b3a;
  --sombra: 0 24px 60px -34px rgba(31, 26, 22, .45);
  color-scheme: light;
}
.t-dark, .t-light { background: var(--bg); color: var(--text); }
:root {
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radio: 18px; --radio-s: 12px;
  /* Movimiento: duraciones y curvas para todo el sitio (2026-09-28: nada de
     ease/ease-out sueltos; --ease-back con menos rebote). --t-press: la tecla
     que se hunde; --t-enter/--ease-enter: aparición al hacer scroll. */
  --t-press: 120ms; --t-fast: 200ms; --t-nav: 250ms; --t-med: 420ms; --t-enter: 560ms; --t-story: 1100ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1); --ease-back: cubic-bezier(.3, 1.15, .5, 1);
  --ease-enter: cubic-bezier(.16, 1, .3, 1);
  --ancho: 1120px;
  --gutter: 22px;
  --seccion: 104px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
.nowrap { white-space: nowrap; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(30px, 4.6vw, 50px); letter-spacing: -.01em; }
h3 { font-size: 21px; line-height: 1.25; }
p { margin: 0; }
figure { margin: 0; }
img, svg { max-width: 100%; }
code { font: .92em ui-monospace, SFMono-Regular, Consolas, monospace; background: var(--surface-2); border-radius: 5px; padding: 1px 5px; }
a { color: var(--accent-text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-dim); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
ul { margin: 0; padding-left: 18px; }
.wrap { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--text-dim); }
.small { font-size: 14px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--text); color: var(--bg); padding: 12px 14px; border-radius: 8px; z-index: 60; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tecla F8 inline en el titular: el ícono real (navy + coral). */
.key-badge-inline { height: .95em; width: auto; vertical-align: -.12em; margin: 0 -.05em 0 .04em; }
/* Se hunde una vez al cargar, con el primer F8 de la demo (landing.js pone
   .pressed 190 ms): baja 3 px y el recorte de abajo acorta su relieve. */
.key-badge-inline { transition: transform var(--t-press) var(--ease-out), clip-path var(--t-press) var(--ease-out); clip-path: inset(0 0 0 0); }
.key-badge-inline.pressed { transform: translateY(3px); clip-path: inset(0 0 7% 0); }
@media (prefers-reduced-motion: reduce) { .key-badge-inline { transition: none; } .key-badge-inline.pressed { transform: none; clip-path: none; } }

/* Botones: uno principal por sección. white-space normal: un botón nunca
   ensancha su contenedor (a 320 px, «Cómo cumplimos…» empujaba la página). */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 22px; border-radius: 999px;
  font: 600 16px/1.2 var(--font-body); border: 1px solid transparent; cursor: pointer; text-decoration: none; color: var(--text); text-align: center;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out),
    transform var(--t-press) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-dim); color: var(--on-accent); }
.btn.ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn.ghost:hover { border-color: var(--text); color: var(--text); }
.btn.sm { min-height: 44px; padding: 9px 16px; font-size: 14.5px; }
.btn.lg { min-height: 54px; padding: 14px 28px; font-size: 17px; }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* Al presionar, se hunde como una tecla (no se encoge). */
.btn:active { transform: translateY(2px); }
/* Enlace de texto con chevrón: «Saber más ›». */
.more-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; color: var(--accent-text); }
.more-link::after { content: "›"; margin-left: 6px; font-size: 1.25em; line-height: 1; transition: transform var(--t-fast) var(--ease-out); }
.more-link:hover::after { transform: translateX(3px); }

/* Nav: logo · enlaces (escritorio) · Entrar · Probar gratis · menú (móvil).
   El menú es un <details>: funciona sin JS; landing.js solo lo cierra al
   elegir un enlace o tocar fuera. */
/* Arriba del todo, sin línea y más transparente; pasados 8 px de scroll
   (landing.js pone/quita .at-top) aparece la línea y el fondo se vuelve más
   opaco (una capa ::before que cambia solo su opacidad). Sin JS: con línea.
   blur(8px): los PCs de hospital sufren con desenfoques grandes. */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(15, 17, 23, .72); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border); transition: border-color var(--t-fast) var(--ease-out); view-transition-name: site-nav; }
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(15, 17, 23, .6); pointer-events: none; transition: opacity var(--t-fast) var(--ease-out); }
.nav.at-top { border-bottom-color: transparent; }
.nav.at-top::before { opacity: 0; }
.nav .wrap { display: flex; align-items: center; gap: 10px 24px; min-height: 60px; }
.brand { display: flex; align-items: center; min-height: 44px; flex: 0 0 auto; }
.brand img { display: block; height: 30px; width: auto; }
.nav .links { position: relative; display: flex; gap: 22px; font-size: 14.5px; }
.nav .links a { color: var(--text-dim); text-decoration: none; padding: 10px 0; border-bottom: 2px solid transparent; }
.nav .links a:hover { color: var(--text); }
.nav .links a.active { color: var(--text); border-bottom-color: var(--accent); }
/* Portada: un solo subrayado que se desliza a la sección visible (landing.js
   pone .spy y lo mueve con transform: translateX + scaleX de una línea de 1 px). */
.nav .links a { transition: color var(--t-fast) var(--ease-out); }
.nav .links.spy a.active { border-bottom-color: transparent; }
.nav-ind { position: absolute; left: 0; bottom: 0; width: 1px; height: 2px; background: var(--accent); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
.nav .links.spy.ready .nav-ind { transition: transform var(--t-nav) var(--ease-out), opacity var(--t-fast) var(--ease-out); }
/* "Nueva ley" es la ventaja competitiva en Chile (decisión de Álvaro,
   2026-09-06): se destaca en el nav como una píldora, no como un link más. */
.nav .links a.law { color: var(--accent-text); background: var(--accent-soft); border: none; border-radius: 999px; padding: 10px 14px; font-weight: 700; align-self: center; line-height: 1.2; }
.nav .links a.law:hover { background: var(--accent); color: var(--on-accent); }
.nav .cta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav .cta .btn { white-space: nowrap; }
.nav .cta .short { display: none; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: var(--surface-2); }
.menu .bars, .menu .bars::before, .menu .bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out); }
.menu .bars { position: relative; }
.menu .bars::before, .menu .bars::after { content: ""; position: absolute; left: 0; }
.menu .bars::before { top: -6px; }
.menu .bars::after { top: 6px; }
.menu[open] .bars { background: transparent; }
.menu[open] .bars::before { transform: translateY(6px) rotate(45deg); }
.menu[open] .bars::after { transform: translateY(-6px) rotate(-45deg); }
.menu .panel { position: fixed; left: 0; right: 0; top: 61px; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: 0 30px 40px -24px rgba(0,0,0,.6); padding: 6px var(--gutter) 16px; max-height: calc(100vh - 61px); overflow-y: auto; }
.menu .panel a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 18px; font-weight: 600; }
.menu .panel a:last-child { border-bottom: none; }
.menu .panel a.law { color: var(--accent-text); }
/* Índice de la portada dentro del menú: saltar a cada bloque. */
.menu .panel .toc-title { display: block; margin: 14px 0 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.menu .panel .toc { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 4px; }
.menu .panel .toc a { min-height: 44px; border: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); border-radius: 999px; padding: 0 16px; font-size: 15px; font-weight: 600; }
.menu .panel a.active { color: var(--accent-text); }
.menu[open] .panel { animation: menu-in var(--t-fast) var(--ease-out); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Hero genérico (páginas internas) */
.hero { padding: 64px 0 34px; }
.hero .wrap { display: grid; grid-template-columns: 1fr; gap: 40px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-text); background: var(--accent-soft); padding: 6px 12px; border-radius: 999px; }
.hero h1 { font-size: clamp(34px, 5.4vw, 60px); line-height: 1.05; margin: 18px 0 16px; letter-spacing: -.015em; font-variation-settings: "opsz" 120; }
.hero .lead { color: var(--text-dim); font-size: clamp(17px, 2vw, 21px); line-height: 1.5; max-width: 60ch; margin-bottom: 22px; }

/* Portada: hero centrado, una promesa y la demo grande debajo. */
.hero.home { padding: 76px 0 84px; text-align: center; background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 106, 61, .13), transparent 70%), var(--bg); }
.hero.home .wrap { justify-items: center; gap: 0; }
.hero.home h1 { font-size: clamp(38px, 7vw, 76px); max-width: 15ch; margin: 20px auto 20px; }
/* Eslogan discreto: chico, debajo del título, sin competir con él ni con el botón. */
.tagline { color: var(--text-dim); font-size: 14px; font-weight: 600; letter-spacing: .02em; margin: -8px auto 18px; }
.hero.home .lead { margin: 0 auto 30px; max-width: 34em; }
.hero.home .lead b { color: var(--text); font-weight: 600; }
.ctas { display: flex; gap: 10px 22px; align-items: center; justify-content: center; flex-wrap: wrap; }
.ctas .note { color: var(--text-dim); font-size: 14px; flex-basis: 100%; }
/* Llamado principal sobrio: del ancho de su texto, una línea, sin ícono
   (Álvaro, 2026-09-27: «Probar» a secas; lo gratis va en la nota). */
.btn.cta-main { min-height: 50px; padding: 12px 36px; font-size: 16.5px; font-weight: 600; }
/* En la portada el naranjo lleno es solo el llamado del encabezado; el del
   nav queda en contorno para no repetir dos naranjos en la misma pantalla. */
.nav .cta .btn.primary.quiet { background: transparent; border-color: var(--accent); color: var(--accent-text); }
.nav .cta .btn.primary.quiet:hover { background: var(--accent-soft); color: var(--accent-text); box-shadow: none; }
.hero.home .demo { margin-top: 56px; width: 100%; max-width: 820px; text-align: left; }

/* Reel de la portada (canvas: reel/reel-portada.js). Sin JS queda el póster;
   el lienzo aparece encima cuando ya pintó su primer cuadro. Siempre el cuadro
   completo (contain), nunca recortado. Vertical 9:16 hasta 640 px (mismo corte
   que el matchMedia del script), horizontal 16:9 desde ahí. El único control es
   un botón chico de pausa (WCAG 2.2.2: animación de más de 5 s). */
section.block.reel-block { padding-top: 24px; }
.reel { position: relative; margin: 0 auto; max-width: 1040px; }
.reel-stage { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; background: #07080c;
  border: 1px solid var(--border); box-shadow: var(--sombra); cursor: pointer; }
.reel-stage img, .reel-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; object-fit: contain; }
.reel-stage canvas { opacity: 0; transition: opacity var(--t-med) var(--ease-out); }
.reel.is-live .reel-stage canvas { opacity: 1; }
.reel-toggle { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
  border-radius: 50%; cursor: pointer; background: rgba(15, 17, 23, .62); color: #fff; border: 1px solid rgba(255, 255, 255, .28);
  opacity: .72; transition: opacity var(--t-fast); }
.reel-toggle:hover, .reel-toggle:focus-visible, .reel.is-paused .reel-toggle, .flujo.is-paused .reel-toggle { opacity: 1; }
.reel-toggle[hidden] { display: none; }
.reel-toggle .ico { width: 12px; height: 12px; display: block; background: currentColor;
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.reel.is-paused .reel-toggle .ico, .flujo.is-paused .reel-toggle .ico { clip-path: polygon(12% 0, 100% 50%, 12% 100%); }
@media (max-width: 640px) {
  .reel { max-width: min(100%, calc(78vh * 9 / 16)); max-width: min(100%, calc(78svh * 9 / 16)); }
  .reel-stage { aspect-ratio: 9 / 16; }
  .reel-toggle { right: 8px; bottom: 8px; }
}

/* Datos destacados: cifras grandes, el texto como respaldo. */
.facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin: 56px auto 0; padding: 0; width: 100%; max-width: 980px; list-style: none; text-align: center; }
.facts li { font-size: 14px; line-height: 1.4; color: var(--text-dim); }
.facts b { display: block; font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 40px); line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; margin-bottom: 6px; }

/* Tres pasos */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 26px auto 0; padding: 0; width: 100%; max-width: 820px; list-style: none; counter-reset: paso; text-align: left; }
.steps li { background: var(--surface); border-radius: var(--radio-s); padding: 14px 16px; font-size: 15px; line-height: 1.45; counter-increment: paso; color: var(--text-dim); }
.steps li::before { content: counter(paso); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font: 700 14px var(--font-body); margin-bottom: 8px; }
.steps li b { display: block; color: var(--text); margin-bottom: 2px; font-weight: 600; }

/* Demo viva del hero: la ventana del RIS con el informe de ejemplo. */
.demo { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.demo .bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-dim); min-width: 0; }
.demo .bar .state { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.demo .bar .state .short { display: none; }
.demo .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); flex: 0 0 auto; }
.demo .dot.busy { background: var(--alerta); animation: pulso 1s infinite; }
.demo .ris { margin-left: auto; font-size: 13px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 2px 9px; white-space: nowrap; flex: 0 0 auto; }
.demo .bar .badge { width: 22px; height: auto; flex: 0 0 auto; }
/* Como el panel «Texto corregido» de la app: rótulo en versalitas y el
   texto sobre el fondo más oscuro, con borde. */
.demo .pane { padding: 18px 20px 20px; }
.demo .pane-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--text-dim); margin-bottom: 12px; }
.demo .text { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; font-size: 16px; line-height: 1.7; white-space: pre-wrap; min-height: 400px; }
.demo .text .h { font-weight: 700; }
.demo .caret { display: inline-block; width: 2px; height: 1em; background: var(--text); vertical-align: -2px; margin-left: 1px; animation: parpadeo 1s steps(1) infinite; }
mark { border-radius: 3px; padding: 0 3px; background: transparent; color: inherit; }
/* Las marcas de la demo son las de la app: alerta = fondo rojizo del color
   de su par (wc-1), corrección = subrayado ámbar, preferencia = teal. */
mark.w { background: color-mix(in srgb, var(--wc-1) 28%, transparent); color: var(--wc-1); font-weight: 600; padding: 0 2px; }
mark.a { background: none; color: var(--warning); font-weight: 600; padding: 0; text-decoration: underline; text-decoration-color: #f6ad55; text-decoration-thickness: 3px; text-underline-offset: 3px; text-decoration-skip-ink: none; }
mark.p { background: rgba(79, 209, 197, .15); color: var(--preference); font-weight: 700; }
/* Las marcas se DIBUJAN (motion 2026-09-27): dentro del texto de la demo el
   fondo y el subrayado viven en un pseudo-elemento que crece con scaleX
   (transform, sin repintar el texto). Solo la categoría recién revelada
   (.new) se anima. */
.demo .text mark, .mini mark { position: relative; z-index: 0; }
.demo .text mark.w, .demo .text mark.p, .mini mark.w, .mini mark.w2, .mini mark.w3 { background: none; }
.demo .text mark.w::before, .demo .text mark.p::before, .mini mark.w::before, .mini mark.w2::before, .mini mark.w3::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 3px; transform-origin: left center; }
.demo .text mark.w::before, .mini mark.w::before { background: color-mix(in srgb, var(--wc-1) 28%, transparent); }
.demo .text mark.p::before { background: rgba(79, 209, 197, .15); }
.mini mark.w2 { color: var(--wc-2); font-weight: 600; padding: 0 2px; }
.mini mark.w2::before { background: color-mix(in srgb, var(--wc-2) 28%, transparent); }
.mini mark.w3 { color: var(--wc-3); font-weight: 600; padding: 0 2px; }
.mini mark.w3::before { background: color-mix(in srgb, var(--wc-3) 28%, transparent); }
.demo .text mark.a { text-decoration: none; }
.demo .text mark.a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 2px; background: #f6ad55; transform-origin: left center; }
.demo .text mark.new::before, .demo .text mark.new::after { animation: draw var(--t-story) var(--ease-out) both; }
/* Demo del hero (2026-09-27): la palabra corregida entra desde abajo y recién
   después se dibuja su subrayado; el segundo extremo del par de lateralidad
   se ilumina después del primero. Entre estados completos, fundido. */
.demo .text mark.new .swap { display: inline-block; animation: swapin 480ms var(--ease-out) both; }
.demo .text mark.a.new::after { animation-delay: 380ms; }
.demo .text mark.w.new.late::before { animation-delay: 420ms; }
@keyframes swapin { from { opacity: 0; transform: translateY(.5em); } to { opacity: 1; transform: none; } }
.demo .text { transition: opacity 260ms var(--ease-out); }
.demo .text.fading { opacity: 0; }
@keyframes draw { from { transform: scaleX(0); } to { transform: none; } }
.demo .foot { display: flex; align-items: center; gap: 12px 14px; padding: 14px 20px 18px; border-top: 1px solid var(--border); flex-wrap: wrap; }
/* La tecla F8 de la app (.btn-f8): navy + coral, relieve inferior. */
.f8 { display: inline-flex; align-items: center; gap: 12px; font: 600 15px var(--font-body); color: var(--text); white-space: nowrap; }
.f8 .cap, .keycap { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; flex: 0 0 auto;
  font: 800 18px var(--font-body); color: #ff6a3d; border: 1.5px solid #ff6a3d; background: linear-gradient(135deg, #2d3148, #1e2235);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 5px 0 #d9502a, 0 8px 16px rgba(0,0,0,.28); transition: transform var(--t-press) var(--ease-out), box-shadow var(--t-press) var(--ease-out); }
.f8 .st { color: var(--text-dim); font-weight: 500; }
/* «↻ Repetir» / «■ Detener» / «▶ Ver revisión» de la demo del hero: el mismo
   botón chico del reel, en píldora y en el flujo del pie. */
.reel-toggle.demo-replay { position: static; width: auto; height: 34px; padding: 0 14px; gap: 6px; display: inline-flex; align-items: center;
  border-radius: 999px; font: 600 13.5px var(--font-body); white-space: nowrap; }
.reel-toggle.demo-replay[hidden] { display: none; }
.f8.pressed .cap { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 0 #d9502a, 0 3px 6px rgba(0,0,0,.28); }
.legend { margin-left: auto; display: flex; gap: 8px 12px; font-size: 14px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.legend mark { animation: none; border-radius: 4px; padding: 1px 6px; }
.legend mark.a { padding: 1px 2px; }
@keyframes pulso { 50% { opacity: .35; } }
@keyframes parpadeo { 50% { opacity: 0; } }

/* Secciones: fondos planos que alternan, cabecera centrada. */
section.block { padding: var(--seccion) 0; }
section[id], header[id] { scroll-margin-top: 60px; }
/* Dentro de un mismo grupo de tema, una línea fina separa las secciones; el
   cambio oscuro↔claro ya marca el corte, sin línea. */
.t-dark + .t-dark:not(.closing), .t-light + .t-light { border-top: 1px solid var(--border); }
.head { max-width: 62ch; margin-bottom: 32px; }
.head .sub { color: var(--text-dim); font-size: clamp(17px, 1.9vw, 20px); line-height: 1.5; margin-top: 14px; }
.head.center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 52px; }
.head.center .sub { max-width: 40em; margin-left: auto; margin-right: auto; }
.kicker { display: block; font: 700 13px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; }
.center-row { text-align: center; margin-top: 30px; }

/* Franja de la ley: ventaja competitiva en Chile (decisión de Álvaro,
   2026-09-06), inmediatamente después del hero, con fondo propio. */
.law-strip { background: var(--accent-soft); }
.law-strip .wrap { padding-top: 64px; padding-bottom: 64px; text-align: center; }
.law-strip h2 { font-size: clamp(26px, 3.6vw, 40px); max-width: 24ch; margin: 0 auto 16px; }
.law-strip p { color: var(--text); max-width: 46em; margin: 0 auto; font-size: 17px; }
.law-strip .fine { color: var(--text-dim); font-size: 14.5px; margin-top: 10px; }
.law-strip .more-link { margin-top: 14px; }

/* Tarjetas: fondo plano, sin borde (sobre blanco llevan marfil). */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radio); padding: 24px 26px; font-size: 16px; line-height: 1.55; min-width: 0; transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); }
.card h4 { font: 700 13px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 12px; }
.card.never h4 { color: var(--text-dim); }
.card ul { color: var(--text-dim); }
.card li + li { margin-top: 8px; }
.card li b { color: var(--text); font-weight: 600; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-dim); }
.card p + p { margin-top: 10px; }
.legal-note { margin-top: 22px; font-size: 15px; color: var(--text-dim); }
.tile { padding: 4px 0; }
.tile h3 { margin-bottom: 8px; }
.tile p { color: var(--text-dim); font-size: 16px; }

/* Tres errores clave: punto de color + título + una línea. */
.checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.checks li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radio); padding: 26px 26px 28px; }
.checks .sw { display: block; width: 34px; height: 6px; border-radius: 99px; margin-bottom: 18px; }
.checks h3 { margin-bottom: 8px; }
.checks p { color: var(--text-dim); font-size: 16px; }
.also { margin: 26px auto 0; max-width: 46em; text-align: center; color: var(--text-dim); font-size: 16.5px; }
.also b { color: var(--text); font-weight: 600; }
.promise { margin: 34px auto 0; max-width: 40em; text-align: center; font-family: var(--font-display); font-size: clamp(21px, 2.4vw, 26px); line-height: 1.3; }

/* Acordeón «Saber más»: el detalle queda en la página (y para buscadores),
   pero no alarga el recorrido en el celular. */
.more { margin-top: 30px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 8px 0; font-weight: 600; font-size: 17px; color: var(--text); }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: "+"; flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font: 600 20px/1 var(--font-body); transition: transform var(--t-fast) var(--ease-out); }
.more[open] > summary::after { transform: rotate(45deg); }
.more > .inner { padding: 6px 0 28px; }
.more[open] > .inner { animation: abre var(--t-med) var(--ease-out); }
@keyframes abre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Qué hace / qué no */
.yesno .card:first-child h3::before { content: "Sí"; display: inline-block; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); font: 700 13px var(--font-body); padding: 2px 9px; border-radius: 999px; margin-right: 8px; vertical-align: 3px; }
.yesno .card:last-child h3::before { content: "No"; display: inline-block; background: color-mix(in srgb, var(--wc-1) 16%, transparent); color: var(--wc-1); font: 700 13px var(--font-body); padding: 2px 9px; border-radius: 999px; margin-right: 8px; vertical-align: 3px; }
.yesno ul { color: var(--text-dim); }

/* Tarjeta "independiente del RIS" */
.ris-agnostic { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radio); padding: 22px 24px; }
.ris-agnostic .tag { display: inline-block; font: 700 12px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); background: var(--accent-soft); padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; }
.ris-agnostic p { color: var(--text-dim); }
.ris-agnostic p + p { margin-top: 8px; }

/* Próximamente: la etiqueta va en el flujo (antes era absoluta y obligaba a
   reservar 135 px a la derecha del título: a 320 px las tarjetas se salían). */
.soon-tag { display: inline-block; margin-bottom: 12px; font: 700 12px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--border-strong); border-radius: 999px; padding: 3px 10px; }

/* Precios */
.plans .card { display: flex; flex-direction: column; gap: 10px; }
.plans .price { font-family: var(--font-display); font-size: 32px; line-height: 1.15; }
.plans .price small { font: 500 14px var(--font-body); color: var(--text-dim); }
.plans .card .btn { margin-top: auto; align-self: flex-start; }
.plans .price-note { font-size: 14px; color: var(--text-dim); }
.plans .card.featured { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* FAQ (y preguntas de precios.html) */
.faq .wrap { max-width: 820px; }
details:not(.more):not(.menu) { border-top: 1px solid var(--border); }
details:not(.more):not(.menu):last-of-type { border-bottom: 1px solid var(--border); }
details:not(.more):not(.menu) > summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 56px; padding: 10px 0; }
details:not(.more):not(.menu) > summary::-webkit-details-marker { display: none; }
details:not(.more):not(.menu) > summary::after { content: "+"; font-family: var(--font-display); font-size: 24px; color: var(--accent-text); line-height: 1; flex: 0 0 auto; transition: transform var(--t-fast) var(--ease-out); }
details:not(.more):not(.menu)[open] > summary::after { transform: rotate(45deg); }
details:not(.more):not(.menu) > p { margin: 0 0 18px; color: var(--text-dim); max-width: 70ch; }
/* Apertura con altura animada (FAQ y «Saber más»; el menú no): el contenido
   crece de 0 a su alto con interpolate-size. Donde no se soporta, abre como
   siempre, de golpe. El «+» ya rota 45° a «×». */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) and selector(::details-content) {
    :root { interpolate-size: allow-keywords; }
    details:not(.menu)::details-content { block-size: 0; overflow-y: clip;
      transition: block-size var(--t-med) var(--ease-out), content-visibility var(--t-med) allow-discrete; }
    details:not(.menu)[open]::details-content { block-size: auto; }
  }
}

/* Cierre: una promesa y un botón. */
.closing { text-align: center; padding: 120px 0; background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(255, 106, 61, .16), transparent 70%), var(--bg); }
.closing h2 { max-width: 17ch; margin: 0 auto; font-size: clamp(32px, 5.4vw, 60px); }
.closing p { color: var(--text-dim); font-size: clamp(17px, 2vw, 20px); margin: 18px auto 32px; max-width: 34em; }

/* Footer */
footer { border-top: 1px solid var(--border); padding: 30px 0 44px; font-size: 14px; color: var(--text-dim); }
footer .wrap { display: flex; gap: 8px 22px; flex-wrap: wrap; align-items: center; }
footer .links { display: flex; gap: 0 18px; flex-wrap: wrap; }
footer .links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-dim); text-decoration: none; }
footer .links a:hover { color: var(--text); text-decoration: underline; }
footer .ver { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Páginas de texto (legal, guía) */
.doc { padding: 56px 0 84px; }
.doc .wrap { max-width: 760px; }
.doc h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.08; margin: 14px 0 12px; letter-spacing: -.01em; }
.doc .meta { color: var(--text-dim); font-size: 14.5px; margin-bottom: 28px; }
.doc h2 { font-size: clamp(24px, 3vw, 30px); margin: 44px 0 12px; }
.doc h3 { font-size: 19px; margin: 24px 0 8px; }
.doc p, .doc li { font-size: 17px; line-height: 1.7; color: var(--text); }
.doc p + p { margin-top: 14px; }
.doc ul, .doc ol { margin: 12px 0; padding-left: 22px; }
.doc li + li { margin-top: 8px; }
.doc table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 16px 0; }
.doc th, .doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.5; }
.doc th { font-weight: 700; color: var(--text-dim); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.doc td { color: var(--text); }
.doc .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.draft { background: var(--accent-soft); color: var(--accent-text); border-radius: var(--radio-s); padding: 12px 16px; font-size: 15px; margin-bottom: 24px; }
.doc kbd { font: 600 14px var(--font-body); background: var(--surface); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px; padding: 1px 7px; white-space: nowrap; }

/* Diagrama del recorrido de un informe (portada y seguridad.html): cajas y
   flechas en CSS, sin librería (la CSP no permite scripts externos). */
.flow-diagram { margin: 24px 0; padding: 0; border: none; }
/* Animación del recorrido (reel/flujo-datos.js): con JS reemplaza las cajas; sin JS
   quedan las cajas. «Qué se guarda» y la leyenda siguen visibles debajo. Recuadro
   oscuro como el reel. Vertical 640×1280 hasta 760 px, horizontal 16:9 desde ahí. */
.flujo { position: relative; margin: 0 auto 18px; max-width: 1040px; }
.flujo[hidden] { display: none; }
.flow-diagram.has-flujo > .flow-zones, .flow-diagram.has-flujo > .flow-row { display: none !important; }
.flujo-stage { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; background: #0f1117;
  border: 1px solid #2a2d3e; box-shadow: var(--sombra); cursor: pointer; }
.flujo-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; object-fit: contain;
  opacity: 0; transition: opacity var(--t-med) var(--ease-out); }
.flujo.is-live .flujo-stage canvas { opacity: 1; }
@media (max-width: 760px) { .flujo-stage { aspect-ratio: 640 / 1280; } .flujo .reel-toggle { right: 8px; bottom: 8px; } }
.flow-row { display: flex; align-items: stretch; gap: 10px; }
.flow-row.back { margin-top: 14px; }
.flow-box {
  flex: 1 1 0; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radio-s);
  padding: 14px 16px; font-size: 14.5px; line-height: 1.45; display: flex; flex-direction: column; gap: 4px;
}
.flow-box b { font-size: 15.5px; color: var(--text); }
.flow-box span { color: var(--text-dim); }
.flow-box.you { border-color: var(--accent); background: var(--accent-soft); }
.flow-tag {
  align-self: flex-start; margin-top: 4px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--accent-text); background: var(--surface); border-radius: 999px; padding: 3px 9px; line-height: 1.3;
}
.flow-arrow { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--text-dim); }
.flow-arrow::before { content: "→"; }
.flow-row.back .flow-arrow::before { content: "←"; }
.flow-diagram figcaption { margin-top: 16px; font-size: 15px; color: var(--text-dim); line-height: 1.55; }
/* Zonas del recorrido (2026-09-27, servidor en Chile) */
.flow-zones { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.flow-zones .cl { color: var(--accent-text); }
.flow-zones .ext { color: var(--text-dim); }
.flow-border { flex: 0 0 auto; display: flex; align-items: center; border-left: 2px dashed var(--accent); padding-left: 8px; margin-left: 2px; }
.flow-border span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
.flow-sample { margin-top: 6px; font: 13.5px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--text); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 8px; padding: 5px 8px; }
.flow-sample .mk { color: var(--accent-text); font-weight: 700; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 6px; padding: 0 5px; white-space: nowrap; }
.flow-keep { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.flow-keep div { flex: 1 1 240px; min-width: 0; border-radius: var(--radio-s); padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); }
.flow-keep b { color: var(--text); }

/* Sello «servidor en Chile». */
.cl-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 999px; padding: 4px 12px; }

/* Demo gráfica del expansor y de las variantes: un "campo del RIS" con
   dos estados que se alternan con CSS (funciona sin JS). Las dos pantallas
   comparten la misma celda de la grilla: la caja toma la altura de la más
   larga, sin alturas fijas, a cualquier ancho. La tecla F8 de la barra se
   hunde justo en el cambio. Con prefers-reduced-motion, los dos estados se
   ven fijos, uno tras otro, con «F8 →» (o «F8 ↓» en móvil) entre ambos. */
.demos2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.demos2 h3 { margin-bottom: 14px; }
.field-demo { min-width: 0; }
.field-demo .field-win, .rxdemo .field-win { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.field-demo .field-bar, .rxdemo .field-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg); font-size: 13px; color: var(--text-dim); }
.field-demo .field-bar .dot3, .rxdemo .field-bar .dot3 { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); flex: 0 0 auto; }
.field-demo .field-bar .field-label, .rxdemo .field-bar .field-label { margin-left: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 2px 9px; font-size: 13px; white-space: nowrap; }
.field-demo .field-bar .fkey { display: inline-grid; place-items: center; margin-left: 8px; width: 34px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  font: 800 13px var(--font-body); color: #ff6a3d; border: 1.5px solid #ff6a3d; background: linear-gradient(135deg, #2d3148, #1e2235);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 #d9502a; animation: fkey 7s infinite; }
.field-demo .field-body { display: grid; font-size: 16px; line-height: 1.6; }
.field-demo .screen { grid-area: 1 / 1; padding: 18px 20px; white-space: pre-wrap; min-width: 0; opacity: 0; animation: field-crossfade 7s infinite; }
.field-demo .screen.b { animation-delay: -3.5s; }
.field-demo .screen .ph { background: var(--accent-soft); color: var(--accent-text); border-radius: 3px; padding: 0 3px; }
.field-demo .screen .changed { background: var(--accent-soft); color: var(--text); border-left: 3px solid var(--accent); padding: 0 5px; border-radius: 0 3px 3px 0; }
.field-demo .caret2 { display: inline-block; width: 2px; height: 1em; background: var(--text); vertical-align: -2px; margin-left: 1px; animation: parpadeo 1s steps(1) infinite; }
.field-demo .field-arrow { display: none; }
.field-demo .field-arrow::after { content: " →"; }
@keyframes field-crossfade { 0%, 38% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes fkey { 0%, 36%, 50%, 100% { transform: none; } 40%, 45% { transform: translateY(3px); } }
/* landing.js deja la demo en su primer estado mientras está fuera de la
   pantalla, y la echa a andar desde el principio cuando se ve. */
.field-demo.wait .screen, .field-demo.wait .fkey { animation: none; }
.field-demo.wait .screen.a { opacity: 1; }
.field-demo figcaption { margin-top: 12px; font-size: 15px; color: var(--text-dim); line-height: 1.5; }

/* «Escribe rx y elige» (reel/plantillas-rx.js): el expansor con su lista de
   plantillas y variantes, en el mismo campo del RIS de arriba. El JS
   dibuja todo (sin JS queda el título y la leyenda); el alto del campo lo
   calcula desde el texto final y la tarjeta abierta. La tarjeta usa la fuente
   del sistema, como la del puente en el escritorio del radiólogo. */
.rxdemo { max-width: 760px; margin: 0 auto 56px; min-width: 0; }
.rxdemo h3 { margin-bottom: 14px; text-align: center; }
.rxdemo figcaption { margin: 12px auto 0; max-width: 40em; font-size: 15px; color: var(--text-dim); line-height: 1.5; text-align: center; }
.rxdemo-stage[hidden] { display: none; }
.rxdemo .field-bar .field-label { margin-left: 0; }
.rxdemo-step { margin-left: auto; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rxdemo-key { display: inline-grid; place-items: center; min-width: 30px; height: 28px; padding: 0 8px; border-radius: 7px; flex: 0 0 auto;
  font: 700 13px Arial, system-ui, sans-serif; color: var(--text); border: 1px solid var(--border-strong); background: var(--surface);
  box-shadow: 0 3px 0 var(--border-strong); opacity: 0; transform: scale(.8);
  transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-back), box-shadow var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.rxdemo-key.show { opacity: 1; transform: none; }
.rxdemo-key.down { transform: translateY(3px); box-shadow: 0 0 0 var(--border-strong); color: var(--accent-text); border-color: var(--accent); }
.rxdemo-mode { flex: 0 0 auto; font: 700 11px var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--on-accent); background: var(--accent);
  border-radius: 999px; padding: 3px 9px; opacity: 0; transform: translateX(-4px); transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out); }
.rxdemo-mode.show { opacity: 1; transform: none; }
.rxdemo-toggle { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; color: var(--text-dim); background: transparent; border: 1px solid var(--border); border-radius: 50%; cursor: pointer; }
.rxdemo-toggle:hover, .rxdemo-toggle:focus-visible { color: var(--text); border-color: var(--border-strong); }
.rxdemo-toggle .ico { width: 10px; height: 10px; display: block; background: currentColor;
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.rxdemo.is-paused .rxdemo-toggle .ico { clip-path: polygon(12% 0, 100% 50%, 12% 100%); }
.rxdemo-toggle[hidden] { display: none; }
.rxdemo-body { position: relative; display: grid; font-size: 16px; line-height: 1.6; overflow: hidden; }
.rxdemo-text { grid-area: 1 / 1; padding: 18px 20px; min-width: 0; overflow-wrap: anywhere; transition: opacity var(--t-med) var(--ease-out); }
.rxdemo-text.fade { opacity: 0; }
.rxdemo-sizer { visibility: hidden; }
.rxdemo-ln { min-height: 1.6em; opacity: 0; transform: translateY(6px); transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); }
.rxdemo-ln.on { opacity: 1; transform: none; }
.rxdemo-ln.out { text-decoration: line-through; text-decoration-color: var(--warning); color: var(--text-dim); opacity: .45; transform: none; transition: opacity 600ms var(--ease-out), color var(--t-fast); }
.rxdemo-card.up { transform-origin: bottom left; }
.rxdemo-chg { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--text); border-left: 3px solid var(--warning); padding: 0 5px; border-radius: 0 3px 3px 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.rxdemo-chg.part { border-left: 0; padding: 0 2px; border-radius: 3px; }
.rxdemo-head { display: flex; flex-wrap: wrap; gap: 4px 22px; padding: 7px 20px; border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: 13px; color: var(--text-dim); }
.rxdemo-head b { color: var(--text); font-weight: 700; }
.rxdemo-ph { background: var(--accent-soft); color: var(--accent-text); border-radius: 3px; padding: 0 3px; }
.rxdemo-caret { display: inline-block; width: 2px; height: 1em; background: var(--text); vertical-align: -2px; margin-left: 1px; animation: parpadeo 1s steps(1) infinite; }
.rxdemo-card { position: absolute; left: 16px; top: 48px; z-index: 2; width: min(340px, calc(100% - 16px)); padding: 6px;
  font: 14px/1.35 Arial, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text);
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .75);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top left;
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), visibility 0s linear var(--t-fast); }
.rxdemo-card.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.rxdemo-card.measure, .rxdemo-card.measure * { transition: none !important; visibility: hidden !important; }
.rxdemo-row { display: flex; align-items: baseline; gap: 12px; padding: 5px 10px; border-radius: 8px; border-left: 3px solid transparent; transition: background var(--t-fast); }
.rxdemo-row.sel { background: var(--accent-soft); border-left-color: var(--accent); }
.rxdemo-atajo { flex: 0 0 5.6em; font: 13.5px ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace; color: var(--text-dim); }
.rxdemo-atajo b { color: var(--accent-text); font-weight: 700; }
.rxdemo-row.sel .rxdemo-atajo { color: var(--text); }
.rxdemo-nombre { min-width: 0; }
.rxdemo-subs { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-med) var(--ease-out); }
.rxdemo-card.subs-open .rxdemo-subs { grid-template-rows: 1fr; }
.rxdemo-subs-in { overflow: hidden; min-height: 0; padding-left: 16px; }
.rxdemo-sub { display: flex; align-items: center; gap: 8px; padding: 3px 10px; font-size: 13.5px; color: var(--text-dim); }
.rxdemo-sub:first-child { margin-top: 2px; }
.rxdemo-chk { position: relative; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-strong); background: var(--surface);
  transition: background var(--t-fast), border-color var(--t-fast); }
.rxdemo-chk::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform var(--t-fast) var(--ease-back); }
.rxdemo-chk.on { background: var(--accent); border-color: var(--accent); }
.rxdemo-chk.on::after { transform: rotate(45deg) scale(1); }
.rxdemo-sub:has(.rxdemo-chk.on) { color: var(--text); }
.rxdemo-num { flex: 0 0 auto; font: 700 12px ui-monospace, Consolas, monospace; color: var(--accent-text); }
.rxdemo-subnom { min-width: 0; }
.rxdemo-hint { margin-top: 4px; padding: 5px 10px 2px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dim); }
.rxdemo-cursor { position: absolute; left: 0; top: 0; z-index: 3; width: 20px; height: 24px; opacity: 0; pointer-events: none;
  transition: transform 800ms var(--ease-out), opacity var(--t-fast); }
.rxdemo-cursor path { fill: #fff; stroke: #0f1117; stroke-width: 1.4; stroke-linejoin: round; }
.rxdemo-cursor.show { opacity: 1; }
.rxdemo-cursor.down path { fill: #e2e8f0; }
.rxdemo-click { position: absolute; left: -9px; top: -9px; z-index: 3; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; pointer-events: none; }
.rxdemo-click.go { animation: rxdemo-click 520ms var(--ease-out); }
@keyframes rxdemo-click { 0% { opacity: .9; scale: .4; } 100% { opacity: 0; scale: 1.8; } }
@media (prefers-reduced-motion: reduce) {
  .rxdemo-caret { animation: none; }
  .rxdemo-ln, .rxdemo-text, .rxdemo-card, .rxdemo-key, .rxdemo-mode { transition: none; }
}
@media (max-width: 720px) {
  .rxdemo { margin-bottom: 40px; }
  .rxdemo-text { padding: 14px 16px; }
  .rxdemo-head { padding: 6px 16px; }
  .rxdemo-body { font-size: 15px; }
  .rxdemo .field-bar .field-label, .rxdemo .field-bar .dot3 { display: none; }
  .rxdemo .field-bar { padding: 8px 12px; }
  .rxdemo-card { font-size: 13.5px; }
}

/* Comparación "plantillas del RIS" vs PressF8 — describe una diferencia de
   diseño (dónde viven los datos), no una carencia del RIS. */
.vs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vs-grid .card h4 { font: 700 13px var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; }
.vs-grid .card.press h4 { color: var(--accent-text); }
.vs-grid .card ul { color: var(--text-dim); list-style: none; padding: 0; display: grid; gap: 10px; }
.vs-grid .card li { padding-left: 20px; position: relative; }
.vs-grid .card li + li { margin-top: 0; }
.vs-grid .card li::before { content: "–"; position: absolute; left: 0; color: var(--text-faint); }
.vs-grid .card.press li::before { content: "✓"; color: var(--accent-text); }
.vs-grid .card li b { color: var(--text); font-weight: 600; }

/* Aparición al hacer scroll (sutil). Solo cuando landing.js marcó el
   elemento como «.pre» — lo que ya está en pantalla al cargar, o todo si el
   JS no carga, se ve siempre. Solo las cabeceras y las tarjetas suben 12 px;
   párrafos sueltos, figuras y franjas, solo fundido. Las cifras del hero
   (.fig), fundido de 300 ms. */
.pre { opacity: 0; }
.head.pre, .card.pre, .tile.pre { transform: translateY(12px); }
.pre.in { opacity: 1; transform: none; transition: opacity var(--t-enter) var(--ease-enter), transform var(--t-enter) var(--ease-enter); transition-delay: var(--stagger, 0ms); }
.pre.fig.in { transition-duration: 300ms; }
/* El recorrido del dato: las cajas aparecen en orden, cruzando la frontera. */
/* El recorrido del dato, en seis pasos (landing.js pone .armed y luego
   .s1….s6 cuando el esquema se ve). Sin JS o con reduced-motion: el estado
   final, con los marcadores ya puestos. */
.flow-diagram.pre { opacity: 1; transform: none; }
.flow-sample.swap { display: grid; }
.flow-sample.swap > span { grid-area: 1 / 1; }
.flow-sample.swap .real { visibility: hidden; opacity: 0; }
.flow-diagram .flow-arrow, .flow-diagram .flow-border { position: relative; }
.flow-diagram.armed .flow-row > *, .flow-diagram.armed .flow-keep, .flow-diagram.armed figcaption { opacity: 0; transform: translateY(10px); transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); }
.flow-diagram.armed .flow-sample.swap .real { visibility: visible; opacity: 1; transition: opacity var(--t-med) var(--ease-out); }
.flow-diagram.armed .flow-sample.swap .masked { opacity: 0; transition: opacity var(--t-med) var(--ease-out); }
.flow-diagram.armed .flow-sample.swap .mk { display: inline-block; transform: scale(.6); opacity: 0; transition: transform var(--t-med) var(--ease-back), opacity var(--t-fast); }
.flow-diagram.armed .flow-tag { opacity: 0; transform: translateY(4px); transition: opacity var(--t-med), transform var(--t-med) var(--ease-out); }
.flow-diagram.armed .flow-arrow::after, .flow-diagram.armed .flow-border::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); opacity: 0; }
.flow-arrow::after { top: 50%; left: 50%; margin: -4px 0 0 -4px; }
.flow-border::after { top: 50%; left: -6px; margin-top: -4px; }
/* paso 1: tu PC */
.flow-diagram.s1 .flow-row:not(.back) > :nth-child(1) { opacity: 1; transform: none; }
/* paso 2: viaja al servidor en Chile (todavía con los datos) */
.flow-diagram.s2 .flow-row:not(.back) > :nth-child(2), .flow-diagram.s2 .flow-row:not(.back) > :nth-child(3) { opacity: 1; transform: none; }
.flow-diagram.s2 .flow-row:not(.back) > :nth-child(2)::after { animation: viaja var(--t-story) var(--ease-out) both; }
/* paso 3: los datos se vuelven marcadores */
.flow-diagram.s3 .flow-row:not(.back) .flow-tag { opacity: 1; transform: none; }
.flow-diagram.s3 .flow-sample.swap .real { opacity: 0; }
.flow-diagram.s3 .flow-sample.swap .masked { opacity: 1; }
.flow-diagram.s3 .flow-sample.swap .mk { opacity: 1; transform: none; transition-delay: .15s; }
/* paso 4: cruza la frontera; al otro lado llega solo texto con marcadores */
.flow-diagram.s4 .flow-row:not(.back) > :nth-child(4), .flow-diagram.s4 .flow-row:not(.back) > :nth-child(5) { opacity: 1; transform: none; }
.flow-diagram.s4 .flow-row:not(.back) > :nth-child(4)::after { animation: viaja var(--t-story) var(--ease-out) both; }
/* paso 5: vuelve a Chile y se restauran los datos */
.flow-diagram.s5 .flow-row.back > :nth-child(3), .flow-diagram.s5 .flow-row.back > :nth-child(4), .flow-diagram.s5 .flow-row.back > :nth-child(5) { opacity: 1; transform: none; }
.flow-diagram.s5 .flow-row.back > :nth-child(4)::after { animation: vuelve var(--t-story) var(--ease-out) both; }
/* paso 6: tu PC, con el informe completo; y el respaldo */
.flow-diagram.s6 .flow-row.back > :nth-child(1), .flow-diagram.s6 .flow-row.back > :nth-child(2), .flow-diagram.s6 .flow-keep, .flow-diagram.s6 figcaption { opacity: 1; transform: none; }
.flow-diagram.s6 .flow-row.back > :nth-child(2)::after { animation: vuelve var(--t-story) var(--ease-out) both; }
.flow-diagram.s6 .flow-keep { transition-delay: .3s; }
.flow-diagram.s6 figcaption { transition-delay: .5s; }
@keyframes viaja { 0% { opacity: 0; transform: translateX(-16px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(16px); } }
@keyframes vuelve { 0% { opacity: 0; transform: translateX(16px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(-16px); } }
@keyframes baja { 0% { opacity: 0; transform: translateY(-12px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* Expansor y variantes manejados por landing.js (.js): se escribe el
   atajo letra a letra, se presiona F8, la plantilla baja línea por línea y,
   en la línea, la normal se transforma en la variante. */
.field-demo.js .screen, .field-demo.js .fkey { animation: none; }
.field-demo.js .screen { opacity: 0; transition: opacity var(--t-med) var(--ease-out); }
.field-demo.js .screen.a { opacity: 1; }
.field-demo.js .screen.b { opacity: 1; }
.field-demo.js.show-b .screen.a { opacity: 0; transition-duration: var(--t-fast); }
.field-demo.js .fkey { transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast); }
.field-demo.js.press .fkey { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 #d9502a; }
.field-demo.js .screen.b .ln { display: block; opacity: 0; transform: translateY(8px); transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); }
.field-demo.js .screen.b .ln.on { opacity: 1; transform: none; }
.field-demo.js .var { background: none; border-left: none; padding: 0; }
.field-demo.js .var .new { display: none; background: var(--accent-soft); color: var(--text); border-left: 3px solid var(--accent); padding: 0 5px; border-radius: 0 3px 3px 0; }
.field-demo.js.swap .var .old { display: none; }
.field-demo.js.swap .var .new { display: inline; animation: aparece var(--t-story) var(--ease-out) both; }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

.swipe-hint { display: none; }

/* «Qué revisa»: en escritorio, el informe de ejemplo queda fijo (sticky)
   mientras pasan las tres tarjetas; cada una enciende su marca. */
.story { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.story .mini { position: sticky; top: 100px; }
.story .checks { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 16vh, 150px); padding: clamp(24px, 6vh, 60px) 0 clamp(40px, 10vh, 100px); }
.mini .text { min-height: 0; font-size: 15.5px; }
.mini mark { transition: opacity var(--t-med) var(--ease-out); }
.mini[data-focus] mark:not(.on) { opacity: .3; }
.mini mark.on::before { animation: draw var(--t-story) var(--ease-out) both; }
.checks li { transition: border-color var(--t-med), opacity var(--t-med); }
.checks li.active { border-color: var(--accent); }
.story[data-live] .checks li:not(.active) { opacity: .55; }
@media (hover: hover) {
  /* Hover honesto: solo se levanta la tarjeta que tiene su acción (un botón o
     un «Saber más ›» propio: planes, descarga); el resto, a lo más, marca el borde. */
  .card:hover { border-color: var(--border-strong); }
  .card:has(> .btn, > .more-link):hover { transform: translateY(-2px); box-shadow: var(--sombra); }
  .btn.primary:hover { box-shadow: 0 10px 22px -12px rgba(217, 80, 42, .7); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .demo .caret, .demo .dot.busy, .demo mark { animation: none; }
  .pre, .flow-diagram.armed * { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .demo .text mark::before, .demo .text mark::after, .mini mark::before { animation: none !important; }
  .demo .text mark .swap { animation: none !important; }
  .mini mark, .checks li { transition: none; }
  .card, .card:hover, .btn, .btn:active { transition: none; transform: none; }
  .card:has(> .btn, > .more-link):hover { transform: none; }
  .nav, .nav::before, .nav .links a, .nav-ind, .nav .links.spy.ready .nav-ind { transition: none; }
  .menu .bars, .menu .bars::before, .menu .bars::after, .more-link::after, .f8 .cap { transition: none; }
  .more[open] > .inner, .menu[open] .panel { animation: none; }
  .field-demo .field-bar .fkey { animation: none; }
  .field-demo .field-body { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
  .field-demo .screen { grid-area: auto; opacity: 1; animation: none; }
  .field-demo .caret2 { display: none; }
  .field-demo .field-arrow { display: flex; align-items: center; justify-content: center; font: 800 16px var(--font-body); color: var(--accent-text); padding: 0 6px; white-space: nowrap; }
}

/* Tablet */
@media (max-width: 960px) {
  :root { --seccion: 84px; }
  .nav .links { display: none; }
  .menu { display: block; }
  .grid3, .checks { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .demos2 { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* Celular */
@media (max-width: 720px) {
  :root { --gutter: 18px; --seccion: 56px; --radio: 16px; }
  body { font-size: 16px; }
  .grid2, .vs-grid { grid-template-columns: minmax(0, 1fr); }
  .hero { padding: 40px 0 24px; }
  .hero.home { padding: 44px 0 52px; }
  .hero.home h1 { margin: 16px auto 14px; }
  .hero.home .lead { margin-bottom: 24px; }
  .hero.home .demo { margin-top: 36px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; margin-top: 36px; }
  .facts li:last-child { grid-column: 1 / -1; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 12px 14px; }
  .steps li::before { grid-row: 1 / span 2; margin: 0; }
  .demo .pane { padding: 14px 12px 14px; }
  .demo .text { padding: 12px 14px; font-size: 15px; min-height: 0; }
  .demo .bar { padding: 10px 14px; }
  .demo .bar .state .long { display: none; }
  .demo .bar .state .short { display: inline; }
  .demo .foot { padding: 12px 14px; }
  .legend { margin-left: 0; justify-content: flex-start; flex-basis: 100%; }
  .head { margin-bottom: 24px; }
  .head.center { margin-bottom: 32px; }
  .card { padding: 20px; }
  .checks li { padding: 22px 20px; }
  .law-strip .wrap { padding-top: 48px; padding-bottom: 48px; }
  .closing { padding: 76px 0; }
  .field-demo .screen { padding: 14px 16px; font-size: 15px; }
  .field-demo .field-label { display: none; }
  /* Con reduced-motion los dos estados van uno sobre otro (nunca en tres
     columnas angostas), con la tecla y la flecha horizontales: «F8 ↓». */
  .field-demo .field-body { grid-template-columns: minmax(0, 1fr); }
  .field-demo .field-arrow { padding: 0 0 4px; }
  .field-demo .field-arrow::after { content: " ↓"; }
  .flow-row, .flow-row.back { flex-direction: column; gap: 6px; }
  .flow-arrow { padding: 2px 0; }
  .flow-arrow::before { content: "↓"; }
  .flow-row.back .flow-arrow::before { content: "↓"; }
  .flow-row.back { flex-direction: column-reverse; }
  .flow-zones { display: none; }
  .flow-border { border-left: none; border-top: 2px dashed var(--accent); padding: 6px 0 0; margin: 4px 0; justify-content: center; }
  .flow-border span { writing-mode: horizontal-tb; transform: none; }
  .flow-row.back > :last-child { display: none; }
  .flow-diagram.s2 .flow-row:not(.back) > :nth-child(2)::after, .flow-diagram.s6 .flow-row.back > :nth-child(2)::after { animation-name: baja; }
  .flow-border::after { left: 50%; top: -6px; margin: 0 0 0 -4px; }
  .flow-diagram.s4 .flow-row:not(.back) > :nth-child(4)::after, .flow-diagram.s5 .flow-row.back > :nth-child(4)::after { animation-name: baja; }
  .hero.home .steps { display: none; }
  .flow-keep { display: none; }
  .demos2.swipe > * { flex-basis: 88%; }
  /* Filas de tarjetas → carrusel horizontal deslizable (una tarjeta y el
     borde de la siguiente a la vista). */
  .swipe { display: flex !important; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 14px; scroll-padding: 0 var(--gutter);
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { flex: 0 0 84%; scroll-snap-align: start; }
  .swipe > .tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radio); padding: 20px; }
  .swipe-hint { display: block; margin-top: 2px; text-align: center; font-size: 13px; color: var(--text-dim); }
  .story { display: block; }
  .story .mini { position: static; margin-bottom: 20px; }
  .story .checks { gap: 12px; padding: 4px var(--gutter) 14px; }
  .doc { padding: 36px 0 64px; }
  .doc p, .doc li { font-size: 16.5px; }
  /* Tablas apiladas: cada fila es una ficha con el rótulo de cada columna
     (data-label), sin desplazamiento lateral. */
  .doc table.stack, .doc table.stack tbody, .doc table.stack tr, .doc table.stack td { display: block; width: 100%; }
  .doc table.stack tr:first-child { display: none; }
  .doc table.stack tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radio-s); padding: 6px 14px; margin-bottom: 10px; }
  .doc table.stack td { border: none; padding: 6px 0; }
  .doc table.stack td + td { border-top: 1px solid var(--surface-2); }
  .doc table.stack td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1px; }
  footer .wrap { flex-direction: column; align-items: flex-start; gap: 4px; }
  footer .links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; width: 100%; }
  footer .ver { margin-left: 0; }
}
/* Celular angosto (iPhone con «pantalla ampliada», ~320 px): el header
   queda en logo + «Probar» + menú; «Entrar» pasa al menú. */
@media (max-width: 440px) {
  .nav .wrap { gap: 8px; }
  .brand img { height: 26px; }
  .nav .cta > .entrar { display: none; }
  .nav .cta .long { display: none; }
  .nav .cta .short { display: inline; }
  .nav .cta .btn.sm { padding: 9px 14px; font-size: 14.5px; }
  .ctas .btn { width: 100%; }
  .ctas .btn.cta-main { width: auto; }
  .hero.home h1 { font-size: clamp(34px, 10.5vw, 44px); }
}
@media (min-width: 441px) {
  .menu .panel .entrar { display: none; }
}

/* Demo del encabezado: encabezados que pasan a negrita al corregir. */
.demo .text .hb { font-weight: 700; }
.demo .text .hb.new { animation: aparece var(--t-med) var(--ease-out) both; }

/* En PC, «Tu informe…» empieza en la segunda línea del título (Álvaro, 2026-09-28). */
.br-desk { display: none; }
@media (min-width: 721px) { .br-desk { display: inline; } }

/* Entre páginas del sitio (2026-09-28): el encabezado queda fijo y el resto
   hace un fundido de 200 ms. Solo navegaciones del mismo origen entre páginas
   que cargan este CSS; con movimiento reducido, cambio directo. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--t-fast); animation-timing-function: var(--ease-out); }
  ::view-transition-group(site-nav) { animation: none; }
  ::view-transition-old(site-nav) { display: none; }
  ::view-transition-new(site-nav) { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav { view-transition-name: none; }
}

/* Material (2026-10-05): capturas reales de la biblioteca, 16:10. */
.shot { margin: 0 0 32px; }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radio); border: 1px solid var(--border); box-shadow: var(--sombra); background: var(--surface); }
.shot figcaption { margin-top: 12px; color: var(--text-dim); font-size: 15px; line-height: 1.5; }
.shot-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 720px) { .shot-pair { grid-template-columns: 1fr; } }