/* ==========================================================================
   Chronoix — hoja de estilo única
   Mobile-first de verdad: la base es el teléfono y sólo se AÑADE con min-width.
   Cero terceros: sin CDN, sin analítica, sin fuentes remotas, sin scripts.
   ========================================================================== */

/* --- Tipografía auto-hospedada (Inter, SIL OFL — ver fonts/Inter-LICENSE.txt) --- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-600.woff2") format("woff2");
}

/* ==========================================================================
   Tokens
   Neutros conservados. Acentos cálidos con mezcla naranja/rosa y grano fino,
   según la referencia Suno aportada por Nico el 8-oct-2026.
   ========================================================================== */
:root {
  --bg: #0d0d0d;          /* el negro de marca; NO negro puro */
  --surface: #1c1c1e;      /* tarjeta */
  --surface-2: #2c2c2e;    /* tarjeta dentro de tarjeta */
  --surface-card: #2e2e30; /* tarjeta de dial [Decisión del owner — 31 ago 2026] */
  --card-stroke: #545454;  /* su trazo exterior de 1px   [Medido en la captura] */
  --card-footer: #222222;  /* la banda del pie           [Medido en la captura] */
  --card-rank:   #8b8b8b;  /* el «#1» del pie            [Medido en la captura] */
  --border: #38383a;
  --border-soft: #2a2a2c;

  --text: #ffffff;
  --text-2: #a1a1a6;
  --text-3: #8e8e93;

  /* El logo conserva su arte original; estos tokens gobiernan la interfaz. */
  --brand-amber: #ffad32;
  --brand-coral: #f65b32;
  --brand-magenta: #ef438c;
  --accent: #ff784d;
  --accent-hover: #ff9b72;
  --accent-dim: rgba(246, 91, 50, .14);
  --on-accent: #0d0d0d;
  --accent-lift: brightness(1.07);

  /* Una textura local, sin animación, filtros sobre el texto ni dependencias.
     Soft-light integra el grano en el pigmento; el resto se mezcla normal. */
  --accent-grain: url("accent-grain.v1.svg");
  --accent-grad:
    var(--accent-grain),
    radial-gradient(ellipse at 30% 100%, #ef438c 0%, rgba(239, 67, 140, 0) 48%),
    radial-gradient(ellipse 24% 90% at 12% 0%, #ffad32 0%, rgba(255, 173, 50, 0) 72%),
    radial-gradient(ellipse 22% 85% at 85% 8%, #ff9530 0%, rgba(255, 149, 48, 0) 70%),
    linear-gradient(110deg, #f65b32, #f45125 65%, #f45b28);
  --accent-size: 128px 128px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  --accent-blend: soft-light, normal, normal, normal, normal;
  --brand-gradient: var(--accent-grad);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --radius-xl: 28px;       /* tarjetas grandes */
  --radius: 16px;
  --radius-sm: 10px;

  --container: 1194px;
  --reading: 680px;
  --gutter: 16px;          /* medido: 16px en los dos breakpoints, no crece */

  --header-h: 56px;        /* medido: 56 en móvil, 60 en escritorio */
  --rhythm: 2rem;

  /* Escalas medidas sobre la referencia renderizada a 393px y a 1440px, e
     interpoladas para que no salten en las tallas intermedias. */
  --fs-h1:      clamp(40px, 28.00px + 3.06vw, 72px);   /* 40 → 72 */
  --fs-title:   clamp(36px, 25.50px + 2.67vw, 64px);   /* 36 → 64 */
  --fs-title-sm:clamp(36px, 28.50px + 1.91vw, 56px);   /* 36 → 56, banner */
  --fs-kicker:  clamp(14px, 13.25px + 0.19vw, 16px);   /* 14 → 16 */
  --fs-lead:    clamp(16px, 15.25px + 0.19vw, 18px);   /* 16 → 18 */
  --fs-faq:     clamp(20px, 18.50px + 0.38vw, 24px);   /* 20 → 24 */
  --pad-section:clamp(64px, 58.00px + 1.53vw, 80px);   /* 64 → 80 */

  --shadow-card: 0 8px 24px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .4);
}

::selection { color: var(--on-accent); background: var(--accent-hover); }
input, textarea { caret-color: var(--accent); }

/* --- Reset acotado --- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;         /* medido en la referencia: 16px / 1.6 */
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

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

/* --- Contenedores --- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.reading { max-width: var(--reading); margin-inline: auto; }

/* --- Enlaces --- */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

.prose a, .faq__a a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(246, 91, 50, .45);
}
.prose a:hover, .faq__a a:hover { text-decoration-color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Se esconde hacia ARRIBA, no hacia la izquierda: un elemento a left:-9999px
   puede provocar scroll horizontal en algunos navegadores. */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(10px); }

/* ==========================================================================
   Cabecera — una píldora flotante, no una barra pegada al ancho
   ========================================================================== */
/* Medido en la referencia: el envoltorio va sticky con 8px arriba en móvil y
   12px en escritorio; la píldora interior mide 56/60px de alto. Y el radio NO es
   999px en móvil: allí es un rectángulo de 18px. Sólo se vuelve píldora arriba.

   El interior es una REJILLA —marca | navegación | acciones— con la misma
   proporción medida en la referencia (`minmax(11rem,auto) minmax(0,1fr) auto`).
   Con flex, la navegación empujaba la marca al comprimirse; con la rejilla, la
   marca tiene un mínimo y es la navegación la que cede. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 8px 0;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}
.site-header__inner {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;   /* móvil: marca | acciones */
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--header-h);
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
/* ⚠️ El fondo y el desenfoque van en un pseudo-elemento, NO en el contenedor.
   Un elemento con `backdrop-filter` se convierte en el bloque contenedor de sus
   descendientes `position: fixed`, y el panel del menú móvil dejaba de medirse
   contra la pantalla: [medido a 393px] se anclaba en y=81 en vez de y=72, salía
   391px de ancho en vez de 393 y desbordaba 9px por debajo del viewport.
   En el pseudo-elemento el efecto es idéntico y no arrastra a nadie. */
.site-header__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(28, 28, 30, .88);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

/* --- Marca ---------------------------------------------------------------
   El logo es un activo de marca: no se recompone ni se recolorea. Se sirve el
   lockup oficial (aro + palabra) y se fija la ALTURA; el ancho lo pone la
   proporción del archivo. `min-width: 0` para que la rejilla pueda encogerlo. */
.brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  color: var(--text);
}
.brand:hover { color: var(--text); }
.brand__logo {
  height: 26px;
  width: auto;
  max-width: 100%;
  flex: 0 1 auto;
}
/* Sólo para impresión: sobre papel blanco el lockup blanco desaparecería. */
.brand__word { display: none; }

