/* 00-base.css */
/* ==========================================================================
   Hasta la Marca — base: tokens, reset, tipografía, estructura
   Moderno y un poco futurista: base neutra fría, tarjetas sin borde con relleno gris,
   negro para actuar y un solo acento eléctrico (lima) para la marca. Geist + Geist Mono.
   ========================================================================== */

@font-face {
  font-family: 'Geist';
  src: url('/assets/fuentes/geist-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fuentes/geist-mono-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  /* Moderno y un poco futurista (decisión del dueño, 13 oct 2026): base neutra fría,
     negro para actuar y UN solo acento eléctrico (lima) para lo que hay que mirar. */
  --papel: oklch(98.6% 0.004 115);
  --papel-2: oklch(96.7% 0.005 115);
  --superficie: oklch(99.5% 0.003 115);
  --superficie-2: oklch(96.7% 0.005 115);
  --superficie-3: oklch(91.8% 0.007 115);
  --tinta: oklch(17.5% 0.008 115);
  --tinta-2: #52525b;
  --tinta-3: #6b6b74;
  --borde: #e4e4e7;
  --borde-control: #8e8e96;
  --accion: oklch(17.5% 0.008 115);
  --accion-hover: oklch(11% 0.006 115);
  --accion-tinta: oklch(98.6% 0.004 115);
  --accion-suave: oklch(96.7% 0.005 115);
  --tinte-menta: oklch(96.7% 0.005 115);
  --tinte-cielo: oklch(96.7% 0.005 115);
  --tinte-arena: oklch(96.7% 0.005 115);
  --tinte-limon: oklch(96.7% 0.005 115);
  --tinte-rosa: oklch(96.7% 0.005 115);
  --agua: #a1a1aa;
  --agua-claro: oklch(96.7% 0.005 115);
  --polvo: #e4e4e7;
  --polvo-sombra: #a1a1aa;
  --goma: #18181b;
  --plumon: #d4ff3a;
  --plumon-suave: #f3ffd0;
  --plumon-tinta: oklch(17.5% 0.008 115);
  --ok: #15803d;
  --ok-fondo: #f3ffd0;
  --cuidado: #a16207;
  --cuidado-borde: #eab308;
  --cuidado-fondo: #fef9e7;
  --alto: #dc2626;
  --alto-borde: #f87171;
  --alto-fondo: #fef2f2;
  /* Sello «Ejemplo · no es una recomendación»: rojo fijo en claro y oscuro (contraste 4.8:1 con su tinta) */
  --sello-fondo: #dc2626;
  --sello-tinta: oklch(98.6% 0.004 115);
  --sello: oklch(17.5% 0.008 115);
  --foco-color: oklch(17.5% 0.008 115);
  --tapa: #a1a1aa;

  /* Tipografía (§10.3) */
  --fuente: 'Geist', 'Geist Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fuente-num: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --t-numero: clamp(4.5rem, 22vw, 8.5rem);
  --t-h1: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --t-h2: 1.5rem;
  --t-h3: 1.25rem;
  --t-lead: 1.25rem;
  --t-base: 1.125rem;
  --t-ayuda: 1.0625rem;
  --t-meta: 0.9375rem;
  --interlineado: 1.55;

  /* Espacios, radios, sombras (minimalista: sin sombras salvo diálogos) */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3.5rem;
  --e-8: 5rem;
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --r-pill: 999px;
  --toque: 56px;
  --toque-min: 48px;
  --ancho-texto: 62ch;
  --ancho-sitio: 68rem;
  --sombra-1: none;
  --sombra-2: none;
  --sombra-3: 0 24px 64px -24px rgba(0, 0, 0, 0.28);
  --foco: 0 0 0 2px var(--superficie), 0 0 0 4px var(--foco-color);

  /* Movimiento: salidas exponenciales, nunca rebote */
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --t-press: 120ms;
  --t-estado: 220ms;
  --t-entrada: 620ms;
  --rapido: 160ms;
  --normal: 240ms;
}

/* Tema oscuro: por sistema (si no se eligió claro) o elegido en Ajustes */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --papel: oklch(14.2% 0.005 115);
    --papel-2: oklch(17% 0.006 115);
    --superficie: oklch(18% 0.006 115);
    --superficie-2: oklch(21.5% 0.007 115);
    --superficie-3: oklch(27.5% 0.008 115);
    --tinta: oklch(97.5% 0.004 115);
    --tinta-2: #a1a1aa;
    --tinta-3: #8b8b93;
    --borde: #27272a;
    --borde-control: #71717a;
    --accion: oklch(97.5% 0.004 115);
    --accion-hover: oklch(99.4% 0.003 115);
    --accion-tinta: oklch(14.2% 0.005 115);
    --accion-suave: #27272a;
    --tinte-menta: oklch(21.5% 0.007 115);
    --tinte-cielo: oklch(21.5% 0.007 115);
    --tinte-arena: oklch(21.5% 0.007 115);
    --tinte-limon: oklch(21.5% 0.007 115);
    --tinte-rosa: oklch(21.5% 0.007 115);
    --agua: #71717a;
    --agua-claro: oklch(21.5% 0.007 115);
    --polvo: #3f3f46;
    --polvo-sombra: #52525b;
    --goma: #000000;
    --plumon: #d4ff3a;
    --plumon-suave: #1d260a;
    --plumon-tinta: oklch(14.2% 0.005 115);
    --ok: #a3e635;
    --ok-fondo: #18210c;
    --cuidado: #fbbf24;
    --cuidado-borde: #a16207;
    --cuidado-fondo: #221a07;
    --alto: #f87171;
    --alto-borde: #991b1b;
    --alto-fondo: #2a1111;
    --sello: oklch(97.5% 0.004 115);
    --foco-color: #d4ff3a;
    --tapa: #52525b;
    --sombra-3: 0 0 0 1px var(--borde), 0 24px 64px rgba(0, 0, 0, 0.6);
  }
}
:root[data-tema='oscuro'] {
  --papel: oklch(14.2% 0.005 115);
  --papel-2: oklch(17% 0.006 115);
  --superficie: oklch(18% 0.006 115);
  --superficie-2: oklch(21.5% 0.007 115);
  --superficie-3: oklch(27.5% 0.008 115);
  --tinta: oklch(97.5% 0.004 115);
  --tinta-2: #a1a1aa;
  --tinta-3: #8b8b93;
  --borde: #27272a;
  --borde-control: #71717a;
  --accion: oklch(97.5% 0.004 115);
  --accion-hover: oklch(99.4% 0.003 115);
  --accion-tinta: oklch(14.2% 0.005 115);
  --accion-suave: #27272a;
  --tinte-menta: oklch(21.5% 0.007 115);
  --tinte-cielo: oklch(21.5% 0.007 115);
  --tinte-arena: oklch(21.5% 0.007 115);
  --tinte-limon: oklch(21.5% 0.007 115);
  --tinte-rosa: oklch(21.5% 0.007 115);
  --agua: #71717a;
  --agua-claro: oklch(21.5% 0.007 115);
  --polvo: #3f3f46;
  --polvo-sombra: #52525b;
  --goma: #000000;
  --plumon: #d4ff3a;
  --plumon-suave: #1d260a;
  --plumon-tinta: oklch(14.2% 0.005 115);
  --ok: #a3e635;
  --ok-fondo: #18210c;
  --cuidado: #fbbf24;
  --cuidado-borde: #a16207;
  --cuidado-fondo: #221a07;
  --alto: #f87171;
  --alto-borde: #991b1b;
  --alto-fondo: #2a1111;
  --sello: oklch(97.5% 0.004 115);
  --foco-color: #d4ff3a;
  --tapa: #52525b;
  --sombra-3: 0 0 0 1px var(--borde), 0 24px 64px rgba(0, 0, 0, 0.6);
}
:root[data-tema='claro'] {
  color-scheme: light;
}
:root[data-tema='oscuro'] {
  color-scheme: dark;
}

/* Respaldo métrico para que el cambio de fuente no mueva nada (CLS ≈ 0) */
@font-face {
  font-family: 'Geist Fallback';
  src: local('Arial');
  size-adjust: 104%;
  ascent-override: 94%;
  descent-override: 24%;
}

/* Escritorio: texto base de 19 px */
@media (min-width: 1024px) {
  :root {
    --t-base: 1.1875rem;
  }
}

/* Letra grande (ajuste del menú o detectada por tamaño del sistema) */
:root.letra-grande {
  --t-base: 1.3125rem;
  --t-ayuda: 1.1875rem;
  --t-meta: 1.0625rem;
  --t-lead: 1.4375rem;
  --t-h3: 1.5rem;
  --t-h2: 1.75rem;
  --toque: 64px;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.sin-movimiento) {
    scroll-behavior: smooth;
  }
}
html,
body {
  /* Nunca desplazamiento lateral (clip no rompe el encabezado fijo) */
  overflow-x: clip;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: var(--t-base);
  line-height: var(--interlineado);
  font-feature-settings: 'kern';
  overflow-wrap: break-word;
}
main {
  flex: 1;
  outline: none;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
}
svg.icono {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -0.25em;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 3px solid var(--foco-color);
  outline-offset: 3px;
  border-radius: 6px;
}
::selection {
  background: var(--tinta);
  color: var(--papel);
}

/* --------------------------------------------------------------------------
   Tipografía
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  line-height: 1.08;
  margin: 0 0 var(--e-4);
  font-weight: 650;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h1 {
  font-size: var(--t-h1);
}
h2 {
  font-size: var(--t-h2);
  margin-top: var(--e-7);
}
h3 {
  font-size: var(--t-h3);
  margin-top: var(--e-6);
}
h4 {
  font-size: var(--t-base);
  margin-top: var(--e-5);
}
p,
ul,
ol,
dl,
table,
figure,
blockquote {
  margin: 0 0 var(--e-4);
}
p {
  text-wrap: pretty;
}
ul,
ol {
  padding-left: 1.4em;
}
li + li {
  margin-top: var(--e-2);
}
[role='list'] {
  list-style: none;
  padding: 0;
}
a {
  color: var(--tinta);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}
a:hover {
  color: var(--tinta-2);
}
strong,
b {
  font-weight: 800;
}
small {
  font-size: var(--t-ayuda);
}
hr {
  border: 0;
  border-top: 2px dashed var(--borde);
  margin: var(--e-6) 0;
}
code,
kbd,
.num {
  font-family: var(--fuente-num);
  font-variant-numeric: tabular-nums slashed-zero;
}
kbd {
  font-size: 0.9em;
  padding: 0.05em 0.4em;
  border: 1px solid var(--borde-control);
  border-bottom-width: 3px;
  border-radius: 6px;
  background: var(--superficie);
}
mark,
.plumon {
  background: linear-gradient(transparent 12%, var(--plumon) 12%, var(--plumon) 88%, transparent 88%);
  color: var(--plumon-tinta);
  padding: 0 0.15em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.lead {
  font-size: var(--t-lead);
  color: var(--tinta-2);
  max-width: var(--ancho-texto);
}
.antetitulo {
  font-family: var(--fuente-num);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tinta-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--e-3);
}
.texto-chico {
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
}
.centrado {
  text-align: center;
}
.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Estructura
   -------------------------------------------------------------------------- */
.contenedor {
  width: min(100% - 2rem, var(--ancho-sitio));
  margin-inline: auto;
}
.contenedor--texto {
  width: min(100% - 2rem, var(--ancho-texto));
  margin-inline: auto;
}
.seccion {
  padding-block: var(--e-7);
}
.seccion--suave {
  background: var(--papel-2);
}
.seccion > :first-child,
.contenedor > :first-child {
  margin-top: 0;
}
.pila > * + * {
  margin-top: var(--e-4);
}

.saltar {
  position: absolute;
  left: var(--e-4);
  top: -100px;
  z-index: 100;
  padding: var(--e-3) var(--e-4);
  background: var(--tinta);
  color: var(--papel);
  border-radius: var(--r-s);
  font-weight: 700;
}
.saltar:focus {
  top: var(--e-3);
}

/* Encabezado */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--borde);
}
.encabezado__interior {
  width: min(100% - 1.5rem, var(--ancho-sitio));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: 60px;
}
.logo {
  display: inline-flex;
  align-items: center;
  color: var(--tinta);
  text-decoration: none;
  padding: var(--e-1) 0;
  border-radius: 8px;
}
.logo:hover {
  color: var(--tinta);
}
.logo__texto {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.logo__marca {
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}
.logo__regla {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
}
.logo__plumon {
  fill: var(--plumon);
}
.logo__rayas {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.nav-principal {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}
.nav-principal__lista {
  display: none;
  margin: 0;
  gap: var(--e-1);
}
.nav-principal__lista li + li {
  margin-top: 0;
}
.nav-principal__lista a {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--toque-min);
  padding: 0 var(--e-3);
  border-radius: var(--r-s);
  color: var(--tinta);
  text-decoration: none;
  font-weight: 700;
}
.nav-principal__lista a:hover,
.nav-principal__lista a[aria-current='page'] {
  background: var(--accion-suave);
  color: var(--tinta);
}
.nav-principal__lista .icono {
  color: var(--tinta-2);
}
@media (min-width: 900px) {
  .nav-principal__lista {
    display: flex;
  }
}
.menu__titulo {
  margin: 0 0 var(--e-1);
  padding: 0 var(--e-3);
  font-family: var(--fuente-num);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.menu {
  position: relative;
}
.menu > summary {
  list-style: none;
}
.menu > summary::-webkit-details-marker {
  display: none;
}
.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(20rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 84px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  box-shadow: var(--sombra-3);
  padding: var(--e-3);
  z-index: 40;
}
.menu__grupos {
  display: grid;
  gap: var(--e-4);
  margin-top: var(--e-3);
}
@media (min-width: 760px) {
  .menu__panel {
    width: 34rem;
  }
  .menu__grupos {
    grid-template-columns: 1fr 1fr;
    gap: var(--e-3) var(--e-4);
  }
}
.menu__inicio {
  gap: var(--e-2);
}
.menu__inicio .icono {
  color: var(--tinta-2);
}
.menu__panel ul {
  margin: 0;
}
.menu__panel li + li {
  margin-top: 0;
}
.menu__panel a,
.menu__inicio {
  display: flex;
  align-items: center;
  min-height: var(--toque-min);
  padding: 0 var(--e-3);
  border-radius: var(--r-s);
  color: var(--tinta);
  text-decoration: none;
  font-weight: 700;
}
.menu__panel a:hover,
.menu__panel a[aria-current='page'] {
  background: var(--papel-2);
}
.menu__ajustes:not(:empty) {
  border-top: 1px solid var(--borde);
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  display: grid;
  gap: var(--e-2);
}

/* Migas de pan */
.migas {
  width: min(100% - 2rem, var(--ancho-sitio));
  margin: var(--e-4) auto 0;
  font-size: var(--t-ayuda);
}
.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-2);
  margin: 0;
  color: var(--tinta-3);
}
.migas li + li {
  margin-top: 0;
}
.migas li + li::before {
  content: '›';
  margin-right: var(--e-2);
  color: var(--tinta-3);
}
.migas a {
  color: var(--tinta-2);
}

/* Pie */
.pie {
  margin-top: var(--e-8);
  background: var(--tinta);
  color: var(--papel);
  padding: var(--e-7) 0 calc(var(--e-6) + env(safe-area-inset-bottom));
}
:root[data-tema='oscuro'] .pie {
  background: oklch(10% 0.004 115);
  color: var(--tinta);
  border-top: 1px solid var(--borde);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .pie {
    background: oklch(10% 0.004 115);
    color: var(--tinta);
    border-top: 1px solid var(--borde);
  }
}
.pie__interior {
  width: min(100% - 2rem, var(--ancho-sitio));
  margin-inline: auto;
  display: grid;
  gap: var(--e-6);
}
.pie a {
  color: inherit;
}
.pie__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3) var(--e-6);
}
.pie__logo,
.pie__logo:hover {
  color: inherit;
}
.pie__logo .logo__rayas {
  stroke: currentColor;
}
.pie__aviso {
  font-size: var(--t-ayuda);
  margin: 0;
  opacity: 0.85;
}
.pie__grupos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--e-5) var(--e-4);
}
.pie__titulo {
  margin: 0 0 var(--e-2);
  font-family: var(--fuente-num);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}
.pie__enlaces {
  margin: 0;
}
.pie__enlaces li + li {
  margin-top: 0;
}
.pie__enlaces a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  text-decoration: none;
  font-size: var(--t-ayuda);
}
.pie__enlaces a:hover {
  color: inherit;
  text-decoration: underline;
}
.pie__ajustes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  padding-top: var(--e-5);
  border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.pie__tema {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
}
.pie__tema-titulo {
  font-family: var(--fuente-num);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}
/* Selector de tema como control segmentado */
.pie__segmentos {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.pie .chip {
  min-height: 44px;
  padding: 0 var(--e-3);
  background: transparent;
  color: inherit;
  border: 0;
  font-size: var(--t-meta);
}
.pie .chip:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.pie .chip[aria-pressed='true'] {
  background: var(--plumon);
  color: var(--plumon-tinta);
}
.aviso-sin-js {
  margin: 0;
  padding: var(--e-3) var(--e-4);
  background: var(--cuidado-fondo);
  color: var(--tinta);
  text-align: center;
  font-weight: 700;
}
.puerta__legales {
  font-size: var(--t-ayuda);
}
.pie .boton--fantasma {
  color: inherit;
  border-color: rgb(255 255 255 / 0.28);
}
.pie__marca {
  font-size: var(--t-ayuda);
  opacity: 0.7;
  margin: 0;
}

/* Sin JS: lo que solo funciona con JS se oculta */
html:not(.js) .solo-js {
  display: none !important;
}
html.js .sin-js {
  display: none !important;
}

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

/* 10-componentes.css */
/* ==========================================================================
   Componentes compartidos — estilo minimalista con RELLENOS SÓLIDOS:
   sin bordes en tarjetas ni controles; fondos suaves; negro para lo elegido.
   ========================================================================== */

/* --- Botones ------------------------------------------------------------ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--toque);
  padding: 0 var(--e-5);
  border-radius: var(--r-pill);
  border: 0;
  font-weight: 700;
  font-size: var(--t-base);
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--rapido) ease,
    color var(--rapido) ease,
    transform var(--rapido) ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.boton:active {
  transform: scale(0.98);
}
.boton--primario {
  background: var(--accion);
  color: var(--accion-tinta);
}
.boton--primario:hover {
  background: var(--accion-hover);
  color: var(--accion-tinta);
}
.boton--secundario {
  background: var(--superficie-2);
  color: var(--tinta);
}
.boton--secundario:hover {
  background: var(--superficie-3);
  color: var(--tinta);
}
.boton--suave {
  background: var(--tinte-limon);
  color: var(--tinta);
}
.boton--suave:hover {
  background: var(--plumon);
  color: var(--plumon-tinta);
}
.boton--fantasma {
  background: transparent;
  color: var(--tinta);
}
.boton--fantasma:hover {
  background: var(--superficie-2);
  color: var(--tinta);
}
.boton--peligro {
  background: var(--alto);
  color: #ffffff;
}
.boton--grande {
  min-height: calc(var(--toque) + 8px);
  font-size: var(--t-lead);
  padding: 0 var(--e-6);
  width: 100%;
}
.boton--chico {
  min-height: var(--toque-min);
  padding: 0 var(--e-4);
  font-size: var(--t-ayuda);
}
.boton--ancho {
  width: 100%;
}
.boton--enlace {
  background: none;
  border: 0;
  min-height: var(--toque-min);
  padding: 0;
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
  font-weight: 700;
}
.boton[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.botonera {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: center;
}
.botonera--pila {
  flex-direction: column;
  align-items: stretch;
}
@media (min-width: 640px) {
  .boton--grande {
    width: auto;
  }
  .botonera--pila {
    flex-direction: row;
    align-items: center;
  }
}
.boton[aria-busy='true'] {
  opacity: 0.7;
  pointer-events: none;
}

/* --- Tarjetas (relleno sólido, sin borde) -------------------------------- */
.tarjeta {
  background: var(--superficie-2);
  border: 0;
  border-radius: var(--r-l);
  padding: var(--e-5);
}
.tarjeta > :last-child {
  margin-bottom: 0;
}
.tarjeta--blanca {
  background: var(--superficie);
}
.tarjeta--menta {
  background: var(--tinte-menta);
}
.tarjeta--cielo {
  background: var(--tinte-cielo);
}
.tarjeta--arena {
  background: var(--tinte-arena);
}
.tarjeta--limon {
  background: var(--tinte-limon);
}
.tarjeta--rosa {
  background: var(--tinte-rosa);
}
.rejilla {
  display: grid;
  gap: var(--e-4);
}
@media (min-width: 720px) {
  .rejilla--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .rejilla--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .rejilla--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .rejilla--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Tarjeta-botón grande (triage de la portada) */
.puertas {
  display: grid;
  gap: var(--e-3);
  margin: 0 0 var(--e-4);
}
.puertas li + li {
  margin-top: 0;
}
.tarjeta-boton {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--e-4);
  min-height: 88px;
  padding: var(--e-4) var(--e-5);
  background: var(--superficie-2);
  border: 0;
  border-radius: var(--r-l);
  color: var(--tinta);
  text-decoration: none;
  transition:
    background-color var(--rapido) ease,
    transform var(--rapido) ease;
}
.tarjeta-boton:hover {
  color: var(--tinta);
  transform: translateY(-1px);
  filter: brightness(0.97);
}
.puertas li[data-orden='primera'] .tarjeta-boton {
  background: var(--tinte-menta);
}
.puertas li[data-orden='guiame'] .tarjeta-boton {
  background: var(--tinte-cielo);
}
.puertas li[data-orden='rapida'] .tarjeta-boton {
  background: var(--tinte-arena);
}
.tarjeta-boton__icono {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--superficie);
  color: var(--tinta);
}
.tarjeta-boton__icono .icono {
  width: 26px;
  height: 26px;
}
.tarjeta-boton__titulo {
  display: block;
  font-size: var(--t-lead);
  font-weight: 700;
  line-height: 1.2;
}
.tarjeta-boton__sub {
  display: block;
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
  margin-top: 2px;
}
.tarjeta-boton__flecha {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accion);
  color: var(--accion-tinta);
}
.tarjeta-boton__flecha .icono {
  width: 20px;
  height: 20px;
}
.tarjeta-boton__flecha {
  transition:
    background-color var(--rapido) ease,
    color var(--rapido) ease,
    transform var(--rapido) ease;
}
.tarjeta-boton:hover .tarjeta-boton__flecha,
.tarjeta-boton:focus-visible .tarjeta-boton__flecha {
  background: var(--plumon);
  color: var(--plumon-tinta);
  transform: translateX(2px);
}
.tarjeta-boton__etiqueta {
  position: absolute;
  top: -11px;
  left: var(--e-5);
  background: var(--plumon);
  color: var(--plumon-tinta);
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--r-pill);
}
.tarjeta-boton--destacada {
  box-shadow: none;
}

