/* ==========================================================================
   BLIXTOR · site.css  (sistema global, 5 oct 2026)
   --------------------------------------------------------------------------
   Solo lo compartido por todas las páginas. Lo que existe en una sola
   página vive en css/p/<página>.css. La dirección de arte está en DESIGN.md.

   Orden: 1 fuentes · 2 tokens · 3 base · 4 maquetación y capítulos ·
   5 cabecera y menú · 6 migas · 7 botones y enlaces · 8 héroe interior y
   encabezados · 9 filas editoriales · 10 enfrentados · 11 secuencia ·
   12 enunciado y cifra · 13 acordeón · 14 notas y tablas · 15 capturas ·
   16 cierre y pie · 17 movimiento · 18 impresión

   Reglas de la casa (no romper):
   - El contenido se ve sin JavaScript. Nada se oculta aquí a la espera de
     un script; las entradas animadas las prepara js/motion.js.
   - Forma: bloques sin radio; interactivos en píldora; medios 10 px.
   - Color por capítulos: [data-theme="night|wine|accent"] redefine las
     variables --c-* y todas las piezas se adaptan solas.
   - Sin texto en degradado, sin manchas de fondo, sin sombras de tarjeta.
   ========================================================================== */

/* ==========================================================================
   1. FUENTES
   Variables y autoalojadas: con el rango del eje salen todos los pesos en
   dos descargas. Rutas relativas a esta hoja (funcionan en Firebase y en
   file://). Las familias "Fallback" ajustan Arial a las métricas de cada
   fuente para que el cambio no mueva el layout.
   ========================================================================== */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../assets/fonts/inter-400.woff2) format('woff2');
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../assets/fonts/space-grotesk-700.woff2) format('woff2');
}
@font-face{
  font-family:'Inter Fallback';font-weight:100 550;
  src:local('Arial'),local('ArialMT'),local('Roboto');
  size-adjust:106.7%;ascent-override:90.8%;descent-override:22.6%;line-gap-override:0%;
}
@font-face{
  font-family:'Inter Fallback';font-weight:551 900;
  src:local('Arial Bold'),local('Arial-BoldMT'),local('Roboto Bold');
  size-adjust:101%;ascent-override:95.9%;descent-override:23.9%;line-gap-override:0%;
}
@font-face{
  font-family:'Space Grotesk Fallback';font-weight:500 900;
  src:local('Arial Bold'),local('Arial-BoldMT'),local('Roboto Bold');
  size-adjust:101.5%;ascent-override:96.9%;descent-override:28.8%;line-gap-override:0%;
}
@font-face{
  font-family:'Space Grotesk Fallback';font-weight:100 499;
  src:local('Arial'),local('ArialMT'),local('Roboto');
  size-adjust:106%;ascent-override:92.8%;descent-override:27.5%;line-gap-override:0%;
}

/* ==========================================================================
   2. TOKENS
   Paleta de siempre. Contrastes sobre --bg: --ink 15.8:1 · --ink-body
   12.9:1 · --ink-2 6.5:1 · --accent 5.7:1 · --accent-deep 9:1. Sobre
   --night: --cream 15.1:1 · --malva 8.2:1 · --rose 8:1. Blanco sobre
   --accent 6.1:1.
   ========================================================================== */
:root{
  color-scheme:light;

  --bg:#FBF6F2;
  --surface:#FFFFFF;
  --surface-2:#F2E1DC;
  --surface-3:#F8EEE9;
  --ink:#241016;
  --ink-body:#3B2329;
  --ink-2:#6E5257;
  --accent:#B03060;
  --accent-deep:#7A2247;
  --wine:#4A1B2F;
  --plum:#8E3A52;
  --rose:#D89C9C;
  --night:#150A0E;
  --night-2:#211318;
  --cream:#F3E9E3;
  --malva:#C6A7AE;

  --rule:rgba(36,16,22,.14);
  --rule-soft:rgba(36,16,22,.08);
  --rule-dark:rgba(243,233,227,.16);

  /* Tema en curso: los capítulos de color lo redefinen (sección 4) */
  --c-bg:var(--bg);
  --c-ink:var(--ink);
  --c-body:var(--ink-body);
  --c-muted:var(--ink-2);
  --c-rule:var(--rule);
  --c-signal:var(--accent);
  --c-link:var(--accent-deep);

  --font-display:'Space Grotesk','Space Grotesk Fallback',system-ui,sans-serif;
  --font-body:'Inter','Inter Fallback',system-ui,sans-serif;

  /* Escala fluida 390 → 1440 px (ver DESIGN.md) */
  --fs-mega:clamp(3.25rem,1.2rem + 8.38vw,8.75rem);
  --fs-display:clamp(2.625rem,1.53rem + 4.48vw,5.5625rem);
  --fs-h1:clamp(2.125rem,1.31rem + 3.33vw,4.3125rem);
  --fs-h2:clamp(1.9375rem,1.4rem + 2.19vw,3.375rem);
  --fs-h3:clamp(1.3125rem,1.15rem + .667vw,1.75rem);
  --fs-lead:clamp(1.15625rem,1.075rem + .333vw,1.375rem);
  --fs-body:clamp(1.03rem,1rem + .143vw,1.125rem);
  --fs-small:.9375rem;
  --fs-label:.8125rem;

  --space-chapter:clamp(5rem,2.78rem + 9.14vw,11rem);
  --space-block:clamp(2.5rem,1.57rem + 3.81vw,5rem);
  --gutter:clamp(1.25rem,.6rem + 2.7vw,3rem);
  --wrap:1320px;
  --measure:62ch;
  --header-h:64px;

  --r-media:10px;
  --r-pill:999px;
  --shadow-media:0 40px 80px -48px rgba(74,27,47,.55),0 12px 28px -18px rgba(74,27,47,.28);

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.77,0,.175,1);

  --z-header:100;
  --z-panel:110;
  --z-skip:200;

  /* LEGADO: nombres que todavía usa legacy.css. Se borran con ella. */
  --line:rgba(176,48,96,.16);
  --line-strong:rgba(176,48,96,.30);
  --line-ink:rgba(36,16,22,.10);
  --tint:rgba(176,48,96,.08);
  --tint-2:rgba(176,48,96,.13);
  --grad:linear-gradient(135deg,var(--wine) 0%,var(--accent) 100%);
  --step--1:clamp(.84rem,.82rem + .1vw,.9rem);
  --step-0:clamp(1rem,.975rem + .12vw,1.0625rem);
  --step-1:clamp(1.1rem,1.05rem + .25vw,1.25rem);
  --step-2:clamp(1.22rem,1.12rem + .45vw,1.5rem);
  --step-3:clamp(1.5rem,1.28rem + 1vw,2.15rem);
  --step-4:clamp(1.85rem,1.45rem + 1.75vw,2.85rem);
  --step-5:clamp(2.15rem,1.6rem + 2.5vw,3.5rem);
  --step-6:clamp(2.35rem,1.55rem + 3.55vw,4.35rem);
  --r-sm:12px;--r-md:16px;--r-lg:20px;--r-xl:28px;
  --shadow-sm:0 1px 2px rgba(74,27,47,.05),0 6px 16px -10px rgba(74,27,47,.18);
  --shadow-md:0 22px 44px -26px rgba(74,27,47,.32),0 6px 14px -10px rgba(74,27,47,.14);
  --shadow-lg:0 44px 90px -44px rgba(74,27,47,.45),0 14px 34px -22px rgba(176,48,96,.28);
  --container:1200px;--container-wide:1320px;--container-narrow:760px;
  --section-y:clamp(4rem,3rem + 4.5vw,7rem);
}