/* --- Navegación de escritorio -------------------------------------------- */
.site-nav { display: none; min-width: 0; }
.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(2px, .8vw, 10px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav li { margin: 0; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 clamp(10px, .8vw, 14px);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.site-nav a:hover { color: var(--text); background: var(--surface-2); }
.site-nav a[aria-current="page"] {
  color: var(--text);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* --- Acciones de la derecha ---------------------------------------------- */
.site-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* El CTA de la cabecera NO es el `.btn` de las páginas: aquél mide 48–54px de
   alto y hasta 54px de padding lateral, y no cabe dentro de una píldora de 56.
   Éste toma la medida de la referencia: 44px en móvil —exactamente el hueco que
   deja la píldora— y 48px en escritorio. */
.cta-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 clamp(14px, 3vw, 18px);
  border-radius: 999px;
  background: var(--accent-grad);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: filter .18s ease, color .18s ease;
}
.cta-header:hover { filter: var(--accent-lift); color: var(--on-accent); }

/* Por debajo de 360px no caben a la vez el logo, el CTA y el botón de menú
   [medido: a 320px los tres piden 290px de los 268 útiles]. Ahí el CTA sale de
   la barra y vive sólo dentro del panel, a ancho completo, que es donde además
   se ve mejor. */
.cta-header, .btn--primary, .stage__disc {
  background-size: var(--accent-size);
  background-blend-mode: var(--accent-blend);
}

/* El `>` es imprescindible: el CTA del panel también cuelga de `.site-header__
   actions`, y con el selector descendente desaparecía justo donde era su única
   aparición [medido: enlace de 0px de alto a 320px]. */
@media (max-width: 359px) {
  .site-header__actions > .cta-header { display: none; }
}

/* ==========================================================================
   Menú móvil — <details> nativo, cero JavaScript
   ========================================================================== */
/* La referencia abre su panel con JS (una clase en el <body>). Aquí no puede
   haber JS: la CSP del sitio es `default-src 'none'` y no declara `script-src`.
   `<details>` da el mismo comportamiento sin una línea de script, y es el mismo
   mecanismo que ya usan el índice de los documentos y el acordeón del FAQ. */
.nav-mobile { position: relative; }

.nav-mobile__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  cursor: pointer;
  list-style: none;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  transition: border-color .18s ease;
}
.nav-mobile__toggle::-webkit-details-marker { display: none; }
.nav-mobile__toggle:hover { border-color: var(--border); }

/* Tres barras dibujadas con el propio elemento y sus dos pseudo-elementos. Al
   abrir, la del medio se apaga y las otras dos se cruzan. */
.burger, .burger::before, .burger::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .24s ease, background-color .18s ease;
}
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -6px; }
.burger::after  { top: 6px; }
.nav-mobile[open] .burger { background: transparent; }
.nav-mobile[open] .burger::before { transform: translateY(6px) rotate(45deg); }
.nav-mobile[open] .burger::after  { transform: translateY(-6px) rotate(-45deg); }

