/* ==========================================================================
   Mordedura de perro — Bolivia
   Hoja de estilos única. Sin dependencias, sin webfonts, sin peticiones.
   Todo el ornamento (patrones, ondas, blobs) es SVG embebido o CSS puro.

   Orden:
     1. Tokens
     2. Base
     3. Layout y bandas
     4. Cabecera fija
     5. Hero
     6. Componentes
     7. Utilidades
     8. Movimiento reducido
     9. Impresión

   Solo modo claro. No hay modo oscuro ni consulta de esquema del sistema: la
   página es una ficha de salud que debe verse igual en cualquier pantalla y
   en papel.

   El rojo (--alarma) es exclusivo de urgencia y peligro. Nunca decorativo.
   Con más color en la página, esa regla importa más, no menos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Tipografía de sistema: cero peticiones, cero FOUT */
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --fuente-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Escala tipográfica fluida (320px → 1440px), con más contraste que antes */
  --paso--2: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --paso--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.9rem);
  --paso-0: clamp(1.0625rem, 1.02rem + 0.24vw, 1.1875rem);
  --paso-1: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);
  --paso-2: clamp(1.5rem, 1.33rem + 0.85vw, 2rem);
  --paso-3: clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem);
  --paso-4: clamp(2.25rem, 1.72rem + 2.6vw, 3.75rem);

  /* Espaciado: escala de 8px */
  --e-1: 0.25rem;  /*  4px */
  --e-0: 0.5rem;   /*  8px */
  --e-1x: 0.75rem; /* 12px */
  --e-2: 1rem;     /* 16px */
  --e-3: 1.5rem;   /* 24px */
  --e-4: 2rem;     /* 32px */
  --e-5: 3rem;     /* 48px */
  --e-6: 4rem;     /* 64px */
  --e-7: 6rem;     /* 96px */

  /* Aire entre bandas: crece con la pantalla */
  --aire-banda: clamp(3rem, 1.6rem + 6vw, 6rem);

  /* Medida de lectura y anchos */
  --medida: 68ch;
  --medida-ancha: 78rem;

  /* ---- Paleta ----
     Siete colores de identidad. Todo lo demás son derivados. */
  --principal: #0e7c7b;      /* teal profundo   */
  --secundario: #14a0a0;     /* teal claro      */
  --papel: #fbf8f3;          /* crema           */
  --papel-alt: #f3ede3;      /* arena           */
  --acento: #e8a33d;         /* ámbar           */
  --alarma: #c4342b;         /* rojo — urgencia */
  --tinta: #1f2933;          /* texto           */

  /* Derivados oscuros del teal (fondos profundos, texto sobre claro, hover) */
  --principal-osc: #0a5f5e;
  --principal-mas-osc: #08494a;
  --principal-profundo: #063c3d;

  /* Derivados claros (fondos de bloque) */
  --papel-claro: #fffdf9;
  --principal-tenue: #e3f1f0;
  --acento-tenue: #fbf0dc;
  --alarma-tenue: #fbedea;

  /* Texto secundario y variantes legibles */
  --tinta-suave: #4b5a67;
  --acento-texto: #7a4e0c;   /* ámbar utilizable como texto sobre crema */
  --alarma-osc: #a82a22;

  /* Bordes */
  --borde: #e5ddcf;
  --borde-fuerte: #cfc3ae;
  --borde-teal: #bfdedd;

  /* ---- Sombras ----
     Cuatro niveles, difusas y teñidas de teal. El negro puro se ve barato. */
  --sombra-rgb: 6 60 61;
  --sombra-1:
    0 1px 2px rgb(var(--sombra-rgb) / 0.05),
    0 2px 6px rgb(var(--sombra-rgb) / 0.06);
  --sombra-2:
    0 2px 4px rgb(var(--sombra-rgb) / 0.06),
    0 8px 18px rgb(var(--sombra-rgb) / 0.09);
  --sombra-3:
    0 4px 8px rgb(var(--sombra-rgb) / 0.07),
    0 16px 34px rgb(var(--sombra-rgb) / 0.12);
  --sombra-4:
    0 10px 20px rgb(var(--sombra-rgb) / 0.09),
    0 30px 60px rgb(var(--sombra-rgb) / 0.16);

  /* ---- Radios ---- */
  --radio-1: 8px;
  --radio-2: 12px;
  --radio-3: 16px;
  --radio-4: 24px;
  --pastilla: 999px;

  --trazo: 1.5;
  --transicion: 180ms ease;
  --transicion-lenta: 320ms ease;

  /* Alto reservado por la cabecera fija */
  --alto-cabecera: clamp(3.5rem, 3.1rem + 1.6vw, 4.25rem);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* El ancla no puede quedar debajo de la cabecera fija. */
  scroll-padding-block-start: calc(var(--alto-cabecera) + var(--e-2));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: var(--paso-0);
  line-height: 1.7;
  text-underline-offset: 0.2em;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  line-height: 1.14;
  text-wrap: balance;
  margin: 0 0 var(--e-2);
  font-weight: 750;
  letter-spacing: -0.02em;
}