/* --- Formularios --------------------------------------------------------- */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
legend {
  padding: 0;
}
.pregunta {
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: var(--e-2);
  outline: none;
}
.ayuda {
  color: var(--tinta-2);
  margin-bottom: var(--e-4);
}
.etiqueta {
  display: block;
  font-weight: 700;
  margin-bottom: var(--e-2);
}
.campo {
  display: flex;
  align-items: stretch;
  min-height: calc(var(--toque) + 6px);
  background: var(--superficie-2);
  border: 0;
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: inset 0 -2px 0 var(--borde-control);
  transition:
    box-shadow var(--rapido) ease,
    background-color var(--rapido) ease;
}
.campo:focus-within {
  background: var(--superficie-3);
  box-shadow: inset 0 0 0 2px var(--tinta);
}
.campo input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0 var(--e-4);
  font-family: var(--fuente-num);
  font-size: 1.625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums slashed-zero;
  outline: none;
}
.campo input::placeholder {
  color: var(--tinta-3);
  font-weight: 400;
}
.campo__unidad {
  display: grid;
  place-items: center;
  padding: 0 var(--e-4);
  font-weight: 700;
  color: var(--tinta-2);
  min-width: 4rem;
}
.campo--error {
  background: var(--alto-fondo);
  box-shadow: inset 0 -2px 0 var(--alto);
}
.campo--chico {
  min-height: var(--toque);
}
.campo--chico input {
  font-size: 1.25rem;
}
.campo-eco {
  font-family: var(--fuente-num);
  color: var(--tinta-2);
  font-size: var(--t-ayuda);
  margin-top: var(--e-2);
  min-height: 1.5em;
}
.error-campo {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  color: var(--alto);
  font-weight: 700;
  margin: var(--e-3) 0 0;
}
select.selector {
  min-height: var(--toque);
  width: 100%;
  padding: 0 var(--e-4);
  border: 0;
  border-radius: var(--r-m);
  background: var(--superficie-2);
  font-weight: 700;
}

/* Opciones grandes (radios reales con aspecto de botón) */
.opciones {
  display: grid;
  gap: var(--e-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  margin: 0 0 var(--e-4);
}
.opciones--2 {
  grid-template-columns: repeat(2, 1fr);
}
.opciones--1 {
  grid-template-columns: 1fr;
}
.opcion {
  position: relative;
  display: flex;
}
.opcion input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}
.opcion__cara {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--toque);
  padding: var(--e-3) var(--e-4);
  background: var(--superficie-2);
  border: 0;
  border-radius: var(--r-m);
  font-weight: 700;
  line-height: 1.25;
  transition:
    background-color var(--rapido) ease,
    color var(--rapido) ease;
}
.opcion__cara small {
  display: block;
  font-weight: 400;
  color: var(--tinta-2);
  font-size: var(--t-ayuda);
}
.opcion__texto {
  flex: 1;
}
.opcion__marca {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--superficie);
  box-shadow: inset 0 0 0 2px var(--borde-control);
  color: transparent;
}
.opcion__marca .icono {
  width: 18px;
  height: 18px;
}
.opcion input:hover + .opcion__cara {
  background: var(--superficie-3);
}
.opcion input:focus-visible + .opcion__cara {
  box-shadow: var(--foco);
}
.opcion input:checked + .opcion__cara {
  background: var(--accion);
  color: var(--accion-tinta);
}
.opcion input:checked + .opcion__cara small,
.opcion input:checked + .opcion__cara .opcion__consecuencia {
  color: var(--accion-tinta);
}
.opcion input:checked + .opcion__cara .opcion__marca {
  background: var(--plumon);
  box-shadow: none;
  color: var(--plumon-tinta);
}
.opcion__consecuencia {
  display: block;
  font-family: var(--fuente-num);
  font-size: var(--t-ayuda);
  font-weight: 700;
  margin-top: 2px;
}
.opcion__consecuencia--ok {
  color: var(--ok);
}
.opcion__consecuencia--cuidado {
  color: var(--cuidado);
}
.opcion__consecuencia--alto {
  color: var(--alto);
}

/* Casilla grande (puerta, listas para palomear) */
.casilla-grande {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: start;
  min-height: var(--toque);
  padding: var(--e-3) var(--e-4);
  border: 0;
  border-radius: var(--r-m);
  background: var(--superficie-2);
  cursor: pointer;
  margin: var(--e-3) 0 0;
  transition: background-color var(--rapido) ease;
}
.casilla-grande:hover {
  background: var(--superficie-3);
}
.casilla-grande input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.casilla-grande__caja {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 8px;
  background: var(--superficie);
  box-shadow: inset 0 0 0 2px var(--borde-control);
  color: transparent;
}
.casilla-grande input:checked ~ .casilla-grande__caja {
  background: var(--accion);
  box-shadow: none;
  color: var(--accion-tinta);
}
.casilla-grande input:focus-visible ~ .casilla-grande__caja {
  box-shadow: var(--foco);
}
.casilla-grande:has(input:checked) {
  background: var(--tinte-menta);
}

/* --- Avisos (semáforo): relleno sólido, sin borde -------------------------- */
.aviso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  padding: var(--e-4);
  border-radius: var(--r-m);
  border: 0;
  background: var(--superficie-2);
}
.aviso > .icono {
  width: 26px;
  height: 26px;
  margin-top: 1px;
}
.aviso__titulo {
  display: block;
  font-weight: 700;
  margin-bottom: var(--e-1);
}
.aviso p {
  margin: 0;
}
.aviso p + p,
.aviso .botonera {
  margin-top: var(--e-3);
}
.aviso--ok {
  background: var(--ok-fondo);
}
.aviso--ok > .icono,
.aviso--ok .aviso__titulo {
  color: var(--ok);
}
.aviso--cuidado {
  background: var(--cuidado-fondo);
}
.aviso--cuidado > .icono,
.aviso--cuidado .aviso__titulo {
  color: var(--cuidado);
}
.aviso--alto {
  background: var(--alto-fondo);
}
.aviso--alto > .icono,
.aviso--alto .aviso__titulo {
  color: var(--alto);
}
.aviso--info {
  background: var(--tinte-cielo);
}

/* Línea de recordatorio (una sola línea, discreta) */
.recordatorio {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
  margin: var(--e-4) 0 0;
}

/* Bloque de EJEMPLO con su sello */
.ejemplo {
  position: relative;
  border: 0;
  border-radius: var(--r-l);
  padding: calc(var(--e-6) + 0.5rem) var(--e-5) var(--e-5);
  background: var(--tinte-limon);
}
.sello-ejemplo {
  position: absolute;
  top: -14px;
  right: var(--e-4);
  max-width: calc(100% - 2rem);
  transform: rotate(-3deg);
  background: var(--sello-fondo);
  color: var(--sello-tinta);
  font-family: var(--fuente-num);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 12px;
  border-radius: var(--r-pill);
}

/* Lista sí / no */
.lista-sino {
  margin: var(--e-4) 0;
}
.lista-sino li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: start;
}
.lista-sino .icono {
  width: 28px;
  height: 28px;
  padding: 4px;
  border-radius: 50%;
}
.lista-sino .si .icono {
  background: var(--ok-fondo);
  color: var(--ok);
}
.lista-sino .no .icono {
  background: var(--alto-fondo);
  color: var(--alto);
}

/* Chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0 0 var(--e-4);
}
.chips li + li {
  margin-top: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: var(--toque-min);
  padding: 0 var(--e-4);
  border-radius: var(--r-pill);
  border: 0;
  background: var(--superficie-2);
  color: var(--tinta);
  font-weight: 700;
  font-size: var(--t-ayuda);
  text-decoration: none;
}
.chip:hover {
  background: var(--superficie-3);
  color: var(--tinta);
}
.chip[aria-pressed='true'],
.chip--activo {
  background: var(--accion);
  color: var(--accion-tinta);
}

/* Plegables */
details.plegable {
  border: 0;
  border-radius: var(--r-m);
  background: var(--superficie-2);
  margin: 0 0 var(--e-2);
}
details.plegable > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: var(--toque);
  padding: var(--e-2) var(--e-4);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-m);
}
details.plegable > summary:hover {
  background: var(--superficie-3);
}
details.plegable > summary::-webkit-details-marker {
  display: none;
}
details.plegable > summary::after {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--rapido) ease;
}
details.plegable[open] > summary::after {
  transform: rotate(225deg) translate(-3px, -3px);
}
details.plegable > :not(summary) {
  padding: 0 var(--e-4);
}
details.plegable > :last-child {
  padding-bottom: var(--e-4);
}

/* Tablas: sin líneas, encabezado oscuro y filas alternas */
.tabla-envoltura {
  overflow-x: auto;
  border-radius: var(--r-m);
  background: var(--superficie);
  margin: 0 0 var(--e-4);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-ayuda);
}
caption {
  text-align: left;
  font-weight: 700;
  padding: var(--e-3) 0;
}
th,
td {
  padding: var(--e-3) var(--e-4);
  border: 0;
  text-align: left;
  vertical-align: top;
}
thead th {
  background: var(--accion);
  color: var(--accion-tinta);
  font-weight: 700;
}
tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
  background: var(--superficie-2);
}
tbody th {
  font-weight: 700;
}
td.num,
th.num {
  text-align: right;
  white-space: nowrap;
}

/* Fórmula */
.formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--fuente-num);
  font-size: 1.125rem;
  font-weight: 700;
}
.formula__op {
  color: var(--tinta-3);
}
.formula__resultado {
  background: var(--plumon);
  color: var(--plumon-tinta);
  padding: 0 var(--e-2);
  border-radius: 6px;
}

/* --- Hoja (bottom sheet) y diálogos ---------------------------------- */
dialog {
  color: var(--tinta);
}
.hoja {
  width: min(100%, 36rem);
  max-height: min(88vh, 48rem);
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-l) var(--r-l) 0 0;
  background: var(--superficie);
  box-shadow: var(--sombra-3);
}
@media (min-width: 640px) {
  .hoja {
    margin: auto;
    border-radius: var(--r-l);
  }
}
.hoja::backdrop,
.puerta::backdrop {
  background: rgb(10 10 12 / 0.55);
}
.hoja__interior {
  padding: var(--e-5) var(--e-5) calc(var(--e-5) + env(safe-area-inset-bottom));
  overflow-y: auto;
  max-height: inherit;
}
.hoja__cabeza {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--e-3);
  margin-bottom: var(--e-3);
}
.hoja__cabeza h2 {
  margin: 0;
  font-size: var(--t-h3);
}
.hoja[open] {
  animation: sube var(--normal) var(--curva);
}
@keyframes sube {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}

/* --- Puerta 18+ -------------------------------------------------------- */
.puerta {
  width: min(100% - 1.5rem, 32rem);
  max-height: calc(100dvh - 1.5rem);
  padding: 0;
  border: 0;
  border-radius: var(--r-l);
  background: var(--superficie);
  box-shadow: var(--sombra-3);
  overflow-y: auto;
}
.puerta[open] {
  animation: sube var(--normal) var(--curva);
}
.puerta__paso {
  padding: var(--e-6) var(--e-5) var(--e-5);
}
.puerta__dibujo {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--e-4);
  border-radius: 50%;
  background: var(--plumon);
  color: var(--plumon-tinta);
}
.puerta__icono {
  width: 40px !important;
  height: 40px !important;
}
.puerta__contador {
  font-size: var(--t-ayuda);
  font-weight: 700;
  color: var(--tinta-3);
  margin-bottom: var(--e-2);
}
.puerta h2 {
  margin-top: 0;
  outline: none;
}
.puerta__pregunta {
  font-size: var(--t-lead);
  margin-top: var(--e-5);
}
.puerta__botones {
  display: grid;
  gap: var(--e-2);
  margin-top: var(--e-4);
}
.puerta__botones .boton--grande {
  width: 100%;
}
.puerta__secundarios {
  display: flex;
  justify-content: space-between;
  gap: var(--e-2);
  margin-top: var(--e-3);
}
.puerta__pie {
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
  margin: var(--e-5) 0 0;
}
.barra-puerta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom));
  background: var(--accion);
  color: var(--accion-tinta);
  font-weight: 700;
}
.barra-puerta .boton--primario {
  background: var(--plumon);
  color: var(--plumon-tinta);
}
body.con-barra-puerta {
  padding-bottom: 88px;
}
.bloqueo-resultado {
  text-align: center;
  padding: var(--e-6) var(--e-4);
  background: var(--superficie-2);
  border-radius: var(--r-l);
}

/* --- Avisos emergentes (toast) ---------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--e-5) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 80;
  max-width: calc(100vw - 2rem);
  padding: var(--e-3) var(--e-5);
  background: var(--accion);
  color: var(--accion-tinta);
  border-radius: var(--r-pill);
  font-weight: 700;
  box-shadow: var(--sombra-3);
  animation: sube var(--normal) var(--curva);
}

/* --- Bloques de página comunes --------------------------------------- */
.encabezado-pagina {
  padding-block: var(--e-6) var(--e-4);
}
.encabezado-pagina h1 {
  max-width: 22ch;
}
.cta-doble {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-5);
  align-items: center;
  margin: var(--e-5) 0;
}
/* Entrada de la página: la respuesta corta, sin caja (DESIGN §4) */
.respuesta-directa {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--tinta-2);
  max-width: 60ch;
  margin-bottom: var(--e-5);
}

/* --- Filas de enlaces (DESIGN §5): lista compacta en lugar de rejilla de tarjetas --- */
.lista-filas {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lista-filas > li {
  border-bottom: 1px solid var(--borde);
}
.lista-filas > li + li {
  margin-top: 0;
}
.lista-filas > li:first-child {
  border-top: 1px solid var(--borde);
}
@media (min-width: 760px) {
  .lista-filas--2 {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--e-6);
  }
  .lista-filas--2 > li:nth-child(2) {
    border-top: 1px solid var(--borde);
  }
}
.fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-4);
  min-height: 72px;
  padding: var(--e-3) var(--e-2);
  color: var(--tinta);
  text-decoration: none;
  border-radius: var(--r-s);
  transition: background-color var(--t-estado) var(--ease-out-quart);
}
.fila:hover {
  color: var(--tinta);
  background: color-mix(in oklch, var(--tinta) 5%, transparent);
}
.fila__icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-m);
  background: var(--superficie-2);
  color: var(--tinta);
}
.seccion--suave .fila__icono {
  background: var(--superficie);
}
.fila__texto {
  display: grid;
  gap: 2px;
}
.fila__titulo {
  font-weight: 700;
  line-height: 1.25;
}
.fila__sub {
  font-size: var(--t-ayuda);
  line-height: 1.4;
  color: var(--tinta-2);
}
.fila__flecha {
  color: var(--tinta-3);
  transition:
    transform var(--t-estado) var(--ease-out-expo),
    color var(--t-estado) var(--ease-out-quart);
}
.fila:hover .fila__flecha,
.fila:focus-visible .fila__flecha {
  color: var(--tinta);
  transform: translateX(3px);
}
.prosa {
  max-width: var(--ancho-texto);
}
.prosa h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
}
.prosa img,
.prosa svg.dibujo {
  margin-block: var(--e-4);
}
.revisado {
  font-size: var(--t-ayuda);
  color: var(--tinta-3);
}
.paso-num {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--accion);
  color: var(--accion-tinta);
  font-weight: 600;
  font-family: var(--fuente-num);
  font-size: 0.9375rem;
  flex: none;
}
.pasos-3 {
  counter-reset: paso;
  display: grid;
  gap: var(--e-4);
}
@media (min-width: 760px) {
  .pasos-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
.pasos-3 > li {
  margin: 0;
}
.pasos-3 > li:nth-child(1) {
  background: var(--tinte-menta);
}
.pasos-3 > li:nth-child(2) {
  background: var(--tinte-cielo);
}
.pasos-3 > li:nth-child(3) {
  background: var(--tinte-arena);
}
.dibujo {
  width: 100%;
  height: auto;
}

/* Botones secundarios y opciones dentro de superficies tintadas: un tono más claro para que se vean */
:is(details.plegable, .aviso, .ejemplo, .tarjeta, .aviso-uso, .jer-ficha) :is(.boton--secundario, .opcion__cara) {
  background: var(--superficie);
}
:is(details.plegable, .aviso, .ejemplo, .tarjeta, .aviso-uso, .jer-ficha) .boton--secundario:hover {
  background: var(--superficie-3);
}

/* 15-movimiento.css */
/* ==========================================================================
   Movimiento: el sitio se siente vivo, pero en calma (PRODUCT.md, principio 5).
   - Todo vive bajo html.mov: la clase solo existe si NO hay prefers-reduced-motion
     y la persona no eligió «Sin animaciones».
   - Solo transform / opacity (y sombras o filtros pequeños y aislados).
   - Curvas de salida exponenciales; nunca rebote. Herramientas: 150–250 ms.
     Contenido (portada, lecciones, wiki): revelados suaves al hacer scroll.
   ========================================================================== */

/* --- Transición entre páginas (navegadores que la soportan) ---------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}
.encabezado {
  view-transition-name: encabezado;
}
::view-transition-old(root) {
  animation: 160ms var(--ease-out-quart) both vt-salida;
}
::view-transition-new(root) {
  animation: 300ms var(--ease-out-expo) both vt-entrada;
}
:root.sin-movimiento::view-transition-old(root),
:root.sin-movimiento::view-transition-new(root) {
  animation: none;
}
@keyframes vt-salida {
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@keyframes vt-entrada {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* --- Botones: responden al cursor y al toque ------------------------------- */
.mov .boton {
  transition:
    background-color var(--t-estado) var(--ease-out-quart),
    color var(--t-estado) var(--ease-out-quart),
    box-shadow var(--t-estado) var(--ease-out-quart),
    transform var(--t-estado) var(--ease-out-expo);
}
.mov .boton:hover {
  transform: translateY(-1px);
}
.mov .boton:active {
  transform: translateY(0) scale(0.97);
  transition-duration: var(--t-press);
}
.mov .boton .icono {
  transition: transform var(--t-estado) var(--ease-out-expo);
}
.mov .boton:hover .icono:last-child:not(:first-child) {
  transform: translateX(3px);
}
.mov .boton:hover .icono:only-child {
  transform: scale(1.08);
}

/* Botón principal: un barrido del acento al pasar el cursor (estado de hover, no adorno) */
.boton--primario {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.mov .boton--primario::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    105deg,
    transparent 35%,
    color-mix(in oklch, var(--plumon) 38%, transparent) 50%,
    transparent 65%
  );
  transform: translateX(-110%);
  transition: transform 760ms var(--ease-out-expo);
  pointer-events: none;
}
.mov .boton--primario:hover::after,
.mov .boton--primario:focus-visible::after {
  transform: translateX(110%);
}
/* luz que sigue al cursor dentro del botón principal */
.mov .boton--primario::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    120px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in oklch, var(--plumon) 22%, transparent),
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--t-estado) var(--ease-out-quart);
  pointer-events: none;
}
.mov .boton--primario:hover::before {
  opacity: 1;
}

/* --- Tarjetas: se elevan y un brillo sigue al cursor ------------------------ */
.tarjeta-boton,
.tarjeta-herramienta,
.tarjeta-leccion {
  isolation: isolate;
}
.mov .tarjeta-boton::before,
.mov .tarjeta-herramienta::before,
.mov .tarjeta-leccion::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in oklch, var(--plumon) 26%, transparent),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 320ms var(--ease-out-quart);
  pointer-events: none;
}
.tarjeta-herramienta,
.tarjeta-leccion {
  position: relative;
}
.mov .tarjeta-boton:hover::before,
.mov .tarjeta-herramienta:hover::before,
.mov .tarjeta-leccion:hover::before {
  opacity: 1;
}
.mov .tarjeta-boton,
.mov .tarjeta-herramienta,
.mov .tarjeta-leccion {
  transition:
    transform 320ms var(--ease-out-expo),
    background-color var(--t-estado) var(--ease-out-quart);
}
.mov .tarjeta-boton:hover,
.mov .tarjeta-herramienta:hover,
.mov .tarjeta-leccion:hover {
  transform: translateY(-3px);
  filter: none;
}
.mov .tarjeta-boton:active,
.mov .tarjeta-herramienta:active,
.mov .tarjeta-leccion:active {
  transform: translateY(-1px) scale(0.99);
  transition-duration: var(--t-press);
}
.mov .tarjeta-boton__icono,
.mov .tarjeta-herramienta .icono {
  transition: transform 420ms var(--ease-out-expo);
}
.mov .tarjeta-boton:hover .tarjeta-boton__icono,
.mov .tarjeta-herramienta:hover .icono {
  transform: rotate(-8deg) scale(1.06);
}

/* --- Selección: la palomita aparece con un pequeño impulso ----------------- */
.mov .opcion__cara,
.mov .chip,
.mov .casilla-grande {
  transition:
    background-color var(--t-estado) var(--ease-out-quart),
    color var(--t-estado) var(--ease-out-quart),
    transform var(--t-estado) var(--ease-out-expo);
}
.mov .opcion input:active + .opcion__cara,
.mov .chip:active,
.mov .casilla-grande:active {
  transform: scale(0.98);
  transition-duration: var(--t-press);
}
.mov .opcion__marca .icono,
.mov .casilla-grande__caja .icono {
  transform: scale(0.3) rotate(-12deg);
  opacity: 0;
  transition:
    transform 320ms var(--ease-out-expo),
    opacity 160ms var(--ease-out-quart);
}
.mov .opcion input:checked + .opcion__cara .opcion__marca .icono,
.mov .casilla-grande input:checked ~ .casilla-grande__caja .icono {
  transform: scale(1) rotate(0);
  opacity: 1;
}
.mov .opcion__marca,
.mov .casilla-grande__caja {
  transition:
    background-color var(--t-estado) var(--ease-out-quart),
    box-shadow var(--t-estado) var(--ease-out-quart);
}