/* El panel arranca justo debajo de la barra: 8px de aire + la píldora + 8px.
   `100dvh` además de `100vh` porque en Safari de iOS la barra de direcciones
   entra y sale, y con `vh` el final del panel queda debajo de ella. */
.nav-mobile__panel {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--header-h) + 16px);
  height: calc(100vh - var(--header-h) - 16px);
  height: calc(100dvh - var(--header-h) - 16px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px var(--gutter) max(16px, env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--border-soft);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.nav-mobile__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 28rem;                 /* medido en la referencia */
}
.nav-mobile__list li { margin: 0; }
.nav-mobile__list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
}
.nav-mobile__list a:hover { background: var(--surface-2); color: var(--text); }
.nav-mobile__list a[aria-current="page"] {
  background: var(--surface-2);
  border-color: var(--border);
}
/* El CTA se queda pegado abajo, como en la referencia: es lo último que alcanza
   el pulgar, y así no obliga a subir a por él. */
.nav-mobile__cta {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
  padding-top: 12px;
  background: var(--bg);
}
.nav-mobile__cta .cta-header {
  width: 100%;
  min-height: 52px;
  font-size: 17px;
}

/* ==========================================================================
   Cabecera de página (documentos: privacidad, soporte)
   ========================================================================== */
.page-head { padding: 20px 0 18px; }
/* El breadcrumb va pegado a lo que titula. Es un rastro de navegación, no una
   sección: separarlo 14px lo convertía en un bloque suelto. */