h1 { font-size: var(--paso-4); letter-spacing: -0.03em; }
h2 { font-size: var(--paso-3); }
h3 { font-size: var(--paso-2); letter-spacing: -0.015em; }
h4 { font-size: var(--paso-1); letter-spacing: -0.01em; }

h3,
h4 {
  margin-block-start: var(--e-4);
}

p,
ul,
ol,
dl,
figure,
table {
  margin: 0 0 var(--e-3);
}

ul,
ol {
  padding-inline-start: var(--e-3);
}

li + li {
  margin-block-start: var(--e-0);
}

li > ul,
li > ol {
  margin-block: var(--e-0) 0;
}

li::marker {
  color: var(--principal-osc);
}

strong,
b {
  font-weight: 700;
}

small {
  font-size: var(--paso--1);
}

a {
  color: var(--principal-osc);
  text-decoration-thickness: 1px;
  transition: color var(--transicion);
}

a:hover {
  color: var(--principal);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--principal);
  outline-offset: 3px;
  border-radius: var(--radio-1);
}

hr {
  border: 0;
  border-block-start: 1px solid var(--borde);
  margin-block: var(--e-5);
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

::selection {
  background: var(--principal-tenue);
  color: var(--tinta);
}

/* --------------------------------------------------------------------------
   3. Layout y bandas
   Ritmo vertical: bandas de fondo alterno (crema / arena) separadas por
   divisores de onda, con formas orgánicas de baja opacidad como decoración.
   -------------------------------------------------------------------------- */
.envoltura {
  width: min(var(--medida), 100% - var(--e-4));
  margin-inline: auto;
}

.envoltura-ancha {
  width: min(var(--medida-ancha), 100% - var(--e-4));
  margin-inline: auto;
}

/* --- Bandas --- */
.banda {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--aire-banda);
}

.banda-papel { background: var(--papel); }
.banda-arena { background: var(--papel-alt); }

.banda > .envoltura > section + section,
.banda > .envoltura > .indice + section {
  margin-block-start: var(--aire-banda);
}

section[id] {
  scroll-margin-block-start: var(--e-2);
}

/* --- Formas orgánicas de fondo (blobs) ---
   Puramente decorativas: opacidad baja, detrás del contenido, sin texto
   encima que dependa de ellas para contrastar. */
.blob {
  position: absolute;
  z-index: -1;
  inline-size: clamp(18rem, 45vw, 34rem);
  aspect-ratio: 1;
  border-radius: 46% 54% 61% 39% / 42% 38% 62% 58%;
  opacity: 0.5;
  pointer-events: none;
}

.blob-teal {
  background: radial-gradient(circle at 35% 35%, var(--principal-tenue), transparent 68%);
}

.blob-ambar {
  background: radial-gradient(circle at 40% 40%, var(--acento-tenue), transparent 68%);
}

.blob-1 { inset-block-start: -8rem; inset-inline-end: -10rem; }
.blob-2 { inset-block-end: -12rem; inset-inline-start: -12rem; }

/* --- Divisores de onda ---
   El contenedor lleva el color de la banda que queda arriba; el trazo del SVG
   lleva el color de la banda que queda abajo. `color` alimenta el `fill`. */
.onda {
  line-height: 0;
  pointer-events: none;
}

.onda svg {
  display: block;
  inline-size: 100%;
  block-size: clamp(2rem, 4.5vw, 4rem);
  fill: currentColor;
  stroke: none;
}

.onda-a-arena  { background: var(--papel);     color: var(--papel-alt); }
.onda-a-papel  { background: var(--papel-alt); color: var(--papel); }
.onda-a-pie    { background: var(--papel-alt); color: var(--principal-profundo); }

/* La onda del hero se superpone al degradado, así que va posicionada. */
.onda-hero {
  position: absolute;
  inset-block-end: -1px;
  inset-inline: 0;
  z-index: 2;
  background: none;
  color: var(--papel);
}

/* --- Pie --- */
.pie {
  position: relative;
  isolation: isolate;
  background: var(--principal-profundo);
  color: var(--papel-alt);
  padding-block: var(--e-6) var(--e-5);
  font-size: var(--paso--1);
}

.pie h2 {
  font-size: var(--paso-1);
  color: var(--papel);
}

.pie strong {
  color: var(--papel);
}

.pie a {
  color: var(--acento);
}

.pie a:hover {
  color: var(--acento-tenue);
}

.pie :focus-visible {
  outline-color: var(--acento);
}