/* --- Campos: el foco se enciende y el error tiembla levemente --------------- */
.mov .campo {
  transition:
    box-shadow var(--t-estado) var(--ease-out-quart),
    background-color var(--t-estado) var(--ease-out-quart);
}
.mov .campo--error,
.mov .error-campo:not([hidden]) {
  animation: sacudir 380ms var(--ease-out-quart);
}
@keyframes sacudir {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(4px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
}
.mov :focus-visible {
  transition: outline-offset 160ms var(--ease-out-expo);
}

/* --- Avisos y semáforo: llegan con suavidad --------------------------------- */
.mov .aviso {
  animation: aparecer 320ms var(--ease-out-expo);
}
@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* --- Desplegables: se abren suave ------------------------------------------ */
.mov details.plegable {
  interpolate-size: allow-keywords;
}
.mov details.plegable::details-content {
  height: 0;
  overflow: clip;
  transition:
    height 360ms var(--ease-out-expo),
    content-visibility 360ms allow-discrete;
}
.mov details.plegable[open]::details-content {
  height: auto;
}
.mov details.plegable[open] > :not(summary) {
  animation: aparecer 300ms var(--ease-out-expo);
}
.mov details.plegable > summary::after {
  transition: transform 320ms var(--ease-out-expo);
}

/* --- Menú, hojas, puerta y avisos emergentes -------------------------------- */
.mov .menu[open] .menu__panel {
  transform-origin: top right;
  animation: menu-entra 240ms var(--ease-out-expo);
}
@keyframes menu-entra {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
}
.mov .menu__panel a {
  transition:
    background-color var(--t-estado) var(--ease-out-quart),
    transform var(--t-estado) var(--ease-out-expo);
}
.mov .menu__panel a:hover {
  transform: translateX(3px);
}
.mov .puerta[open] {
  animation: entrar-escala 420ms var(--ease-out-expo);
}
.mov .hoja[open] {
  animation: sube 360ms var(--ease-out-expo);
}
.mov .hoja::backdrop,
.mov .puerta::backdrop {
  animation: fundido 260ms var(--ease-out-quart);
}
@keyframes entrar-escala {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}
@keyframes fundido {
  from {
    opacity: 0;
  }
}
.mov .toast {
  animation: toast-entra 380ms var(--ease-out-expo);
}
@keyframes toast-entra {
  from {
    opacity: 0;
    transform: translate(-50%, 14px) scale(0.96);
  }
}

/* --- Encabezado: cambia al hacer scroll --------------------------------------- */
.encabezado {
  transition:
    background-color 300ms var(--ease-out-quart),
    box-shadow 300ms var(--ease-out-quart);
}
.encabezado--scroll {
  box-shadow: 0 10px 30px -22px color-mix(in oklch, var(--tinta) 45%, transparent);
}

/* --- Enlaces de texto: el subrayado se afirma al pasar --------------------- */
.mov main a:not([class]) {
  text-decoration-color: color-mix(in oklch, currentColor 40%, transparent);
  transition:
    text-decoration-color var(--t-estado) var(--ease-out-quart),
    text-underline-offset var(--t-estado) var(--ease-out-expo);
}
.mov main a:not([class]):hover {
  text-decoration-color: currentColor;
  text-underline-offset: 0.32em;
}

/* --- Logotipo: la rayita del acento crece al pasar ------------------------- */
.mov .logo .logo__plumon {
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: transform 420ms var(--ease-out-expo);
}
.mov .logo:hover .logo__plumon {
  transform: scaleY(1.25);
}

/* --- Resultado: el número llega con decisión (sin retrasarlo) --------------- */
.mov .resultado--completo .resultado__numero {
  animation: numero-entra 380ms var(--ease-out-expo);
}
@keyframes numero-entra {
  from {
    opacity: 0.2;
    transform: translateY(8px) scale(0.98);
  }
}
.mov .chip-viaje {
  transition:
    background-color var(--t-estado) var(--ease-out-quart),
    color var(--t-estado) var(--ease-out-quart),
    transform var(--t-estado) var(--ease-out-expo);
}
.mov .chip-viaje--hecho {
  animation: viaje-listo 360ms var(--ease-out-expo);
}
@keyframes viaje-listo {
  from {
    transform: scale(0.9);
  }
}

/* --- Portada: entrada escalonada (solo contenido; las herramientas no) ----- */
.mov body[data-ruta='/'] :is(.portada__texto > *, .portada__pregunta, .portada__aprender) {
  animation: subir 480ms var(--ease-out-expo) both;
}
.mov body[data-ruta='/'] .portada__pregunta {
  animation-delay: 160ms;
}
.mov body[data-ruta='/'] .portada__aprender {
  animation-delay: 360ms;
}
.mov body[data-ruta='/'] .portada__texto > :nth-child(2) {
  animation-delay: 60ms;
}
.mov body[data-ruta='/'] .portada__texto > :nth-child(3) {
  animation-delay: 120ms;
}
.mov body[data-ruta='/'] .portada__texto > :nth-child(4),
.mov body[data-ruta='/'] .portada__texto > :nth-child(5) {
  animation-delay: 180ms;
}
.mov body[data-ruta='/'] .puertas > li {
  animation: subir 480ms var(--ease-out-expo) both;
}
.mov body[data-ruta='/'] .puertas > li:nth-child(1) {
  animation-delay: 200ms;
}
.mov body[data-ruta='/'] .puertas > li:nth-child(2) {
  animation-delay: 250ms;
}
.mov body[data-ruta='/'] .puertas > li:nth-child(3) {
  animation-delay: 300ms;
}
@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
/* indicador «en vivo» junto al antetítulo de la portada */
body[data-ruta='/'] .portada .antetitulo {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
body[data-ruta='/'] .portada .antetitulo::before {
  content: '';
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--plumon);
  box-shadow: 0 0 0 0 color-mix(in oklch, var(--plumon) 70%, transparent);
}
.mov body[data-ruta='/'] .portada .antetitulo::before {
  animation: latido 2.8s var(--ease-out-quart) 1.2s infinite;
}
@keyframes latido {
  0% {
    box-shadow: 0 0 0 0 color-mix(in oklch, var(--plumon) 70%, transparent);
  }
  70%,
  100% {
    box-shadow: 0 0 0 9px color-mix(in oklch, var(--plumon) 0%, transparent);
  }
}

/* --- Contenido: revelados suaves al hacer scroll (sin JS; el texto siempre existe) */
@supports (animation-timeline: view()) {
  .mov :is(body[data-ruta='/'], body[data-ruta^='/aprende/'], body[data-ruta^='/wiki/'], body[data-ruta^='/como-hacerlo/'], body[data-ruta='/glosario/'], body[data-ruta='/preguntas-frecuentes/'], body[data-ruta='/tabla-de-concentraciones/'], body[data-ruta='/acerca/'], body[data-ruta='/metodologia/'])
    :is(.seccion > .contenedor > h2, .seccion > .contenedor--angosto > h2, .rejilla > li, .pasos-linea > li, .ejemplo, .prosa > h2, .prosa > figure, .tabla-envoltura) {
    animation: revelar linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
}
@keyframes revelar {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}

/* --- Barra lima de progreso de lectura en páginas largas ------------------- */
@supports (animation-timeline: scroll()) {
  .mov :is(body[data-ruta^='/aprende/'], body[data-ruta^='/wiki/'], body[data-ruta^='/como-hacerlo/'], body[data-ruta='/glosario/'], body[data-ruta='/preguntas-frecuentes/'], body[data-ruta='/terminos/'], body[data-ruta='/privacidad/'], body[data-ruta='/aviso-medico/'], body[data-ruta='/metodologia/'])
    .encabezado::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--plumon);
    transform-origin: left center;
    transform: scaleX(0);
    animation: progreso-lectura linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes progreso-lectura {
  to {
    transform: scaleX(1);
  }
}

/* La calculadora se recalcula al teclear: su semáforo no debe parpadear en cada tecla */
.mov .resultado--compacto .aviso {
  animation: none;
}

/* Jeringas que se llenan al aparecer: ocultas solo hasta que empieza su animación */
.mov [data-animar-jeringa]:not([data-animada]) .jeringa {
  opacity: 0;
}
.mov [data-animar-jeringa] .jeringa {
  transition: opacity 280ms var(--ease-out-quart);
}

/* 20-dibujos.css */
/* ==========================================================================
   Dibujos generados por código: jeringa, vial, botella, materiales.
   Trazo de 2 px, puntas redondas, relleno plano (DISENO.md §10.6).
   ========================================================================== */

.jeringa {
  width: 100%;
  height: auto;
  /* hidden: la copia ampliada de la lupa no debe ensanchar la página */
  overflow: hidden;
  font-family: var(--fuente-num);
}
.j-barril {
  fill: var(--agua-claro);
  fill-opacity: 0.45;
}
.j-contorno {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 2.5;
}
.jeringa--mini .j-contorno {
  stroke-width: 2;
}
.j-tapa {
  fill: var(--superficie-2);
  stroke: var(--tinta);
  stroke-width: 2;
}
.j-cono {
  fill: var(--agua-claro);
  stroke: var(--tinta);
  stroke-width: 2;
  stroke-linejoin: round;
}
.j-aletas {
  fill: var(--superficie);
  stroke: var(--tinta);
  stroke-width: 2;
}
.j-liquido {
  fill: var(--agua);
  fill-opacity: 0.78;
}
.j-varilla,
.j-pulgar {
  fill: var(--superficie);
  stroke: var(--tinta);
  stroke-width: 2;
}
.j-goma {
  fill: var(--goma);
  stroke: var(--tinta);
  stroke-width: 1.5;
}
.j-orilla {
  stroke: var(--plumon);
  stroke-width: 3;
}
.j-rayita {
  stroke: var(--tinta);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.j-rayita--larga {
  stroke-width: 2.6;
}
.jeringa--mini .j-rayita {
  stroke-width: 1.3;
}
.j-numero {
  fill: var(--tinta);
  font-size: 24px;
  font-weight: 700;
  text-anchor: middle;
}
.j-numero--final {
  font-size: 27px;
}
.j-u100 {
  fill: var(--tinta-2);
  font-size: 14px;
  font-weight: 700;
}
.j-plumon {
  fill: var(--plumon);
  opacity: 0.9;
}
.j-bandera-caja {
  fill: var(--plumon);
  stroke: var(--tinta);
  stroke-width: 2;
  stroke-linejoin: round;
}
.j-bandera-texto {
  fill: var(--plumon-tinta);
  font-size: 24px;
  font-weight: 700;
  text-anchor: middle;
}
.j-desborde {
  stroke: var(--alto);
  stroke-width: 6;
  stroke-dasharray: 10 8;
  stroke-linecap: round;
  fill: none;
}
.j-desborde-texto {
  fill: var(--alto);
  font-size: 20px;
  font-weight: 700;
}
.jeringa--desborde .j-liquido {
  fill: var(--alto);
  fill-opacity: 0.45;
}
.j-lupa-fondo {
  fill: var(--superficie);
}
.j-lupa-aro {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 4;
}
.j-lupa-hilo {
  stroke: var(--tinta);
  stroke-width: 2;
  stroke-dasharray: 4 5;
}
.jeringa--vacia .j-barril {
  fill-opacity: 0.25;
}
.j-movil,
.j-movil-solo,
.j-liquido {
  transform-box: view-box;
}

/* Contenedores de dibujo */
.lienzo-jeringa {
  position: relative;
  padding: var(--e-3) 0;
}
.lienzo-jeringa figcaption {
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
  margin-top: var(--e-2);
}

/* --- Vial y botella ------------------------------------------------------ */
.dibujo-vial,
.dibujo-botella,
.dibujo-material {
  width: 100%;
  height: auto;
  overflow: visible;
}
.v-vidrio {
  fill: var(--agua-claro);
  fill-opacity: 0.35;
  stroke: var(--tinta);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.v-casquillo {
  fill: #b9c2c0;
  stroke: var(--tinta);
  stroke-width: 2;
}
.v-tapa {
  fill: var(--tapa);
  stroke: var(--tinta);
  stroke-width: 2;
}
.v-goma {
  fill: var(--goma);
}
.v-polvo {
  fill: var(--polvo);
  stroke: var(--polvo-sombra);
  stroke-width: 1.5;
}
.v-puntito {
  fill: var(--polvo-sombra);
}
.v-liquido {
  fill: var(--agua);
  fill-opacity: 0.7;
}
.v-etiqueta {
  fill: var(--superficie);
  stroke: var(--tinta);
  stroke-width: 2;
}
.v-etiqueta-banda {
  fill: var(--accion);
}
.v-texto {
  fill: var(--tinta);
  font-family: var(--fuente);
  font-size: 14px;
  font-weight: 700;
  text-anchor: middle;
}
.v-texto--chico {
  font-size: 10px;
  font-weight: 400;
  fill: var(--tinta-2);
}
.v-texto--grande {
  font-family: var(--fuente-num);
  font-size: 22px;
}
.v-texto--claro {
  fill: var(--accion-tinta);
}
.v-tapado {
  fill: var(--tinta-3);
}
.v-plumon {
  fill: none;
  stroke: var(--plumon);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
}
.v-tachado {
  stroke: var(--tinta-3);
  stroke-width: 1.5;
}
.v-brillo {
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.7;
  fill: none;
}
.m-trazo {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.m-relleno {
  fill: var(--superficie);
  stroke: var(--tinta);
  stroke-width: 2;
  stroke-linejoin: round;
}
.m-relleno-suave {
  fill: var(--accion-suave);
  stroke: var(--tinta);
  stroke-width: 2;
  stroke-linejoin: round;
}
.m-agua {
  fill: var(--agua);
  fill-opacity: 0.6;
}

/* Plumón que se dibuja (600 ms) */
@media (prefers-reduced-motion: no-preference) {
  html:not(.sin-movimiento) .v-plumon--animado {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: trazo-plumon 600ms ease-out 150ms forwards;
  }
}
@keyframes trazo-plumon {
  to {
    stroke-dashoffset: 0;
  }
}

/* 30-paginas.css */
/* ==========================================================================
   Páginas de contenido: portada, tarjetas de lecciones y herramientas.
   ========================================================================== */

/* Texto angosto, pero alineado al mismo borde izquierdo que el encabezado de la página
   (DESIGN §4: una sola rejilla; nada de columnas angostas centradas en páginas anchas). */
.contenedor--angosto {
  width: min(100% - 2rem, var(--ancho-sitio));
  margin-inline: auto;
}
.contenedor--angosto > * {
  max-width: 46rem;
}

/* --- Portada --------------------------------------------------------- */
.portada {
  position: relative;
  display: grid;
  gap: var(--e-6);
  padding-block: var(--e-5) var(--e-7);
  align-items: center;
  isolation: isolate;
}
/* retícula de puntos muy tenue (detalle futurista) */
.portada::before {
  content: '';
  position: absolute;
  inset: -2rem calc(50% - 50vw) 0;
  z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--tinta) 14%, transparent) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 70% 40%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 70% 40%, #000 0%, transparent 75%);
  pointer-events: none;
}
.portada h1 {
  max-width: 18ch;
}
.portada__texto,
.portada__triage {
  max-width: 40rem;
}
.portada__triage > :first-child {
  margin-top: 0;
}
.portada__aprender {
  margin: var(--e-2) 0 0;
}
.portada__pregunta {
  margin-top: var(--e-6);
  font-size: var(--t-h2);
}
/* Las puertas miden lo que su contenido (sin huecos), salvo en el teléfono */
@media (min-width: 640px) {
  .portada .puertas {
    width: fit-content;
    min-width: 22rem;
    max-width: 100%;
  }
  .portada .tarjeta-boton {
    gap: var(--e-4) var(--e-5);
  }
}
/* Escritorio: la decisión (las puertas) a la derecha del título, a la vista sin bajar */
@media (min-width: 1024px) {
  .portada {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: var(--e-8);
    padding-block: var(--e-7) var(--e-8);
  }
  .portada .portada__pregunta {
    margin-top: 0;
  }
}
.tarjeta-regreso {
  margin: var(--e-5) 0 0;
  background: var(--tinte-limon);
}
.tarjeta-regreso p {
  margin-bottom: var(--e-2);
}
.tarjeta-regreso .botonera {
  margin-top: var(--e-3);
}
.tarjeta-regreso__titulo {
  font-size: var(--t-lead);
}
.ejemplo__marca {
  font-size: var(--t-h3);
  font-weight: 700;
}
.ejemplo__marca .num {
  font-size: 2.25rem;
}

/* --- Tarjetas de lección y herramienta ----------------------------- */
.tarjeta-leccion,
.tarjeta-herramienta {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  height: 100%;
  color: var(--tinta);
  text-decoration: none;
  transition:
    border-color var(--rapido) ease,
    transform var(--rapido) ease;
}
.tarjeta-leccion:hover,
.tarjeta-herramienta:hover {
  color: var(--tinta);
  filter: brightness(0.97);
  transform: translateY(-1px);
}
.tarjeta-leccion__num {
  align-self: flex-start;
  background: var(--accion);
  color: var(--accion-tinta);
  font-weight: 700;
  padding: 2px var(--e-3);
  border-radius: var(--r-pill);
}
.tarjeta-leccion__titulo {
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.2;
}
.tarjeta-leccion__meta {
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
}
.tarjeta-herramienta .icono {
  width: 44px;
  height: 44px;
  padding: 9px;
  border-radius: 50%;
  background: var(--superficie);
  color: var(--tinta);
}
.tarjeta-herramienta strong {
  font-size: var(--t-h3);
}
.tarjeta-herramienta span {
  color: var(--tinta-2);
}
.tarjeta-leccion,
.tarjeta-herramienta {
  min-height: 11rem;
}

/* Lecciones en el celular: filas compactas (número · título · duración), no tarjetas altas */
@media (max-width: 639px) {
  .tarjeta-leccion {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--e-3);
    row-gap: 2px;
    align-items: center;
    min-height: 0;
    padding: var(--e-3) var(--e-4);
    border-radius: var(--r-m);
  }
  .tarjeta-leccion__num {
    grid-row: 1 / span 2;
    align-self: center;
  }
  .tarjeta-leccion__titulo {
    font-size: var(--t-base);
  }
  .tarjeta-leccion__meta {
    font-size: var(--t-meta);
  }
  .rejilla:has(> li > .tarjeta-leccion) {
    gap: var(--e-2);
  }
}

/* --- Portada: cómo funciona, sobre una regla (los pasos son marcas de una escala) --- */
.pasos-linea {
  display: grid;
  gap: var(--e-5);
  margin: var(--e-6) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.pasos-linea > li {
  position: relative;
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--e-4);
  align-items: start;
}
.pasos-linea__num {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-m);
  background: var(--superficie);
  font-family: var(--fuente-num);
  font-weight: 600;
  font-size: 1.0625rem;
}
.pasos-linea > li:last-child .pasos-linea__num {
  background: var(--plumon);
  color: var(--plumon-tinta);
}
.pasos-linea h3 {
  margin: 0.35rem 0 var(--e-1);
  font-size: var(--t-h3);
}
.pasos-linea p {
  margin: 0;
  color: var(--tinta-2);
  max-width: 34ch;
}
@media (min-width: 900px) {
  .pasos-linea {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-6);
    padding-top: var(--e-6);
    /* la regla: una línea con rayitas, como la escala de una jeringa */
    background:
      linear-gradient(var(--tinta), var(--tinta)) left top / 100% 2px no-repeat,
      repeating-linear-gradient(90deg, var(--tinta) 0 2px, transparent 2px 24px) left 2px / 100% 10px no-repeat;
  }
  .pasos-linea > li {
    grid-template-columns: 1fr;
    row-gap: var(--e-3);
  }
  .pasos-linea__num {
    grid-row: auto;
  }
  .pasos-linea h3 {
    margin-top: 0;
  }
}

/* --- Portada: ejemplo de práctica en dos columnas ----------------------- */
.ejemplo-portada {
  display: grid;
  gap: var(--e-5);
  align-items: center;
}
.ejemplo-portada > * {
  min-width: 0;
}
.ejemplo-portada ul {
  margin-bottom: var(--e-3);
}
@media (min-width: 900px) {
  .ejemplo-portada {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--e-7);
  }
}
.seccion--ejemplo .ejemplo {
  max-width: none;
}

/* --- Portada: lo que hacemos y lo que no, en dos columnas ---------------- */
@media (min-width: 900px) {
  .lista-sino--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    gap: var(--e-3) var(--e-6);
  }
  .lista-sino--2 > li + li {
    margin-top: 0;
  }
}

/* 40-resultado.css */
/* ==========================================================================
   Resultado (DISENO.md §7 y §10.4): etiqueta de farmacia con muesca arriba,
   número grande sobre un trazo de plumón, un solo aviso, tarjetas y acciones.
   ========================================================================== */

.resultado {
  display: grid;
  gap: var(--e-5);
}
.resultado > * {
  margin: 0;
}

/* Etiqueta: borde fino de tinta y muesca semicircular arriba al centro */
.etiqueta-resultado {
  position: relative;
  display: grid;
  gap: var(--e-4);
  background: var(--superficie-2);
  border: 0;
  border-radius: var(--r-l);
  padding: var(--e-6) var(--e-5) var(--e-5);
}
/* muesca de etiqueta de farmacia, recortada en el relleno */
.etiqueta-resultado::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  width: 34px;
  height: 17px;
  transform: translateX(-50%);
  background: var(--papel);
  border-radius: 0 0 17px 17px;
}
.tarjeta .etiqueta-resultado::before {
  background: var(--superficie-2);
}
.resultado--compacto .etiqueta-resultado {
  padding: var(--e-5) var(--e-4) var(--e-4);
  gap: var(--e-3);
}

.resultado__titular {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--e-1);
  margin: 0;
  outline: none;
}
.resultado__arriba {
  font-size: var(--t-h3);
  font-weight: 700;
  color: var(--tinta-2);
}
.resultado__numero {
  font-family: var(--fuente-num);
  font-size: var(--t-numero);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  padding: 0.06em 0.22em;
  border-radius: var(--r-m);
  background: var(--plumon);
  color: var(--plumon-tinta);
}
.resultado__numero--compacto {
  font-size: 4.5rem;
}
.resultado__abajo {
  font-size: var(--t-lead);
  font-weight: 700;
}
.resultado__titular--rojo .resultado__arriba {
  color: var(--alto);
  font-size: var(--t-h2);
}
.resultado__octagono .icono {
  width: 72px;
  height: 72px;
  color: var(--alto);
}
.resultado__indicacion,
.resultado__reparto {
  text-align: center;
  color: var(--tinta-2);
  margin: 0;
}
.resultado__instruccion {
  display: grid;
  gap: var(--e-2);
  font-size: var(--t-lead);
  text-align: center;
}
.resultado__instruccion p {
  margin: 0;
}
.resultado__instruccion p:first-child {
  font-weight: 700;
}
.resultado__jeringa {
  margin: 0;
}
.resultado__jeringa figcaption {
  text-align: center;
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
  margin-top: var(--e-2);
}
.resultado__jeringa--mini {
  max-width: 34rem;
  margin-inline: auto;
  width: 100%;
}
.resultado__vacio {
  text-align: center;
  color: var(--tinta-2);
  padding: var(--e-5) var(--e-4);
  background: var(--superficie-2);
  border-radius: var(--r-l);
  min-height: 11rem;
}
.resultado__vacio .resultado__jeringa {
  opacity: 0.45;
  max-width: 28rem;
  margin: var(--e-3) auto 0;
}
.resultado__video {
  justify-content: center;
}

/* Semáforo dentro del resultado */
.semaforo p {
  margin: 0;
}
.semaforo__porque {
  margin-top: var(--e-2);
}
.semaforo__porque > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--accion);
  min-height: var(--toque-min);
  display: inline-flex;
  align-items: center;
}

/* Calibración de la escala (§7.3) */
.calibrar {
  border: 0;
  border-radius: var(--r-m);
  padding: var(--e-4);
  background: var(--tinte-limon);
}
.calibrar__intro {
  font-weight: 700;
  margin: 0;
}
.calibrar__pregunta {
  font-weight: 700;
  margin-bottom: var(--e-3);
}
.calibrar__opciones {
  display: grid;
  gap: var(--e-3);
}
@media (min-width: 560px) {
  .calibrar__opciones {
    grid-template-columns: 1fr 1fr;
  }
}
.calibrar__opcion {
  display: grid;
  gap: var(--e-2);
  justify-items: center;
  padding: var(--e-3);
  min-height: var(--toque);
  background: var(--superficie);
  color: var(--tinta);
  border: 0;
  border-radius: var(--r-m);
  font-size: var(--t-ayuda);
}
.calibrar__opcion:hover {
  background: var(--superficie-3);
}
.calibrar__svg {
  width: 100%;
  max-width: 220px;
  color: var(--tinta);
}
.calibrar__nose {
  margin: var(--e-2) 0 0;
  color: var(--cuidado);
  font-weight: 700;
}

/* Lo que significa (3 tarjetas, nunca más) */
.resultado__seccion {
  display: grid;
  gap: var(--e-3);
}
.resultado__h3 {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0;
  font-size: var(--t-h3);
}
.resultado__h3 small {
  font-weight: 400;
  color: var(--tinta-2);
}
.significa {
  display: grid;
  gap: var(--e-3);
  margin: 0;
}
@media (min-width: 760px) {
  .resultado--completo .significa {
    grid-template-columns: repeat(3, 1fr);
  }
}
.significa li + li {
  margin-top: 0;
}
.significa__tarjeta {
  background: var(--tinte-cielo);
  border: 0;
  border-radius: var(--r-m);
  padding: var(--e-3) var(--e-4);
}
.significa__tarjeta:nth-child(2) {
  background: var(--tinte-menta);
}
.significa__tarjeta:nth-child(3) {
  background: var(--tinte-arena);
}
.significa__tarjeta strong {
  display: block;
}
.significa__tarjeta span {
  color: var(--tinta-2);
  font-size: var(--t-ayuda);
}
.cuenta {
  display: grid;
  gap: var(--e-2);
  padding-left: 1.6em;
}
.cuenta li {
  margin: 0;
}