.breadcrumb {
  font-size: 14px;
  color: var(--text-3);
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.breadcrumb a { color: var(--text-2); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb__sep { color: var(--text-3); }

.page-title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(36px, 9vw, 52px);
  line-height: 1.1;
  letter-spacing: -.025em;
}
.page-meta {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--text-2);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.page-meta strong { color: var(--text); font-weight: 600; }

.rule { height: 1px; background: var(--border); border: 0; margin: 20px 0 0; }

/* ==========================================================================
   Prosa
   ========================================================================== */
/* Los documentos largos suben a 17px: el cuerpo de la referencia son 16px, pero
   una política de privacidad se lee de arriba abajo y agradece el punto extra. */
.prose { padding: 8px 0; font-size: 17px; line-height: 1.65; }
.prose > * { margin-block: 0 var(--rhythm); }
.prose > *:last-child { margin-bottom: 0; }

.prose h2 {
  margin-top: calc(var(--rhythm) + 1rem);
  margin-bottom: .75rem;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -.01em;
  scroll-margin-top: calc(var(--header-h) + 26px);
}
.prose h2:first-child { margin-top: 0; }
.toc + h2 { margin-top: var(--rhythm); }

.prose h3 { margin-top: var(--rhythm); margin-bottom: .5rem; font-weight: 600; font-size: 18px; line-height: 1.4; }
.prose p { margin: 0 0 var(--rhythm); color: #e6e6ea; }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 var(--rhythm); padding-left: 1.25em; }
.prose li { margin-bottom: .5rem; color: #e6e6ea; }
.prose li::marker { color: var(--text-3); }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .1em .4em;
}
.prose hr { border: 0; height: 1px; background: var(--border); margin: calc(var(--rhythm) + .5rem) 0; }

.callout {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 20px;
  margin: 0 0 var(--rhythm);
}
.callout > *:last-child { margin-bottom: 0; }
.callout--accent { border-color: rgba(246, 91, 50, .3); background: var(--accent-dim); }

.address { font-style: normal; line-height: 1.7; color: #e6e6ea; }

.u-mt { margin-top: 14px; }
.u-mb0 { margin-bottom: 0; }

/* Índice */
.toc {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 8px;
  margin: 0 0 var(--rhythm);
}
.toc summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  font-weight: 600;
  font-size: 16px;
  border-radius: var(--radius-sm);
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 2px solid var(--text-2);
  border-bottom: 2px solid var(--text-2);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s ease;
  flex: 0 0 auto;
}
.toc[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.toc ol { margin: 4px 0 8px; padding: 0 12px 0 32px; }
.toc li { margin: 0; }
.toc li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 0;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
}
.toc li a:hover { color: var(--accent); }

/* ==========================================================================
   Botones
   ========================================================================== */
.actions { display: flex; flex-direction: column; gap: 12px; margin: 0 0 var(--rhythm); }
/* Medido: 48px de alto y 16px de letra en móvil, 54px y 18px en escritorio;
   radio 100px y padding lateral generoso (40 → 54px). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: clamp(48px, 45.75px + .57vw, 54px);
  padding: 0 clamp(40px, 34.75px + 1.34vw, 54px);
  border-radius: 100px;
  font-weight: 600;
  font-size: clamp(16px, 15.25px + .19vw, 18px);
  text-align: center;
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease, filter .2s ease;
}
.btn--primary {
  background: var(--accent-grad);
  background-size: var(--accent-size);
  background-blend-mode: var(--accent-blend);
  color: var(--on-accent);
}
.btn--primary:hover { filter: var(--accent-lift); color: var(--on-accent); }
.btn--ghost { border-color: var(--border); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--text-3); color: var(--text); background: var(--surface); }

/* ==========================================================================
   Secciones anchas
   ========================================================================== */
/* Medido: 64px de padding vertical en móvil, 80px en escritorio. */
.section { padding: var(--pad-section) 0; }
.section--tint { background: var(--surface); position: relative; overflow: hidden; }
/* ⚠️ El hero NO hereda el padding de sección. Con los 64/80px de `--pad-section`
   la primera palabra caía a 138px del alto de la página en un iPhone —el 17% de
   la pantalla gastado antes de empezar—, y la referencia pone la suya a 94px
   `[Medido en su /top-100 a 393px]`. Aquí son 28px en móvil y 44 en escritorio:
   el breadcrumb es un elemento pequeño y gris, no necesita pedestal.
   El padding de abajo no se toca: ahí el aire sí separa dos bloques. */
.section--hero {
  padding-top: clamp(28px, 21.99px + 1.53vw, 44px);   /* 28 → 44 */
  padding-bottom: clamp(32px, 43px - .76vw, 40px);
}

.section-header { margin-bottom: 1.75rem; }
.section-header--center { text-align: center; }

/* El antetítulo NO va en color de acento: en la referencia es gris secundario a
   14/16px en mayúsculas. Un acento que se gasta aquí ya no destaca abajo.
   Y va PEGADO a su titular: el antetítulo es la etiqueta del título, no un
   párrafo aparte. Antes se separaba de él más (12–16px) que del breadcrumb que
   tenía encima (14px), y esa jerarquía invertida es lo que hacía que las cuatro
   líneas se leyeran como cuatro cosas sueltas en vez de como una entradilla. */
.kicker {
  margin: 0 0 clamp(6px, 5.25px + .19vw, 8px);
  font-size: var(--fs-kicker);
  line-height: 1.5;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-2);
}
.section-title {
  margin: 0;
  font-weight: 700;              /* medido: 700, no 600 */
  font-size: var(--fs-title);
  line-height: 1.3;              /* medido: 46.8/36 y 83.2/64 = 1.3 */
  letter-spacing: .2px;
}
/* La segunda línea del titular, en acento y cursiva, con peso 600. */
.section-title em { font-style: italic; font-weight: 600; color: var(--accent); }

/* Sólo los títulos que ya llevaban acento. El color sólido es el fallback. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .section-title em {
    background-image: var(--accent-grad);
    background-size: var(--accent-size);
    background-blend-mode: var(--accent-blend);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    padding-inline: .08em;
    margin-inline: -.08em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

@media (forced-colors: active) {
  .cta-header, .btn--primary { border: 1px solid ButtonText; }
  .section-title em {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}


/* El titular del hero es el mayor de la página: 40 → 72px. */
.section-title--hero {
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.1;
  letter-spacing: .01em;
}

.section-lead {
  margin: clamp(14px, 12.5px + .38vw, 18px) 0 0;   /* 14 → 18, era 16 → 24 */
  max-width: 445px;
  color: var(--text-2);
  font-size: var(--fs-lead);
  line-height: 1.6;
}
.section-header--center .section-lead { margin-inline: auto; }

.split { display: grid; gap: 32px; align-items: center; }

/* ==========================================================================
   Ranking — rejilla de diales
   ==========================================================================
   Arquitectura, porque van a entrar más:

   · El ORDEN de la lista es el ranking, y el número lo pinta el CSS con un
     contador sobre el `<ol>`. Reordenar sigue siendo mover un `<li>`: nadie
     tiene que renumerar a mano, que es como se desincroniza esto.
   · Las imágenes viven en `la portada que sirve el catálogo (`coverPath`), con
     el id del catálogo (`rBrn1`), no el nombre comercial: el nombre cambia, el
     id es lo que cruza la web con `content/v1/fanawatch/designs/`.
   · La card NO es un enlace todavía: no hay ficha de dial a la que llevar.

   La card está medida 1:1 sobre la captura del owner (902 px de ancho), y sus
   medidas van en `cqw` —porcentaje del ancho de la CARD, no de la pantalla—,
   así que se sostiene igual a una columna en un teléfono que a cuatro en un
   monitor. Por eso el `<li>` es el contenedor de consulta y la card va dentro:
   las unidades `cqw` se resuelven contra un ANCESTRO, nunca contra sí mismo. */
.section--ranking { padding-top: 0; }

.ranking__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 16px;                        /* medido */
}
.ranking__title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(26px, 22.25px + .95vw, 36px);
  line-height: 1.2;
  letter-spacing: -.01em;
}
/* Píldora, no texto suelto. Dos razones: como texto perdido en el extremo
   derecho no se lee como el par del titular —la referencia pone ahí un botón—,
   y sin caja no llegaba a los 44px de objetivo táctil. */