/* Enlace de salto */
.salto {
  position: fixed;
  inset-inline-start: var(--e-2);
  inset-block-start: var(--e-2);
  z-index: 60;
  transform: translateY(-250%);
  display: inline-block;
  min-height: 44px;
  padding: var(--e-1x) var(--e-2);
  background: var(--principal-osc);
  color: var(--papel);
  border-radius: var(--radio-1);
  box-shadow: var(--sombra-3);
  text-decoration: none;
  font-weight: 700;
  transition: transform var(--transicion);
}

.salto:focus {
  transform: translateY(0);
}

/* Hoja de símbolos SVG: presente en el DOM, invisible y fuera del árbol a11y */
.simbolos {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   4. Cabecera fija
   Estado por defecto (sin JS): sólida. El JS añade `js` a <html>, lo que
   habilita el estado transparente inicial, y añade `solido` al bajar.
   Así, sin JavaScript, nunca queda texto claro sobre fondo claro.
   -------------------------------------------------------------------------- */
.cabecera {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  min-block-size: var(--alto-cabecera);
  display: flex;
  align-items: center;
  background: var(--papel-claro);
  color: var(--tinta);
  box-shadow: var(--sombra-2);
  border-block-end: 1px solid var(--borde);
  transition:
    background var(--transicion-lenta),
    box-shadow var(--transicion-lenta),
    color var(--transicion-lenta),
    border-color var(--transicion-lenta);
}

.cabecera > .envoltura-ancha {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  inline-size: min(var(--medida-ancha), 100% - var(--e-3));
}

/* Estado transparente: solo con JS y solo mientras no se ha bajado. */
.js .cabecera {
  background: transparent;
  color: var(--papel);
  box-shadow: none;
  border-block-end-color: transparent;
}

.js .cabecera.solido {
  background: var(--papel-claro);
  color: var(--tinta);
  box-shadow: var(--sombra-2);
  border-block-end-color: var(--borde);
}

.js .cabecera:not(.solido) :focus-visible {
  outline-color: var(--acento);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-0);
  margin: 0;
  flex: none;
  min-block-size: 44px;
  font-size: var(--paso--1);
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
}

.marca .icono {
  color: var(--secundario);
  transition: color var(--transicion-lenta);
}

.cabecera:not(.solido) .marca .icono {
  color: inherit;
}

/* Navegación corta: 5 destinos, no los 14 del índice. */
.nav-corta {
  margin-inline-start: auto;
  min-inline-size: 0;
}

.nav-corta ul {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  list-style: none;
  margin: 0;
  /* El relleno vertical deja sitio al anillo de foco dentro del contenedor
     de scroll, que de otro modo lo recortaría. */
  padding: var(--e-0) 0;
  /* En móvil los enlaces se deslizan en horizontal: cero JS, cero hamburguesa. */
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-corta ul::-webkit-scrollbar {
  display: none;
}

.nav-corta li {
  margin: 0;
  flex: none;
}

.nav-corta a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: var(--e-1x);
  border-radius: var(--pastilla);
  color: inherit;
  text-decoration: none;
  font-size: var(--paso--1);
  font-weight: 650;
  white-space: nowrap;
  transition: background var(--transicion), color var(--transicion);
}

/* Hover de la cabecera sólida, que es el estado por defecto y el único que
   existe sin JavaScript. */
.nav-corta a:hover {
  background: var(--principal-tenue);
  color: var(--principal-osc);
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

/* Hover del estado transparente: solo con JS y solo sobre el hero. */
.js .cabecera:not(.solido) .nav-corta a:hover {
  background: rgb(255 255 255 / 0.16);
  color: var(--papel);
}

@media (max-width: 44rem) {
  .nav-corta a {
    padding-inline: var(--e-0);
    font-size: var(--paso--2);
  }

  /* En pantallas estrechas el nombre largo se comería la barra entera y no
     dejaría sitio a los enlaces. Queda solo el icono como enlace al inicio,
     pero el nombre sigue en el árbol de accesibilidad: se oculta a la vista,
     no se elimina. */
  .marca-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .marca {
    min-inline-size: 44px;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   5. Hero
   Degradado teal + patrón SVG embebido + tarjetas elevadas.
   Todo el texto va en crema. El degradado se detiene en --principal-osc: aun
   sumando el foco radial de --secundario, el punto más claro posible del fondo
   queda en 5,3:1 contra la crema, por encima del mínimo AA para texto normal.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(110% 80% at 85% 0%, rgb(20 160 160 / 0.3), transparent 55%),
    linear-gradient(160deg, var(--principal-profundo) 0%, var(--principal-mas-osc) 55%, var(--principal-osc) 100%);
  color: var(--papel);
  padding-block-start: calc(var(--alto-cabecera) + var(--e-5));
  padding-block-end: calc(var(--aire-banda) + 4rem);
  overflow: hidden;
}

/* El hero necesita más ancho que la medida de lectura para que los tres pasos
   quepan en una fila. El texto sigue limitado por su propia medida. */
.hero > .envoltura {
  width: min(58rem, 100% - var(--e-4));
}

/* Patrón sutil: circunferencias en blanco al 9 %, atenuadas hacia abajo con
   una máscara. Data URI embebido: sin peticiones. */
.hero-patron {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='1.1'%3E%3Ccircle cx='32' cy='32' r='15'/%3E%3Ccircle cx='0' cy='0' r='15'/%3E%3Ccircle cx='64' cy='0' r='15'/%3E%3Ccircle cx='0' cy='64' r='15'/%3E%3Ccircle cx='64' cy='64' r='15'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.9), transparent 78%);
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.9), transparent 78%);
}