/* Cinta del plan y mezcla */
.cinta-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  font-weight: 700;
  margin: 0;
}
.mezcla__opciones {
  padding-left: 1.2em;
  margin: 0;
}
.chips-viajes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.chips-viajes li + li {
  margin-top: 0;
}
.chip-viaje {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 3.25rem;
  min-height: 44px;
  justify-content: center;
  padding: 0 var(--e-3);
  border-radius: var(--r-s);
  border: 0;
  background: var(--superficie-2);
  font-family: var(--fuente-num);
  font-weight: 700;
}
.chip-viaje small {
  font-family: var(--fuente);
  font-weight: 400;
  font-size: 0.8em;
  color: var(--tinta-2);
}
.chip-viaje--hecho {
  background: var(--accion);
  border-color: var(--accion);
  color: var(--accion-tinta);
}
.chip-viaje--hecho small {
  color: var(--accion-tinta);
}
.chip-viaje--actual {
  background: var(--plumon);
  color: var(--plumon-tinta);
}
.chip-viaje .icono {
  width: 1em;
  height: 1em;
}
.antes-de-medir {
  display: grid;
  gap: var(--e-2);
  margin: 0;
}
@media (min-width: 640px) {
  .antes-de-medir {
    grid-template-columns: 1fr 1fr;
  }
}
.antes-de-medir li {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin: 0;
}
.antes-de-medir .icono {
  width: 28px;
  height: 28px;
  color: var(--tinta);
  flex: none;
}
.pasos-carga {
  display: grid;
  gap: var(--e-2);
}

/* Acciones */
.resultado__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}
.resultado--compacto .resultado__acciones {
  justify-content: center;
}
.campo-fecha {
  min-height: var(--toque);
  padding: 0 var(--e-3);
  border: 0;
  border-radius: var(--r-m);
  background: var(--superficie-2);
  box-shadow: inset 0 -2px 0 var(--borde-control);
  font-size: var(--t-base);
}

/* --- Mezcla (componente de 5 pasos y viajes) ---------------------------- */
.mezcla {
  display: grid;
  gap: var(--e-4);
}
.mezcla__contador {
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
  font-weight: 700;
  margin: 0;
}
.mezcla__titulo {
  font-size: var(--t-h2);
  margin: 0;
  outline: none;
}
.mezcla__casillas .casilla-grande {
  margin-top: var(--e-2);
}
.mezcla__final {
  text-align: center;
  display: grid;
  gap: var(--e-3);
  justify-items: center;
}
.mezcla__palomita .icono {
  width: 72px;
  height: 72px;
  color: var(--ok);
}
.viajes {
  display: grid;
  gap: var(--e-4);
}
.viajes p {
  margin: 0;
}
.viajes__instruccion {
  font-size: var(--t-lead);
}
.viajes__listo {
  display: flex;
  gap: var(--e-2);
  align-items: center;
  color: var(--ok);
  font-size: var(--t-lead);
}
.viajes__jeringa {
  margin: 0;
}
.viajes__contador {
  font-weight: 700;
}

/* Mezcla: ayuda, carga entre rayitas (▲) y tamaño del vial (CONTENIDO §6.10 y §7.1) */
.mezcla__ayuda {
  color: var(--tinta-2);
  margin: 0 0 var(--e-4);
}
.chip-viaje--entre {
  box-shadow: inset 0 0 0 2px var(--cuidado-borde);
}
.chip-viaje__entre {
  color: var(--cuidado);
  font-size: 0.8em;
}
.chip-viaje--hecho .chip-viaje__entre,
.chip-viaje--actual .chip-viaje__entre {
  color: inherit;
}
.mezcla__linea--entre {
  color: var(--cuidado);
}
.mezcla__vial {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-m);
  background: var(--superficie-2);
  margin: var(--e-3) 0;
}
.mezcla__vial--ok {
  background: var(--ok-fondo);
}
.mezcla__vial--cuidado {
  background: var(--cuidado-fondo);
}
.mezcla__vial--alto {
  background: var(--alto-fondo);
  color: var(--alto);
}
.recordatorio a {
  white-space: nowrap;
}

/* 50-calculadora.css */
/* ==========================================================================
   Calculadoras (/calculadora/, inversa, dosis por vial) y Mis viales · equipo A.
   Minimalista: solo tokens, rellenos sólidos (sin bordes ni sombras), negro para
   actuar, lima (--plumon) solo para resaltar. Los componentes comunes (.boton,
   .campo, .aviso, .chip, .tarjeta, .opcion, .plegable) no se tocan aquí.
   ========================================================================== */

/* --- Encabezado de la herramienta (compacto: el número debe verse sin bajar) --- */
.calc-cabeza {
  padding-block: var(--e-5) var(--e-3);
}
.calc-cabeza h1 {
  margin-bottom: var(--e-2);
  max-width: 24ch;
}
.calc-linea {
  margin: 0 0 var(--e-1);
  color: var(--tinta-2);
  max-width: var(--ancho-texto);
}
.calc-respuesta {
  margin: var(--e-3) 0 var(--e-1);
  font-size: var(--t-base);
}
.calc-perdido {
  margin: 0;
  font-size: var(--t-ayuda);
}
.calc-perdido a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  color: var(--tinta-2);
}

/* --- Rejilla: una columna en el teléfono; dos en escritorio (§6.3) ------------ */
.calc-rejilla {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'memoria' 'resultado' 'modos' 'form';
}
.calc-area--memoria {
  grid-area: memoria;
  display: grid;
  gap: var(--e-3);
}
.calc-area--memoria:not(:has(> :not([hidden]))) {
  display: none;
}
.calc-area--resultado {
  grid-area: resultado;
}
.calc-area--modos {
  grid-area: modos;
}
.calc-area--form {
  grid-area: form;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .calc-rejilla {
    max-width: 40rem;
    margin-inline: auto;
  }
}
@media (min-width: 1024px) {
  .calc-rejilla {
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      'memoria resultado'
      'modos resultado'
      'form resultado';
    column-gap: var(--e-7);
    align-items: start;
    max-width: 1120px;
  }
  .calc-area--resultado {
    position: sticky;
    top: calc(var(--calc-encabezado, 60px) + var(--e-5));
    align-self: start;
    max-height: calc(100vh - var(--calc-encabezado, 60px) - var(--e-6));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* --- Memoria: banda de enlace, Mis viales e indicador «Usando: …» ---------- */
.calc-banda {
  margin: 0;
}
.calc-viales {
  display: grid;
  gap: var(--e-2);
}
.calc-viales__titulo {
  margin: 0;
  font-family: var(--fuente-num);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tinta-2);
}
.calc-viales__chips,
.calc-recientes__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}
.calc-viales__ver {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
}
.calc-boton-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: var(--toque-min);
  padding: 0 var(--e-4);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--superficie-2);
  color: var(--tinta);
  font: inherit;
  font-size: var(--t-ayuda);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition:
    background-color var(--rapido) ease,
    color var(--rapido) ease;
}
.calc-boton-chip:hover {
  background: var(--superficie-3);
}
.calc-boton-chip[aria-pressed='true'] {
  background: var(--accion);
  color: var(--accion-tinta);
}
.calc-cargado,
.calc-faltan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--e-2);
  margin: 0;
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
}
.calc-cargado .boton--enlace,
.calc-faltan .boton--enlace {
  font-size: var(--t-ayuda);
}

/* --- Tarjeta de resultado ------------------------------------------------- */
.calc-tarjeta {
  display: grid;
  gap: var(--e-3);
  scroll-margin-top: calc(var(--calc-encabezado, 60px) + var(--e-3));
}
.calc-tarjeta--parpadeo .etiqueta-resultado,
.calc-tarjeta--parpadeo .resultado__vacio {
  animation: calc-parpadeo 200ms var(--curva) 1;
}
@keyframes calc-parpadeo {
  from {
    outline: 3px solid var(--plumon);
    outline-offset: 3px;
  }
  to {
    outline: 3px solid transparent;
    outline-offset: 3px;
  }
}
/* Hueco reservado para que el número no empuje la página al cargar (CLS = 0).
   La clase html.con-ultimo la pone el script previo al pintado cuando hay historial. */
html.con-ultimo .calc--dosis .calc-resultado {
  min-height: 26rem;
}
@media (min-width: 1024px) {
  html.con-ultimo .calc--dosis .calc-resultado {
    min-height: 0;
  }
}
.calc-espera .boton {
  margin-top: var(--e-3);
}
.calc-noscript {
  margin: 0;
}
.calc-centro {
  margin: 0;
  text-align: center;
}
/* Acciones en dos columnas: la tarjeta no empuja el formulario hasta abajo */
.calc-acciones,
.calc-tarjeta .resultado__acciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-2);
}
.calc-acciones .boton,
.calc-tarjeta .resultado__acciones .boton {
  width: 100%;
  padding-inline: var(--e-3);
}
.calc-t8 {
  display: grid;
  gap: var(--e-3);
  padding: var(--e-4);
  border-radius: var(--r-m);
  background: var(--superficie-2);
}
.calc-t8__pregunta {
  margin: 0;
  font-weight: 700;
}

/* --- Pestañas de modo (enlaces con aria-current) ---------------------------- */
.calc-modos ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-1);
  margin: 0;
  padding: var(--e-1);
  border-radius: var(--r-m);
  background: var(--superficie-2);
}
.calc-modos li + li {
  margin: 0;
}
.calc-modos a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--toque-min);
  padding: var(--e-1) var(--e-2);
  border-radius: var(--r-s);
  color: var(--tinta);
  font-size: var(--t-ayuda);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--rapido) ease;
}
.calc-modos a:hover {
  background: var(--superficie-3);
  color: var(--tinta);
}
.calc-modos a[aria-current='page'] {
  background: var(--accion);
  color: var(--accion-tinta);
}

/* --- Formulario ----------------------------------------------------------- */
.calc-form {
  display: grid;
  gap: var(--e-6);
}
.calc-grupo {
  display: grid;
  gap: var(--e-3);
  min-width: 0;
}
.calc-grupo__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--e-2);
  margin-bottom: var(--e-3);
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.calc-grupo__pista {
  font-size: var(--t-ayuda);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--tinta-2);
}
.calc-subgrupo {
  display: grid;
  gap: var(--e-2);
  min-width: 0;
}
.calc-etiqueta {
  display: block;
  margin: 0 0 var(--e-2);
  font-size: var(--t-ayuda);
  font-weight: 700;
}
.calc-subgrupo > .calc-etiqueta {
  margin: 0;
}
.calc-ayuda {
  margin: 0;
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
}
.calc-nota,
.calc-enlaces,
.calc-conversion,
.calc-sugerencia {
  margin: 0;
}
.calc-nota {
  font-size: var(--t-ayuda);
  font-weight: 700;
}
.calc-otro {
  display: grid;
  gap: var(--e-3);
}
.calc-pregunta:empty {
  display: none;
}
.calc-pregunta .error-campo {
  margin: 0;
}
.calc-aviso p {
  margin: 0;
}

/* Chips: radios reales con cara de botón (48 px o más; nada elegido de inicio) */
.calc-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-2);
  margin: 0;
}
.calc-chips--2,
.calc-chips--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Las filas largas solo se abren a 4, 5 o 6 columnas si el formulario es ancho (la palomita no debe partir «10 mg») */
.calc-form {
  container-type: inline-size;
}
@container (min-width: 26rem) {
  .calc-chips--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@container (min-width: 36rem) {
  .calc-chips--6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .calc-chips--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
html.letra-grande .calc-chips--6,
html.letra-grande .calc-chips--5,
html.letra-grande .calc-chips--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.calc-chip {
  position: relative;
  display: flex;
  min-width: 0;
}
.calc-chip input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.calc-chip__cara {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  min-height: var(--toque-min);
  padding: var(--e-2);
  border-radius: var(--r-m);
  background: var(--superficie-2);
  color: var(--tinta);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  transition:
    background-color var(--rapido) ease,
    color var(--rapido) ease;
}
.calc-chip__texto {
  display: grid;
  justify-items: center;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.calc-chip__texto small {
  font-size: var(--t-ayuda);
  font-weight: 400;
  color: var(--tinta-2);
}
.calc-chip__cara .calc-chip__marca {
  display: none;
  width: 1em;
  height: 1em;
}
.calc-chip input:hover + .calc-chip__cara {
  background: var(--superficie-3);
}
.calc-chip input:focus-visible + .calc-chip__cara {
  box-shadow: var(--foco);
}
.calc-chip input:checked + .calc-chip__cara {
  background: var(--accion);
  color: var(--accion-tinta);
}
.calc-chip input:checked + .calc-chip__cara small {
  color: var(--accion-tinta);
}
.calc-chip input:checked + .calc-chip__cara .calc-chip__marca {
  display: inline-block;
  color: var(--plumon);
}

/* Interruptor (role="switch"): relleno sólido, perilla lima cuando está encendido */
.calc-interruptor {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--toque);
  padding: var(--e-2) var(--e-4);
  border-radius: var(--r-m);
  background: var(--superficie-2);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--rapido) ease;
}
.calc-interruptor:hover {
  background: var(--superficie-3);
}
.calc-interruptor input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.calc-interruptor__riel {
  position: relative;
  flex: none;
  width: 48px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--superficie-3);
  transition: background-color var(--rapido) ease;
}
.calc-interruptor__riel::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tinta-2);
  transition:
    transform var(--rapido) var(--curva),
    background-color var(--rapido) ease;
}
.calc-interruptor input:checked + .calc-interruptor__riel {
  background: var(--accion);
}
.calc-interruptor input:checked + .calc-interruptor__riel::after {
  transform: translateX(20px);
  background: var(--plumon);
}
.calc-interruptor input:focus-visible + .calc-interruptor__riel {
  box-shadow: var(--foco);
}

.calc-recientes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
}
.calc-recientes__titulo {
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
}
.calc-escala {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1) var(--e-2);
  margin: 0;
  font-size: var(--t-ayuda);
}
.calc-atajos {
  display: none;
  margin: 0;
}
@media (hover: hover) and (pointer: fine) {
  .calc-atajos {
    display: block;
  }
}

/* --- Detalle plegable: plan de mezcla, comparador, tamaño y mezcla -------- */
.calc-detalle {
  display: grid;
  gap: var(--e-2);
}
.calc-plegable {
  margin: 0;
}
.calc-plegable__cuerpo {
  display: grid;
  gap: var(--e-3);
}
.calc-plegable__cuerpo > * {
  margin: 0;
}
.calc-plan__titulo {
  font-weight: 700;
}
.calc-plan__lineas {
  display: grid;
  gap: var(--e-1);
  padding-left: 1.2em;
}
.calc-plan__lineas li + li {
  margin: 0;
}
.chip-viaje--entre .icono {
  color: var(--cuidado);
}
.calc-aviso-linea {
  margin: 0;
}
.calc-ingredientes,
.calc-ingrediente {
  display: grid;
  gap: var(--e-2);
}
.calc-total-mezcla {
  margin: 0;
  font-weight: 700;
}
.calc-tabla {
  font-variant-numeric: tabular-nums;
}
.calc-tabla .num {
  font-family: var(--fuente-num);
}
.calc-fila-actual > * {
  background: var(--plumon);
  color: var(--plumon-tinta);
}
.calc-fila-actual small {
  color: var(--plumon-tinta);
}
.calc-estado {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  font-weight: 700;
}
.calc-estado .icono {
  width: 1.1em;
  height: 1.1em;
}
.calc-estado--ok .icono {
  color: var(--ok);
}
.calc-estado--cuidado .icono {
  color: var(--cuidado);
}
.calc-estado--alto .icono {
  color: var(--alto);
}

/* --- Barra fija de instrumento (teléfono, §6.2) ----------------------------- */
.calc-barra {
  position: fixed;
  top: var(--calc-encabezado, 60px);
  left: 0;
  right: 0;
  z-index: 25;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-1) var(--e-2);
  width: 100%;
  min-height: 48px;
  padding: var(--e-1) var(--e-4);
  border: 0;
  border-radius: 0;
  background: var(--accion);
  color: var(--accion-tinta);
  font-family: var(--fuente-num);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-align: center;
  cursor: pointer;
}
.calc-barra__marca strong {
  padding: 0 0.3em;
  border-radius: var(--r-s);
  background: var(--plumon);
  color: var(--plumon-tinta);
  font-size: 1.15em;
  letter-spacing: 0.02em;
}
.calc-barra__marca--alto {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
}
.calc-barra:focus-visible {
  outline-offset: -4px;
}
html.letra-grande .calc-barra {
  position: static;
  letter-spacing: 0;
  font-size: var(--t-ayuda);
}
@media (min-width: 1024px) {
  .calc-barra {
    display: none !important;
  }
}

/* --- Dosis por vial: puntitos (máximo 100) -------------------------------- */
.calc-puntos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
}
.calc-punto {
  position: relative;
  width: 14px;
  height: 14px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--accion);
}
.calc-punto--parcial {
  background: var(--superficie-3);
}
.calc-punto--parcial::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--parte, 0.5) * 100%);
  background: var(--accion);
}

/* --- Hojas propias: atajos, enlace y calibración ------------------------- */
.calc-atajos-lista {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-2) var(--e-4);
  margin: 0;
}
.calc-atajos-lista dt {
  font-weight: 700;
}
.calc-atajos-lista dd {
  margin: 0;
  color: var(--tinta-2);
}
.calc-enlace-vista {
  margin: var(--e-3) 0;
  padding: var(--e-3);
  border-radius: var(--r-s);
  background: var(--superficie-2);
  font-size: var(--t-meta);
  overflow-wrap: anywhere;
}
.calc-tramo__cuerpo {
  fill: var(--superficie-2);
  stroke: var(--tinta);
  stroke-width: 2;
}
.calc-tramo__raya {
  stroke: var(--tinta);
  stroke-width: 2;
  stroke-linecap: round;
}
.calc-tramo__raya--larga {
  stroke-width: 3;
}
.calc-tramo__num {
  fill: var(--tinta);
  font-family: var(--fuente-num);
  font-size: 16px;
  font-weight: 700;
  text-anchor: middle;
}

/* --- Contenido indexable debajo de la herramienta -------------------------- */
.calc-contenido {
  padding-block: var(--e-6);
}
.calc-contenido h2 {
  margin-top: 0;
}
.calc-formula {
  display: grid;
  gap: var(--e-2);
  padding-left: 1.4em;
  font-family: var(--fuente-num);
  font-size: var(--t-ayuda);
}
.calc-formula li + li {
  margin: 0;
}
.calc-ejemplo__marca {
  font-size: var(--t-h3);
  font-weight: 700;
}
.calc-ejemplo__marca .num {
  font-size: 2.25rem;
}
.calc-ejemplo__jeringa {
  margin: var(--e-4) 0 0;
}
.calc-ejemplo__jeringa figcaption {
  margin-top: var(--e-2);
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
  text-align: center;
}
.calc-enlaces-lista {
  display: grid;
  gap: var(--e-1);
  margin: 0;
}
.calc-enlaces-lista li + li {
  margin: 0;
}
.calc-enlaces-lista a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
}
.calc-sello-comparacion {
  font-family: var(--fuente-num);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

/* --- Mis viales ----------------------------------------------------------- */
.mv-lista {
  display: grid;
  gap: var(--e-4);
}
.mv-vial {
  display: grid;
  gap: var(--e-3);
  padding: var(--e-5);
  border-radius: var(--r-l);
  background: var(--superficie-2);
}
.mv-vial > * {
  margin: 0;
}
.mv-vial__titulo {
  font-size: var(--t-h2);
}
.mv-vial__datos,
.mv-vial__fecha {
  color: var(--tinta-2);
}
.mv-vial__fecha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--e-2);
}
.mv-marca {
  font-size: var(--t-h3);
  font-weight: 700;
}
.mv-marca .num {
  font-size: 1.6em;
}
.mv-revisa {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: 700;
  color: var(--alto);
}
.mv-fecha-editor,
.mv-contador {
  display: grid;
  gap: var(--e-2);
  justify-items: start;
}
.mv-contador .calc-interruptor {
  background: var(--superficie);
}
.mv-contador__linea,
.mv-contador__fin {
  margin: 0;
}
.mv-contador__linea {
  font-weight: 700;
}
.mv-contador__fin {
  color: var(--tinta-2);
}
.mv-vacio {
  display: grid;
  gap: var(--e-3);
}
.mv-vacio > * {
  margin: 0;
}
.mv-borrar {
  margin-top: var(--e-6);
}

/* 60-asistente.css */
/* ==========================================================================
   Asistente «Paso a paso» y «Primera vez» (DISENO.md §5 y §10.7–10.8).
   Plantilla tipo cajero: barra de arriba con el paso, dibujo grande, una pregunta,
   opciones grandes y barra de abajo con «Elegiste: …» + [Siguiente →].
   Solo tokens: superficies --superficie-2/3, negro (--accion) para actuar y lima
   (--plumon) solo para resaltar. Sin bordes decorativos, sin sombras, sin degradados.
   Los componentes comunes (.opcion, .campo, .aviso, .boton, .chip…) NO se redefinen aquí.
   ========================================================================== */

body.pagina-asistente .encabezado {
  /* La barra del cajero es la que se queda fija arriba */
  position: relative;
}

.asis-app {
  --asis-ancho: 40rem;
  --asis-margen: max(1rem, calc((100% - var(--asis-ancho)) / 2));
  position: relative;
  width: 100%;
}

/* Mientras el JS convierte el formulario en pantallas (o si no carga, a los 2.5 s se ve todo) */
html.js .asis-app:not(.asis-app--lista) .asis-form {
  opacity: 0;
  animation: asis-revelar 0s linear 2.5s forwards;
}
@keyframes asis-revelar {
  to {
    opacity: 1;
  }
}

.asis-app--js {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin-bottom: var(--e-6);
}

/* --- Barra de arriba ---------------------------------------------------- */
.asis-arriba {
  position: sticky;
  top: 0;
  z-index: 25;
  background: var(--papel);
  padding: var(--e-2) var(--asis-margen) var(--e-3);
}
.asis-arriba__fila {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--toque-min);
}
.asis-atras {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: var(--toque-min);
  min-width: var(--toque-min);
  padding: 0 var(--e-4) 0 var(--e-3);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--superficie-2);
  color: var(--tinta);
  font-weight: 600;
  font-size: var(--t-ayuda);
  -webkit-tap-highlight-color: transparent;
}
.asis-atras:hover {
  background: var(--superficie-3);
}
.asis-arriba__texto {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--fuente-num);
  font-size: var(--t-meta);
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tinta-2);
}
.asis-puntos {
  display: flex;
  gap: 6px;
  margin: var(--e-2) 0 0;
  padding: 0;
  list-style: none;
}
.asis-puntos__punto {
  flex: 1;
  height: 4px;
  margin: 0;
  border-radius: var(--r-pill);
  background: var(--superficie-3);
}
.asis-puntos li + li {
  margin-top: 0;
}
.asis-puntos__punto--hecho,
.asis-puntos__punto--actual {
  background: var(--accion);
}
.asis-banda {
  margin: var(--e-2) 0 0;
  padding: 2px var(--e-3);
  border-radius: var(--r-s);
  background: var(--plumon);
  color: var(--plumon-tinta);
  font-family: var(--fuente-num);
  font-size: var(--t-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  transform: rotate(-1.2deg);
}

/* --- Dibujo grande (máximo 34vh; es lo primero que se encoge) --------------- */
.asis-dibujo {
  display: block;
  width: min(100% - 2rem, var(--asis-ancho));
  height: min(34vh, 17rem);
  margin: 0 auto var(--e-4);
  padding: var(--e-4);
  border-radius: var(--r-l);
  background: var(--superficie-2);
  overflow: hidden;
}
/* El SVG ocupa toda la caja y se centra solo (preserveAspectRatio «meet») */
.asis-dibujo > svg,
.asis-dibujo-doble svg {
  display: block;
  width: 100%;
  height: 100%;
}
.asis-dibujo-doble {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 100%;
  gap: var(--e-4);
  align-items: center;
  width: 100%;
  height: 100%;
}
.asis-dibujo-doble--vial-botella {
  grid-template-columns: 1fr 1fr;
}
.asis-dibujo-doble > div {
  height: 100%;
  min-width: 0;
}

/* --- La pantalla (una sola pregunta) ------------------------------------ */
.asis-pantalla {
  flex: 1 0 auto;
  width: min(100% - 2rem, var(--asis-ancho));
  margin-inline: auto;
  padding-bottom: var(--e-5);
}
.asis-pantalla > :last-child {
  margin-bottom: 0;
}
.asis-pregunta {
  scroll-margin-top: 6rem;
}
.asis-pregunta--b {
  font-size: var(--t-h2);
  margin-top: var(--e-5);
}
.asis-titulo {
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--e-3);
  outline: none;
  text-wrap: balance;
}
.asis-texto {
  font-size: var(--t-lead);
  color: var(--tinta-2);
}
.asis-texto--grande {
  color: var(--tinta);
}
.asis-texto-chico {
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
}
.asis-bloque {
  margin-bottom: var(--e-4);
}
.asis-grupo + .asis-grupo,
.asis-bloque + .asis-grupo {
  margin-top: var(--e-4);
}
.asis-opciones {
  margin-bottom: var(--e-3);
}
.asis-campo {
  margin: var(--e-3) 0;
}
.asis-error {
  margin: var(--e-3) 0;
}
.asis-error:empty {
  display: none;
}
.asis-aviso {
  outline: none;
}
.asis-nota {
  color: var(--tinta-2);
}
.asis-volver {
  margin: var(--e-2) 0 0;
}
.asis-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--e-5);
  margin: var(--e-4) 0 0;
  padding: 0;
  list-style: none;
}
.asis-enlaces li + li {
  margin-top: 0;
}
.asis-enlaces .icono {
  margin-right: var(--e-1);
}