/* ==========================================================================
   3. BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-h) + 1.5rem);
  scrollbar-color:rgba(142,58,82,.45) transparent;
}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  background:var(--bg);
  color:var(--c-body);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  overflow-x:clip;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--c-ink);
  font-weight:600;
  text-wrap:balance;
}
h1{font-size:var(--fs-h1);line-height:1;letter-spacing:-.04em}
h2{font-size:var(--fs-h2);line-height:1.02;letter-spacing:-.035em}
h3{font-size:var(--fs-h3);font-weight:500;line-height:1.15;letter-spacing:-.02em}
h4{font-size:1.125rem;line-height:1.3;letter-spacing:-.01em}
p,li,dd,dt,figcaption{text-wrap:pretty}
strong,b{font-weight:600;color:var(--c-ink)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
img,video{display:block;max-width:100%;height:auto}
svg{flex-shrink:0}
input,button,textarea,select{font:inherit;color:inherit}
input,textarea{caret-color:var(--accent)}
button{cursor:pointer;background:none;border:0}
ul[role="list"],ol[role="list"]{list-style:none}
address{font-style:normal}
table{border-collapse:collapse}
::selection{background:rgba(216,156,156,.6);color:var(--ink)}
:focus-visible{outline:2px solid var(--c-signal);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.icon{width:1.25em;height:1.25em;display:inline-block;vertical-align:-.2em;fill:currentColor;flex:none}
.tabular{font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.hl{color:var(--c-signal)}

/* Enlaces dentro de texto corrido (sin clase propia) */
:where(main) :where(p,li,dd,figcaption,td) a:not([class]){
  color:var(--c-link);font-weight:550;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);
  transition:text-decoration-color .2s,text-decoration-thickness .2s;
}
:where(main) :where(p,li,dd,figcaption,td) a:not([class]):hover{text-decoration-color:currentColor;text-decoration-thickness:2px}

/* Rótulo: tema, minutos, "Recibes", "Al terminar". Sin mayúsculas. */
.label{
  display:inline-block;font-family:var(--font-body);font-size:var(--fs-label);font-weight:500;
  line-height:1.3;letter-spacing:.01em;color:var(--c-muted);
}
.label--signal{color:var(--c-signal)}

/* ==========================================================================
   4. MAQUETACIÓN Y CAPÍTULOS
   ========================================================================== */
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--text{max-width:calc(46rem + var(--gutter) * 2)}
.chapter{padding-block:var(--space-chapter) calc(var(--space-chapter) * 1.1)}
.block{padding-block:var(--space-block) calc(var(--space-block) * 1.1)}
.chapter--flush-top,.block--flush-top{padding-top:0}
.chapter--ruled{border-top:1px solid var(--c-rule)}