.hero h1 {
  color: var(--papel);
  max-inline-size: 20ch;
  margin-block-end: var(--e-3);
}

.hero .entradilla {
  color: var(--papel);
}

/* Sobre el degradado el ámbar puro no llega a AA (≈2,4:1). El ámbar muy claro
   sí (5,01:1 en el peor punto) y sigue leyéndose como enlace por el subrayado. */
.hero a {
  color: var(--acento-tenue);
  text-decoration-thickness: 2px;
}

.hero :focus-visible {
  outline-color: var(--acento);
}

/* Filete ámbar bajo el h1: decoración, nunca texto sobre teal. */
.hero h1::after {
  content: "";
  display: block;
  inline-size: 4.5rem;
  block-size: 5px;
  margin-block-start: var(--e-3);
  border-radius: var(--pastilla);
  background: var(--acento);
}

/* --- Entradilla --- */
.entradilla {
  font-size: var(--paso-1);
  line-height: 1.55;
  color: var(--tinta-suave);
  max-inline-size: 58ch;
}

/* --- Bloque de urgencia, ya dentro del hero --- */
.urgencia {
  margin-block-start: var(--e-6);
}

.urgencia h2 {
  color: var(--papel);
  font-size: var(--paso-2);
  display: flex;
  align-items: center;
  gap: var(--e-1x);
}

/* El rojo sigue marcando la urgencia: va sobre una pastilla crema, donde
   #c4342b sobre #fffdf9 da 5,34:1. Sobre el teal no sería legible. */
.chip-alarma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--pastilla);
  background: var(--papel-claro);
  color: var(--alarma);
  box-shadow: var(--sombra-2);
}

.chip-alarma .icono {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  vertical-align: 0;
}

/* Los tres pasos: tarjetas elevadas sobre el degradado. */
.pasos {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--e-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--e-3);
}

.pasos > li {
  margin: 0;
  background: var(--papel-claro);
  color: var(--tinta);
  border-radius: var(--radio-3);
  padding: var(--e-3);
  box-shadow: var(--sombra-4);
  border-block-start: 4px solid var(--acento);
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.pasos .icono-g {
  color: var(--principal-osc);
  display: block;
  margin-block-end: var(--e-2);
}

.pasos h3 {
  margin: 0 0 var(--e-0);
  font-size: var(--paso-1);
}

.pasos p {
  margin: 0;
  font-size: var(--paso--1);
  line-height: 1.65;
  color: var(--tinta-suave);
}

.pasos strong {
  color: var(--tinta);
}

/* El bloque de gratuidad dentro del hero: tarjeta oscura traslúcida, no crema.
   Oscurece el degradado en lugar de aclararlo, así que el texto crema sube a
   9:1 en el peor punto posible del fondo. */
.hero .destacado {
  background: rgb(6 60 61 / 0.72);
  border: 1px solid rgb(255 255 255 / 0.24);
  border-inline-start: 5px solid var(--acento);
  border-radius: var(--radio-2);
  color: var(--papel);
  padding: var(--e-3);
  max-inline-size: 64ch;
  box-shadow: var(--sombra-3);
}

.hero .destacado strong {
  color: var(--papel);
}

/* --------------------------------------------------------------------------
   6. Componentes
   -------------------------------------------------------------------------- */

/* --- Iconos e ilustraciones de línea --- */
.icono,
.diagrama svg {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--trazo);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icono {
  inline-size: 1.5em;
  block-size: 1.5em;
  flex: none;
  vertical-align: -0.3em;
}

.icono-g {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  stroke-width: 1.35;
}

.diagrama {
  margin: 0 0 var(--e-3);
}

.diagrama svg {
  inline-size: 100%;
  block-size: auto;
  stroke-width: 2.4;
}

.diagrama figcaption {
  font-size: var(--paso--1);
  color: var(--tinta-suave);
  margin-block-start: var(--e-0);
}

/* --- Destacados --- */
.destacado {
  border-inline-start: 5px solid var(--principal);
  background: var(--principal-tenue);
  padding: var(--e-3);
  border-radius: 0 var(--radio-2) var(--radio-2) 0;
  margin-block: var(--e-4);
  box-shadow: var(--sombra-1);
}

.destacado > :last-child {
  margin-block-end: 0;
}

.destacado-alarma {
  border-inline-start-color: var(--alarma);
  background: var(--alarma-tenue);
}

.destacado-alarma strong {
  color: var(--alarma-osc);
}

/* --- Aviso legal --- */
.aviso {
  font-size: var(--paso--1);
  color: var(--tinta-suave);
  background: var(--papel-claro);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-2);
  padding: var(--e-3);
  box-shadow: var(--sombra-1);
}