/* Lista de los 5 pasos (#inicio y la versión sin JS) */
.asis-lista-pasos {
  display: grid;
  gap: var(--e-2);
  margin: var(--e-4) 0;
  padding: 0;
  list-style: none;
}
.asis-lista-pasos li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: start;
  margin: 0;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-m);
  background: var(--superficie-2);
}
.asis-lista-pasos__num {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-pill);
  background: var(--accion);
  color: var(--accion-tinta);
  font-size: var(--t-meta);
  font-weight: 600;
}

/* Paso 1: mezcla */
.asis-mezcla {
  margin-top: var(--e-2);
}
.asis-ingredientes {
  display: grid;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.asis-ingrediente {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--e-2);
  margin: 0;
}
.asis-ingrediente .asis-campo {
  margin: 0;
}
.asis-quitar {
  margin-bottom: 4px;
}
.asis-suma {
  font-weight: 600;
  min-height: 1.5em;
  margin: var(--e-2) 0;
}

/* Paso 2 */
.asis-recientes .chips {
  margin-top: var(--e-2);
}
.asis-minitarjeta {
  margin: var(--e-3) 0 0;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-m);
  background: var(--superficie-2);
  font-size: var(--t-ayuda);
}
.asis-recordatorio {
  margin-bottom: var(--e-2);
}

/* Paso 3: tarjetas con su minijeringa a escala relativa (debajo del número, a lo ancho) */
.asis-opcion-jeringa .opcion__cara {
  flex-wrap: wrap;
}
.asis-opcion-jeringa .opcion__texto {
  font-family: var(--fuente-num);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
}
.asis-opcion-jeringa .opcion__texto small {
  font-family: var(--fuente);
  font-size: var(--t-ayuda);
  margin-top: 2px;
}
.asis-minijeringa {
  display: block;
  order: 3;
  flex: 1 0 100%;
  margin: 0;
  padding-left: calc(26px + var(--e-3));
}
.asis-minijeringa svg {
  width: var(--ancho, 100%);
  height: auto;
}
.asis-nose {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  min-height: var(--toque);
  margin: 0 0 var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 0;
  border-radius: var(--r-m);
  background: transparent;
  color: var(--tinta);
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1.5px;
}
.asis-nose:hover {
  background: var(--superficie-2);
}

/* Paso 4 */
.asis-opcion-dibujo .opcion__cara {
  align-items: center;
}
.asis-opcion-dibujo__svg {
  flex: none;
  width: 2.5rem;
  height: 3.5rem;
}
.asis-opcion-dibujo__svg svg {
  width: 100%;
  height: 100%;
}
.asis-b[hidden] {
  display: none;
}
.asis-linea-fija {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  margin: var(--e-4) 0;
  font-weight: 600;
}
.asis-consecuencia {
  min-height: 1.5em;
  margin: var(--e-2) 0 0;
}
.asis-cons {
  display: block;
}
.asis-cons:empty {
  display: none;
}
.asis-consecuencia .opcion__consecuencia {
  font-size: var(--t-ayuda);
}
.asis-sello {
  display: inline-block;
  margin: var(--e-2) 0 0;
  padding: 2px var(--e-3);
  border-radius: var(--r-s);
  background: var(--plumon);
  color: var(--plumon-tinta);
  font-family: var(--fuente-num);
  font-size: var(--t-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transform: rotate(-2deg);
}
.asis-tamano {
  margin: 0 0 var(--e-2);
  padding: var(--e-3);
  border-radius: var(--r-m);
  background: var(--superficie);
}
.asis-tamano legend {
  float: left;
  width: 100%;
  margin-bottom: var(--e-3);
}
.asis-tamano legend + * {
  clear: both;
}
.asis-opciones--chicas {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr));
}

/* Paso 5: Revisa */
.asis-revisa {
  display: grid;
  gap: var(--e-2);
  margin: var(--e-4) 0;
  padding: 0;
  list-style: none;
}
.asis-revisa__fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-3);
  margin: 0;
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4);
  border-radius: var(--r-m);
  background: var(--superficie);
}
.asis-revisa__icono {
  color: var(--tinta-2);
}
.asis-revisa__etiqueta {
  display: block;
  font-family: var(--fuente-num);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tinta-2);
}
.asis-revisa__texto strong {
  font-size: var(--t-lead);
}
.asis-revisa__extra {
  color: var(--tinta-2);
  font-size: var(--t-ayuda);
}

/* Modo práctica */
.asis-practica-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--e-4);
  margin: 0 0 var(--e-4);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-m);
  background: var(--plumon-suave);
  color: var(--tinta);
}
.asis-practica-aviso p {
  margin: 0;
  font-weight: 600;
}
.asis-app--practica [data-accion='guardar'] {
  display: none !important;
}

/* ALTO (mano abierta tranquila; nunca roja) */
.asis-alto__botones {
  margin-top: var(--e-5);
}
.asis-app[data-pantalla^='alto-'] .asis-dibujo svg {
  color: var(--tinta);
}

/* --- Barra de abajo («Elegiste: …» + [Siguiente →], siempre activo) -------- */
.asis-abajo {
  position: sticky;
  bottom: 0;
  z-index: 25;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e-2) var(--e-3);
  margin-top: auto;
  padding: var(--e-3) var(--asis-margen) calc(var(--e-3) + env(safe-area-inset-bottom));
  background: var(--papel);
}
.asis-abajo[hidden] {
  display: none;
}
.asis-abajo__eleccion {
  flex: 1 1 10rem;
  min-width: 0;
  margin: 0;
  font-size: var(--t-ayuda);
  line-height: 1.3;
}
.asis-abajo__etiqueta {
  display: block;
  font-family: var(--fuente-num);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tinta-2);
}
.asis-abajo__eleccion strong {
  font-weight: 700;
}
.asis-abajo__vacio {
  color: var(--tinta-2);
}
.asis-abajo__botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--e-2);
  margin-left: auto;
}
.asis-abajo .boton {
  min-height: var(--toque);
}
.asis-boton {
  min-width: 9rem;
}

/* --- Hojas inferiores (dónde encuentro esto, etiqueta y jeringa diferentes) --- */
.hoja__asa {
  width: 40px;
  height: 4px;
  margin: 0 auto var(--e-3);
  border-radius: var(--r-pill);
  background: var(--superficie-3);
}
.asis-hoja__dibujo {
  height: 10rem;
  margin: 0 0 var(--e-3);
  padding: var(--e-3);
  border-radius: var(--r-m);
  background: var(--superficie-2);
}
.asis-hoja__dibujo--chico {
  height: 8rem;
}
.asis-hoja__dibujo svg {
  width: 100%;
  height: 100%;
}
.asis-hoja__fuerte {
  font-weight: 700;
}
.asis-hoja__opciones {
  display: grid;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.asis-hoja__opciones li {
  margin: 0;
}
.asis-hoja__opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  width: 100%;
  min-height: var(--toque);
  padding: var(--e-3) var(--e-4);
  border: 0;
  border-radius: var(--r-m);
  background: var(--superficie-2);
  color: var(--tinta);
  font-weight: 600;
  text-align: left;
}
.asis-hoja__opcion:hover {
  background: var(--superficie-3);
}
.asis-hoja__aviso {
  margin-top: var(--e-2);
  outline: none;
}
.asis-tachados s {
  color: var(--tinta-3);
}
.asis-microclip {
  margin: var(--e-3) 0;
  padding: var(--e-3);
  border-radius: var(--r-m);
  background: var(--superficie-2);
}
.asis-microclip:empty {
  display: none;
}
.asis-microclip svg {
  width: 100%;
  height: auto;
  max-height: 12rem;
}
.asis-carrusel__pista {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--r-l);
}
.asis-carrusel__pista::-webkit-scrollbar {
  display: none;
}
.asis-carrusel__item {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  padding: var(--e-6) var(--e-4) var(--e-3);
  scroll-snap-align: center;
  background: var(--superficie-2);
  text-align: center;
}
.asis-carrusel__item + .asis-carrusel__item {
  margin-top: 0;
}
.asis-carrusel__item .sello-ejemplo {
  top: var(--e-2);
  right: var(--e-2);
}
.asis-carrusel__dibujo {
  height: 12rem;
}
.asis-carrusel__dibujo svg {
  width: 100%;
  height: 100%;
}
.asis-carrusel__pie {
  margin: var(--e-2) 0 0;
  font-weight: 600;
}
.asis-carrusel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  margin: var(--e-2) 0 var(--e-3);
}

/* --- Resultado: «¿Practicamos?» y «¿Te quedó claro?» ------------------------ */
.asis-resultado__sello {
  margin: 0 0 var(--e-4);
  text-align: center;
}
.asis-resultado__sello span {
  display: inline-block;
  padding: 2px var(--e-3);
  border-radius: var(--r-s);
  background: var(--plumon);
  color: var(--plumon-tinta);
  font-family: var(--fuente-num);
  font-size: var(--t-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transform: rotate(-1.5deg);
}
.asis-resultado__extras {
  display: grid;
  gap: var(--e-5);
}
.asis-resultado__extras section {
  display: grid;
  gap: var(--e-3);
  padding: var(--e-4);
  border-radius: var(--r-l);
  background: var(--superficie);
}
.asis-resultado__extras section[hidden] {
  display: none;
}
.asis-resultado__extras p {
  margin: 0;
}
.asis-practicar__lienzo {
  padding: var(--e-3);
  border-radius: var(--r-m);
  background: var(--superficie-2);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.asis-practicar__lienzo svg {
  width: 100%;
  height: auto;
}
.asis-cursor__linea {
  stroke: var(--tinta);
  stroke-width: 3;
  stroke-dasharray: 6 5;
}
.asis-cursor__punta {
  fill: var(--tinta);
}
.asis-practicar__respuesta {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  min-height: 1.5em;
  font-weight: 600;
}
.asis-practicar__respuesta--bien .icono {
  color: var(--ok);
}
.asis-claro [aria-pressed='true'] {
  background: var(--accion);
  color: var(--accion-tinta);
}
.asis-claro__si {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  font-weight: 600;
  outline: none;
}
.asis-claro__si .icono {
  color: var(--ok);
}
.asis-claro__pregunta {
  font-weight: 700;
  outline: none;
}
.asis-claro__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: var(--e-2) 0 0;
  padding: 0;
  list-style: none;
}
.asis-claro__opciones li {
  margin: 0;
}
.asis-resultado__salir {
  text-align: center;
}
.asis-cargando {
  min-height: 50vh;
}

/* --- Mezclar ---------------------------------------------------------------- */
.asis-casillas .casilla-grande:first-child {
  margin-top: var(--e-2);
}
.asis-subgrupo {
  margin: 0;
  padding-left: var(--e-5);
}
.asis-subgrupo[hidden] {
  display: none;
}
.asis-sublegend {
  margin-bottom: var(--e-2);
  font-weight: 700;
}
.asis-final {
  display: grid;
  justify-items: start;
  gap: var(--e-3);
  padding-top: var(--e-5);
}
.asis-palomita {
  width: 4.5rem;
  height: 4.5rem;
}
.asis-palomita__aro {
  fill: var(--plumon);
}
.asis-palomita__trazo {
  fill: none;
  stroke: var(--plumon-tinta);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: asis-trazo 400ms ease-out 120ms forwards;
}
@keyframes asis-trazo {
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .asis-palomita__trazo {
    animation: none;
    stroke-dashoffset: 0;
  }
}
.sin-movimiento .asis-palomita__trazo {
  animation: none;
  stroke-dashoffset: 0;
}

/* --- Primera vez ------------------------------------------------------------ */
.asis-materiales {
  display: grid;
  gap: var(--e-2);
}
.asis-material {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  margin: 0;
}
.asis-material__dibujo {
  width: 3.25rem;
  height: 3.25rem;
}
.asis-material__dibujo svg {
  width: 100%;
  height: 100%;
}
.asis-faltas {
  margin-top: var(--e-4);
  padding: var(--e-4);
  border-radius: var(--r-m);
  background: var(--superficie-2);
  outline: none;
}
.asis-faltas__lista {
  display: grid;
  gap: var(--e-2);
  margin: 0 0 var(--e-3);
  padding: 0;
  list-style: none;
}
.asis-faltas__lista li {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  margin: 0;
}
.asis-faltas__cierre {
  margin: 0;
  font-weight: 700;
}
.asis-leccion,
.leccion.asis-leccion {
  display: grid;
  gap: var(--e-3);
  justify-items: center;
  margin: var(--e-3) 0;
  padding: var(--e-4);
  border-radius: var(--r-l);
  background: var(--superficie-2);
  text-align: center;
}
.asis-leccion__poster {
  width: 100%;
  height: 11rem;
}
.asis-leccion__poster svg {
  width: 100%;
  height: 100%;
}
.asis-leccion__pie {
  font-family: var(--fuente-num);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tinta-2);
}
.asis-leccion__pie strong {
  color: var(--tinta);
}
.asis-leccion__accion {
  margin: 0;
}
.asis-leccion__listo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-weight: 700;
  outline: none;
}
.asis-leccion__listo .asis-palomita {
  width: 3rem;
  height: 3rem;
}
.asis-transcripcion__titulo {
  margin-top: var(--e-5);
}

/* --- Página sin JavaScript: el formulario completo, legible ------------------ */
.asis-form {
  width: min(100% - 2rem, var(--asis-ancho));
  margin-inline: auto;
}
.asis-app--js .asis-form {
  width: min(100% - 2rem, var(--asis-ancho));
}
.asis-estatico {
  margin: 0 0 var(--e-6);
  padding: var(--e-5);
  border-radius: var(--r-l);
  background: var(--superficie);
}
.asis-estatico > legend {
  float: left;
  width: 100%;
  margin-bottom: var(--e-2);
}
.asis-estatico > legend + * {
  clear: both;
}
.asis-estatico__dibujo {
  height: 10rem;
  margin: var(--e-3) 0;
}
.asis-estatico__dibujo--chico {
  height: 7rem;
}
.asis-estatico__dibujo svg {
  width: 100%;
  height: 100%;
}
.asis-estatico__dibujo--doble {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100%;
  gap: var(--e-3);
}
.asis-estatico__dibujo--doble > div {
  height: 100%;
}
.asis-estatico__etiquetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--e-3);
  margin-bottom: var(--e-3);
}
.asis-estatico__etiqueta {
  position: relative;
  margin: 0;
  padding: var(--e-6) var(--e-3) var(--e-3);
  border-radius: var(--r-m);
  background: var(--superficie);
  text-align: center;
}
.asis-estatico details .asis-estatico__etiqueta {
  background: var(--superficie);
}
.asis-estatico__etiqueta .sello-ejemplo {
  top: var(--e-2);
  right: var(--e-2);
}
.asis-estatico__etiqueta svg {
  width: 100%;
  height: 9rem;
}
.asis-estatico__b {
  margin: var(--e-5) 0;
  padding: 0;
}
.asis-estatico__b > legend {
  float: left;
  width: 100%;
  margin-bottom: var(--e-2);
  font-weight: 700;
}
.asis-estatico__b > legend + * {
  clear: both;
}
.asis-estatico__significa {
  padding-left: 1.2em;
}
.asis-porque {
  margin-bottom: var(--e-5);
}
.asis-noscript {
  margin-bottom: var(--e-6);
  padding: var(--e-5);
  border-radius: var(--r-l);
  background: var(--superficie-2);
}
.asis-enlaces-lista li + li {
  margin-top: var(--e-2);
}

/* --- Tableta: una columna centrada ------------------------------------------ */
@media (min-width: 768px) {
  .asis-dibujo {
    height: min(34vh, 18rem);
  }
}

/* --- Escritorio (1024 px o más): dos columnas dentro de 960 px --------------- */
@media (min-width: 1024px) {
  .asis-app--js {
    display: grid;
    grid-template-columns: 27.5rem minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: var(--e-7);
    align-content: start;
    width: min(100% - 4rem, 60rem);
    min-height: 0;
    margin-inline: auto;
  }
  .asis-arriba {
    grid-column: 1 / -1;
    padding-inline: 0;
  }
  .asis-dibujo {
    grid-column: 1;
    grid-row: 2 / span 2;
    align-self: start;
    position: sticky;
    top: 7rem;
    width: 100%;
    height: 26rem;
    margin: var(--e-3) 0 0;
  }
  .asis-pantalla,
  .asis-app--js .asis-form {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    margin: var(--e-3) 0 0;
  }
  .asis-abajo {
    grid-column: 2;
    grid-row: 3;
    position: static;
    justify-content: flex-start;
    padding-inline: 0;
    background: none;
  }
  .asis-abajo__botones {
    margin-left: 0;
  }
  .asis-app--sin-dibujo .asis-pantalla,
  .asis-app--sin-dibujo.asis-app--js .asis-form,
  .asis-app--sin-dibujo .asis-abajo {
    grid-column: 1 / -1;
  }
  .asis-app--sin-dibujo .asis-pantalla {
    max-width: 46rem;
  }
}

/* --- Pantallas bajas: el dibujo se encoge y luego se oculta ------------------ */
@media (max-height: 700px) {
  .asis-dibujo {
    height: 22vh;
  }
}
@media (max-height: 520px) {
  .asis-dibujo {
    display: none;
  }
}

/* --- Letra grande: nada fijo, dibujo chico (u oculto) y opciones en una columna --- */
:root.letra-grande .asis-arriba,
:root.letra-grande .asis-abajo {
  position: static;
}
:root.letra-grande .asis-app--js {
  min-height: 0;
}
:root.letra-grande .asis-arriba__texto {
  white-space: normal;
}
:root.letra-grande .asis-dibujo {
  height: 22vh;
}
:root.letra-grande .asis-app .opciones {
  grid-template-columns: 1fr;
}
:root.letra-grande .asis-revisa__fila {
  grid-template-columns: minmax(0, 1fr);
}
:root.letra-grande .asis-revisa__icono {
  display: none;
}
@media (max-height: 820px) {
  :root.letra-grande .asis-dibujo {
    display: none;
  }
}

/* --- Impresión: sin barras ni dibujos del asistente --------------------------- */
@media print {
  .asis-arriba,
  .asis-abajo,
  .asis-dibujo {
    display: none !important;
  }
}

/* 70-lecciones.css */
/* ==========================================================================
   Lecciones (equipo C): reproductor, escenario SVG, transcripción, páginas
   /aprende/ y microclips. Solo tokens del sitio; rellenos sólidos, sin bordes
   decorativos ni sombras (salvo el menú flotante); lima (--plumon) solo para
   resaltar lo que hay que mirar. Prefijos: .reproductor, .leccion, .transcripcion,
   .rep-, .e- (dibujos del escenario), .a- (ganchos de animación), .mc- (microclips).
   ========================================================================== */

/* --- Etiqueta tipo instrumento (reutilizable dentro de lecciones) -------- */
.leccion__meta,
.reproductor__tiempo,
.reproductor__tarjeta-num,
.transcripcion__cabeza,
.tarjeta-lec__num,
.sello-mini {
  font-family: var(--fuente-num);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   Página de lección
   ========================================================================== */
.leccion-bloque {
  display: grid;
  gap: var(--e-5);
  margin-block: var(--e-5) var(--e-6);
  align-items: start;
}
@media (min-width: 1024px) {
  .leccion-bloque {
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    gap: var(--e-6);
  }
  .leccion-bloque > .transcripcion {
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: var(--e-2);
  }
}
.leccion {
  margin: 0;
  min-width: 0;
}
.leccion__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-4);
  margin-top: var(--e-3);
  font-size: var(--t-ayuda);
}
.leccion__nombre {
  font-weight: 700;
}
.leccion__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  font-size: var(--t-meta);
  color: var(--tinta-2);
}
.leccion__vista {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 2px var(--e-3);
  border-radius: var(--r-pill);
  background: var(--plumon);
  color: var(--plumon-tinta);
  font-size: var(--t-meta);
  font-weight: 700;
}
.leccion__vista[hidden] {
  display: none;
}
.leccion-herramientas,
.leccion-guia,
.leccion-aprendiste,
.leccion-repaso,
.leccion-siguiente,
.leccion-fuentes {
  margin-block: var(--e-6);
}
.leccion-herramientas > :first-child,
.leccion-guia > :first-child {
  margin-top: 0;
}
.leccion-siguiente .botonera {
  margin-bottom: var(--e-3);
}
.lista-aprendiste {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--e-3);
}
.lista-aprendiste li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: start;
  margin: 0;
}
.lista-aprendiste .icono {
  width: 28px;
  height: 28px;
  padding: 4px;
  border-radius: 50%;
  background: var(--plumon);
  color: var(--plumon-tinta);
}
.lista-fuentes li {
  color: var(--tinta-2);
}
.pasos-leccion {
  padding-left: 1.6em;
}
.pasos-leccion li {
  margin: 0 0 var(--e-3);
  padding-left: var(--e-1);
}
.pasos-leccion li::marker {
  font-family: var(--fuente-num);
  font-weight: 700;
}
.tarjeta-alto {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--e-4);
  align-items: center;
  margin-block: var(--e-5);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-l);
  background: var(--superficie-2);
}
.tarjeta-alto p {
  margin: 0;
}
.etiquetas-ejemplo {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}
.etiqueta-ejemplo {
  width: 100%;
  height: auto;
}
.jeringas-guia {
  display: grid;
  gap: var(--e-3);
  margin-block: var(--e-4);
}
.dibujo-error {
  margin: var(--e-3) 0 var(--e-4);
  max-width: 22rem;
}
.dibujo-error .escenario {
  border-radius: var(--r-l);
}
.ejemplo-linea {
  font-family: var(--fuente-num);
  font-size: var(--t-ayuda);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-s);
  background: var(--superficie-2);
}
.sello-mini {
  display: inline-block;
  margin-right: var(--e-2);
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--accion);
  color: var(--accion-tinta);
  font-size: 0.75rem;
  vertical-align: 0.1em;
}
.con-mis-numeros {
  margin-block: var(--e-5);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-l);
  background: var(--superficie-2);
}
.con-mis-numeros > :last-child {
  margin-bottom: 0;
}