.ranking__more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.ranking__more:hover {
  color: var(--text);
  border-color: var(--text-3);
  background: var(--surface);
}

.face-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* móvil: UNA columna [Owner, 1 sep] */
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: rank;
}
/* El tope de 430px es el ancho de un iPhone grande. Sin él, entre 430 y 640 la
   única columna estira la card hasta 607px `[Medido]` y el dial —que tiene su
   propio máximo— se queda en el 27% del ancho: la card se ve vacía. Con el tope,
   la proporción de la captura se mantiene en todo el rango de una columna. */
.face-item {
  container-type: inline-size;
  counter-increment: rank;
  min-width: 0;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
}

.face-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;                   /* el pie llega al filo y respeta el radio */
  background: var(--surface-card);            /* #2e2e30 — medido */
  border-radius: clamp(14px, 4.43cqw, 24px);  /* 40/902 del original */
  /* Trazo de 1px POR FUERA, como el stroke exterior de Figma. Con `border` se
     comería un píxel de la caja y desplazaría lo de dentro; con `box-shadow`
     queda fuera y sigue el radio. */
  box-shadow: 0 0 0 1px var(--card-stroke);
  contain: layout paint style;
}

/* El dial: 35.7% del ancho de la card, centrado, con 6.9% de aire arriba y
   abajo. Sin sombra — en la captura no hay ninguna [Medido: el fondo bajo el
   dial es #2e2e30 puro]. */
.face-card__image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6.9cqw 0;
  flex: 1 1 auto;
}
/* La portada la sirve el catálogo desde el 19 de septiembre de 2026: es un PNG
   con transparencia del reloj ENTERO —carcasa incluida— de 394 × 463
   `[Medido]`, no la pantalla recortada de antes.
   Por eso desaparecen el `background` y el `border-radius`: simulaban el cristal
   del reloj, y detrás de un PNG transparente lo que dibujaban era un rectángulo
   negro alrededor de la caja. La proporción va declarada para que la tarjeta no
   dé un salto de altura cuando la imagen todavía no ha cargado. */
.face-card__screen {
  width: clamp(130px, 46cqw, 172px);
  height: auto;
  aspect-ratio: 394 / 463;
  object-fit: contain;          /* el catálogo pide no deformar ni recortar */
}

/* El pie: banda más oscura de borde a borde. No lleva alto fijo — el padding
   vertical lo deja en el 22.4% del alto de la card que mide la captura, y así no
   se rompe si el nombre ocupa dos líneas. El 5.5 sale de medir el render, no de
   la captura: con 5.9 el pie salía al 23.6% y la card perdía proporción. */
.face-card__content {
  padding: 5.5cqw 4.32cqw;
  background: var(--card-footer);            /* #222222 — medido */
}
.face-card__name {
  margin: 0;
  font-size: clamp(15px, 4.42cqw, 19px);
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--text);
}
/* El número sale del orden de la lista, no del HTML. */
.face-card__name::before {
  content: "#" counter(rank);
  margin-right: .68em;                /* medido en el render: 0.8em dejaba
                                         4.16% de hueco y la captura tiene 3.55% */
  color: var(--card-rank);
}

/* Variante para una ilustración completa: el disco sigue detrás y ella se apoya
   encima. El disco es el golpe de color de la página y NO se retira porque la
   imagen traiga color propio `[Decisión del owner — 31 ago 2026]`.
   La ilustración es apaisada y el disco es un círculo, así que asoma por arriba
   y por abajo — que es justamente el efecto buscado. Va al 100% del ancho del
   escenario, sin desbordar: desbordando de lado provocaría scroll horizontal en
   un teléfono, donde el escenario ya ocupa la columna entera. */
.stage--art .stage__disc { inset: 6%; }
.stage__art {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .5));
}

/* La curva que corta el bloque teñido y lo cose con el fondo. */
.section__curve {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1px;
  width: 130%;
  min-width: 640px;
  height: auto;
  fill: var(--bg);
  pointer-events: none;
}

/* ==========================================================================
   Escena de producto — el disco de color con las esferas encima
   ========================================================================== */
.stage {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}
/* El disco tiene que verse: es el golpe de color de toda la página. Las esferas
   se apoyan en él, no lo tapan. */