.aviso > :last-child {
  margin-block-end: 0;
}

/* --- Índice de navegación --- */
.indice {
  background: var(--papel-claro);
  border: 1px solid var(--borde);
  border-radius: var(--radio-3);
  padding: var(--e-4);
  margin-block: var(--e-5) 0;
  box-shadow: var(--sombra-2);
}

.indice h2 {
  font-size: var(--paso-1);
  margin-block-end: var(--e-1x);
}

.indice ol {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: var(--e-4);
}

.indice li {
  margin: 0;
  break-inside: avoid;
}

.indice a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--e-1x);
  border-radius: var(--radio-1);
  border-inline-start: 3px solid transparent;
  text-decoration: none;
  color: var(--tinta);
  transition: border-color var(--transicion), color var(--transicion),
    background var(--transicion);
}

.indice a:hover {
  color: var(--principal-osc);
  background: var(--principal-tenue);
  border-inline-start-color: var(--principal);
  text-decoration: underline;
}

/* Estado que aplicará el JS (IntersectionObserver). Sin JS no aparece. */
.indice a.activa {
  color: var(--principal-osc);
  font-weight: 700;
  border-inline-start-color: var(--principal);
  background: var(--principal-tenue);
}

@media (max-width: 34rem) {
  .indice ol { columns: 1; }
}

/* --- Temporizador de lavado --- */
.temporizador {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--borde-teal);
  border-radius: var(--radio-4);
  padding: var(--e-5) var(--e-3);
  margin-block: var(--e-4);
  text-align: center;
  color: var(--papel);
  background:
    radial-gradient(90% 110% at 50% 0%, rgb(20 160 160 / 0.3), transparent 62%),
    linear-gradient(155deg, var(--principal-profundo), var(--principal-osc));
  box-shadow: var(--sombra-4);
}

.temporizador :focus-visible {
  outline-color: var(--acento);
}

.reloj {
  font-family: var(--fuente-mono);
  font-size: clamp(3rem, 2rem + 4.4vw, 5rem);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 var(--e-2);
  color: var(--papel);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgb(6 60 61 / 0.35);
}

.temporizador p {
  margin: 0;
  max-inline-size: 44ch;
  margin-inline: auto;
}

.temporizador .reloj {
  margin-block-end: var(--e-2);
}

.temporizador .pie-reloj {
  font-size: var(--paso--1);
  color: var(--papel);
  margin-block-start: var(--e-2);
}

.temporizador .boton {
  background: var(--papel-claro);
  border-color: var(--papel-claro);
  color: var(--principal-osc);
}

.temporizador .boton:hover {
  background: var(--acento-tenue);
  border-color: var(--acento-tenue);
  color: var(--acento-texto);
}

.temporizador .boton-secundario {
  background: transparent;
  border-color: var(--papel-alt);
  color: var(--papel);
}

.temporizador .boton-secundario:hover {
  background: rgb(255 255 255 / 0.16);
  border-color: var(--papel);
  color: var(--papel);
}

/* --- Botones --- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-0);
  min-height: 44px;
  min-width: 44px;
  padding: var(--e-0) var(--e-3);
  margin-block-start: var(--e-2);
  margin-inline: var(--e-1);
  border: 2px solid var(--principal-osc);
  border-radius: var(--pastilla);
  background: var(--principal-osc);
  color: var(--papel);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--sombra-2);
  transition: background var(--transicion), color var(--transicion),
    box-shadow var(--transicion), transform var(--transicion),
    border-color var(--transicion);
}

.boton:hover {
  background: var(--principal-mas-osc);
  border-color: var(--principal-mas-osc);
  box-shadow: var(--sombra-3);
  transform: translateY(-2px);
}

.boton-secundario {
  background: var(--papel-claro);
  color: var(--principal-osc);
}

.boton-secundario:hover {
  background: var(--principal-tenue);
  color: var(--principal-mas-osc);
}

/* --- Lista de "no hacer" --- */
.no-hacer {
  list-style: none;
  padding: var(--e-3) var(--e-4);
  background: var(--alarma-tenue);
  border: 1px solid var(--alarma);
  border-radius: var(--radio-3);
  box-shadow: var(--sombra-2);
}