/* Capítulos de color a sangre. Las piezas leen --c-* y se adaptan. */
[data-theme]{background:var(--c-bg);color:var(--c-body)}
[data-theme="night"]{
  --c-bg:var(--night);--c-ink:var(--cream);--c-body:rgba(243,233,227,.84);--c-muted:var(--malva);
  --c-rule:var(--rule-dark);--c-signal:var(--rose);--c-link:var(--rose);
}
[data-theme="wine"]{
  --c-bg:var(--wine);--c-ink:#FFF;--c-body:rgba(243,233,227,.88);--c-muted:#D9BFC6;
  --c-rule:rgba(243,233,227,.2);--c-signal:var(--rose);--c-link:#F2C4CB;
}
[data-theme="accent"]{
  --c-bg:var(--accent);--c-ink:#FFF;--c-body:rgba(255,255,255,.9);--c-muted:rgba(255,255,255,.8);
  --c-rule:rgba(255,255,255,.28);--c-signal:#FFF;--c-link:#FFF;
}
[data-theme="paper"]{
  --c-bg:var(--bg);--c-ink:var(--ink);--c-body:var(--ink-body);--c-muted:var(--ink-2);
  --c-rule:var(--rule);--c-signal:var(--accent);--c-link:var(--accent-deep);
}
[data-theme] :focus-visible{outline-color:var(--c-signal)}
[data-theme="night"] ::selection,[data-theme="wine"] ::selection,[data-theme="accent"] ::selection{background:rgba(216,156,156,.45);color:#FFF}

/* ==========================================================================
   5. CABECERA Y MENÚ
   Crema opaca; filete al hacer scroll. Sobre un capítulo de color, site.js
   le pone data-on="night|wine|accent" y la cabecera cambia de tema.
   ========================================================================== */
.skip-link{
  position:absolute;left:1rem;top:-120px;z-index:var(--z-skip);
  background:var(--ink);color:#FFF;padding:.75rem 1.1rem;border-radius:var(--r-pill);
  font-weight:600;text-decoration:none;transition:top .2s var(--ease-out);
}
.skip-link:focus{top:.75rem}

.site-header{
  --h-bg:rgba(251,246,242,.96);--h-ink:var(--ink);--h-muted:var(--ink-2);--h-rule:var(--rule);--h-signal:var(--accent);
  position:sticky;top:0;z-index:var(--z-header);
  background:var(--h-bg);color:var(--h-ink);
  box-shadow:inset 0 -1px 0 transparent;
  transition:background-color .35s var(--ease-out),color .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.site-header.is-scrolled{box-shadow:inset 0 -1px 0 var(--h-rule)}
.site-header[data-on="night"]{--h-bg:rgba(21,10,14,.95);--h-ink:var(--cream);--h-muted:var(--malva);--h-rule:var(--rule-dark);--h-signal:var(--rose)}
.site-header[data-on="wine"]{--h-bg:rgba(74,27,47,.96);--h-ink:#FFF;--h-muted:#D9BFC6;--h-rule:rgba(243,233,227,.2);--h-signal:var(--rose)}
.site-header[data-on="accent"]{--h-bg:rgba(176,48,96,.97);--h-ink:#FFF;--h-muted:rgba(255,255,255,.82);--h-rule:rgba(255,255,255,.28);--h-signal:#FFF}
.site-header :focus-visible{outline-color:var(--h-signal)}
.site-header__in{display:flex;align-items:center;gap:1.25rem;min-height:var(--header-h)}

.brand{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:.6rem;margin-right:auto;
  font-family:var(--font-display);font-weight:600;font-size:1.3rem;letter-spacing:-.035em;
  color:inherit;text-decoration:none;
}
.brand-mark{width:32px;height:32px}

.nav{display:flex;align-items:center}
.nav__list{display:flex;align-items:center;gap:clamp(.25rem,1.1vw,1rem)}
.nav__link{
  position:relative;display:inline-flex;align-items:center;min-height:44px;padding:.35rem;
  font-size:.9375rem;font-weight:500;color:var(--h-muted);text-decoration:none;
  transition:color .25s var(--ease-out);
}
.nav__link::after{
  content:"";position:absolute;left:.35rem;right:.35rem;bottom:.55rem;height:2px;
  background:var(--h-signal);transform:scaleX(0);transform-origin:right center;
  transition:transform .4s var(--ease-out);
}
.nav__link:hover{color:var(--h-ink)}
.nav__link:hover::after{transform:scaleX(1);transform-origin:left center}
.nav__link[aria-current="page"]{color:var(--h-ink);font-weight:600}
.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__extra{display:none}
.site-header__cta{position:relative;z-index:2}

.nav-toggle{
  position:relative;z-index:2;
  display:none;align-items:center;gap:.6rem;min-height:44px;padding:.4rem .2rem .4rem .6rem;
  color:inherit;font-weight:600;font-size:.9375rem;
}
.nav-toggle__bars{position:relative;width:22px;height:12px;display:block}
.nav-toggle__bars::before,.nav-toggle__bars::after{
  content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;
  transition:transform .35s var(--ease-out),top .35s var(--ease-out);
}
.nav-toggle__bars::before{top:1px}
.nav-toggle__bars::after{top:9px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{top:5px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{top:5px;transform:rotate(-45deg)}

@media(max-width:1099px){
  /* Sin JS: los enlaces quedan visibles en una fila que se desliza */
  html:not(.js) .site-header__in{flex-wrap:wrap;padding-block:.5rem}
  html:not(.js) .nav{order:3;width:100%;overflow-x:auto;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
  html:not(.js) .nav__list{white-space:nowrap}

  /* Con JS: hoja a pantalla completa en noche, por debajo de la marca y del botón */
  .js .nav-toggle{display:inline-flex}
  .js .nav{
    position:fixed;inset:0;z-index:1;
    display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
    padding:calc(var(--header-h) + 1.5rem) var(--gutter) max(2rem,env(safe-area-inset-bottom));
    background:var(--night);color:var(--cream);
    overflow-y:auto;overscroll-behavior:contain;
    visibility:hidden;opacity:0;
    transition:opacity .3s var(--ease-out),visibility 0s linear .3s;
  }
  .js .nav.is-open{visibility:visible;opacity:1;transition:opacity .3s var(--ease-out),visibility 0s}
  .js .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .js .nav__list li{border-bottom:1px solid var(--rule-dark)}
  .js .nav__link{
    display:flex;width:100%;min-height:64px;padding:.5rem 0;
    font-family:var(--font-display);font-size:clamp(1.9rem,1.2rem + 3vw,2.6rem);font-weight:500;letter-spacing:-.035em;
    color:var(--cream);
    transform:translateY(14px);opacity:0;
    transition:transform .5s var(--ease-out),opacity .5s var(--ease-out),color .2s;
    transition-delay:calc(var(--i,0) * 45ms + 60ms);
  }
  .js .nav__list li:nth-child(2) .nav__link{--i:1}
  .js .nav__list li:nth-child(3) .nav__link{--i:2}
  .js .nav__list li:nth-child(4) .nav__link{--i:3}
  .js .nav__list li:nth-child(5) .nav__link{--i:4}
  .js .nav__list li:nth-child(6) .nav__link{--i:5}
  .js .nav__list li:nth-child(7) .nav__link{--i:6}
  .js .nav__link::after{left:0;right:auto;width:2.25rem;bottom:.85rem;background:var(--rose)}
  .js .nav__link[aria-current="page"]{color:#FFF}
  .js .nav.is-open .nav__link{transform:none;opacity:1}
  .js .nav__extra{display:grid;gap:1rem}
  .js .nav__extra .btn{width:100%}
  .nav__note{font-size:var(--fs-small);color:var(--malva)}
  .nav__contact{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;font-size:var(--fs-small)}
  .nav__contact a{color:var(--cream);text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
  .nav__contact a:hover{text-decoration:underline}
  .nav-open .site-header{--h-bg:var(--night);--h-ink:var(--cream);--h-muted:var(--malva);--h-rule:var(--rule-dark);--h-signal:var(--rose)}
  .nav-open .site-header__cta{visibility:hidden}
  html.nav-open,html.nav-open body{overflow:hidden}
}
@media(max-width:560px){
  .site-header__cta{display:none!important}
}

/* ==========================================================================
   6. MIGAS
   ========================================================================== */
.breadcrumbs{font-size:var(--fs-small);color:var(--c-muted)}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:nowrap;align-items:center;gap:.5rem;min-width:0}
.breadcrumbs li{display:inline-flex;align-items:center;gap:.5rem;min-width:0;white-space:nowrap}
.breadcrumbs li+li::before{content:"/";color:var(--c-muted);opacity:.55}
.breadcrumbs a{color:var(--c-muted);text-decoration:none;padding-block:.4rem}
.breadcrumbs a:hover{color:var(--c-ink);text-decoration:underline}
.breadcrumbs [aria-current="page"]{display:block;color:var(--c-ink);overflow:hidden;text-overflow:ellipsis;max-width:min(46ch,58vw)}

/* ==========================================================================
   7. BOTONES Y ENLACES
   Un solo botón: frambuesa en píldora. El relleno del hover entra desde
   la izquierda. Lo secundario es un enlace de texto con flecha.
   ========================================================================== */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.8rem 1.4rem;border-radius:var(--r-pill);border:0;
  font-family:var(--font-body);font-weight:600;font-size:1rem;line-height:1.2;white-space:nowrap;
  text-decoration:none;text-align:center;cursor:pointer;touch-action:manipulation;
  transition:color .3s var(--ease-out),transform .16s var(--ease-out);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  transform:translateX(-101%);transition:transform .5s var(--ease-out);
}
.btn:hover::before{transform:none}
.btn:active{transform:scale(.98)}
.btn .icon{width:1.2em;height:1.2em;transition:transform .35s var(--ease-out)}
.btn:hover .icon{transform:translateX(2px)}
.btn--primary{background:var(--accent);color:#FFF}
.btn--primary::before{background:var(--accent-deep)}
[data-theme="night"] .btn--primary::before,[data-theme="wine"] .btn--primary::before{background:#C2406F}
[data-theme="accent"] .btn--primary,.btn--light{background:var(--cream);color:var(--ink)}
[data-theme="accent"] .btn--primary::before,.btn--light::before{background:#FFF}
.btn--lg{min-height:58px;padding:.95rem 1.7rem;font-size:1.0625rem}
.btn--sm{min-height:42px;padding:.5rem 1.05rem;font-size:.9375rem}
@media(max-width:480px){
  .btn--lg,.btn{padding-inline:1.05rem;gap:.5rem;font-size:.97rem}
  .actions .btn,.closing .btn{width:100%}
}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.75rem}

.link{
  display:inline;font-weight:600;color:var(--c-link);text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .35s var(--ease-out),color .2s;
}
.link:hover{background-size:100% 2px}
.link .icon{width:1em;height:1em;margin-left:.35em;vertical-align:-.12em;transition:transform .35s var(--ease-out)}
.link:hover .icon{transform:translateX(4px)}
.link--quiet{color:var(--c-ink)}

/* ==========================================================================
   8. HÉROE INTERIOR Y ENCABEZADOS DE SECCIÓN
   El H1 es una sola frase: la parte SEO (.deck) en peso 400 y el remate en
   600, misma familia y misma línea de lectura.
   ========================================================================== */
.hero-page{padding-block:clamp(1rem,.6rem + 1.5vw,1.75rem) var(--space-block)}
.hero-page .breadcrumbs{margin-bottom:clamp(2rem,1.2rem + 3.5vw,4.5rem)}
.hero-page__title{font-size:var(--fs-h1);max-width:22ch}
.hero-page__title--wide{max-width:none}
.deck{font-weight:400;color:var(--c-muted)}
.deck--block{display:block}
.hero-page__lead{font-size:var(--fs-lead);line-height:1.5;color:var(--c-body);max-width:44ch;margin-top:clamp(1.25rem,1rem + 1vw,2rem)}
.hero-page .actions{margin-top:clamp(1.75rem,1.4rem + 1.5vw,2.5rem)}

.head{max-width:52rem;margin-bottom:clamp(2.25rem,1.6rem + 2.6vw,4rem)}
.head__intro{font-size:var(--fs-lead);line-height:1.5;max-width:44ch;margin-top:1rem}
.head--display h2{font-size:var(--fs-display);line-height:.96;letter-spacing:-.045em}

/* ==========================================================================
   9. FILAS EDITORIALES
   Servicios, índices de casos, artículos, entregables. Un filete encima de
   cada fila, la fila entera es el enlace (a::after) y el hover mueve el
   título y dibuja el filete en el color de señal.
   ========================================================================== */
.rows{list-style:none;border-bottom:1px solid var(--c-rule)}
.row{
  --row-cols:minmax(0,2.2fr) minmax(0,5.8fr) minmax(0,4fr);
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:var(--row-cols);gap:.5rem clamp(1.25rem,3vw,3rem);align-items:baseline;
  padding-block:clamp(1.35rem,1rem + 1.2vw,2.1rem);
  border-top:1px solid var(--c-rule);
}
.row::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--c-signal);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out);
}
.row__label{font-size:var(--fs-label);font-weight:500;color:var(--c-muted);font-variant-numeric:tabular-nums}
.row__title{font-size:var(--fs-h3);font-weight:500;line-height:1.15;letter-spacing:-.02em;transition:transform .45s var(--ease-out)}
.row__title a{color:inherit;text-decoration:none}
.row__title a::after{content:"";position:absolute;inset:0;z-index:1}
.row__text{font-size:var(--fs-small);line-height:1.55;color:var(--c-body)}
.row__arrow{position:absolute;right:0;top:50%;width:1.35rem;height:1.35rem;margin-top:-.675rem;color:var(--c-signal);opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .45s var(--ease-out)}
.row:focus-within{outline:2px solid var(--c-signal);outline-offset:4px}
.row :focus-visible{outline:none}
@media(hover:hover) and (pointer:fine){
  .row:hover::before{transform:scaleX(1)}
  .row:hover .row__title{transform:translateX(6px)}
  .row:hover .row__arrow{opacity:1;transform:none}
}
.rows--big .row__title{font-size:clamp(1.75rem,1.1rem + 2.6vw,3.25rem);font-weight:500;letter-spacing:-.04em;line-height:1}

/* Variante: la fila se llena de su color (--row-bg) al pasar el puntero */
.rows--fill .row{--row-bg:var(--wine)}
.rows--fill .row::after{
  content:"";position:absolute;inset:0 calc(clamp(.75rem,1.4vw,1.5rem) * -1);z-index:-1;background:var(--row-bg);
  clip-path:inset(100% 0 0 0);transition:clip-path .55s var(--ease-out);
}
@media(hover:hover) and (pointer:fine){
  .rows--fill .row:hover{--c-ink:#FFF;--c-body:rgba(255,255,255,.88);--c-muted:rgba(255,255,255,.78);--c-signal:#FFF}
  .rows--fill .row:hover::after{clip-path:inset(0)}
  .rows--fill .row__title,.rows--fill .row__text,.rows--fill .row__label{transition:transform .45s var(--ease-out),color .35s}
}

/* Vista previa que sigue al cursor (la crea motion.js; solo puntero fino) */
.preview{
  position:fixed;left:0;top:0;z-index:50;pointer-events:none;
  width:clamp(200px,18vw,280px);aspect-ratio:1/2;overflow:hidden;border-radius:var(--r-media);
  box-shadow:var(--shadow-media);opacity:0;visibility:hidden;
}
.preview img{width:100%;height:100%;object-fit:cover;object-position:top center}

@media(max-width:760px){
  .row{grid-template-columns:minmax(0,1fr);gap:.4rem}
  .row__arrow{display:none}
}

/* ==========================================================================
   10. ENFRENTADOS
   Dos columnas desbalanceadas con un filete vertical y una palabra grande
   por lado. Sin cajas ni círculos.
   ========================================================================== */
.versus{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0}
.versus__col{padding-block:.5rem;padding-right:clamp(1.5rem,4vw,4.5rem)}
.versus__col + .versus__col{padding-right:0;padding-left:clamp(1.5rem,4vw,4.5rem);border-left:1px solid var(--c-rule)}
.versus__word{
  display:block;font-family:var(--font-display);font-size:var(--fs-display);font-weight:500;
  line-height:.9;letter-spacing:-.05em;color:var(--c-signal);margin-bottom:.35em;
}
.versus__col + .versus__col .versus__word{color:var(--c-muted)}
.versus h3{font-size:var(--fs-h3)}
.versus__list{list-style:none;display:grid;gap:clamp(1.1rem,.9rem + .8vw,1.6rem);margin-top:clamp(1.25rem,1rem + 1vw,2rem)}
.versus__list strong{display:block;font-family:var(--font-display);font-size:clamp(1.1rem,1rem + .4vw,1.3rem);font-weight:500;letter-spacing:-.015em;line-height:1.3;margin-bottom:.2rem}
@media(max-width:860px){
  .versus{grid-template-columns:minmax(0,1fr)}
  .versus__col{padding-right:0}
  .versus__col + .versus__col{padding-left:0;border-left:0;border-top:1px solid var(--c-rule);margin-top:2.5rem;padding-top:2.5rem}
}

/* ==========================================================================
   11. SECUENCIA
   Columna fija (sticky) con el titular y pasos a la derecha con numerales
   grandes. La línea de avance la mueve motion.js (--seq de 0 a 1); sin JS
   o con movimiento reducido se ve completa.
   ========================================================================== */
.seq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.seq__aside{position:sticky;top:calc(var(--header-h) + 2rem)}
.seq__aside .head{margin-bottom:0}
.seq__steps{list-style:none;position:relative;display:grid;gap:clamp(2.5rem,2rem + 2.5vw,4.5rem);padding-left:clamp(1.5rem,1rem + 2vw,3rem)}
.seq__steps::before,.seq__steps::after{content:"";position:absolute;left:0;top:.5rem;bottom:.5rem;width:1px}
.seq__steps::before{background:var(--c-rule)}
.seq__steps::after{width:2px;left:-.5px;background:var(--c-signal);transform-origin:top;transform:scaleY(var(--seq,1))}
.seq__step{position:relative}
.seq__num{
  display:block;font-family:var(--font-display);font-size:clamp(2.75rem,2rem + 3vw,4.75rem);font-weight:300;
  line-height:.9;letter-spacing:-.05em;color:var(--c-signal);font-variant-numeric:tabular-nums;margin-bottom:.75rem;
  transition:color .4s var(--ease-out);
}
.seq.is-live .seq__step:not(.is-on) .seq__num{color:var(--c-muted)}
.seq__step h3{margin-bottom:.6rem}
.seq__step p{max-width:52ch}
.seq__gets{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--c-rule);max-width:52ch}
.seq__gets .label{display:block;color:var(--c-signal);margin-bottom:.2rem}
@media(max-width:960px){
  .seq{grid-template-columns:minmax(0,1fr)}
  .seq__aside{position:static}
}

/* ==========================================================================
   12. ENUNCIADO Y CIFRA
   ========================================================================== */
.statement{
  font-family:var(--font-display);font-size:var(--fs-h1);font-weight:500;line-height:1.04;letter-spacing:-.04em;
  color:var(--c-ink);max-width:22ch;text-wrap:balance;
}
.statement em,.statement strong{font-style:normal;font-weight:600;color:var(--c-signal)}
.fig{display:grid;gap:.6rem;align-content:start}
.fig__num{
  font-family:var(--font-display);font-size:var(--fs-mega);font-weight:500;line-height:.85;letter-spacing:-.06em;
  color:var(--c-signal);font-variant-numeric:tabular-nums;
}
.fig__label{font-size:var(--fs-lead);line-height:1.4;color:var(--c-ink);max-width:28ch}
.fig__source{font-size:var(--fs-label);color:var(--c-muted)}

/* ==========================================================================
   13. ACORDEÓN (preguntas frecuentes)
   <details name> nativo: exclusivo y funciona sin JS.
   ========================================================================== */
.faq{border-top:1px solid var(--c-rule)}
.faq__item{border-bottom:1px solid var(--c-rule)}
.faq__q{
  list-style:none;position:relative;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:72px;padding:1.3rem 0;cursor:pointer;
  font-family:var(--font-display);font-weight:500;font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.02em;color:var(--c-ink);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::marker{content:""}
.faq__q > span{transition:transform .45s var(--ease-out)}
.faq__q::after{
  content:"";flex:none;width:18px;height:18px;
  background:
    linear-gradient(currentColor,currentColor) center/18px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 18px no-repeat;
  color:var(--c-signal);transition:transform .45s var(--ease-out);
}
.faq__item[open] > .faq__q::after{transform:rotate(135deg)}
@media(hover:hover){.faq__q:hover > span{transform:translateX(6px)}}
.faq__a{padding:0 3rem 1.75rem 0;max-width:var(--measure);color:var(--c-body)}
.faq__a p + p,.faq__a p + ul,.faq__a ul + p{margin-top:.8rem}
.faq__a ul{padding-left:1.15rem}
@supports(interpolate-size:allow-keywords){
  .faq__item{interpolate-size:allow-keywords}
  .faq__item::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease-out),content-visibility .4s allow-discrete}
  .faq__item[open]::details-content{block-size:auto}
}
@media(max-width:560px){.faq__a{padding-right:0}}

/* ==========================================================================
   14. NOTAS Y TABLAS
   ========================================================================== */
.note{position:relative;max-width:46rem;padding:.25rem 0 .25rem 1.25rem;border-left:2px solid var(--c-signal)}
.note p{font-size:var(--fs-small);line-height:1.6}
.note p + p{margin-top:.5rem}
.note__label{display:block;font-size:var(--fs-label);font-weight:600;color:var(--c-signal);margin-bottom:.3rem}
.note--example{border-left-style:dashed}

.table{width:100%;overflow-x:auto}
.table table{width:100%;font-size:var(--fs-small);line-height:1.55}
.table caption{caption-side:top;text-align:left;padding-bottom:1rem;font-size:var(--fs-label);color:var(--c-muted)}
.table th,.table td{padding:1.05rem 1.25rem 1.05rem 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--c-rule)}
.table thead th{
  font-family:var(--font-display);font-weight:500;font-size:clamp(1.15rem,1rem + .6vw,1.5rem);letter-spacing:-.02em;
  color:var(--c-ink);border-bottom-color:var(--c-ink);padding-bottom:.9rem;
}
.table tbody th{font-weight:600;color:var(--c-ink);width:26%}
.table td{color:var(--c-body)}
.table .is-pick{color:var(--c-signal);font-weight:600}
@media(max-width:760px){
  .table caption{display:block;width:100%}
  .table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table table,.table tbody,.table tr,.table th,.table td{display:block;width:100%}
  .table tr{padding:1.1rem 0;border-bottom:1px solid var(--c-rule)}
  .table th,.table td{padding:0;border:0}
  .table tbody th{width:auto;font-family:var(--font-display);font-size:1.125rem;font-weight:500;margin-bottom:.5rem}
  .table td{display:grid;grid-template-columns:minmax(0,7rem) minmax(0,1fr);gap:.9rem;padding-block:.3rem}
  .table td::before{content:attr(data-label);font-weight:600;color:var(--c-muted);font-size:var(--fs-label);padding-top:.15rem}
}

/* ==========================================================================
   15. CAPTURAS
   La imagen real es el objeto: radio 10, filete y una sombra. El dominio va
   en el pie, fuera de la imagen (sin barra de navegador falsa).
   ========================================================================== */
.shot{margin:0}
.shot img{
  width:100%;height:auto;border-radius:var(--r-media);background:var(--surface-3);
  box-shadow:0 0 0 1px var(--rule-soft),var(--shadow-media);
}
.shot__cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1rem;margin-top:.9rem;font-size:var(--fs-small);color:var(--c-muted)}
.shot__cap strong{font-weight:600;color:var(--c-ink)}
.device{
  position:relative;width:100%;max-width:300px;padding:7px;border-radius:34px;background:#1B0E13;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,var(--shadow-media);
}
.device__screen{position:relative;overflow:hidden;border-radius:27px;aspect-ratio:390/780;background:var(--surface-3)}
.device__screen img{width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top center}
/* Recorrido: una captura alta que baja dentro del marco. --tour (% negativo)
   lo calcula el generador con la proporción de la imagen. */
.device--tour .device__screen img{transition:transform 7s cubic-bezier(.45,0,.2,1)}
@media(hover:hover) and (pointer:fine){
  .device--tour:hover .device__screen img,.tour-host:hover .device--tour .device__screen img{transform:translateY(var(--tour,0%))}
}

/* ==========================================================================
   16. CIERRE Y PIE
   Un solo bloque oscuro al final de cada página: el cierre (en <main>,
   con el titular propio de la página) y el pie, en el mismo color.
   ========================================================================== */
.closing{position:relative;overflow:hidden;padding-block:var(--space-chapter) clamp(3.5rem,2.5rem + 4vw,6rem)}
.closing__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem clamp(2rem,6vw,6rem);align-items:end}
.closing__title{font-size:var(--fs-display);line-height:.96;letter-spacing:-.045em;max-width:15ch}
.closing__text{font-size:var(--fs-lead);line-height:1.5;max-width:44ch;margin-top:1.4rem}
.closing__actions{display:grid;gap:1rem;justify-items:start;margin-top:clamp(2rem,1.5rem + 2vw,3rem)}
.closing__alt{font-size:var(--fs-small);color:var(--c-muted)}
.closing__alt a{color:var(--c-ink);font-weight:600}
.closing__bolt{width:clamp(110px,14vw,210px);height:auto;align-self:center}
@media(max-width:760px){
  .closing__in{grid-template-columns:minmax(0,1fr)}
  .closing__bolt{display:none}
  .closing__actions{justify-items:stretch}
}

.site-footer{position:relative;overflow:hidden;padding-top:clamp(2.5rem,2rem + 2vw,3.5rem)}
.site-footer > .wrap{position:relative}
.site-footer > .wrap::before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:calc(clamp(2.5rem,2rem + 2vw,3.5rem) * -1);height:1px;background:var(--c-rule)}
.foot{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:2.5rem 2rem}
.foot__tag{font-family:var(--font-display);font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);font-weight:500;letter-spacing:-.025em;line-height:1.2;color:var(--c-ink);max-width:18ch}
.foot__sub{margin-top:.5rem;font-size:var(--fs-small);color:var(--c-muted)}
.foot__nap{display:grid;gap:.1rem;margin-top:1.25rem;font-size:var(--fs-small)}
.foot__nap a,.foot__nap span{color:var(--c-ink);text-decoration:none;min-height:36px;display:inline-flex;align-items:center;gap:.5rem;width:fit-content}
.foot__nap a:hover{text-decoration:underline}
.foot__nap .icon{width:18px;height:18px;color:var(--c-signal)}
.foot__col h2{font-family:var(--font-body);font-size:var(--fs-label);font-weight:500;letter-spacing:.01em;color:var(--c-muted);margin-bottom:.9rem}
.foot__col ul{list-style:none;display:grid;gap:.1rem}
.foot__col a{display:inline-flex;min-height:36px;align-items:center;color:var(--c-ink);text-decoration:none;font-size:var(--fs-small)}
.foot__col a:hover{color:var(--c-signal)}
.foot__social{display:flex;flex-wrap:wrap;gap:.1rem 1.25rem;margin-top:1rem;list-style:none}
.foot__social a{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;color:var(--c-ink);text-decoration:none;font-size:var(--fs-small)}
.foot__social a:hover{color:var(--c-signal)}
.foot__social .icon{width:18px;height:18px}
.foot__legal{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;
  margin-top:clamp(2.5rem,2rem + 2vw,3.5rem);padding-top:1.25rem;border-top:1px solid var(--c-rule);
  font-size:var(--fs-label);color:var(--c-muted);
}
.foot__legal a{color:inherit}
.foot__sign{
  display:block;margin-top:clamp(1rem,.5rem + 2vw,2.5rem);margin-bottom:-.1em;
  font-family:var(--font-display);font-weight:600;font-size:clamp(5rem,1rem + 21vw,22rem);line-height:.8;letter-spacing:-.07em;
  color:var(--night-2);text-align:center;white-space:nowrap;user-select:none;
}
@media(max-width:960px){
  .foot{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot__brand{grid-column:1 / -1}
}
@media(max-width:560px){
  .foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__col:last-child{grid-column:1 / -1}
}

/* ==========================================================================
   16b. MAKE ME PREFERRED (pie de todas las páginas, y en el blog también al
   final del índice y de cada artículo). Marcado en tools/generador/
   components.js (preferred()), comportamiento en js/pref.js.
   Píldora con contorno y estrella: la estrella es el mismo gesto con el que
   Google marca una fuente preferida. Al señalar, el relleno entra desde la
   izquierda (como el botón primario) y la estrella gira una punta y se asoma
   llena; abierta, queda llena. Es un <details> nativo: sin JS abre igual.
   Todo sale de las variables del tema (--c-*), así que vale sobre crema y
   sobre noche. Nada aquí afirma que la acción en Google se completó.
   ========================================================================== */
.pref{--pref-fill:var(--rose);margin-top:clamp(2.5rem,2rem + 2vw,3.5rem);padding-top:1.5rem;border-top:1px solid var(--c-rule);max-width:var(--measure)}
[data-theme="night"] .pref,[data-theme="wine"] .pref{--pref-fill:var(--accent)}
.pref__intro{font-size:var(--fs-body);line-height:1.6;color:var(--c-body);max-width:46ch}
.pref__intro strong{color:var(--c-ink)}
.pref__box{margin-top:1rem}
.pref__btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:.7rem;
  min-height:52px;padding:.75rem 1.5rem .75rem 1.15rem;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1.5px var(--c-ink);color:var(--c-ink);
  font-family:var(--font-body);font-weight:600;font-size:1rem;line-height:1.2;white-space:nowrap;
  list-style:none;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:color .3s var(--ease-out),transform .16s var(--ease-out);
}
.pref__btn::-webkit-details-marker{display:none}
.pref__btn::marker{content:""}
.pref__btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--c-ink);
  transform:translateX(-101%);transition:transform .5s var(--ease-out);
}
.pref__btn:active{transform:scale(.98)}
.pref__btn:focus-visible{outline:2px solid var(--c-signal);outline-offset:3px;border-radius:var(--r-pill)}
.pref__star{display:block;width:1.3em;height:1.3em;flex:none}
.pref__star svg{display:block;width:100%;height:100%;overflow:visible;transition:transform .6s var(--ease-out)}
.pref__star-o{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.pref__star-f{fill:var(--pref-fill);transform-box:fill-box;transform-origin:50% 55%;transform:scale(0);transition:transform .45s var(--ease-out)}
@media(hover:hover){
  .pref__btn:hover{color:var(--c-bg)}
  .pref__btn:hover::before{transform:none}
  .pref__btn:hover .pref__star svg{transform:rotate(72deg)}
  .pref__btn:hover .pref__star-f{transform:scale(.55)}
}
.pref__box[open] > .pref__btn{color:var(--c-bg)}
.pref__box[open] > .pref__btn::before{transform:none}
.pref__box[open] > .pref__btn .pref__star-f{transform:scale(1)}

.pref__panel{margin-top:1.5rem;padding:.25rem 0 .25rem 1.25rem;border-left:2px solid var(--c-signal)}
.pref__status{font-size:var(--fs-small);font-weight:600;line-height:1.5;color:var(--c-ink)}
.pref__steps{list-style:none;padding:0;margin-top:1.25rem;display:grid;gap:1.5rem}
.pref__step{display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:.9rem;align-items:start}
.pref__mark{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;box-shadow:inset 0 0 0 1px var(--c-rule);color:var(--c-signal)}
.pref__mark .icon{width:1.1rem;height:1.1rem}
.pref__body > * + *{margin-top:.4rem}
.pref__lab{font-size:var(--fs-label);font-weight:500;letter-spacing:.01em;line-height:1.3;color:var(--c-muted)}
.pref__t{font-family:var(--font-display);font-weight:600;font-size:clamp(1.125rem,1.05rem + .3vw,1.3125rem);line-height:1.2;letter-spacing:-.02em;color:var(--c-ink)}
.pref__d{font-size:var(--fs-small);line-height:1.6;color:var(--c-body);max-width:56ch}
.pref__d strong{color:var(--c-ink)}
.pref__body .pref__act{margin-top:.9rem}
.pref__d kbd{
  display:inline-block;min-width:1.6em;padding:.05em .4em;border-radius:5px;
  box-shadow:inset 0 0 0 1px var(--c-rule),inset 0 -1.5px 0 var(--c-rule);background:transparent;
  font-family:var(--font-body);font-size:.85em;font-weight:600;line-height:1.35;text-align:center;color:var(--c-ink);
}
.pref__share{background-color:transparent;border:0;padding:0 0 .12em;font:inherit;font-size:var(--fs-small);font-weight:600;cursor:pointer}
.pref__note{padding-left:.9rem;border-left:2px dotted var(--c-signal);font-size:var(--fs-small);line-height:1.55;color:var(--c-ink)}
.pref__body .pref__note{margin-top:.9rem}
.pref__note[hidden],.pref__act[hidden]{display:none}
.pref__fine{margin-top:1.5rem;padding-top:1rem;border-top:1px dashed var(--c-rule);font-size:.875rem;line-height:1.55;color:var(--c-muted);max-width:56ch}
/* En el pie: fila propia entre los enlaces y la línea legal */
.foot__pref .pref{max-width:none}
.foot__pref .pref__intro{font-size:var(--fs-small)}
.foot__pref .pref__panel{max-width:var(--measure)}
@media(max-width:480px){
  .pref__btn{display:flex;justify-content:center;width:100%}
  .pref__panel{padding-left:1rem}
  .pref__step{grid-template-columns:minmax(0,1fr)}
  .pref__mark{display:none}
  .pref__go{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .pref__btn,.pref__btn::before,.pref__star svg,.pref__star-f{transition:none}
}

/* ==========================================================================
   17. MOVIMIENTO
   Lo que se mueve solo vive aquí y bajo no-preference. Las entradas con
   GSAP las prepara js/motion.js (nunca esta hoja).
   ========================================================================== */
/* Barra de lectura: CSS con scroll-timeline, sin JS. Sin soporte no aparece. */
.progress{display:none}
@supports(animation-timeline:scroll()){
  @media(prefers-reduced-motion:no-preference){
    .progress{
      display:block;position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--h-signal,var(--accent));
      transform-origin:left;transform:scaleX(0);
      animation:progress linear both;animation-timeline:scroll(root);
    }
  }
}
@keyframes progress{to{transform:scaleX(1)}}

/* Líneas partidas por motion.js: cada línea se recorta en su caja */
.line-mask{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}

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

/* ==========================================================================
   18. IMPRESIÓN
   ========================================================================== */
@media print{
  .site-header,.site-footer,.closing,.btn,.nav-toggle,.preview,.progress,.pref{display:none!important}
  [data-theme]{background:#FFF!important;--c-ink:#000;--c-body:#111;--c-muted:#444}
  body{background:#FFF;color:#000}
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#555}
}