/* --- Convertidores (L2 y L3) ------------------------------------------- */
.convertidor {
  margin-block: var(--e-4) var(--e-5);
  padding: var(--e-5);
  border-radius: var(--r-l);
  background: var(--superficie-2);
}
.convertidor__titulo {
  margin: 0 0 var(--e-1);
  font-weight: 700;
}
.convertidor__campos {
  display: grid;
  gap: var(--e-3);
  align-items: end;
}
.convertidor__campo {
  display: block;
  min-width: 0;
}
.convertidor__flechas {
  justify-self: center;
  color: var(--tinta-2);
}
@media (min-width: 560px) {
  .convertidor__campos {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
  .convertidor__flechas {
    padding-bottom: 18px;
  }
}
.convertidor__salida {
  min-height: 1.6em;
  margin: var(--e-3) 0 0;
  font-weight: 600;
}

/* --- Planificador de viajes (L4) --------------------------------------- */
.planificador {
  margin-block: var(--e-5);
  padding: var(--e-5);
  border-radius: var(--r-l);
  background: var(--superficie-2);
}
.planificador h2 {
  margin-top: 0;
}
.planificador__form .campo {
  max-width: 14rem;
}
.planificador__jeringas {
  margin-top: var(--e-4);
}
.planificador__opciones {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.planificador__viajes,
.planificador__pasos {
  margin-top: var(--e-5);
}
.planificador__usados[hidden] {
  display: none;
}

/* --- Lista imprimible (L4) y casillas para palomear -------------------- */
.lista-imprimible {
  margin-block: var(--e-5);
  padding: var(--e-5);
  border-radius: var(--r-l);
  background: var(--superficie-2);
}
.lista-imprimible h2 {
  margin-top: 0;
}
.lista-casillas {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--e-2);
}
.lista-casillas li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: start;
  margin: 0;
}
.lista-casillas__caja {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border-radius: 6px;
  background: var(--superficie);
  box-shadow: inset 0 0 0 2px var(--tinta-2);
}

/* --- Repaso (página y final del reproductor) --------------------------- */
.repaso__pregunta {
  font-size: var(--t-lead);
  font-weight: 700;
  margin-bottom: var(--e-1);
}
.repaso__nota {
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
}
.repaso__opciones {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--e-2);
  margin: var(--e-3) 0;
}
.repaso__opciones li {
  margin: 0;
}
.repaso__opcion {
  width: 100%;
  min-height: var(--toque);
  padding: var(--e-2) var(--e-4);
  border: 0;
  border-radius: var(--r-m);
  background: var(--superficie-2);
  color: var(--tinta);
  font-weight: 600;
  text-align: left;
  line-height: 1.3;
  transition: background-color var(--rapido) ease;
}
.repaso__opcion:hover {
  background: var(--superficie-3);
}
.repaso__opcion[aria-pressed='true'] {
  background: var(--accion);
  color: var(--accion-tinta);
}
.repaso__opcion--correcta {
  background: var(--ok-fondo);
  color: var(--ok);
  box-shadow: inset 0 0 0 2px var(--ok);
}
.repaso__respuesta {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  min-height: 1.6em;
  margin: 0;
  font-weight: 600;
}
.repaso__respuesta:empty {
  display: none;
}
.repaso[data-resultado='bien'] .repaso__respuesta .icono {
  color: var(--ok);
}
.leccion-pagina .repaso {
  padding: var(--e-5);
  border-radius: var(--r-l);
  background: var(--superficie-2);
}
.leccion-pagina .repaso .repaso__opcion:not([aria-pressed='true']):not(.repaso__opcion--correcta) {
  background: var(--superficie);
}

/* ==========================================================================
   Reproductor
   ========================================================================== */
.reproductor {
  --rep-ancho: min(100%, calc(62vh * 0.8));
  display: grid;
  gap: var(--e-3);
  outline: none;
}
.reproductor__marco {
  position: relative;
  width: var(--rep-ancho);
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--superficie-2);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.reproductor__poster,
.reproductor__escenario {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.reproductor__poster .escenario {
  width: 100%;
  height: 100%;
}
.reproductor[data-estado='inicial'][data-modo='normal'] .reproductor__marco {
  cursor: pointer;
}
.reproductor__capa {
  position: absolute;
  inset: auto 0 var(--e-4) 0;
  display: flex;
  justify-content: center;
  padding-inline: var(--e-4);
  z-index: 3;
}
.reproductor__capa .boton--grande {
  width: auto;
  max-width: 100%;
}
.reproductor__sello {
  top: var(--e-3);
  right: var(--e-3);
  z-index: 2;
}
.reproductor__sello--tuyo {
  background: var(--plumon);
  color: var(--plumon-tinta);
}

/* Subtítulos: debajo del dibujo, nunca encima (espacio reservado: sin saltos) */
.reproductor__subtitulos {
  width: var(--rep-ancho);
  margin: 0 auto;
  min-height: calc(3 * 1.35em + 2 * var(--e-3));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-m);
  background: var(--superficie-2);
  color: var(--tinta);
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 600;
  text-align: center;
  text-wrap: balance;
}
.reproductor--sin-cc .reproductor__sub {
  visibility: hidden;
}
.reproductor[data-modo='tarjetas'] .reproductor__subtitulos {
  min-height: 0;
  font-size: var(--t-base);
  font-weight: 500;
  text-align: left;
  justify-content: flex-start;
}
.reproductor[data-modo='tarjetas'] .reproductor__sub {
  visibility: visible;
}

/* Controles */
.reproductor__controles {
  width: var(--rep-ancho);
  margin: 0 auto;
  display: grid;
  gap: var(--e-1);
}
.reproductor__barra {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'pista tiempo';
  align-items: center;
  gap: var(--e-3);
}
.reproductor__progreso,
.reproductor__capitulos {
  grid-area: pista;
}
.reproductor__progreso {
  position: relative;
  height: var(--toque-min);
  cursor: pointer;
  touch-action: none;
  border-radius: var(--r-s);
}
.reproductor__pista {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: var(--r-pill);
  background: var(--superficie-3);
  overflow: hidden;
}
.reproductor__relleno {
  position: absolute;
  inset: 0;
  background: var(--accion);
  transform-origin: left center;
  transform: scaleX(var(--avance, 0));
}
.reproductor__perilla {
  position: absolute;
  top: 50%;
  left: calc(var(--avance, 0) * 100%);
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--accion);
  pointer-events: none;
}
.reproductor__capitulos {
  position: relative;
  height: var(--toque-min);
  pointer-events: none;
}
.reproductor__capitulo {
  position: absolute;
  top: 0;
  width: 28px;
  height: var(--toque-min);
  margin-left: -14px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}
.reproductor__capitulo:first-child {
  margin-left: 0;
  width: 20px;
}
.reproductor__capitulo::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: var(--tinta-3);
}
.reproductor__capitulo.es-actual::before {
  background: var(--accion);
  height: 20px;
}
.reproductor__capitulo::after {
  content: attr(data-nombre);
  position: absolute;
  bottom: calc(100% - 4px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: var(--r-s);
  background: var(--accion);
  color: var(--accion-tinta);
  font-family: var(--fuente-num);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}
.reproductor__capitulo:first-child::after {
  left: 0;
  transform: none;
}
.reproductor__capitulo:hover::after,
.reproductor__capitulo:focus-visible::after {
  opacity: 1;
}
.reproductor__tiempo {
  grid-area: tiempo;
  font-size: var(--t-meta);
  color: var(--tinta-2);
  white-space: nowrap;
}
.reproductor__botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1);
}
.reproductor__hueco {
  flex: 1 1 auto;
}
.rep-boton {
  display: inline-grid;
  place-items: center;
  min-width: var(--toque-min);
  min-height: var(--toque-min);
  padding: 0 var(--e-2);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--tinta);
  font-family: var(--fuente-num);
  font-weight: 600;
  transition: background-color var(--rapido) ease;
}
.rep-boton:hover {
  background: var(--superficie-2);
}
.rep-boton[aria-pressed='true'] {
  background: var(--accion);
  color: var(--accion-tinta);
}
.rep-boton--play {
  min-width: var(--toque);
  min-height: var(--toque);
  background: var(--accion);
  color: var(--accion-tinta);
}
.rep-boton--play:hover {
  background: var(--accion-hover);
}
.rep-boton--texto {
  min-width: 3.75rem;
}
.reproductor__mas {
  position: relative;
}
.reproductor__menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 7;
  display: grid;
  min-width: 15rem;
  padding: var(--e-2);
  border-radius: var(--r-m);
  background: var(--superficie);
  box-shadow: var(--sombra-3);
}
.reproductor__menu[hidden] {
  display: none;
}
.reproductor__menu button {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--toque-min);
  padding: 0 var(--e-3);
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--tinta);
  font-weight: 600;
  text-align: left;
}
.reproductor__menu button:hover,
.reproductor__menu button:focus-visible {
  background: var(--superficie-2);
}
.reproductor__menu [aria-checked='true'] {
  background: var(--plumon);
  color: var(--plumon-tinta);
}

/* Tarjetas: misma huella que el video (sin saltos al cambiar de modo) */
.reproductor__tarjetas-nav {
  width: var(--rep-ancho);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
}
.reproductor__tarjetas-nav[hidden] {
  display: none;
}
.reproductor__tarjeta-num {
  flex: 1 1 100%;
  order: -1;
  font-size: var(--t-meta);
  color: var(--tinta-2);
}
.reproductor__tarjetas-nav [aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}
.reproductor__como-video {
  margin-left: auto;
  display: inline-flex;
  gap: var(--e-1);
  align-items: center;
}

/* Estado final */
.reproductor__final {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--e-5) var(--e-4);
  background: var(--superficie);
  outline: none;
}
.reproductor__final-interior {
  display: grid;
  gap: var(--e-3);
  justify-items: start;
}
.reproductor__palomita {
  width: 56px;
  height: 56px;
}
.reproductor__palomita-c {
  fill: var(--plumon);
}
.reproductor__palomita-v {
  fill: none;
  stroke: var(--plumon-tinta);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reproductor__final-titulo {
  margin: 0;
  font-size: var(--t-h3);
  font-weight: 700;
  outline: none;
}
.reproductor__final-sub {
  margin: var(--e-2) 0 0;
  font-family: var(--fuente-num);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.reproductor__aprendiste {
  margin: 0;
  padding-left: 1.2em;
  font-size: var(--t-ayuda);
}
.reproductor__aprendiste li + li {
  margin-top: var(--e-1);
}
.reproductor__final .repaso {
  width: 100%;
}
.reproductor__final-botones {
  margin-top: var(--e-2);
}
.reproductor__aviso {
  margin: 0;
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
}
.reproductor__otra-vez {
  display: inline-flex;
  gap: var(--e-1);
  align-items: center;
}

/* Pantalla completa (nativa o manual en iPhone) */
.reproductor:fullscreen,
.reproductor--lleno {
  --rep-ancho: min(100%, calc((100dvh - 15rem) * 0.8));
  align-content: center;
  padding: var(--e-4);
  background: var(--papel);
  overflow-y: auto;
}
.reproductor--lleno {
  position: fixed;
  inset: 0;
  z-index: 95;
}
html.con-reproductor-lleno,
html.con-reproductor-lleno body {
  overflow: hidden;
}

/* Diálogo a pantalla completa (resultado, calculadora, L6) */
.dialogo-leccion {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--papel);
  color: var(--tinta);
}
.dialogo-leccion[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.dialogo-leccion::backdrop {
  background: var(--papel);
}
.dialogo-leccion__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-4);
  padding-top: calc(var(--e-2) + env(safe-area-inset-top));
  background: var(--superficie-2);
}
.dialogo-leccion__titulo {
  margin: 0;
  font-weight: 700;
}
.dialogo-leccion__cuerpo {
  overflow-y: auto;
  padding: var(--e-4) var(--e-4) calc(var(--e-6) + env(safe-area-inset-bottom));
}
.leccion--dialogo {
  max-width: 34rem;
  margin: 0 auto;
}
.dialogo-leccion__aviso {
  max-width: 30rem;
  margin: var(--e-6) auto;
  padding: var(--e-5);
  border-radius: var(--r-l);
  background: var(--superficie-2);
  font-size: var(--t-lead);
}
.reproductor__transcripcion {
  margin-top: var(--e-4);
  padding: var(--e-4);
  border-radius: var(--r-l);
  background: var(--superficie-2);
}
.reproductor__transcripcion[hidden] {
  display: none;
}
.transcripcion__encabezado {
  margin: 0 0 var(--e-3);
  font-weight: 700;
  outline: none;
}

/* ==========================================================================
   Transcripción (sincronizada con el reproductor)
   ========================================================================== */
.transcripcion h2 {
  margin-top: 0;
}
.transcripcion__ayuda {
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
}
.transcripcion__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--e-4);
}
.transcripcion__escena {
  margin: 0;
}
.transcripcion__cabeza {
  display: flex;
  gap: var(--e-2);
  margin: 0 0 var(--e-1);
  font-size: var(--t-meta);
  color: var(--tinta-2);
}
.transcripcion__tiempo {
  color: var(--tinta);
  font-weight: 600;
}
.transcripcion__texto {
  margin: 0;
}
.transcripcion__frase {
  border-radius: 4px;
  padding: 0 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.transcripcion__frase[role='button'] {
  cursor: pointer;
}
.transcripcion__frase[role='button']:hover {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}
.transcripcion__frase[aria-current='true'] {
  background: var(--plumon);
  color: var(--plumon-tinta);
}

/* ==========================================================================
   Centro de lecciones /aprende/
   ========================================================================== */
.seccion-aprende {
  margin-block: var(--e-6);
}
.orden-lecciones {
  display: grid;
  gap: var(--e-2);
  margin: 0 0 var(--e-4);
}
.orden-lecciones li {
  margin: 0;
}
.orden-lecciones a {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--toque);
  padding: var(--e-2) var(--e-4);
  border-radius: var(--r-m);
  background: var(--superficie-2);
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
}
.orden-lecciones a:hover {
  background: var(--superficie-3);
}
.orden-lecciones__num {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accion);
  color: var(--accion-tinta);
  font-weight: 700;
  flex: none;
}
.tarjetas-lecciones {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  margin: 0;
}
.tarjetas-lecciones > li {
  margin: 0;
}
.tarjeta-lec {
  position: relative;
  border-radius: var(--r-l);
  background: var(--superficie-2);
}
.tarjeta-lec__enlace {
  display: grid;
  align-content: start;
  gap: var(--e-2);
  height: 100%;
  padding: var(--e-3) var(--e-3) var(--e-4);
  border-radius: var(--r-l);
  color: var(--tinta);
  text-decoration: none;
  transition: background-color var(--rapido) ease;
}
.tarjeta-lec__enlace:hover {
  background: var(--superficie-3);
  color: var(--tinta);
}
.tarjeta-lec__poster {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-m);
  background: var(--superficie);
}
.tarjeta-lec__poster .escenario {
  width: 100%;
  height: 100%;
}
.tarjeta-lec__num {
  font-size: var(--t-meta);
  color: var(--tinta-2);
}
.tarjeta-lec__titulo {
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.2;
}
.tarjeta-lec__aprenderas {
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
}
.tarjeta-lec__ver {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  font-weight: 700;
}
.tarjeta-lec__vista {
  position: absolute;
  top: var(--e-4);
  left: var(--e-4);
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 2px var(--e-3);
  border-radius: var(--r-pill);
  background: var(--plumon);
  color: var(--plumon-tinta);
  font-family: var(--fuente-num);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}
.tarjeta-lec__vista[hidden] {
  display: none;
}

/* ==========================================================================
   Escenario SVG (480 × 600) y sus dibujos: trazo de 2 px o más, relleno plano
   ========================================================================== */