.no-hacer > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-2);
  align-items: start;
  padding-block: var(--e-1x);
  margin: 0;
}

.no-hacer > li + li {
  border-block-start: 1px solid rgb(196 52 43 / 0.22);
}

.no-hacer .icono {
  color: var(--alarma);
  margin-block-start: 0.15em;
}

.no-hacer strong {
  color: var(--alarma-osc);
}

/* --- Triaje (mejora con JS) --- */
.triaje {
  background: var(--papel-claro);
  border: 1px solid var(--borde);
  border-radius: var(--radio-3);
  padding: var(--e-4);
  margin-block: var(--e-4);
  box-shadow: var(--sombra-2);
}

.triaje h3 {
  margin-block-start: 0;
}

.triaje fieldset {
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  padding: var(--e-2) var(--e-3);
  margin: 0 0 var(--e-2);
  background: var(--papel);
}

.triaje legend {
  font-weight: 700;
  padding-inline: var(--e-0);
  color: var(--principal-osc);
}

.triaje label {
  display: flex;
  align-items: center;
  gap: var(--e-1x);
  min-height: 44px;
  cursor: pointer;
}

.triaje input[type="radio"] {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  accent-color: var(--principal);
  flex: none;
}

.triaje .resultado {
  font-weight: 700;
  margin: 0;
}

.triaje .resultado:not(:empty) {
  background: var(--principal-tenue);
  border-radius: var(--radio-2);
  padding: var(--e-2) var(--e-3);
}

/* --- Tarjetas Leve / Grave --- */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--e-3);
  margin-block: var(--e-4);
}

.tarjeta {
  border: 1px solid var(--borde);
  border-radius: var(--radio-3);
  padding: var(--e-4);
  background: var(--papel-claro);
  box-shadow: var(--sombra-2);
  transition: box-shadow var(--transicion), border-color var(--transicion),
    transform var(--transicion);
}

.tarjeta:hover {
  box-shadow: var(--sombra-3);
  transform: translateY(-3px);
}

.tarjeta h3 {
  margin-block: 0 var(--e-2);
  font-size: var(--paso-1);
  color: var(--principal-osc);
}

.tarjeta > :last-child {
  margin-block-end: 0;
}

.tarjeta ul {
  padding-inline-start: var(--e-2);
}

.tarjeta-grave {
  border-color: var(--alarma);
  background: var(--alarma-tenue);
}

.tarjeta-grave h3 {
  color: var(--alarma-osc);
}

.tarjeta-grave li::marker {
  color: var(--alarma);
}

/* Estado que aplicará el JS del triaje. Sin JS ambas tarjetas se leen igual. */
.tarjeta.destacada {
  border-color: var(--principal);
  box-shadow: var(--sombra-3), 0 0 0 4px var(--principal-tenue);
}

.tarjeta-grave.destacada {
  border-color: var(--alarma);
  box-shadow: var(--sombra-3), 0 0 0 4px rgb(196 52 43 / 0.18);
}

/* Zonas de los diagramas de silueta.
   `color` y `stroke: currentColor` se declaran en el mismo elemento para que
   la resolución del color no dependa de la herencia. */
.silueta .cuerpo {
  color: var(--tinta-suave);
  stroke: currentColor;
}

.silueta .zona {
  stroke-width: 3;
  stroke-dasharray: 5 4;
}

.silueta .zona-leve {
  color: var(--principal);
  stroke: currentColor;
}

.silueta .zona-grave {
  color: var(--alarma);
  stroke: currentColor;
}

/* --- Línea de tiempo --- */
.linea-tiempo {
  list-style: none;
  padding: 0;
  margin-block: var(--e-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--e-3);
}

.linea-tiempo > li {
  margin: 0;
  padding: var(--e-3);
  background: var(--papel-claro);
  border-radius: var(--radio-2);
  border-block-start: 4px solid var(--acento);
  box-shadow: var(--sombra-2);
}

.linea-tiempo .hito {
  display: block;
  font-weight: 750;
  font-size: var(--paso--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--principal-osc);
}

.linea-tiempo p {
  margin: var(--e-0) 0 0;
  font-size: var(--paso--1);
  color: var(--tinta-suave);
}

/* --- Señales de alarma --- */
.alarma-lista {
  list-style: none;
  padding: var(--e-3) var(--e-4);
  border: 2px solid var(--alarma);
  border-radius: var(--radio-3);
  background: var(--alarma-tenue);
  box-shadow: var(--sombra-3);
}

.alarma-lista > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-2);
  align-items: start;
  padding-block: var(--e-1x);
  margin: 0;
}

.alarma-lista > li + li {
  border-block-start: 1px solid rgb(196 52 43 / 0.22);
}

.alarma-lista .icono {
  color: var(--alarma);
  margin-block-start: 0.15em;
}

.alarma-lista strong {
  color: var(--alarma-osc);
}