.stage__disc {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: var(--brand-gradient);
  background-size: var(--accent-size);
  background-blend-mode: var(--accent-blend);
}
.stage__face {
  position: absolute;
  width: 38%;
  height: auto;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .6));
}
.stage__face--back  { left: 10%;  top: 34%; transform: rotate(-10deg); }
.stage__face--front { right: 8%; top: 12%;  transform: rotate(8deg); width: 43%; }

/* Variante para una captura vertical: el disco queda de fondo y la imagen lo
   desborda por arriba y por abajo, como los relojes desbordan el círculo en la
   referencia. `max-width: none` es necesario porque el reset global pone 100%. */
/* El disco ocupa el contenedor entero: la captura es estrecha y vertical, así que
   un disco menor quedaba tapado por el teléfono y asomaba sólo por un lado, que
   se lee como un error de recorte y no como fondo. */
.stage--shot .stage__disc { inset: 0; }
.stage__shot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 108%;
  width: auto;
  max-width: none;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, .62));
}

/* Fila de esferas para el banner */
.lineup {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 8px 0;
}
/* Un halo de color detrás de la fila, para que la tarjeta no sea gris sobre negro. */
.lineup::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 173, 50, .50) 0%, transparent 58%),
    radial-gradient(circle at 72% 70%, rgba(239, 67, 140, .55) 0%, transparent 60%),
    radial-gradient(circle, rgba(246, 91, 50, .55) 0%, rgba(239, 67, 140, .20) 46%, transparent 70%);
  pointer-events: none;
}
.lineup__face {
  width: 30%;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5));
}
.lineup__face--side { opacity: .92; }
.lineup__face:nth-child(1) { transform: rotate(-8deg) translateX(14%); z-index: 1; }
.lineup__face:nth-child(2) { width: 36%; z-index: 3; }
.lineup__face:nth-child(3) { transform: rotate(8deg) translateX(-14%); z-index: 2; }

/* La tarjeta del banner: un objeto con su propio fondo, no una franja a sangre. */
/* Medido: radio 32px, y padding 48px 24px en móvil / 80px 40px 68px 56px arriba. */
.promo {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background:
    radial-gradient(90% 110% at 96% 8%, rgba(255, 173, 50, .20) 0%, transparent 55%),
    radial-gradient(120% 130% at 88% 22%, rgba(246, 91, 50, .30) 0%, rgba(239, 67, 140, .10) 44%, transparent 72%),
    var(--surface);
  border: 1px solid var(--border-soft);
  padding: 48px 24px;
}
.promo .section-header { margin-bottom: 1.5rem; }
.promo .section-title { font-size: var(--fs-title-sm); }

/* ==========================================================================
   Portada — el reloj, y las estanterías del catálogo
   Mobile-first: la base es el teléfono. La referencia (watchfaces.co) resuelve
   las categorías con un riel que se arrastra con el dedo, y es lo correcto:
   cuatro categorías apiladas son cuatro pantallas de scroll en un móvil.
   ========================================================================== */

.hero {
  position: relative;
  padding: 8px 0 var(--pad-section);
  text-align: center;
  /* El halo del escenario es `position:absolute` y más ancho que la columna: sin
     recortarlo, lo que sobresale por la derecha ensancha el documento y el móvil
     gana un scroll lateral que no debería existir. `clip` recorta sin crear un
     contenedor de scroll, que es lo que haría `hidden`. */
  overflow-x: clip;
}
.hero__inner { display: flex; flex-direction: column; align-items: center; }

/* El escenario del reloj. El halo son las paradas del logo con alfa: es el
   «color saturado en cantidad» que la referencia pone detrás del producto, y sin
   él un reloj oscuro sobre fondo oscuro no se despega del fondo. */
.hero__stage {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: clamp(20px, 5vw, 34px);
}
.hero__stage::before {
  content: "";
  position: absolute;
  left: 50%;
  /* Centrado sobre el RELOJ, no sobre la caja: bajándolo al 52% el halo llegaba
     hasta el titular y le manchaba el fondo. Aquí se apaga antes de llegar. */
  top: 46%;
  width: min(116%, 580px);
  /* Elipse, no círculo: un círculo de este ancho baja hasta el titular y le
     aclara sólo la palabra del medio, que se lee como un fallo de render.
     Achatado, cunde a los lados —donde hace falta— y se apaga antes de bajar. */
  aspect-ratio: 1.42;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 173, 50, .34) 0%, transparent 56%),
    radial-gradient(circle at 70% 74%, rgba(239, 67, 140, .40) 0%, transparent 58%),
    radial-gradient(circle, rgba(246, 91, 50, .34) 0%, rgba(239, 67, 140, .14) 44%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero__watch {
  position: relative;
  z-index: 1;
  width: min(72vw, 300px);
  height: auto;
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .62));
}