.escenario {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--fuente);
}
.e-fondo {
  fill: var(--superficie-2);
}
.e-fondo-2,
.e-mesa {
  fill: var(--superficie-3);
}
.e-mesa-tabla {
  fill: var(--superficie-3);
}
.e-texto {
  fill: var(--tinta);
  font-family: var(--fuente);
  font-weight: 600;
}
.e-texto--num {
  font-family: var(--fuente-num);
  font-variant-numeric: tabular-nums;
}
.e-texto--suave {
  fill: var(--tinta-2);
  font-weight: 500;
}
.e-texto--claro,
.e-texto--invertido {
  fill: var(--accion-tinta);
}
.e-texto--plumon {
  fill: var(--plumon-tinta);
}
.e-texto--alto {
  fill: var(--alto);
}
.e-texto--ok {
  fill: var(--ok);
}
.e-texto--sello {
  fill: var(--sello);
  font-family: var(--fuente-num);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.e-texto--espaciado {
  letter-spacing: 0.12em;
}
.e-texto--etiqueta {
  fill: var(--tinta-2);
  font-family: var(--fuente-num);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.e-texto--mano {
  fill: var(--tinta);
  font-weight: 700;
  font-style: italic;
}
.e-trazo,
.e-flecha path {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.e-flecha {
  stroke-width: 4px;
}
.e-flecha path {
  stroke-width: inherit;
}
.e-flecha--agua path {
  stroke: var(--tinta-2);
}
.e-trazo--fino {
  stroke-width: 2;
}
.e-trazo--grueso {
  stroke-width: 4;
}
.e-trazo--mango {
  stroke-width: 12;
}
.e-trazo--plumon {
  stroke: var(--plumon);
  stroke-width: 5;
}
.e-punteado {
  stroke-dasharray: 6 7;
}
.e-relleno {
  fill: var(--superficie);
  stroke: var(--tinta);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.e-relleno-2 {
  fill: var(--superficie-3);
  stroke: var(--tinta);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.e-relleno-jamaica,
.e-tortilla {
  fill: var(--superficie-3);
  stroke: var(--tinta);
  stroke-width: 2;
}
.e-banda {
  fill: var(--accion);
}
.e-plumon {
  fill: var(--plumon);
}
.e-plumon-trazo {
  fill: none;
  stroke: var(--plumon);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.e-tachado {
  stroke: var(--tinta-2);
  stroke-width: 4;
  stroke-linecap: round;
}
.e-tache {
  fill: none;
  stroke: var(--tinta-2);
  stroke-width: 8;
  stroke-linecap: round;
}
.e-tache--alto {
  stroke: var(--alto);
}
.e-no__fondo {
  fill: var(--alto);
}
.e-no__x,
.e-si__v,
.e-ojo__signo {
  fill: none;
  stroke: var(--superficie);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.e-si__fondo {
  fill: var(--ok);
}
.e-ojo__fondo {
  fill: var(--cuidado);
  stroke: var(--cuidado);
  stroke-width: 4;
  stroke-linejoin: round;
}
.e-panel__caja {
  fill: var(--superficie);
}
.e-panel--no .e-panel__caja {
  fill: var(--alto-fondo);
}
.e-panel--si .e-panel__caja {
  fill: var(--ok-fondo);
}
.e-sello rect {
  fill: var(--superficie);
  stroke: var(--sello);
  stroke-width: 2;
  stroke-dasharray: 7 5;
}
.e-barril {
  fill: var(--superficie);
}
.e-barril-v {
  fill: var(--superficie);
  stroke: var(--tinta);
  stroke-width: 2.5;
}
.e-contorno {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 2.5;
}
.e-rayita {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.e-rayita--larga {
  stroke-width: 3.5;
}
.e-rayita--fina {
  stroke-width: 1.5;
}
.e-corte {
  fill: none;
  stroke: var(--tinta-3);
  stroke-width: 2;
}
.e-agua,
.e-agua-barra {
  fill: var(--agua);
  fill-opacity: 0.55;
}
.e-goma {
  fill: var(--goma);
  stroke: var(--tinta);
  stroke-width: 1.5;
}
.e-goma-raya {
  stroke: var(--superficie-3);
  stroke-width: 2;
  opacity: 0.5;
}
.e-varilla {
  fill: var(--superficie);
  stroke: var(--tinta);
  stroke-width: 2;
}
.e-orilla {
  stroke: var(--plumon);
  stroke-width: 8;
  stroke-linecap: round;
}
.e-marca-objetivo {
  fill: none;
  stroke: var(--plumon);
  stroke-width: 6;
  stroke-linecap: round;
}
.e-aguja,
.e-aguja-usada {
  fill: none;
  stroke: var(--tinta-2);
  stroke-width: 3;
  stroke-linecap: round;
}
.e-lleno {
  fill: var(--superficie-3);
}
.e-tapa-recipiente,
.e-tapon-goma {
  fill: var(--tinta-2);
  stroke: var(--tinta);
  stroke-width: 2;
}
.e-cinta {
  fill: var(--plumon);
  stroke: var(--tinta);
  stroke-width: 1.5;
}
.e-chorro,
.e-chorro-llave {
  fill: none;
  stroke: var(--agua);
  stroke-width: 6;
  stroke-linecap: round;
}
.e-burbuja {
  fill: var(--superficie);
  stroke: var(--tinta-2);
  stroke-width: 2;
}
.e-gota {
  fill: var(--agua);
  stroke: var(--tinta);
  stroke-width: 2;
}
.e-cuadrito {
  fill: var(--tinta-2);
}
.e-particula {
  fill: var(--tinta);
}
.e-jamaica {
  fill: var(--tinta-2);
}
.e-vidrio {
  fill: var(--superficie);
  fill-opacity: 0.6;
  stroke: var(--tinta);
  stroke-width: 2.5;
}
.e-vidrio-trazo {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 3;
  stroke-linejoin: round;
}
.e-brillo {
  fill: none;
  stroke: var(--superficie);
  stroke-width: 4;
  stroke-linecap: round;
}
.e-brillo-barrido,
.e-brillo-humedo {
  fill: var(--superficie);
}
.e-punto,
.e-punto-grande,
.e-punto-decimal {
  fill: var(--tinta);
}
.e-monton {
  fill: var(--superficie-3);
  stroke: var(--tinta);
  stroke-width: 2.5;
}
.e-pastilla {
  fill: var(--superficie);
  stroke: var(--tinta-3);
  stroke-width: 2;
}
.e-pastilla--activa,
.e-boton-dibujo {
  fill: var(--accion);
  stroke: none;
}
.e-tinte {
  fill: var(--superficie-3);
}
.e-tapa-color {
  fill: var(--tapa);
  stroke: var(--tinta);
  stroke-width: 2;
}
.e-tapa-color--b {
  fill: var(--superficie-3);
}
.e-tapa-color--c {
  fill: var(--tinta-2);
}
.e-dedo {
  fill: var(--superficie-3);
  stroke: var(--tinta);
  stroke-width: 2.5;
}
.e-tarjeta,
.e-telefono {
  fill: var(--superficie);
  stroke: var(--tinta);
  stroke-width: 2.5;
}
.e-campo-dibujo {
  fill: var(--superficie);
  stroke: var(--tinta-3);
  stroke-width: 2;
}
.e-chip {
  fill: var(--superficie);
  stroke: var(--tinta);
  stroke-width: 2;
}
.e-chip--final {
  fill: var(--plumon);
}
.e-grumo {
  fill: var(--tinta-2);
}
.e-turbio {
  fill: var(--tinta-3);
  fill-opacity: 0.35;
}
.e-otro-color {
  fill: var(--tinta);
  fill-opacity: 0.45;
}
.e-foco__luz {
  fill: var(--plumon);
  stroke: var(--tinta);
  stroke-width: 2.5;
}
.e-regla__cuerpo {
  fill: var(--superficie);
  stroke: var(--tinta);
  stroke-width: 2.5;
}
.e-ojo-dibujo {
  fill: var(--superficie);
  stroke: var(--tinta);
  stroke-width: 3;
}
.e-mirada {
  fill: none;
  stroke: var(--tinta-3);
  stroke-width: 2;
  stroke-dasharray: 5 6;
}

/* Origen de las transformaciones de las animaciones del escenario */
.e-c {
  transform-box: fill-box;
  transform-origin: center;
}
.e-i {
  transform-box: fill-box;
  transform-origin: left center;
}
.e-ab {
  transform-box: fill-box;
  transform-origin: center bottom;
}

/* ==========================================================================
   Microclips M1–M5 (CSS en bucle de 6 s; sin movimiento: cuadro final fijo)
   ========================================================================== */
.mclip-figura {
  max-width: 26rem;
  margin: var(--e-4) 0;
}
.mclip-figura figcaption {
  margin-top: var(--e-2);
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
}
.mclip {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--fuente);
}
.mc-fondo {
  fill: var(--superficie-2);
}
.mc-zoom-caja {
  fill: none;
  stroke: var(--plumon);
  stroke-width: 4;
}
.mc-ovalo,
.mc-mayor,
.mc-cuenta {
  transform-box: fill-box;
  transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.sin-movimiento) .mclip--m1 .mc-ovalo--1 {
    animation: mc-aparece-1 6s ease-out infinite both;
  }
  html:not(.sin-movimiento) .mclip--m1 .mc-ovalo--2 {
    animation: mc-aparece-2 6s ease-out infinite both;
  }
  html:not(.sin-movimiento) .mclip--m1 .mc-ovalo--3 {
    animation: mc-aparece-3 6s ease-out infinite both;
  }
  html:not(.sin-movimiento) .mclip--m2 .mc-dedo {
    animation: mc-dedo 6s ease-in-out infinite both;
  }
  html:not(.sin-movimiento) .mclip--m2 .mc-mayor {
    animation: mc-aparece-3 6s ease-out infinite both;
  }
  html:not(.sin-movimiento) .mclip--m3 .mc-polvo {
    animation: mc-aparece-1 6s ease-out infinite both;
  }
  html:not(.sin-movimiento) .mclip--m3 .mc-liquido {
    animation: mc-aparece-2 6s ease-out infinite both;
  }
  html:not(.sin-movimiento) .mclip--m4 .e-orilla {
    animation: mc-parpadeo 6s linear infinite both;
  }
  html:not(.sin-movimiento) .mclip--m5 .mc-cuenta--1 {
    animation: mc-cuenta-1 6s ease-out infinite both;
  }
  html:not(.sin-movimiento) .mclip--m5 .mc-cuenta--2 {
    animation: mc-cuenta-2 6s ease-out infinite both;
  }
  html:not(.sin-movimiento) .mclip--m5 .mc-cuenta--3 {
    animation: mc-cuenta-3 6s ease-out infinite both;
  }
  html:not(.sin-movimiento) .mclip--m5 .mc-cuenta--4 {
    animation: mc-cuenta-4 6s ease-out infinite both;
  }
  html:not(.sin-movimiento) .mclip--m5 .mc-cuenta--5 {
    animation: mc-cuenta-5 6s ease-out infinite both;
  }
}
@keyframes mc-aparece-1 {
  0%,
  6% {
    opacity: 0;
    transform: scale(0.6);
  }
  16%,
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes mc-aparece-2 {
  0%,
  32% {
    opacity: 0;
    transform: scale(0.6);
  }
  42%,
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes mc-aparece-3 {
  0%,
  58% {
    opacity: 0;
    transform: scale(0.6);
  }
  68%,
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes mc-dedo {
  0%,
  8% {
    opacity: 0;
    transform: translateX(var(--mc-recorrido, 0px));
  }
  14% {
    opacity: 1;
    transform: translateX(var(--mc-recorrido, 0px));
  }
  60%,
  92% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(0);
  }
}
@keyframes mc-parpadeo {
  0%,
  10% {
    opacity: 0;
  }
  20%,
  35% {
    opacity: 1;
  }
  45% {
    opacity: 0.2;
  }
  55%,
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes mc-cuenta-1 {
  0%,
  10% {
    opacity: 0;
    transform: scale(0.5);
  }
  18%,
  92% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}
@keyframes mc-cuenta-2 {
  0%,
  24% {
    opacity: 0;
    transform: scale(0.5);
  }
  32%,
  92% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}
@keyframes mc-cuenta-3 {
  0%,
  38% {
    opacity: 0;
    transform: scale(0.5);
  }
  46%,
  92% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}
@keyframes mc-cuenta-4 {
  0%,
  52% {
    opacity: 0;
    transform: scale(0.5);
  }
  60%,
  92% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}
@keyframes mc-cuenta-5 {
  0%,
  66% {
    opacity: 0;
    transform: scale(0.5);
  }
  74%,
  92% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}

/* ==========================================================================
   Impresión
   ========================================================================== */
@media print {
  .reproductor__capa,
  .reproductor__subtitulos,
  .reproductor__controles,
  .reproductor__tarjetas-nav,
  .transcripcion__ayuda,
  [data-imprimir-lista] {
    display: none !important;
  }
  .transcripcion__frase[aria-current] {
    background: none;
  }
  body.imprimir-lista .encabezado,
  body.imprimir-lista .pie,
  body.imprimir-lista .migas {
    display: none !important;
  }
  body.imprimir-lista main * {
    visibility: hidden;
  }
  body.imprimir-lista .lista-imprimible,
  body.imprimir-lista .lista-imprimible * {
    visibility: visible;
  }
  body.imprimir-lista .lista-imprimible {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: none;
  }
}

/* 80-contenido.css */
/* ==========================================================================
   D · Contenido y legal: tabla, glosario, preguntas, metodología, quiénes somos,
   accesibilidad, términos, privacidad, aviso médico y 404.
   Estilo del dueño (13 oct 2026): minimalista, moderno, rellenos sólidos sin bordes,
   negro para actuar y lima (--plumon) solo para resaltar. Solo tokens: ningún color fijo.
   Todo lleva el prefijo ct- para no chocar con los componentes comunes.
   ========================================================================== */

/* --- Etiqueta tipo instrumento (Geist Mono, mayúsculas) ------------------ */
.ct-indice-pagina__titulo,
.ct-az__titulo,
.ct-az__letra,
.ct-version,
.ct-termino__leccion > span,
.ct-en-corto > h2,
.ct-404__codigo {
  font-family: var(--fuente-num);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

/* --- Ritmo de las secciones (más compacto que .seccion) ------------------ */
.ct-seccion {
  padding-block: var(--e-5);
}
.ct-seccion h2 {
  margin-top: 0;
}

/* --- Índice corto «En esta página» / «Temas» ----------------------------- */
.ct-indice-pagina {
  margin-block: var(--e-4) var(--e-2);
}
.ct-indice-pagina__titulo {
  font-size: var(--t-meta);
  color: var(--tinta-2);
  margin: 0 0 var(--e-2);
}
.ct-indice-pagina ul,
.ct-indice-pagina ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ct-indice-pagina li + li {
  margin-top: 0;
}
.ct-indice-pagina a,
.ct-az a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  padding: 0 var(--e-4);
  border-radius: var(--r-pill);
  background: var(--superficie-2);
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
}
.ct-indice-pagina a:hover,
.ct-az a:hover {
  background: var(--superficie-3);
  color: var(--tinta);
}

/* --- Leyenda obligatoria (lima: hay que verla) --------------------------- */
.ct-leyenda {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  margin: 0 0 var(--e-4);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-m);
  background: var(--plumon);
  color: var(--plumon-tinta);
}
.ct-leyenda .icono {
  margin-top: 0.15em;
}

/* --- Notas y listas ------------------------------------------------------- */
.ct-nota {
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
  max-width: var(--ancho-texto);
}
.ct-lista li + li,
.ct-pasos li + li {
  margin-top: var(--e-2);
}
.ct-pasos {
  padding-left: 1.6em;
}
.ct-pasos li::marker {
  font-family: var(--fuente-num);
  font-weight: 600;
}
.ct-enlaces {
  margin: 0 0 var(--e-4);
}
.ct-enlaces li + li {
  margin-top: var(--e-2);
}
.ct-enlaces a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: var(--toque);
  padding: var(--e-2) var(--e-4);
  border-radius: var(--r-m);
  background: var(--superficie-2);
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
}
.ct-enlaces a::after {
  content: '→';
  font-family: var(--fuente-num);
  color: var(--tinta-2);
}
.ct-enlaces a:hover {
  background: var(--superficie-3);
  color: var(--tinta);
}

/* --- Tabla de concentraciones -------------------------------------------- */
.ct-tabla th,
.ct-tabla td {
  padding: var(--e-2) var(--e-3);
  vertical-align: middle;
}
.ct-tabla thead th {
  white-space: normal;
  line-height: 1.25;
  text-align: right;
}
.ct-tabla thead th:first-child {
  text-align: left;
}
.ct-tabla thead th .num {
  white-space: nowrap;
}
.ct-tabla td.num {
  font-size: var(--t-base);
}
/* Primera columna fija al deslizar la tabla en el teléfono. Necesita fondo sólido:
   el mismo de su fila (filas alternas como en 10-componentes.css). */
.ct-tabla thead th:first-child,
.ct-tabla tbody th[scope='row'] {
  position: sticky;
  left: 0;
  z-index: 1;
}
.ct-tabla tbody th[scope='row'] {
  background: var(--superficie);
  line-height: 1.25;
}
.ct-tabla th .num {
  white-space: nowrap;
}
/* «Vial de» y «de agua»: segunda línea chica, tipo instrumento, para que las columnas sean angostas */
.ct-tabla__sub {
  display: block;
  white-space: nowrap;
  font-family: var(--fuente-num);
  font-size: var(--t-meta);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.ct-tabla tbody th .ct-tabla__sub {
  color: var(--tinta-2);
}
/* El título de la tabla va fuera de la zona que se desliza (el <caption> queda para lectores) */
.ct-tabla-titulo {
  font-weight: 700;
  margin: 0 0 var(--e-2);
  max-width: var(--ancho-texto);
}
.ct-tabla tbody tr:nth-child(odd) th[scope='row'] {
  background: var(--superficie-2);
}
.ct-tabla thead th:first-child {
  z-index: 2;
}
html.js .ct-tabla td[data-vial] {
  cursor: pointer;
}
/* Cruce de fila y columna al tocar una celda (assets/js/paginas/tabla.js) */
.ct-tabla .ct-cruce,
.ct-tabla tr.ct-cruce > * {
  background: var(--plumon-suave) !important;
  color: var(--tinta);
}
.ct-tabla tr > td.ct-celda-elegida {
  background: var(--plumon) !important;
  color: var(--plumon-tinta);
  font-weight: 700;
}
.ct-desliza {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-meta);
  color: var(--tinta-2);
  margin: calc(-1 * var(--e-2)) 0 var(--e-3);
}
@media (min-width: 48rem) {
  .ct-desliza {
    display: none;
  }
}
.ct-lectura {
  max-width: var(--ancho-texto);
  margin: 0;
}
.ct-lectura:not(:empty) {
  margin: 0 0 var(--e-4);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-m);
  background: var(--superficie-2);
  font-weight: 600;
}

/* De unidades a mcg: una tabla corta por mezcla, dentro de un plegable */
.ct-mezclas__lista {
  margin: 0 0 var(--e-4);
}
.ct-mezcla__titulo {
  display: block;
}
.ct-mezcla__porU {
  display: block;
  font-family: var(--fuente-num);
  font-weight: 500;
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
}
.ct-tabla-mini {
  margin: 0;
}
.ct-tabla-mini th,
.ct-tabla-mini td {
  padding: var(--e-2) var(--e-2);
  vertical-align: middle;
}
.ct-tabla-mini thead th {
  white-space: normal;
  line-height: 1.2;
}
/* Teléfonos de 320 px: un poco menos de aire para que las 4 columnas quepan sin deslizar */
@media (max-width: 22.5rem) {
  .ct-tabla-mini th,
  .ct-tabla-mini td {
    padding-inline: var(--e-1);
  }
}

.ct-solo-imprimir {
  display: none;
}

/* --- Metodología ---------------------------------------------------------- */
.ct-notacion {
  font-family: var(--fuente-num);
  font-size: var(--t-ayuda);
  white-space: normal;
  overflow-wrap: anywhere;
}
.ct-estados {
  margin: 0 0 var(--e-4);
}
.ct-estados li + li {
  margin-top: var(--e-2);
}
.ct-estado {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: start;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-m);
  background: var(--superficie-2);
}
.ct-estado > .icono {
  width: 26px;
  height: 26px;
}
.ct-estado p {
  margin: 0;
}
.ct-estado__casos {
  margin: var(--e-2) 0 0;
  padding-left: 1.2em;
}
.ct-estado__casos li + li {
  margin-top: var(--e-1);
}
/* Colores del semáforo: solo para estados */
.ct-estado--ok > .icono,
.ct-palabra--ok .icono {
  color: var(--ok);
}
.ct-estado--cuidado > .icono,
.ct-palabra--cuidado .icono {
  color: var(--cuidado);
}
.ct-estado--alto > .icono,
.ct-palabra--alto .icono {
  color: var(--alto);
}
.ct-estado--info > .icono,
.ct-palabra--info .icono {
  color: var(--tinta-2);
}
.ct-intro-casos {
  max-width: 46rem;
}
.ct-tabla-casos {
  margin: 0;
}
.ct-tabla-casos .ct-caso__datos {
  min-width: 9rem;
}
/* Teléfono: cada caso se apila como tarjeta (la tabla conserva sus roles en el HTML) */
@media (max-width: 40rem) {
  .ct-tabla-casos {
    background: transparent;
    overflow: visible;
  }
  .ct-tabla-casos table,
  .ct-tabla-casos tbody,
  .ct-tabla-casos tr,
  .ct-tabla-casos td {
    display: block;
  }
  .ct-tabla-casos thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .ct-tabla-casos tr {
    margin: 0 0 var(--e-3);
    border-radius: var(--r-m);
    background: var(--superficie);
    overflow: hidden;
  }
  .ct-tabla-casos tbody tr td {
    background: transparent;
    padding: var(--e-2) var(--e-4);
  }
  .ct-tabla-casos .ct-caso__datos {
    min-width: 0;
  }
  .ct-tabla-casos td.num {
    text-align: left;
  }
  .ct-tabla-casos td::before {
    content: attr(data-etiqueta);
    content: attr(data-etiqueta) / '';
    display: block;
    font-family: var(--fuente-num);
    font-size: var(--t-meta);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tinta-2);
  }
  .ct-tabla-casos td.ct-caso__n {
    display: flex;
    gap: var(--e-2);
    align-items: baseline;
    padding-top: var(--e-3);
    font-weight: 700;
  }
  .ct-tabla-casos td.ct-caso__n::before {
    display: inline;
  }
}
.ct-palabra {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  margin: 0 0 var(--e-1);
  font-weight: 700;
}
.ct-motivo {
  font-weight: 400;
  color: var(--tinta-2);
}
.ct-lineas {
  margin: 0;
}
.ct-lineas li + li {
  margin-top: var(--e-1);
}

/* --- Glosario ------------------------------------------------------------- */
.ct-az {
  margin-block: var(--e-4) var(--e-5);
  padding: var(--e-4);
  border-radius: var(--r-l);
  background: var(--superficie);
}
.ct-az__titulo {
  font-size: var(--t-meta);
  color: var(--tinta-2);
  margin: 0 0 var(--e-3);
}
/* Barra de letras: cada letra lleva a su primera palabra */
.ct-az__barra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0 0 var(--e-3);
}
.ct-az__barra li + li {
  margin-top: 0;
}
.ct-az .ct-az__barra a {
  justify-content: center;
  min-width: var(--toque-min);
  padding: 0;
  border-radius: var(--r-m);
  font-family: var(--fuente-num);
  font-size: var(--t-base);
}
.ct-az__todas {
  margin: 0;
}
.ct-az__letras {
  display: grid;
  gap: var(--e-2) var(--e-5);
  margin: 0;
}
@media (min-width: 48rem) {
  .ct-az__letras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ct-az__letras > li + li {
  margin-top: 0;
}
.ct-az__grupo {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--e-2);
  align-items: start;
}
.ct-az__letra {
  display: grid;
  place-items: center;
  min-height: var(--toque-min);
  font-size: var(--t-ayuda);
  font-weight: 600;
  color: var(--tinta);
}
.ct-az__grupo ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0;
}
.ct-az__grupo ul li + li {
  margin-top: 0;
}
.ct-terminos {
  display: grid;
  gap: var(--e-3);
}
.ct-termino {
  padding: var(--e-5);
  border-radius: var(--r-l);
  background: var(--superficie-2);
}
.ct-termino:target {
  background: var(--plumon-suave);
  color: var(--tinta);
}
.ct-termino > h2 {
  margin: 0 0 var(--e-2);
  font-size: var(--t-h3);
}
.ct-termino__definicion {
  font-size: var(--t-lead);
  line-height: 1.4;
}
.ct-termino__parte {
  margin-bottom: var(--e-2);
}
.ct-termino__leccion {
  margin: var(--e-3) 0 0;
}
.ct-termino__leccion > span {
  display: block;
  font-size: var(--t-meta);
  color: var(--tinta-2);
  margin-bottom: var(--e-1);
}
.ct-termino__leccion a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  font-weight: 600;
}
.ct-dibujo {
  margin: var(--e-3) 0;
}
.ct-dibujo svg {
  height: auto;
}
.ct-dibujo--chico svg {
  width: 100%;
  max-width: 9rem;
}
.ct-dibujo--ancho svg {
  width: 100%;
  max-width: 30rem;
}
.ct-dibujo figcaption {
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
  margin-top: var(--e-2);
}

/* --- Preguntas frecuentes -------------------------------------------------- */
.ct-faq-grupo h2 {
  margin-bottom: var(--e-3);
}
.ct-faq__pregunta {
  margin: 0;
  font-size: var(--t-base);
  line-height: 1.3;
  letter-spacing: 0;
}
.ct-faq__respuesta p {
  margin: 0;
}

/* --- Legales, quiénes somos y accesibilidad ------------------------------- */
.ct-version {
  font-size: var(--t-meta);
  color: var(--tinta-2);
  margin: var(--e-2) 0 0;
}
.ct-en-corto {
  margin: 0 0 var(--e-5);
  padding: var(--e-5);
  border-radius: var(--r-l);
  background: var(--superficie-2);
}
.ct-en-corto > h2 {
  margin: 0 0 var(--e-3);
  font-size: var(--t-meta);
  color: var(--tinta-2);
}
.ct-en-corto ol {
  margin: 0;
  padding-left: 1.4em;
  font-size: var(--t-lead);
  line-height: 1.4;
}
.ct-en-corto li::marker {
  font-family: var(--fuente-num);
}
.ct-indice-legal {
  margin: 0 0 var(--e-5);
}
.ct-indice-legal ol {
  margin: 0;
  padding: 0 var(--e-4) 0 calc(var(--e-4) + 1.4em);
}
.ct-indice-legal li + li {
  margin-top: 0;
}
.ct-indice-legal li a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
}
.ct-legal__seccion,
.ct-acerca > section {
  margin-top: var(--e-6);
}
.ct-legal__seccion h2,
.ct-acerca > section > h2 {
  margin: 0 0 var(--e-3);
  font-size: var(--t-h3);
}
.ct-legal__fecha,
.ct-legal__nota,
.ct-legal__relacionados {
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
}
.ct-legal__fecha {
  margin-top: var(--e-6);
}
.ct-emergencia {
  padding: var(--e-4);
  border-radius: var(--r-m);
  background: var(--superficie-2);
}
.ct-detenerte li + li {
  margin-top: var(--e-2);
}
.ct-marcador {
  background: var(--plumon);
  color: var(--plumon-tinta);
  padding: 0 0.25em;
  border-radius: 4px;
}
.ct-teclas {
  display: grid;
  gap: var(--e-2);
  margin: 0 0 var(--e-4);
}
.ct-teclas > div {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: var(--e-3);
  align-items: baseline;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-s);
  background: var(--superficie-2);
}
.ct-teclas dt {
  font-weight: 600;
}
.ct-teclas dd {
  margin: 0;
}
.ct-tabla-claves code {
  overflow-wrap: anywhere;
}

/* --- 404 ------------------------------------------------------------------ */
.ct-404__codigo {
  font-size: var(--t-h2);
  color: var(--tinta-3);
  margin: 0 0 var(--e-2);
}
.ct-404__puertas h2 {
  margin-top: var(--e-4);
}

/* --- Impresión de la tabla (DISENO §10.9: blanco y negro) ------------------
   90-imprimir.css ya oculta encabezado, pie, migas y puerta, y pone el texto en negro.
   Aquí: fuera colores y fondos, líneas finas con el color del texto y las mezclas abiertas
   (tabla.js las abre al imprimir). */
@media print {
  .pagina-tabla .ct-no-imprimir,
  .pagina-tabla .cta-doble,
  .pagina-tabla .ct-desliza,
  .pagina-tabla .ct-lectura,
  .pagina-tabla .botonera {
    display: none !important;
  }
  .pagina-tabla .ct-solo-imprimir {
    display: block;
    font-size: 10pt;
    margin: 0 0 4mm;
  }
  .pagina-tabla main,
  .pagina-tabla main * {
    color: inherit !important;
    background: transparent !important;
  }
  .pagina-tabla .encabezado-pagina {
    padding-block: 0 2mm;
  }
  .pagina-tabla .respuesta-directa {
    font-size: 11pt;
  }
  .pagina-tabla .ct-seccion {
    padding-block: 2mm;
  }
  .pagina-tabla .ct-leyenda {
    padding: 2mm 0;
    font-size: 11pt;
  }
  .pagina-tabla .tabla-envoltura {
    overflow: visible;
  }
  .pagina-tabla table {
    font-size: 10pt;
  }
  .pagina-tabla th,
  .pagina-tabla td {
    position: static !important;
    padding: 1.2mm 2mm;
    border-bottom: 0.5pt solid currentColor;
  }
  .pagina-tabla thead th {
    border-bottom: 1.5pt solid currentColor;
  }
  .pagina-tabla tr,
  .pagina-tabla .ct-mezcla {
    break-inside: avoid;
  }
  .pagina-tabla .ct-mezclas__lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2mm 8mm;
  }
  .pagina-tabla .ct-mezcla {
    margin: 0;
  }
  .pagina-tabla details.plegable > summary {
    min-height: 0;
    padding: 2mm 0 1mm;
  }
  .pagina-tabla details.plegable > summary::after {
    display: none;
  }
  .pagina-tabla details.plegable > :not(summary) {
    padding: 0;
  }
  /* En papel no hay animaciones: nada a medio aparecer (15-movimiento.css) */
  .pagina-tabla main * {
    animation: none !important;
    transition: none !important;
  }
  .pagina-tabla .tabla-envoltura,
  .pagina-tabla .ejemplo,
  .pagina-tabla h2 {
    opacity: 1 !important;
    transform: none !important;
  }
}
/* Regla aparte: un selector que el navegador no conoce invalidaría todo el bloque */
@media print {
  .pagina-tabla details.plegable[open]::details-content {
    height: auto !important;
    transition: none !important;
  }
}

/* El sello EJEMPLO ocupa dos renglones en el teléfono: un poco de aire para que no tape el texto */
@media (max-width: 40rem) {
  .ejemplo > .ct-tabla-titulo,
  .ejemplo > .ct-pasos {
    margin-top: var(--e-5);
  }
}

/* 82-seguridad-y-jeringas.css */
/* ==========================================================================
   Aviso corto de uso (3 puntos), página /seguridad/ y guía /jeringas/.
   ========================================================================== */