/* --- Bloques de caso especial --- */
.caso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-1x) var(--e-3);
  align-items: start;
  margin-block: var(--e-3);
  padding: var(--e-4);
  background: var(--papel-claro);
  border: 1px solid var(--borde);
  border-radius: var(--radio-3);
  box-shadow: var(--sombra-2);
}

.caso .icono-g {
  grid-row: span 2;
  color: var(--principal-osc);
}

.caso h3 {
  margin: 0;
  align-self: center;
  font-size: var(--paso-1);
}

.caso > div {
  grid-column: 2;
}

.caso > div > :last-child {
  margin-block-end: 0;
}

/* --- Preguntas frecuentes y referencia técnica --- */
details {
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  margin-block-end: var(--e-2);
  background: var(--papel-claro);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--transicion), border-color var(--transicion);
}

details:hover {
  box-shadow: var(--sombra-2);
  border-color: var(--borde-fuerte);
}

details[open] {
  box-shadow: var(--sombra-2);
}

summary {
  display: flex;
  align-items: center;
  gap: var(--e-1x);
  min-height: 44px;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--radio-2);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  transition: color var(--transicion), background var(--transicion);
}

summary::-webkit-details-marker {
  display: none;
}

/* Indicador de apertura propio: el display:flex del summary suprime el
   triángulo nativo, así que se dibuja un chevrón equivalente. */
summary::after {
  content: "";
  flex: none;
  margin-inline-start: auto;
  inline-size: 0.5em;
  block-size: 0.5em;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform var(--transicion);
}

details[open] > summary::after {
  transform: translateY(0.1em) rotate(-135deg);
}

summary .icono {
  color: var(--principal);
}

summary:hover {
  color: var(--principal-osc);
  background: var(--principal-tenue);
}

details > :not(summary) {
  padding-inline: var(--e-3);
}

details > :not(summary):last-child {
  padding-block-end: var(--e-3);
}

.tecnica {
  border-color: var(--borde-teal);
}

.tecnica > summary {
  background: var(--principal-tenue);
  color: var(--principal-osc);
}

.tecnica h3 {
  font-size: var(--paso-1);
  margin-block-start: var(--e-5);
}

.tecnica h4 {
  font-size: var(--paso-0);
  margin-block-end: var(--e-1);
}

/* --- Tablas de la capa técnica --- */
.tabla-envoltura {
  overflow-x: auto;
  margin-block-end: var(--e-3);
  border-radius: var(--radio-2);
  border: 1px solid var(--borde);
  background: var(--papel);
}

table {
  border-collapse: collapse;
  inline-size: 100%;
  font-size: var(--paso--1);
}

caption {
  text-align: start;
  font-weight: 700;
  padding: var(--e-1x) var(--e-2) var(--e-0);
}

th,
td {
  text-align: start;
  vertical-align: top;
  padding: var(--e-1x);
  border: 1px solid var(--borde);
}

thead th {
  background: var(--principal-tenue);
  color: var(--principal-osc);
}

tbody th[scope="row"] {
  background: var(--papel-alt);
}

/* --- Fuentes --- */
.fuentes {
  font-size: var(--paso--1);
}

.fuentes li {
  margin-block-start: var(--e-1x);
}

.enlaces-oficiales {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--e-0);
}

.enlaces-oficiales li {
  margin: 0;
}

.enlaces-oficiales a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--e-0) var(--e-2);
  background: var(--papel-claro);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  box-shadow: var(--sombra-1);
  text-decoration: none;
  font-weight: 650;
  transition: box-shadow var(--transicion), transform var(--transicion),
    border-color var(--transicion);
}

.enlaces-oficiales a:hover {
  box-shadow: var(--sombra-2);
  transform: translateY(-2px);
  border-color: var(--borde-teal);
  text-decoration: underline;
}

/* --- Controles flotantes (solo con JS) --- */
.controles {
  position: fixed;
  inset-block-end: var(--e-3);
  inset-inline-end: var(--e-3);
  z-index: 40;
  display: flex;
  gap: var(--e-0);
}

.controles .boton {
  margin: 0;
  padding: var(--e-0);
  background: var(--papel-claro);
  border-color: var(--borde);
  color: var(--principal-osc);
  box-shadow: var(--sombra-3);
}

.controles .boton:hover {
  background: var(--principal-osc);
  border-color: var(--principal-osc);
  color: var(--papel);
}

/* --------------------------------------------------------------------------
   7. Utilidades
   -------------------------------------------------------------------------- */

/* La regla del navegador para [hidden] es de especificidad mínima y cualquier
   `display` de autor la anula: sin esto, `hidden` no oculta un .boton. */
[hidden] {
  display: none !important;
}

.js-only {
  display: none;
}