.hero__title {
  margin: 0 0 .5rem;
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.hero__lead {
  margin: 0 0 clamp(24px, 5vw, 32px);
  max-width: 52ch;
  color: var(--text-2);
  font-size: var(--fs-lead);
  text-wrap: pretty;
}
.hero__cta { align-self: center; }

/* --- Una estantería por categoría ---------------------------------------- */
.shelf { padding-block: 0 clamp(36px, 8vw, 56px); }

.shelf__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(14px, 3.5vw, 20px);
}
.shelf__title {
  margin: 0;
  font-size: clamp(22px, 5.6vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  min-width: 0;
}
.shelf__count {
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* El riel se sale del contenedor por los dos lados y recupera el margen con su
   propio padding. Así la primera tarjeta queda alineada con el título y la
   última puede llegar al filo de la pantalla: se ve que la fila continúa. */
.shelf__rail {
  display: flex;
  gap: 12px;
  margin: 0 calc(var(--gutter) * -1);
  padding: 2px var(--gutter);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.shelf__rail::-webkit-scrollbar { display: none; }

.shelf__item {
  container-type: inline-size;       /* lo que hace funcionar los cqw de la tarjeta */
  flex: 0 0 auto;
  width: 46vw;
  max-width: 200px;
  min-width: 0;
  scroll-snap-align: start;
}

/* El «#1» de la tarjeta pertenece al Ranking, que es una lista ordenada. Una
   categoría no es un ranking: aquí el número mentiría. */
.shelf__rail .face-card__name::before { content: none; }

/* --- Cuando falta el material -------------------------------------------- */
.shelf__empty {
  margin: 0;
  padding: 22px 20px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-3);
  font-size: 15px;
}

.catalog-empty {
  padding: clamp(28px, 7vw, 44px) 24px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--surface);
  text-align: center;
}
.catalog-empty__title {
  margin: 0 0 .5rem;
  font-size: clamp(22px, 5.6vw, 30px);
  font-weight: 700;
  line-height: 1.2;
}
.catalog-empty__text {
  margin: 0 auto 24px;
  max-width: 44ch;
  color: var(--text-2);
}

/* ==========================================================================
   Preguntas frecuentes — <details> nativo, cero JavaScript
   ========================================================================== */
.faq { border-top: 1px solid var(--border-soft); }
.faq__item { border-bottom: 1px solid var(--border-soft); }

/* Medido: 20 → 24px, y padding 24px arriba y abajo con 40px libres a la derecha. */
.faq__q {
  position: relative;
  cursor: pointer;
  list-style: none;
  display: block;
  padding: 24px 40px 24px 0;
  font-size: var(--fs-faq);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}
.faq__q::-webkit-details-marker { display: none; }

/* El signo «+» son dos barras del color de acento; al abrir, la vertical gira
   hasta tumbarse y queda un «−». Sin iconos, sin fuentes, sin script. */
.faq__q::before,
.faq__q::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 20px;
  height: 3px;
  margin-top: -1.5px;
  background: var(--accent);
  border-radius: 100px;
  transition: transform .3s ease;
}
.faq__q::before { transform: rotate(90deg); }
.faq__item[open] .faq__q::before { transform: rotate(0); }
.faq__q:hover { color: var(--accent); }

.faq__a { padding: 0 0 22px; color: #e6e6ea; }
.faq__a > *:first-child { margin-top: 0; }
.faq__a > *:last-child { margin-bottom: 0; }
.faq__a p { margin: 0 0 1rem; }
.faq__a ol, .faq__a ul { margin: 0 0 1rem; padding-left: 1.25em; }
.faq__a li { margin-bottom: .4rem; }

/* ==========================================================================
   Formulario
   ========================================================================== */
.form { max-width: 450px; margin-inline: auto; }
.field { position: relative; margin-bottom: 14px; }

/* Medido: 18px de letra, padding 12.6/16, radio 8px, 56px de alto. */
.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 12.6px 16px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field textarea:focus { border-color: var(--accent); }

/* Etiqueta flotante: hace de marcador y desaparece al escribir. La asociación
   for/id se mantiene, así que un lector de pantalla la sigue anunciando. */
.field label {
  position: absolute;
  left: 16px;
  top: 12.6px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-3);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.field input:focus ~ label,
.field textarea:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:not(:placeholder-shown) ~ label {
  opacity: 0;
  transform: translateX(.5rem);
}

.form .btn { width: 100%; margin-top: 6px; }
.form__note { margin: 14px 0 0; font-size: 14px; color: var(--text-3); text-align: center; }
.form__note a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Pie
   ========================================================================== */
.site-footer {
  margin-top: 56px;
  border-top: 1px solid var(--border-soft);
  padding: 32px 0 calc(32px + env(safe-area-inset-bottom, 0px));
  color: var(--text-2);
  font-size: 14px;
}
.site-footer__grid { display: grid; gap: 24px; }
.site-footer__brand .brand { margin-bottom: 12px; }
/* El pie no sigue el crecimiento del logo de la cabecera: ahí no compite con
   nada y a 34px pesaría más que el bloque de enlaces que tiene al lado. */
.site-footer .brand__logo { height: 28px; }
.site-footer__tag { margin: 0; max-width: 34ch; color: var(--text-2); }
.footer-heading {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); }
.footer-links a:hover { color: var(--accent); }
.site-footer__legal {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-3);
  font-size: 13px;
}
.site-footer__legal p { margin: 0 0 4px; }