/* --- Aviso de uso -------------------------------------------------------- */
.aviso-uso {
  container-type: inline-size;
  background: var(--superficie-2);
  border-radius: var(--r-l);
  padding: var(--e-5);
  margin-block: var(--e-6);
}
.aviso-uso__titulo {
  font-family: var(--fuente-num);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin: 0 0 var(--e-4);
}
.aviso-uso__lista {
  display: grid;
  gap: var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.aviso-uso__lista li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: baseline;
}
.aviso-uso__lista p {
  margin: 0;
  max-width: var(--ancho-texto);
}
.aviso-uso__num {
  font-family: var(--fuente-num);
  font-size: var(--t-meta);
  font-weight: 700;
  color: var(--tinta-3);
}
.aviso-uso__mas {
  margin: var(--e-4) 0 0;
  font-size: var(--t-ayuda);
}
/* Tres columnas solo si el bloque es ancho (en la columna angosta de una herramienta se apila) */
@container (min-width: 46rem) {
  .aviso-uso__lista {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e-5);
  }
}

/* --- Guía de jeringas ---------------------------------------------------- */
.jer-equivalencia {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: var(--e-5) 0 0;
  padding: 0;
}
.jer-equivalencia span {
  padding: var(--e-2) var(--e-4);
  border-radius: var(--r-pill);
  background: var(--superficie-2);
}
.jer-equivalencia b {
  font-weight: 700;
}
.jer-galeria {
  display: grid;
  gap: var(--e-4);
  margin: var(--e-5) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) {
  .jer-galeria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.jer-ficha {
  display: grid;
  gap: var(--e-3);
  padding: var(--e-5);
  border-radius: var(--r-l);
  background: var(--superficie-2);
  min-width: 0;
}
.jer-ficha__dibujo {
  min-width: 0;
}
.jer-ficha__dibujo svg {
  display: block;
  width: 100%;
  height: auto;
}
.jer-ficha__nombre {
  margin: 0;
  font-size: var(--t-h3);
}
.jer-ficha__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  margin: 0;
}
.jer-ficha__datos div {
  display: grid;
  gap: 2px;
}
.jer-ficha__datos dt {
  font-family: var(--fuente-num);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.jer-ficha__datos dd {
  margin: 0;
  font-weight: 600;
}
.ct-lista-claves {
  display: grid;
  gap: var(--e-3);
  padding-left: 1.2em;
}
.jer-cierre {
  margin-top: var(--e-5);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-m);
  background: var(--plumon);
  color: var(--plumon-tinta);
}
.jer-tabla__nombre,
.jer-tabla__nowrap {
  white-space: nowrap;
}

/* 85-wiki.css */
/* ==========================================================================
   E · Wiki y Know-how
   Portada del wiki (buscador), artículos, portada del Know-how y guías con
   lista para palomear, más la impresión limpia de una guía.
   Estilo del sitio: superficies neutras sin bordes, negro para actuar, lima
   (--plumon) solo para resaltar y etiquetas tipo instrumento en mono.
   Solo tokens de 00-base.css. Prefijos propios: .wiki-… y .kh-…
   ========================================================================== */

/* --- Etiquetas tipo instrumento ------------------------------------------ */
.wiki-etiqueta,
.wiki-meta,
.wiki-tarjeta__tipo,
.wiki-tarjeta__meta,
.wiki-leccion__antes,
.wiki-ver-tambien__tipo,
.wiki-indice__titulo,
.kh-casilla__num,
.kh-ficha dt {
  font-family: var(--fuente-num);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- Encabezado de portadas, artículos y guías -------------------------- */
.wiki-cabecera {
  padding-bottom: var(--e-2);
  max-width: 46rem;
}
.wiki-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--toque-min);
  padding: 0 var(--e-4);
  border-radius: var(--r-pill);
  background: var(--superficie-2);
  color: var(--tinta);
  text-decoration: none;
  transition: background-color var(--rapido) ease;
}
.wiki-etiqueta:hover {
  background: var(--superficie-3);
  color: var(--tinta);
}
.wiki-etiqueta .icono {
  width: 1.1em;
  height: 1.1em;
  color: var(--tinta-2);
}
.wiki-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin: var(--e-4) 0 0;
  color: var(--tinta-2);
}
.wiki-meta .icono {
  width: 1.1em;
  height: 1.1em;
}

/* Enlaces al glosario: subrayado punteado (DISENO §11.11) */
.pagina-wiki a.enlace-glosario,
.pagina-knowhow a.enlace-glosario {
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.24em;
}

/* --- Buscador del wiki ---------------------------------------------------- */
.wiki-buscador {
  max-width: 40rem;
  margin: var(--e-4) 0 var(--e-5);
}
.wiki-buscador__etiqueta {
  display: block;
  margin-bottom: var(--e-2);
  font-weight: 650;
}
.wiki-buscador__caja {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--toque);
  padding: var(--e-1) var(--e-1) var(--e-1) var(--e-4);
  border-radius: var(--r-m);
  background: var(--superficie-2);
  transition: background-color var(--rapido) ease;
}
.wiki-buscador__caja:hover {
  background: var(--superficie-3);
}
.wiki-buscador__caja:focus-within {
  background: var(--superficie);
  box-shadow: var(--foco);
}
.wiki-buscador__caja > .icono {
  color: var(--tinta-2);
}
.wiki-buscador input {
  flex: 1;
  min-width: 0;
  min-height: var(--toque-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tinta);
  font-size: var(--t-base);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.wiki-buscador input::placeholder {
  color: var(--tinta-3);
}
.wiki-buscador input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}
.wiki-buscador__borrar {
  flex: none;
}
.wiki-buscador__estado {
  min-height: 1.6em;
  margin: var(--e-2) 0 0;
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
}

/* --- Saltos a los temas ---------------------------------------------------- */
.wiki-saltos ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0 0 var(--e-2);
  padding: 0;
}
.wiki-saltos li + li {
  margin-top: 0;
}
.wiki-salto {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--toque-min);
  padding: 0 var(--e-4);
  border-radius: var(--r-pill);
  background: var(--superficie-2);
  color: var(--tinta);
  font-size: var(--t-ayuda);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--rapido) ease;
}
.wiki-salto:hover {
  background: var(--superficie-3);
  color: var(--tinta);
}
.wiki-salto .icono {
  color: var(--tinta-2);
}

/* --- Temas y tarjetas (portadas) ------------------------------------------ */
.wiki-categoria {
  padding-top: var(--e-6);
  scroll-margin-top: 5rem;
}
.wiki-categoria__cabeza {
  display: flex;
  align-items: flex-start;
  gap: var(--e-4);
}
.wiki-categoria__cabeza h2 {
  margin: 0 0 var(--e-1);
}
.wiki-categoria__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--r-m);
  background: var(--superficie-2);
  color: var(--tinta);
}
.wiki-categoria__descripcion {
  margin: 0;
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
}
.wiki-lista {
  display: grid;
  gap: var(--e-3);
  margin: var(--e-4) 0 0;
  padding: 0;
}
.wiki-lista > li + li {
  margin-top: 0;
}
@media (min-width: 720px) {
  .wiki-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1040px) {
  .wiki-lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.wiki-tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  height: 100%;
  min-height: var(--toque);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-l);
  background: var(--superficie-2);
  color: var(--tinta);
  text-decoration: none;
  transition: background-color var(--rapido) ease;
}
.wiki-tarjeta:hover {
  background: var(--superficie-3);
  color: var(--tinta);
}
.wiki-tarjeta__tipo {
  color: var(--tinta-2);
}
.wiki-tarjeta__titulo {
  font-size: var(--t-h3);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.wiki-tarjeta__resumen {
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
}
.wiki-tarjeta__meta {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: auto;
  padding-top: var(--e-2);
  color: var(--tinta-2);
}
.wiki-tarjeta__meta .icono {
  width: 1.1em;
  height: 1.1em;
}
/* Progreso guardado en una tarjeta de guía: lo único resaltado en lima */
.kh-tarjeta__progreso {
  align-self: flex-start;
  margin-top: auto;
  padding: 2px var(--e-2);
  border-radius: var(--r-s);
  background: var(--plumon);
  color: var(--plumon-tinta);
}
.kh-tarjeta__progreso:empty {
  display: none;
}
.wiki-vacio {
  margin-top: var(--e-5);
}
.wiki-otros {
  margin-top: var(--e-7);
  padding-bottom: var(--e-6);
}
.wiki-cierre__texto {
  margin: var(--e-5) 0 0;
  font-weight: 600;
}

/* --- Artículo: columna de lectura + índice a la derecha en escritorio --- */
.wiki-pagina {
  padding-bottom: var(--e-6);
}
.wiki-cuerpo {
  max-width: 46rem;
}
@media (min-width: 1100px) {
  .wiki-pagina {
    display: grid;
    grid-template-columns: minmax(0, 46rem) minmax(13rem, 17rem);
    column-gap: var(--e-7);
    align-items: start;
  }
  .wiki-pagina > .wiki-cabecera,
  .wiki-pagina > .wiki-cuerpo {
    grid-column: 1;
  }
  .wiki-pagina > .wiki-indice {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: 5.5rem;
    margin-top: var(--e-6);
  }
}
.wiki-indice {
  margin: var(--e-5) 0 0;
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-l);
  background: var(--superficie-2);
}
.wiki-indice__titulo {
  margin: 0 0 var(--e-1);
  color: var(--tinta-2);
}
.wiki-indice ol {
  margin: 0;
  padding: 0;
  counter-reset: indice;
}
.wiki-indice li {
  counter-increment: indice;
}
.wiki-indice li + li {
  margin-top: 0;
}
.wiki-indice a {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--toque-min);
  color: var(--tinta);
  font-size: var(--t-ayuda);
  line-height: 1.3;
  text-decoration: none;
}
.wiki-indice a::before {
  content: counter(indice, decimal-leading-zero);
  flex: none;
  font-family: var(--fuente-num);
  font-size: var(--t-meta);
  color: var(--tinta-2);
}
.wiki-indice a:hover {
  text-decoration: underline;
}
.wiki-cuerpo section,
.wiki-cuerpo h2,
.kh-pagina section,
.kh-paso {
  scroll-margin-top: 5.5rem;
}
.wiki-cuerpo li::marker {
  color: var(--tinta-2);
}

/* --- Bloques dentro de artículos y guías ---------------------------------- */
.wiki-figura {
  margin: var(--e-5) 0;
  padding: var(--e-4);
  border-radius: var(--r-l);
  background: var(--superficie-2);
}
.ejemplo .wiki-figura {
  padding: 0;
  background: transparent;
}
.wiki-ejemplo > :last-child {
  margin-bottom: 0;
}
/* En pantallas angostas el sello EJEMPLO ocupa dos renglones: deja aire para que no tape el texto */
@media (max-width: 560px) {
  .wiki-ejemplo {
    padding-top: var(--e-5);
  }
}
.wiki-figura figcaption {
  margin-top: var(--e-3);
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
}
.wiki-figura--vial svg {
  width: min(100%, 180px);
  margin-inline: auto;
}
.wiki-figura--material svg {
  width: min(100%, 120px);
  margin-inline: auto;
}
.wiki-figura--jeringa svg {
  width: 100%;
}
.wiki-tabla {
  margin: var(--e-4) 0;
}
.wiki-aviso {
  margin: var(--e-4) 0;
}
.wiki-fichas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: var(--e-3) 0 var(--e-4);
  padding: 0;
}
.wiki-fichas li {
  margin: 0;
  padding: var(--e-1) var(--e-3);
  border-radius: var(--r-pill);
  background: var(--superficie);
  font-family: var(--fuente-num);
  font-size: var(--t-ayuda);
  font-weight: 600;
}

/* «Lo importante»: el único bloque resaltado en lima */
.wiki-importante {
  margin: var(--e-7) 0 0;
  padding: var(--e-5);
  border-radius: var(--r-l);
  background: var(--superficie-2);
}
.wiki-importante h2 {
  display: inline-block;
  margin: 0 0 var(--e-4);
  padding: 0 var(--e-2);
  border-radius: var(--r-s);
  background: var(--plumon);
  color: var(--plumon-tinta);
}
.wiki-importante ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wiki-importante li {
  position: relative;
  padding-left: 1.5em;
  font-weight: 600;
}
.wiki-importante li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.55em;
  height: 0.55em;
  border-radius: 2px;
  background: var(--tinta);
}
.wiki-cierre {
  margin-top: var(--e-6);
}

/* Lección animada relacionada */
.wiki-leccion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-4);
  margin: var(--e-4) 0;
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-l);
  background: var(--superficie-2);
  color: var(--tinta);
  text-decoration: none;
  transition: background-color var(--rapido) ease;
}
.wiki-leccion:hover {
  background: var(--superficie-3);
  color: var(--tinta);
}
.wiki-leccion__play {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accion);
  color: var(--accion-tinta);
}
.wiki-leccion__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wiki-leccion__antes,
.wiki-leccion__tema,
.wiki-leccion__flecha {
  color: var(--tinta-2);
}
.wiki-leccion__titulo {
  font-size: var(--t-h3);
  font-weight: 650;
  letter-spacing: -0.02em;
}
.wiki-leccion__tema {
  font-size: var(--t-ayuda);
}

/* «Ver también» y enlaces de las portadas */
.wiki-ver-tambien {
  display: grid;
  gap: var(--e-2);
  margin: var(--e-4) 0 0;
  padding: 0;
}
.wiki-ver-tambien li + li {
  margin-top: 0;
}
.wiki-ver-tambien a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'tipo flecha'
    'texto flecha';
  align-items: center;
  column-gap: var(--e-3);
  min-height: var(--toque);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-m);
  background: var(--superficie-2);
  color: var(--tinta);
  text-decoration: none;
  transition: background-color var(--rapido) ease;
}
.wiki-ver-tambien a:hover {
  background: var(--superficie-3);
  color: var(--tinta);
}
.wiki-ver-tambien__tipo {
  grid-area: tipo;
  color: var(--tinta-2);
}
.wiki-ver-tambien__texto {
  grid-area: texto;
  font-weight: 600;
}
.wiki-ver-tambien a > .icono {
  grid-area: flecha;
  color: var(--tinta-2);
}

/* Fuentes */
.wiki-fuentes {
  margin-top: var(--e-6);
}
.wiki-fuentes h2 {
  font-size: var(--t-h3);
}
.wiki-fuentes ul {
  padding-left: 1.2em;
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
}
.wiki-fuentes a {
  color: var(--tinta-2);
  overflow-wrap: anywhere;
}

/* --- Guía práctica (Know-how) --------------------------------------------- */
.kh-pagina {
  max-width: 46rem;
  padding-bottom: var(--e-6);
}
.kh-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: var(--e-4) 0 0;
}
.kh-ficha > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: var(--toque);
  padding: var(--e-2) var(--e-4);
  border-radius: var(--r-m);
  background: var(--superficie-2);
}
.kh-ficha dt {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  color: var(--tinta-2);
}
.kh-ficha dt .icono {
  width: 1em;
  height: 1em;
}
.kh-ficha dd {
  margin: 0;
  font-weight: 650;
}
.kh-ficha dd a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
}
.kh-seccion {
  margin-top: var(--e-6);
}
.kh-materiales {
  display: grid;
  gap: var(--e-2);
  margin: var(--e-4) 0 0;
  padding: 0;
}
@media (min-width: 640px) {
  .kh-materiales {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.kh-material {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: var(--e-3);
  margin: 0;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-m);
  background: var(--superficie-2);
}
.kh-materiales > li + li {
  margin-top: 0;
}
.kh-material__dibujo {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-s);
  background: var(--superficie);
  color: var(--tinta);
}
.kh-material__dibujo svg {
  width: 32px;
  height: 32px;
}
.kh-material__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kh-material__texto span {
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
}

/* Lista para palomear (las casillas son .casilla-grande, del sitio) */
.kh-lista {
  margin-top: var(--e-7);
}
.kh-instruccion {
  color: var(--tinta-2);
}
.kh-progreso {
  height: 6px;
  margin: var(--e-4) 0 var(--e-2);
  border-radius: var(--r-pill);
  background: var(--superficie-3);
  overflow: hidden;
}
.kh-progreso__barra {
  display: block;
  height: 100%;
  background: var(--accion);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--normal) var(--curva);
}
.kh-progreso__texto {
  display: inline-block;
  margin: 0 0 var(--e-2);
  padding: 2px 0;
  font-family: var(--fuente-num);
  font-size: var(--t-ayuda);
  font-weight: 600;
}
.kh-lista--completa .kh-progreso__texto {
  padding: 2px var(--e-2);
  border-radius: var(--r-s);
  background: var(--plumon);
  color: var(--plumon-tinta);
}
.kh-pasos {
  margin: var(--e-2) 0 0;
  padding: 0;
}
.kh-paso {
  margin: 0;
}
.kh-pasos > .kh-paso + .kh-paso {
  margin-top: var(--e-2);
}
.kh-paso .casilla-grande {
  margin-top: 0;
}
.kh-casilla__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kh-casilla__num,
.kh-casilla__detalle {
  color: var(--tinta-2);
}
.kh-casilla__nombre {
  font-weight: 650;
}
.kh-paso__nota {
  margin: var(--e-2) 0 0;
  padding-left: calc(var(--e-4) + 28px + var(--e-3));
  font-size: var(--t-ayuda);
  color: var(--tinta-2);
}
.kh-acciones {
  margin-top: var(--e-4);
}
.kh-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin: var(--e-3) 0 0;
  color: var(--tinta-2);
}
.kh-estado:empty {
  display: none;
}
.kh-guardado {
  margin-top: var(--e-2);
}
.kh-para {
  margin: var(--e-6) 0 0;
}
.kh-para p + p {
  margin-top: var(--e-2);
}
.kh-sigue {
  margin-top: var(--e-7);
}
.kh-solo-impresion {
  display: none;
}

/* --- Impresión: una guía (o un artículo) limpia, sin navegación ----------- */
/* El sitio ya pone fondo blanco y texto negro al imprimir (90-imprimir.css);
   aquí todo hereda ese color, sin colores fijos. */
@media print {
  .pagina-wiki .wiki-buscador,
  .pagina-wiki .wiki-saltos,
  .pagina-wiki .wiki-indice,
  .pagina-wiki .cta-doble,
  .pagina-wiki .wiki-cierre,
  .pagina-wiki .wiki-sigue,
  .pagina-wiki .wiki-otros,
  .pagina-wiki .wiki-figura,
  .pagina-knowhow .cta-doble,
  .pagina-knowhow .kh-acciones,
  .pagina-knowhow .kh-estado,
  .pagina-knowhow .kh-guardado,
  .pagina-knowhow .kh-progreso,
  .pagina-knowhow .kh-sigue,
  .pagina-knowhow .wiki-fuentes,
  .pagina-knowhow .wiki-figura,
  .pagina-knowhow .kh-material__dibujo,
  .pagina-knowhow .wiki-otros {
    display: none !important;
  }
  .pagina-wiki,
  .pagina-knowhow {
    font-size: 11pt;
  }
  .kh-pagina,
  .wiki-cuerpo,
  .wiki-cabecera {
    max-width: none;
  }
  .pagina-wiki .respuesta-directa,
  .pagina-knowhow .respuesta-directa,
  .wiki-importante,
  .wiki-importante h2,
  .wiki-etiqueta,
  .wiki-tarjeta,
  .kh-ficha > div,
  .kh-material,
  .kh-paso .casilla-grande,
  .kh-progreso__texto,
  .pagina-wiki .ejemplo,
  .pagina-knowhow .ejemplo,
  .pagina-wiki .aviso,
  .pagina-knowhow .aviso,
  .pagina-wiki .tabla-envoltura,
  .pagina-knowhow .tabla-envoltura,
  .pagina-wiki thead th,
  .pagina-knowhow thead th,
  .pagina-wiki tbody td,
  .pagina-wiki tbody th,
  .pagina-knowhow tbody td,
  .pagina-knowhow tbody th {
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
  }
  .pagina-wiki .aviso .aviso__titulo,
  .pagina-knowhow .aviso .aviso__titulo,
  .pagina-wiki .aviso > .icono,
  .pagina-knowhow .aviso > .icono,
  .kh-casilla__num,
  .kh-casilla__detalle,
  .kh-paso__nota,
  .kh-material__texto span,
  .wiki-meta,
  .kh-ficha dt {
    color: inherit !important;
  }
  .pagina-wiki .aviso,
  .pagina-knowhow .aviso,
  .kh-ficha > div,
  .kh-material {
    border: 1px solid currentColor;
  }
  .pagina-wiki thead th,
  .pagina-knowhow thead th {
    border-bottom: 1px solid currentColor;
  }
  .kh-paso .casilla-grande {
    min-height: 0;
    padding: 6pt 8pt;
    border: 1px solid currentColor;
    break-inside: avoid;
  }
  .kh-paso .casilla-grande__caja {
    background: transparent !important;
    box-shadow: none !important;
    border: 2px solid currentColor;
  }
  .kh-paso .casilla-grande input:checked ~ .casilla-grande__caja {
    color: inherit !important;
  }
  .kh-paso {
    break-inside: avoid;
  }
  .pagina-wiki h2,
  .pagina-knowhow h2 {
    break-after: avoid;
  }
  .pagina-wiki a,
  .pagina-knowhow a {
    color: inherit;
    text-decoration: none;
  }
  .kh-solo-impresion {
    display: block;
    margin-top: 12pt;
    font-size: 9pt;
  }
}

/* 90-imprimir.css */
/* ==========================================================================
   Impresión (DISENO.md §7.8 y §10.9): solo la tarjeta del vial, en blanco y negro.
   ========================================================================== */

.tarjeta-imprimir {
  display: none;
}

@media print {
  /* Al imprimir no hay animaciones ni revelados: todo se ve completo */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  @page {
    size: letter;
    margin: 14mm;
  }
  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }
  body:has(.tarjeta-imprimir) > *:not(.tarjeta-imprimir) {
    display: none !important;
  }
  .encabezado,
  .pie,
  .migas,
  .puerta,
  .barra-puerta,
  .toast,
  .solo-js button,
  .resultado__acciones {
    display: none !important;
  }
  .tarjeta-imprimir {
    display: block;
    max-width: 16cm;
    margin: 0 auto;
    border: 2px dashed #000;
    border-radius: 12px;
    padding: 10mm;
    font-family: var(--fuente);
    color: #000;
  }
  .ti-cabeza {
    font-weight: 700;
    margin: 0 0 4mm;
  }
  .ti-marca {
    font-size: 26pt;
    margin: 0 0 4mm;
  }
  .ti-marca strong {
    font-family: var(--fuente-num);
    font-size: 40pt;
    text-decoration: underline;
    text-decoration-thickness: 6px;
  }
  .ti-jeringa {
    margin: 0 0 4mm;
  }
  .ti-jeringa .j-liquido,
  .ti-jeringa .j-plumon,
  .ti-jeringa .j-bandera-caja {
    fill: #fff !important;
    stroke: #000 !important;
  }
  .ti-jeringa * {
    stroke: #000;
  }
  .ti-jeringa .j-numero,
  .ti-jeringa .j-bandera-texto {
    fill: #000 !important;
  }
  .ti-datos {
    font-size: 12pt;
  }
  .ti-linea {
    font-size: 12pt;
    margin: 6mm 0 0;
  }
  .ti-linea span {
    display: inline-block;
    min-width: 8cm;
    border-bottom: 1px solid #000;
  }
  .ti-higiene {
    margin-top: 6mm;
    font-weight: 700;
  }
  .ti-pie {
    font-size: 9pt;
    margin-top: 6mm;
  }
  a {
    color: #000;
  }
}