/* El JS añade la clase `js` a <html>. Estas reglas de autor ganan sobre el
   display:none que la hoja del navegador aplica al atributo [hidden], así que
   revelan también los controles marcados con `hidden`. Sin JS, nada aparece. */
.js .js-only {
  display: block;
}

.js button.js-only,
.js a.js-only {
  display: inline-flex;
}

.js .controles.js-only {
  display: flex;
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   8. Movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Ningún elemento se desplaza al pasar el puntero. */
  .boton:hover,
  .tarjeta:hover,
  .pasos > li:hover,
  .enlaces-oficiales a:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   9. Impresión — ficha limpia para un centro de salud
   Fuera degradados, sombras, ondas, blobs, patrones y la cabecera fija.
   -------------------------------------------------------------------------- */
@media print {
  :root {
    --tinta: #000;
    --tinta-suave: #333;
    --papel: #fff;
    --papel-alt: #fff;
    --papel-claro: #fff;
    --principal: #000;
    --principal-osc: #000;
    --principal-mas-osc: #000;
    --principal-profundo: #000;
    --principal-tenue: #fff;
    --secundario: #000;
    --acento: #000;
    --acento-tenue: #fff;
    --acento-texto: #000;
    --alarma: #000;
    --alarma-osc: #000;
    --alarma-tenue: #fff;
    --borde: #999;
    --borde-fuerte: #999;
    --borde-teal: #999;
    --sombra-1: none;
    --sombra-2: none;
    --sombra-3: none;
    --sombra-4: none;
    --alto-cabecera: 0px;
    --aire-banda: 0px;
  }

  html {
    scroll-padding-block-start: 0;
  }

  body {
    font-size: 10.5pt;
    line-height: 1.45;
    background: #fff;
    color: #000;
  }

  .salto,
  .indice,
  .controles,
  .js-only,
  .temporizador .boton,
  .triaje,
  .cabecera,
  .onda,
  .blob,
  .hero-patron,
  .hero h1::after {
    display: none !important;
  }

  /* Ni una sombra, ni un degradado, ni un fondo decorativo en papel. */
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
  }

  .envoltura,
  .envoltura-ancha,
  .hero > .envoltura {
    width: auto;
    max-width: none;
  }

  .hero,
  .banda,
  .pie,
  .temporizador,
  .pasos > li,
  .caso,
  .tarjeta,
  .aviso,
  .destacado,
  .triaje,
  .linea-tiempo > li,
  .enlaces-oficiales a,
  details,
  summary,
  .tabla-envoltura,
  thead th,
  tbody th[scope="row"] {
    background: #fff !important;
    color: #000 !important;
  }

  .hero {
    padding-block: 0;
    overflow: visible;
  }

  .hero h1,
  .hero .entradilla,
  .hero .destacado,
  .hero .destacado strong,
  .urgencia h2,
  .chip-alarma,
  .reloj,
  .temporizador .pie-reloj,
  .pie h2,
  .pie strong {
    color: #000 !important;
  }

  .banda {
    padding-block: 0;
    overflow: visible;
  }

  .banda > .envoltura > section + section,
  .banda > .envoltura > .indice + section {
    margin-block-start: 1.2em;
  }

  section[id] {
    margin-block-start: 1.2em;
  }

  .pasos {
    display: block;
  }

  .pasos > li,
  .linea-tiempo > li,
  .tarjeta,
  .caso,
  .aviso,
  .destacado,
  .temporizador,
  .alarma-lista,
  .no-hacer {
    border-radius: 0;
    padding: 0.5em 0.7em;
  }

  .pasos > li,
  .linea-tiempo > li {
    border: 1px solid #999;
    margin-block-end: 0.5em;
  }

  .chip-alarma {
    inline-size: auto;
    block-size: auto;
    box-shadow: none;
  }

  h1, h2, h3, h4 {
    break-after: avoid;
    page-break-after: avoid;
  }

  li, tr, figure, .tarjeta, .caso, details {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Todos los <details> abiertos, con independencia del atributo [open] */
  details {
    display: block;
    border: 1px solid #999;
  }

  details > summary {
    list-style: none;
    display: block;
  }

  details > summary::-webkit-details-marker,
  details > summary::marker {
    display: none;
    content: "";
  }

  details > summary::after {
    display: none;
  }

  details > summary ~ * {
    display: revert !important;
  }

  details::details-content {
    content-visibility: visible !important;
    block-size: auto !important;
  }

  /* URLs visibles en papel */
  a {
    color: #000;
    text-decoration: none;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
    color: #333;
  }

  .urgencia,
  .alarma-lista,
  .no-hacer,
  .tarjeta-grave {
    border: 2px solid #000;
  }

  .urgencia {
    padding: 0.5em 0.7em;
    margin-block-start: 1.2em;
  }

  .pie {
    border-block-start: 1px solid #999;
    padding-block: 1em 0;
  }
}