/* ==========================================================================
   Tableta y escritorio — sólo se AÑADE a partir de aquí
   ========================================================================== */
@media (min-width: 640px) {
  .actions { flex-direction: row; flex-wrap: wrap; }
  .brand__logo { height: 28px; }
  .form .btn { width: auto; min-width: 100%; }
}

@media (min-width: 768px) {
  :root { --rhythm: 2.25rem; }
  .page-head { padding: 28px 0 20px; }
  .prose h2 { font-size: 26px; }
  .prose h3 { font-size: 19px; }
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
  .site-footer { padding-top: 44px; }
  .section-header { margin-bottom: 2rem; }
  .stage { max-width: 470px; }   /* medido: la imagen del hero nunca pasa de 470 */
}

/* --------------------------------------------------------------------------
   992px — donde la barra pasa de móvil a escritorio
   El número es el de la referencia (`lg` de Bootstrap), y no es arbitrario: con
   la marca a 181px, los cinco enlaces a ~470px y el CTA a ~120px hacen falta
   771px de contenido. A 768px el contenedor sólo ofrece ~710 y la navegación se
   partiría; a 992 caben con holgura.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  :root { --header-h: 60px; }
  .site-header { padding: 12px 0; }
  .site-header__inner {
    grid-template-columns: minmax(11rem, auto) minmax(0, 1fr) auto;  /* medido */
    gap: clamp(1.5rem, 1.5vw, 1.75rem);
    border-radius: 999px;
    padding: 8px 9px 8px 16px;
  }
  .brand__logo { height: 34px; }

  /* La navegación aparece y el botón de menú desaparece: son excluyentes. */
  .site-nav { display: block; }
  .nav-mobile { display: none; }

  .cta-header { min-height: 48px; }   /* medido en la referencia */
}

@media (min-width: 1024px) {
  .page-head { padding: 36px 0 24px; }
  .section-header { margin-bottom: 2.25rem; }

  /* Las dos columnas se abren aquí, no antes: por debajo de esto la imagen
     quedaría demasiado pequeña para leerse y el texto demasiado estrecho. */
  .split { grid-template-columns: 1fr 1fr; gap: 56px; }
  /* El bloque de preguntas es más ancho que su titular: 5 y 7 de 12, como la
     referencia. El titular no necesita el mismo ancho que una lista larga. */
  .split--faq { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .split--faq .section-header { margin-bottom: 0; }
  .promo { padding: 80px 40px 68px 56px; }   /* medido */
}

/* --------------------------------------------------------------------------
   La rejilla del Ranking crece 1 → 2 → 3 → 4
   En el teléfono va a UNA columna `[Decisión del owner — 1 sep 2026]`: la card
   se ve entera, con el dial al tamaño que él fijó. A partir de 640px ya caben
   dos sin que la captura quede minúscula, y desde ahí sigue el escalado.
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .face-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; row-gap: 16px; }
  .shelf__item { width: 30vw; }
}
@media (min-width: 768px) {
  .face-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; }
  .shelf__item { width: 22vw; }
  .shelf__rail { gap: 16px; }
}
@media (min-width: 1200px) {
  .face-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* medido */
  .shelf__item { width: 172px; }
}

@media (hover: hover) and (pointer: fine) {
  .toc li a:hover { padding-left: 4px; transition: padding-left .18s ease; }
}

/* Impresión: que una política se pueda imprimir en negro sobre blanco. */
@media print {
  :root { --bg: #fff; --text: #000; --text-2: #333; --border: #ccc; --border-soft: #ddd; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-header, .site-nav, .nav-mobile, .toc, .skip-link, .actions, .stage, .lineup, .promo { display: none !important; }
  /* El pie sí se imprime, y ahí el lockup blanco sobre papel blanco no se vería:
     se cambia la imagen por la palabra, que es lo único que hay que leer. */
  .brand__logo { display: none !important; }
  .brand__word {
    display: inline;
    color: #000;
    font-weight: 600;
    font-size: 13pt;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .section-title em { background: none; color: #000; -webkit-text-fill-color: #000; }
  .prose a { color: #000; text-decoration: underline; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .callout { border: 1px solid #ccc; background: #fff; }
}