/* ==========================================================================
   TIPOGRAFÍAS
   Self-hosteadas, subset latin (cubre los acentos del español, ¿ y ¡).
   Plus Jakarta Sans para todo el texto; JetBrains Mono sólo para datos,
   etiquetas y coordenadas — la mono es deliberada: la app quiere leerse como
   un instrumento de medición.
   Sólo las seis caras que el CSS usa.
   ========================================================================== */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/vendor/fonts/jakarta-500.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/vendor/fonts/jakarta-600.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/vendor/fonts/jakarta-700.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/vendor/fonts/jakarta-800.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/vendor/fonts/jetbrains-500.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/vendor/fonts/jetbrains-700.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   TEMAS
   El light no es preferencia estética: la app se usa parada en la vereda, de
   día, y un tema oscuro a pleno sol se lee mucho peor.
   Los semánticos del diseño venían entre 3,86 y 4,32 de contraste — elegidos
   por cómo se ven, no medidos. Están corregidos al mínimo necesario para
   pasar AA conservando el tono; el desplazamiento es de pocos por ciento y no
   se nota, pero es la diferencia entre que una alerta se lea o no.
   ========================================================================== */
:root {
  --fondo: #0e1619;
  --panel: #17232a;
  --panel-2: rgba(233, 238, 240, 0.07);
  --linea: rgba(233, 238, 240, 0.1);
  --texto: #e9eef0;
  --tenue: #93a6ad;
  --agua: #2e9bc4;
  --agua-clara: #5fc8e8;
  --acento: #5fc8e8;
  --alerta: #e8a33d;
  --peligro: #e15f49;
  --ok: #4fa88b;
  --alerta-texto: #e8a33d;
  --peligro-texto: #e57563;
  --ok-texto: #51ab8e;
  --tierra: #c9a227;

  /* Relleno sólido: ahí encima va texto blanco y necesita su propio valor.
     El del diseño daba 3,67 con blanco. */
  --peligro-solido: #d93e24;
  --sobre-solido: #ffffff;

  --agua-tinte: rgba(46, 155, 196, 0.16);
  --alerta-tinte: rgba(232, 163, 61, 0.14);
  --alerta-tinte-suave: rgba(232, 163, 61, 0.07);
  --peligro-tinte: rgba(224, 90, 68, 0.16);
  --ok-tinte: rgba(79, 168, 139, 0.15);

  --btn-texto: #0e1619;
  --fondo-invertido: #1b2b33;
  --btn-fuerte: var(--agua);
  --btn-fuerte-texto: #0e1619;
  --texto-invertido: #e9eef0;
  --tenue-invertido: #93a6ad;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.25), 0 10px 28px rgba(0, 0, 0, 0.3);
  --sombra-nav: 0 -6px 24px rgba(0, 0, 0, 0.35);
  --filtro-mapa: invert(1) hue-rotate(180deg) saturate(0.5) brightness(0.95)
    contrast(0.9);
  --filtro-iconos-mapa: invert(1) brightness(0.92);

  /* ---- medidas del sitio ----
     Dos anchos y nada más. La cabecera y el pie usan el de sitio en TODAS las
     páginas, así la marca arranca en la misma vertical se venga de donde se
     venga; el cuerpo de las páginas de contenido usa el de lectura, que es más
     angosto porque son para leer, no para recorrer. Van como variables para
     que no haya dos números sueltos que se desincronicen. */
  --ancho-sitio: 1100px;
  --ancho-lectura: 880px;

  /* ---- escalas ---- */
  --t-hero: 64px; /* el número del hidrómetro */
  --t-display: 44px; /* h1 de landing y páginas, sólo en escritorio */
  --t-xxl: 30px;
  --t-xl: 24px;
  --t-l: 20px;
  --t-m: 17px;
  --t-base: 15px;
  --t-s: 13px;
  --t-xs: 12px;
  --t-tick: 12px;

  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-7: 32px;

  --r-s: 8px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl: 28px;
  --r-full: 99px;

  --mov: 160ms cubic-bezier(0.2, 0, 0.2, 1);

  --sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

/* Los valores del tema claro viven UNA sola vez acá. Los dos selectores de
   abajo sólo los remapean: duplicarlos garantiza que tarde o temprano uno se
   actualice y el otro no. */
:root {
  --c-fondo: #f7f8f9;
  --c-panel: #ffffff;
  --c-panel-2: rgba(27, 38, 44, 0.055);
  --c-linea: rgba(27, 38, 44, 0.09);
  --c-texto: #1b262c;
  --c-tenue: #66747a;
  --c-agua: #1f7a9e;
  --c-agua-clara: #7cc6e0;
  --c-acento: #1f7a9e;
  --c-alerta: #cb430e;
  --c-peligro: #ca442f;
  --c-ok: #387f64;
  --c-alerta-texto: #c4410e;
  --c-peligro-texto: #be402c;
  --c-ok-texto: #35785e;
  --c-tierra: #7a5f0d;
  --c-peligro-solido: #ca442f;
  --c-agua-tinte: #e8f3f8;
  --c-alerta-tinte: #ffefe3;
  --c-alerta-tinte-suave: #fff8f3;
  --c-peligro-tinte: #fbe9e5;
  --c-ok-tinte: #e6f2ec;
  --c-btn-texto: #ffffff;
  --c-fondo-invertido: #0e1619;
  --c-btn-fuerte: #0e1619;
  --c-btn-fuerte-texto: #e9eef0;
  --c-texto-invertido: #e9eef0;
  --c-tenue-invertido: #93a6ad;
  --c-sombra:
    0 1px 2px rgba(23, 36, 42, 0.05), 0 10px 28px rgba(23, 36, 42, 0.07);
  --c-sombra-nav: 0 -6px 24px rgba(23, 36, 42, 0.06);
  --c-filtro-mapa: saturate(0.92);
  --c-filtro-iconos-mapa: none;
}

@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) {
    --fondo: var(--c-fondo);
    --panel: var(--c-panel);
    --panel-2: var(--c-panel-2);
    --linea: var(--c-linea);
    --texto: var(--c-texto);
    --tenue: var(--c-tenue);
    --agua: var(--c-agua);
    --agua-clara: var(--c-agua-clara);
    --acento: var(--c-acento);
    --alerta: var(--c-alerta);
    --peligro: var(--c-peligro);
    --ok: var(--c-ok);
    --alerta-texto: var(--c-alerta-texto);
    --peligro-texto: var(--c-peligro-texto);
    --ok-texto: var(--c-ok-texto);
    --tierra: var(--c-tierra);
    --peligro-solido: var(--c-peligro-solido);
    --agua-tinte: var(--c-agua-tinte);
    --alerta-tinte: var(--c-alerta-tinte);
    --alerta-tinte-suave: var(--c-alerta-tinte-suave);
    --peligro-tinte: var(--c-peligro-tinte);
    --ok-tinte: var(--c-ok-tinte);
    --btn-texto: var(--c-btn-texto);
    --fondo-invertido: var(--c-fondo-invertido);
    --btn-fuerte: var(--c-btn-fuerte);
    --btn-fuerte-texto: var(--c-btn-fuerte-texto);
    --btn-fuerte: var(--c-btn-fuerte);
    --btn-fuerte-texto: var(--c-btn-fuerte-texto);
    --texto-invertido: var(--c-texto-invertido);
    --tenue-invertido: var(--c-tenue-invertido);
    --fondo-invertido: var(--c-fondo-invertido);
    --btn-fuerte: var(--c-btn-fuerte);
    --btn-fuerte-texto: var(--c-btn-fuerte-texto);
    --btn-fuerte: var(--c-btn-fuerte);
    --btn-fuerte-texto: var(--c-btn-fuerte-texto);
    --texto-invertido: var(--c-texto-invertido);
    --tenue-invertido: var(--c-tenue-invertido);
    --sombra: var(--c-sombra);
    --sombra-nav: var(--c-sombra-nav);
    --filtro-mapa: var(--c-filtro-mapa);
    --filtro-iconos-mapa: var(--c-filtro-iconos-mapa);
  }
}

html[data-theme="light"] {
  --fondo: var(--c-fondo);
  --panel: var(--c-panel);
  --panel-2: var(--c-panel-2);
  --linea: var(--c-linea);
  --texto: var(--c-texto);
  --tenue: var(--c-tenue);
  --agua: var(--c-agua);
  --agua-clara: var(--c-agua-clara);
  --acento: var(--c-acento);
  --alerta: var(--c-alerta);
  --peligro: var(--c-peligro);
  --ok: var(--c-ok);
  --alerta-texto: var(--c-alerta-texto);
  --peligro-texto: var(--c-peligro-texto);
  --ok-texto: var(--c-ok-texto);
  --tierra: var(--c-tierra);
  --peligro-solido: var(--c-peligro-solido);
  --agua-tinte: var(--c-agua-tinte);
  --alerta-tinte: var(--c-alerta-tinte);
  --alerta-tinte-suave: var(--c-alerta-tinte-suave);
  --peligro-tinte: var(--c-peligro-tinte);
  --ok-tinte: var(--c-ok-tinte);
  --btn-texto: var(--c-btn-texto);
  --fondo-invertido: var(--c-fondo-invertido);
  --btn-fuerte: var(--c-btn-fuerte);
  --btn-fuerte-texto: var(--c-btn-fuerte-texto);
  --texto-invertido: var(--c-texto-invertido);
  --tenue-invertido: var(--c-tenue-invertido);
  --sombra: var(--c-sombra);
  --sombra-nav: var(--c-sombra-nav);
  --filtro-mapa: var(--c-filtro-mapa);
  --filtro-iconos-mapa: var(--c-filtro-iconos-mapa);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
body {
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}
/* La barra de instalar es fixed: sin esto flotaba encima del último bloque
   de cada pestaña, que además suele ser un aviso importante. */
body.con-instalar {
  padding-bottom: calc(96px + 60px + env(safe-area-inset-bottom));
}
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--r-s);
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- cabecera ---------- */
.top {
  /* viewport-fit=cover hace que el contenido vaya por debajo de la muesca y
     la barra de estado. El safe-area estaba contemplado abajo (la nav) pero
     no arriba, así que el logo quedaba pisado. */
  padding: calc(18px + env(safe-area-inset-top)) 18px 12px;
  /* El botón de tema va en el flujo, no absoluto: estaba posicionado y el
     subtítulo le pasaba por debajo. Con flex no se solapan nunca, cualquiera
     sea el largo del texto. */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
  border-bottom: 1px solid var(--linea);
  position: relative;
  overflow: hidden;
}
.top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--agua), transparent);
  opacity: 0.5;
}
/* El botón de tema va en el encabezado, arriba a la derecha, donde no
   compite con nada. */
.tema {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-m);
  border: 1px solid var(--linea);
  background: var(--panel);
  color: var(--tenue);
  font-size: var(--t-m);
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.tema:hover {
  color: var(--texto);
}

/* La marca de la app es ahora símbolo + nombre. El tamaño lo pone
   .lockup-nombre; acá sólo queda la caja. */
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--sans);
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.marca span {
  color: var(--acento);
}
.sub {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-s);
  color: var(--tenue);
  letter-spacing: 0;
  text-transform: none;
  /* Es un <p> por semántica; el margen inferior de los párrafos no va acá. */
  margin: var(--e-1) 0 0;
}

/* ---------- estructura ---------- */
.vista {
  display: none;
  padding: var(--e-5);
  max-width: 640px;
  margin: 0 auto;
}
.vista.on {
  display: block;
}
h2 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: var(--e-6) 0 var(--e-2);
}
h2:first-child {
  margin-top: var(--e-1);
}
.cuenta {
  font-family: var(--mono);
  font-size: var(--t-s);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--tenue);
  text-transform: none;
}
.cuenta.completa {
  color: var(--ok-texto);
}
h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-m);
  letter-spacing: -0.01em;
  color: var(--texto);
  margin: var(--e-5) 0 var(--e-2);
}
p {
  margin: 0 0 var(--e-3);
}
.chico {
  font-size: var(--t-s);
  color: var(--tenue);
}
.tarjeta {
  background: var(--panel);
  border: none;
  box-shadow: var(--sombra);
  border-radius: var(--r-l);
  padding: var(--e-5);
  margin-bottom: var(--e-4);
}
.eti {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tenue);
  display: block;
  margin-bottom: var(--e-2);
}
.dato {
  font-family: var(--sans);
  font-weight: 800;
  font-size: var(--t-hero);
  line-height: 0.9;
}
.unidad {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tenue);
  margin-top: var(--e-2);
}

/* ---------- regla / hidrómetro (elemento firma) ---------- */
.regla-caja {
  display: flex;
  gap: var(--e-4);
  align-items: stretch;
  margin: var(--e-2) 0 var(--e-1);
}
/* Escala y pista comparten alto: los porcentajes de una caen en la misma
   altura que los de la otra sin coordinar nada. */
.instrumento {
  display: flex;
  gap: var(--e-2);
  align-items: stretch;
  flex: none;
}
.escala {
  position: relative;
  width: 30px;
  flex: none;
}
.regla {
  position: relative;
  /* 74px eran pocos: entre marcas y números ya se iban 31, y las etiquetas de
     umbral se montaban encima de la numeración. */
  width: 88px;
  flex: none;
  background: var(--panel-2);
  border: none;
  border-radius: var(--r-l);
  overflow: hidden;
  min-height: 340px;
}
.agua {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--agua);
  transition: height 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
/* La superficie del agua es la línea que más se mira: va nítida y de un solo
   grosor, sin el resplandor de antes (que en tema claro quedaba raro). */
.agua::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--agua-clara);
}
.marca-linea {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed currentColor;
  transition: bottom 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.marca-linea b {
  position: absolute;
  right: var(--e-1);
  top: -15px;
  font-family: var(--mono);
  font-size: var(--t-tick);
  font-weight: 700;
  letter-spacing: 0.02em;
  /* El chip va sobre --panel, no sobre el fondo de la regla: apoyado en
     --panel-2 el rojo quedaba en 4,47 y el acento claro en 4,36. Además así
     lee como una pastilla flotando sobre el instrumento, que es la idea. */
  background: var(--panel);
  border: 1px solid currentColor;
  padding: 2px 7px;
  border-radius: var(--r-full);
  line-height: 1.35;
}
/* 5,30 y 5,70 están siempre a 40 cm: sobre esta escala son 15px, y las
   etiquetas miden 14. Se montaban una sobre otra. Bajamos la de alerta al
   otro lado de su línea y el problema desaparece para siempre. */
.marca-linea.debajo b {
  top: 3px;
}
/* "vos" va con chip lleno: es tuyo, no un umbral oficial. */
.marca-linea.propia b {
  background: var(--tierra);
  color: var(--fondo) !important;
  border-color: var(--tierra);
}
.tic {
  position: absolute;
  right: 0;
  width: 5px;
  height: 1px;
  background: var(--linea);
}
.tic.mayor {
  width: 9px;
  background: var(--tenue);
}
.tic-num {
  position: absolute;
  right: var(--e-3);
  font-family: var(--mono);
  font-size: var(--t-tick);
  font-weight: 500;
  color: var(--tenue);
  transform: translateY(50%);
}
.leyenda {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e-3);
}
.leyenda-item {
  border-left: 3px solid;
  padding-left: var(--e-3);
}
.leyenda-item .v {
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--t-m);
  line-height: 1.15;
}
.leyenda-item .k {
  font-size: var(--t-s);
  color: var(--tenue);
  line-height: 1.35;
  margin-top: 2px;
}

/* ---------- veredicto ---------- */
.veredicto {
  border-radius: var(--r-l);
  box-shadow: var(--sombra);
  padding: var(--e-5);
  margin-bottom: var(--e-4);
  border: none;
}
.veredicto .titu {
  font-family: var(--sans);
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--e-2);
}
/* La fila del umbral, dentro de la tarjeta de veredicto: la lectura oficial
   es el número grande de arriba; estas dos celdas responden "¿y para mí?".
   Van sobre --panel y no sobre otro tinte: la tarjeta ya está tintada por el
   estado, y tinte sobre tinte no se distingue. El color del estado viaja en
   el valor de la celda del margen, que es el dato que cambia de significado. */
.celdas-umbral {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
  margin: var(--e-3) 0;
}
.celdas-umbral .celda {
  background: var(--panel);
  border-radius: var(--r-m);
  padding: var(--e-3) var(--e-3);
  min-width: 0;
}
.celdas-umbral .k {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tenue);
}
.celdas-umbral .v {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--t-m);
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}
.celdas-umbral .t-ok .v {
  color: var(--ok-texto);
}
.celdas-umbral .t-alerta .v {
  color: var(--alerta-texto);
}
.celdas-umbral .t-peligro .v {
  color: var(--peligro-texto);
}

.v-ok {
  background: var(--ok-tinte);
}
.v-ok .titu {
  color: var(--ok-texto);
}
.v-alerta {
  background: var(--alerta-tinte);
}
.v-alerta .titu {
  color: var(--alerta-texto);
}
.v-peligro {
  background: var(--peligro-tinte);
}
.v-peligro .titu {
  color: var(--peligro-texto);
}
/* Mientras busca el dato, la tarjeta late suave. Es la diferencia entre
   "esperá" y "falló". */
.veredicto.cargando {
  animation: latido 1.6s ease-in-out infinite;
}
@keyframes latido {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
.v-neutro {
  background: var(--panel);
  box-shadow: var(--sombra);
}

/* ---------- controles ---------- */
label.campo {
  display: block;
  margin-bottom: var(--e-3);
}
label.campo > span {
  font-family: var(--sans);
  font-size: var(--t-s);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tenue);
  display: block;
  margin-bottom: var(--e-1);
}
input[type="text"],
input[type="number"],
select,
textarea {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid transparent;
  border-radius: var(--r-m);
  padding: var(--e-3) var(--e-4);
  min-height: 52px;
  font-family: var(--sans);
  font-weight: 500;
}
input[type="number"] {
  font-family: var(--mono);
}
textarea {
  font-family: var(--sans);
  resize: vertical;
  min-height: 64px;
}
input[type="range"] {
  width: 100%;
  accent-color: var(--agua);
}
.btn {
  background: var(--agua);
  color: var(--btn-texto);
  border: none;
  border-radius: var(--r-full);
  /* La altura mínima se declara, no se deduce del padding: así el objetivo
     táctil no depende de que nadie toque la escala de espaciados. */
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 13px de alto deja el botón en 45px: el mínimo recomendado para un
     objetivo táctil son 44. Con 12px quedaba en 43. */
  padding: var(--e-3) var(--e-4);
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-m);
  letter-spacing: -0.01em;
  text-transform: none;
  cursor: pointer;
  width: 100%;
  margin-bottom: var(--e-2);
}
.btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.btn:active {
  transform: translateY(1px);
}
/* El secundario se distingue por relleno, no por contorno. Con --panel puro
   quedaba blanco sobre tarjeta blanca: sólo lo separaba la sombra. */
.btn.sec {
  background: var(--panel-2);
  color: var(--texto);
  border: none;
}
.btn.mini {
  width: auto;
  min-height: 44px;
  padding: 0 var(--e-4);
  font-size: var(--t-s);
}
.fila {
  display: flex;
  gap: var(--e-2);
}
.fila > * {
  flex: 1;
  margin-bottom: var(--e-2);
}

/* ---------- pronóstico ---------- */
.dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--e-1);
  margin-top: var(--e-1);
}
.dia {
  background: var(--panel-2);
  border-radius: var(--r-s);
  padding: var(--e-2) 3px;
  text-align: center;
  border: 1px solid transparent;
}
.dia.fuerte {
  border-color: var(--alerta);
}
.dia .d {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--tenue);
  text-transform: uppercase;
}
.dia .mm {
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--t-base);
  margin-top: 3px;
}
.dia .mm.hay {
  color: var(--acento);
}
.dia .mm.fuerte {
  color: var(--alerta-texto);
}
/* Un número suelto no dice si 12 mm es mucho o poco. La barra da la escala y
   la línea punteada marca el umbral de 40 mm. */
.dia .barra {
  position: relative;
  height: 34px;
  margin-top: var(--e-1);
  background: var(--panel-2);
  border-radius: var(--r-s);
  overflow: hidden;
}
.dia .barra i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  background: var(--agua);
}
.dia.fuerte .barra i {
  background: var(--alerta);
}
.dia .barra u {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed var(--alerta);
  opacity: 0.55;
}

/* ---------- listas ---------- */
.chk {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linea);
  cursor: pointer;
}
.chk:last-child {
  border-bottom: none;
}
.chk input {
  margin-top: 2px;
  width: 19px;
  height: 19px;
  flex: none;
  accent-color: var(--ok);
}
.chk span {
  flex: 1;
  font-size: var(--t-base);
}
.chk input:checked + span {
  color: var(--tenue);
  text-decoration: line-through;
}
/* Las listas vienen como <ul> en el HTML para que sean indexables. */
.lista-plana {
  list-style: none;
  margin: 0;
  padding: 0;
}
.punto {
  display: block;
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--linea);
  color: inherit;
  text-decoration: none;
}
.punto:last-child {
  border-bottom: none;
}
.punto .n {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-m);
  letter-spacing: -0.01em;
}
.punto .d {
  display: block;
  font-size: var(--t-s);
  color: var(--tenue);
  margin-top: 1px;
}
.punto .ir {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--acento);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 3px;
  display: inline-block;
}

/* ---------- avisos ---------- */
.aviso {
  border-left: none;
  background: var(--alerta-tinte);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-m);
  font-size: var(--t-s);
  margin-bottom: var(--e-3);
}
.aviso.grave {
  background: var(--peligro-tinte);
}
/* Una lista de acciones se lee; el mismo contenido en prosa, no. */
.pasos {
  margin: var(--e-1) 0 0;
  padding-left: var(--e-5);
  font-size: var(--t-s);
  color: var(--tenue);
}
.pasos li {
  margin-bottom: var(--e-2);
  line-height: 1.45;
}
.pasos.grave li b {
  color: var(--peligro-texto);
  font-family: var(--mono);
}
.pasos a {
  color: var(--acento);
  font-weight: 700;
}
.aviso details summary {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tenue);
}
.aviso b {
  color: var(--alerta-texto);
}
.aviso.grave b {
  color: var(--peligro-texto);
}
.tel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linea);
  color: inherit;
  text-decoration: none;
}
.tel:last-child {
  border-bottom: none;
}
.tel .q {
  font-size: var(--t-base);
}
.tel .n {
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--t-m);
  color: var(--acento);
}

/* ---------- mapa ---------- */
/* El basemap del IGN es claro y la app es oscura. invert + hue-rotate(180)
   invierte la luminosidad conservando los tonos: el agua sigue siendo azul y
   los espacios verdes verdes, pero sobre fondo oscuro. Va sólo sobre el
   canvas de los tiles; los pines y los controles son DOM aparte y no se
   tocan. */
#mapa .maplibregl-canvas {
  /* saturate() baja el rojizo que deja la inversión sobre el beige urbano
     del IGN: en una app que usa rojo para peligro, un mapa rojizo
     confunde. El agua queda igual de reconocible. */
  filter: var(--filtro-mapa);
}
@media (prefers-contrast: more) {
  #mapa .maplibregl-canvas {
    filter: none;
  }
}
#mapa {
  width: 100%;
  height: 340px;
  border-radius: var(--r-l);
  border: 1px solid var(--linea);
  margin-bottom: var(--e-4);
  background: var(--panel-2);
}
/* MapLibre trae sus controles en blanco. Sobre un mapa que oscurecimos a
   propósito quedaban como dos parches brillantes. */
#mapa .maplibregl-ctrl-group {
  background: var(--panel);
  border: 1px solid var(--linea);
  box-shadow: none;
}
#mapa .maplibregl-ctrl-group button + button {
  border-top-color: var(--linea);
}
#mapa .maplibregl-ctrl-group button:hover {
  background: var(--panel-2);
}
/* Los íconos son SVG oscuros embebidos: no se recolorean, se invierten. */
#mapa .maplibregl-ctrl-icon {
  filter: var(--filtro-iconos-mapa);
}
#mapa .maplibregl-ctrl-attrib {
  background: var(--panel);
  color: var(--tenue);
  font-size: var(--t-xs);
}
#mapa .maplibregl-ctrl-attrib a {
  color: var(--acento);
}
#mapa .maplibregl-ctrl-attrib-button {
  filter: var(--filtro-iconos-mapa);
}

.maplibregl-popup-content {
  background: var(--panel);
  color: var(--texto);
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  padding: var(--e-3) var(--e-3);
  font-family: var(--sans);
}
.maplibregl-popup-content strong {
  font-family: var(--sans);
  font-size: var(--t-m);
  letter-spacing: 0.02em;
}
.maplibregl-popup-tip {
  border-top-color: var(--panel) !important;
  border-bottom-color: var(--panel) !important;
}
.maplibregl-popup-close-button {
  color: var(--tenue);
  font-size: var(--t-m);
}
.pin {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--agua);
  border: 2px solid var(--fondo);
  box-shadow: 0 0 0 1px var(--agua);
  cursor: pointer;
}
.pin.cerca {
  background: var(--ok);
  width: 21px;
  height: 21px;
  box-shadow:
    0 0 0 1px var(--ok),
    0 0 14px var(--ok);
}
.pin.yo {
  background: var(--tierra);
  box-shadow: 0 0 0 1px var(--tierra);
}
.punto.destacado {
  background: var(--ok-tinte);
  border-radius: var(--r-m);
  padding-left: var(--e-3);
  padding-right: var(--e-3);
  border-bottom-color: transparent;
}

/* ---------- tendencia ---------- */
.tend {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}
.tend .flecha {
  font-size: var(--t-xl);
  line-height: 1;
  font-family: var(--mono);
  font-weight: 700;
}
.sparkline {
  width: 100%;
  height: 46px;
  margin-top: var(--e-2);
  display: block;
}

/* ---------- navegación ---------- */
.barra-app {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: var(--panel);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sombra-nav);
  padding: var(--e-2) var(--e-3) 0;
  padding-bottom: calc(var(--e-2) + env(safe-area-inset-bottom));
  z-index: 50;
}
.barra-app button {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  border-radius: var(--r-m);
  padding: var(--e-2) 2px var(--e-3);
  cursor: pointer;
  color: var(--tenue);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-1);
}
.barra-app button.on {
  color: var(--acento);
}
.barra-app button svg {
  transition: background var(--mov);
}
.barra-app button.on svg {
  background: var(--agua-tinte);
}
.barra-app button svg {
  width: 44px;
  height: 26px;
  padding: 4px 12px;
  border-radius: var(--r-full);
  box-sizing: content-box;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.barra-app button span {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: 0;
  text-transform: none;
}
#sin-conexion {
  background: var(--alerta-tinte);
  border-bottom: 1px solid var(--alerta);
  color: var(--alerta-texto);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  padding: var(--e-2) var(--e-5);
  text-align: center;
}
#sin-conexion[hidden] {
  display: none;
}

/* Barra de instalar: se queda hasta que la persona la cierre. Antes se
   borraba sola a los 20 s y no volvía en toda la sesión. */
.instalar {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  gap: var(--e-2);
  align-items: stretch;
}
.instalar .btn {
  margin: 0;
  flex: 1;
}
.instalar .cerrar {
  flex: none;
  width: 52px;
  border: none;
  border-radius: var(--r-full);
  background: var(--panel);
  box-shadow: var(--sombra);
  color: var(--texto);
  font-size: var(--t-l);
  cursor: pointer;
}

/* ---------- hoja de instrucciones ---------- */
/* Va en <dialog> por lo que trae gratis: foco atrapado, Escape para salir y
   el resto de la página inerte para un lector de pantalla. Nada de eso sale
   bien a mano. */
.hoja {
  /* El reset de arriba pone margin:0 en todo, y con eso se pierde el
     margin:auto con el que el navegador centra un <dialog> modal: quedaba
     pegado arriba a la izquierda. */
  margin: auto;
  border: none;
  background: var(--panel);
  color: var(--texto);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra);
  padding: var(--e-5);
  width: min(420px, calc(100vw - 32px));
  max-height: 82vh;
  overflow-y: auto;
}
.hoja::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.hoja h2 {
  margin-top: 0;
}
.hoja ol {
  margin: var(--e-4) 0;
  padding-left: var(--e-5);
}
.hoja ol li {
  margin-bottom: var(--e-3);
}
.hoja .aviso {
  margin-bottom: var(--e-4);
}
/* Sin showModal() el <dialog> queda abierto pero NO modal, y por defecto se
   posiciona en absoluto: se salía de la pantalla y empujaba el resto de la
   página. Vuelve al flujo normal. */
.hoja:not(:modal) {
  position: static;
  margin: var(--e-4) auto;
}

/* ---------- instalar, enlace del pie ---------- */
.instalar-pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  margin: 0 0 var(--e-5);
}

/* ==========================================================================
   PORTADA Y PÁGINAS DE CONTENIDO
   La app esconde 3 de sus 4 secciones detrás de pestañas y eso a un buscador
   le llega como contenido oculto. Estas páginas son texto visible, con el
   mismo sistema de tokens y sin pestañas.
   ========================================================================== */
.ancho {
  max-width: var(--ancho-sitio);
  margin: 0 auto;
  padding: 0 var(--e-5);
}
/* Las páginas de contenido usan una medida más angosta que la portada: son
   para leer, no para recorrer. La cabecera y el pie no la usan — ver
   .pie-envoltura y el nav, que van siempre al ancho de sitio. */
.ancho.angosto {
  max-width: var(--ancho-lectura);
}

/* ---------- cabecera de página ---------- */
.pg-cabecera {
  padding: var(--e-7) 0 var(--e-5);
}
.pg-cabecera h1 {
  font-size: var(--t-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: var(--e-4) 0 0;
}
.pg-lead {
  max-width: 40em;
  margin: var(--e-4) 0 0;
  font-size: var(--t-m);
  line-height: 1.6;
  color: var(--tenue);
}
.chip-tinte {
  display: inline-block;
  margin: 0;
  padding: 7px 14px;
  border-radius: var(--r-full);
  background: var(--agua-tinte);
  color: var(--acento);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- bloques de contenido ---------- */
/* Cada sección es una tarjeta, como en el diseño: separa los temas sin
   necesidad de líneas divisorias. */
.landing .bloque {
  background: var(--panel);
  border-radius: var(--r-l);
  box-shadow: var(--sombra);
  padding: var(--e-7);
  margin-bottom: var(--e-5);
}
.bloque > *:last-child {
  margin-bottom: 0;
}
.bloque h2 {
  font-size: var(--t-xl);
  margin: var(--e-2) 0 var(--e-4);
}
.bloque .kicker {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento);
}
.bloque.oscuro {
  background: var(--fondo-invertido);
  color: var(--texto-invertido);
  box-shadow: none;
}
.bloque.oscuro .kicker {
  color: var(--alerta);
}
.bloque.oscuro .chico,
.bloque.oscuro .pasos {
  color: var(--tenue-invertido);
}
.bloque .pasos:last-child,
.bloque table:last-child {
  margin-bottom: 0;
}

/* ---------- widget para medios ----------
   Las dos muestras son el widget de verdad en un iframe, no capturas: si el
   widget se rompe, se rompe a la vista en su propia página de documentación. */
.muestras-widget {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-4);
  margin-top: var(--e-4);
}
.muestras-widget iframe {
  display: block;
  width: 100%;
  /* El mismo alto que recomienda el código de más abajo. Sin esto el iframe
     cae al alto por defecto de 150 px y las muestras salen recortadas justo
     por el pie, que es donde va el crédito. */
  height: 225px;
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  background: var(--panel);
}
.muestras-widget .chico {
  margin: var(--e-2) 0 0;
  text-align: center;
}
.caja-codigo {
  position: relative;
  border-radius: var(--r-m);
  background: var(--fondo-invertido);
  padding: var(--e-5);
}
.caja-codigo pre {
  margin: 0;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: var(--t-s);
  line-height: 1.6;
  color: var(--texto-invertido);
  /* El bloque tiene que poder seleccionarse a mano: el botón de copiar es una
     comodidad, no el único camino. */
  white-space: pre;
}
/* El botón va sobre la caja oscura, así que no puede usar el estilo
   secundario: quedaba gris sobre negro y no se veía. */
.caja-codigo .btn {
  position: absolute;
  top: var(--e-4);
  right: var(--e-4);
  width: auto;
  min-height: 38px;
  padding: 0 var(--e-4);
  font-size: var(--t-s);
  background: var(--agua-clara);
  color: #0e1619;
  border: none;
}
/* Las condiciones de uso, numeradas: son tres y se citan por número cuando
   alguien pregunta. */
.condiciones {
  counter-reset: cond;
  list-style: none;
  margin: var(--e-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.condiciones li {
  counter-increment: cond;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-m);
  background: var(--panel-2);
  line-height: 1.6;
}
.condiciones li::before {
  content: counter(cond);
  font-family: var(--mono);
  font-weight: 700;
  color: var(--acento);
}

/* ---------- charlas ----------
   Cada charla es una ficha con el sello a la izquierda —TED o TEDx y cuánto
   dura— y el texto a la derecha. El tinte del sello no decora: agrupa las
   charlas por tema —responsabilidad, adaptación, agua, datos— en la misma
   paleta funcional que usa el resto de la app, así que dos fichas del mismo
   color se leen juntas. */
.charlas {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.charla {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--e-5);
  align-items: start;
  padding: var(--e-5);
  border-radius: var(--r-l);
  background: var(--panel);
  box-shadow: var(--sombra);
  color: var(--texto);
  text-decoration: none;
}
.charla .sello {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  min-height: 96px;
  padding: var(--e-4) var(--e-2);
  border-radius: var(--r-m);
  text-align: center;
}
.charla .sello .s {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.charla .sello .t {
  font-weight: 800;
  font-size: var(--t-l);
  line-height: 1.1;
}
.charla.t-peligro .sello {
  background: var(--peligro-tinte);
  color: var(--peligro-texto);
}
.charla.t-alerta .sello {
  background: var(--alerta-tinte);
  color: var(--alerta-texto);
}
.charla.t-agua .sello {
  background: var(--agua-tinte);
  color: var(--acento);
}
.charla.t-ok .sello {
  background: var(--ok-tinte);
  color: var(--ok-texto);
}
.charla .cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  min-width: 0;
}
.charla .tit {
  font-weight: 800;
  font-size: var(--t-l);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.charla .ficha {
  font-size: var(--t-s);
  color: var(--tenue);
}
.charla .txt {
  line-height: 1.6;
  color: var(--tenue);
}
@media (hover: hover) {
  .charla:hover {
    background: var(--panel-2);
  }
  .charla:hover .tit {
    color: var(--acento);
  }
}

/* ---------- la lista de puntos de encuentro ----------
   Treinta renglones de texto corrido no se recorren con el pulgar y menos
   apurado. Van como tarjetas de dos columnas, con el número en un cuadrado
   oscuro: el número es lo que se dice por teléfono («andá al 14») y lo que
   coincide con los pines del mapa de la app. */
.pg-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin: var(--e-5) 0 0;
}
.pg-acciones .btn {
  width: auto;
  padding: 0 var(--e-6);
}
.grupo-puntos {
  margin: var(--e-6) 0 var(--e-4);
  font-size: var(--t-l);
  color: var(--acento);
}
.grupo-puntos:first-child {
  margin-top: var(--e-4);
}
.rejilla-puntos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rejilla-puntos a.punto {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--e-4);
  align-items: center;
  height: 100%;
  padding: var(--e-4);
  border-radius: var(--r-m);
  background: var(--panel);
  box-shadow: var(--sombra);
  color: var(--texto);
  text-decoration: none;
}
.rejilla-puntos .np {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-s);
  background: var(--fondo-invertido);
  color: var(--texto-invertido);
  /* En sans y no en mono: el cero de JetBrains lleva punto adentro y a 13 px
     un "20" se lee "28". Acá el número es cómo se nombra el punto por
     teléfono, así que no puede prestarse a confusión. */
  font-family: var(--sans);
  font-weight: 800;
  font-size: var(--t-s);
}
.rejilla-puntos .txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rejilla-puntos .n {
  font-weight: 700;
  line-height: 1.25;
}
.rejilla-puntos .d {
  font-size: var(--t-s);
  color: var(--tenue);
}
@media (hover: hover) {
  .rejilla-puntos a.punto:hover {
    background: var(--panel-2);
  }
}
/* Los tres teléfonos, al final de la lista: es lo que hace falta cuando ya se
   eligió a dónde ir. */
.telefonos-emergencia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-5);
  margin-top: var(--e-6);
  padding: var(--e-6);
  border-radius: var(--r-l);
  background: var(--fondo-invertido);
  color: var(--texto-invertido);
}
.telefonos-emergencia b {
  display: block;
  font-size: var(--t-xxl);
  font-weight: 800;
  color: var(--agua-clara);
  font-variant-numeric: tabular-nums;
}
.telefonos-emergencia span {
  display: block;
  margin-top: var(--e-1);
  font-size: var(--t-s);
  color: var(--tenue-invertido);
}

/* ---------- el cálculo, paso a paso ----------
   La página del cálculo se lee como una cuenta hecha a mano: cada paso es su
   propia tarjeta, con el número al costado y el valor del ejemplo en una
   pastilla al pie. Antes era prosa corrida con kickers, y la cuenta —que es lo
   único que la persona vino a buscar— quedaba escondida adentro del texto. */
.paso {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--e-5);
  align-items: start;
}
/* Escrito con las dos clases a propósito: `.bloque h2` mide lo mismo y gana
   por orden, no por especificidad, que es de dónde salieron los últimos tres
   bugs de cascada de esta hoja. */
.bloque.paso h2 {
  font-size: var(--t-l);
  margin: 0 0 var(--e-3);
}
.paso > div > *:last-child {
  margin-bottom: 0;
}
/* La pastilla del ejemplo: etiqueta chica en mono y el número en grande, que
   es lo que se busca cuando se recorre la página con el pulgar. */
.dato-ejemplo {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin: var(--e-4) 0 0;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-m);
  background: var(--panel-2);
}
.dato-ejemplo .k {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tenue);
}
.dato-ejemplo .v {
  font-weight: 800;
  font-size: var(--t-l);
  font-variant-numeric: tabular-nums;
}
/* El resultado, en la tarjeta oscura: el número que la página vino a dar.
   Su kicker no va en naranja como el resto de los bloques oscuros: acá no hay
   nada que advertir, es el resultado de una cuenta. */
.bloque.oscuro.resultado .kicker {
  color: var(--tenue-invertido);
}
.resultado .dato-grande {
  margin: var(--e-2) 0 0;
  font-size: var(--t-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.resultado .cuenta-chica {
  margin: var(--e-3) 0 var(--e-5);
  font-family: var(--mono);
  font-size: var(--t-s);
  color: var(--tenue-invertido);
}
.pg-cta {
  margin: var(--e-6) 0 var(--e-7);
}
.pg-cta .btn {
  width: auto;
  padding: 0 var(--e-6);
}
.pie-simple {
  grid-template-columns: 1.4fr 1fr;
}

.pagina {
  padding: var(--e-5) 0 var(--e-7);
  max-width: 720px;
  margin: 0 auto;
}
body.landing {
  /* Sin barra de navegación fija abajo, el hueco reservado para ella sobra. */
  padding-bottom: 0;
}
.landing section {
  padding: calc(var(--e-7) * 1.25) 0;
}
.landing h2 {
  font-size: var(--t-xxl);
  margin: var(--e-2) 0 var(--e-5);
}
.landing p {
  margin-bottom: var(--e-4);
}
.landing a:not(.btn):not(.lockup):not(.punto):not(.charla):not(.btn-emergencia) {
  color: var(--acento);
}

/* ---------- marca ---------- */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  color: var(--texto);
  text-decoration: none;
}
.lockup svg {
  display: block;
  flex: none;
}
.lockup-nombre {
  font-weight: 800;
  font-size: var(--t-m);
  letter-spacing: -0.02em;
}

/* En las páginas de contenido la barra ocupa el ancho de sitio —la marca
   arranca donde arranca en la portada— pero el botón de la derecha se alinea
   con la columna de lectura, que es más angosta: si no, queda flotando 110 px
   afuera del borde de las tarjetas y se lee como un descuido.

   La cuenta: el borde derecho de la barra está en centro + ancho/2 y el de la
   columna de lectura en centro + lectura/2, así que sobra (ancho − lectura)/2.
   El porcentaje se resuelve contra el ancho del contenedor, de modo que 50% es
   ancho/2 y la resta sale sola a cualquier tamaño de ventana; el max() la
   apaga cuando la ventana es más angosta que la columna de lectura y las dos
   medidas coinciden. En la portada no se aplica: ahí barra y contenido ya
   miden lo mismo. */
.ancho.alineado-lectura > .nav-sitio {
  padding-right: max(0px, 50% - (var(--ancho-lectura) / 2 - var(--e-5)));
}

/* ---------- navegación del sitio ---------- */
.nav-sitio {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  padding: var(--e-6) 0;
  flex-wrap: wrap;
}
/* En una barra, el botón de 52 px de la portada pesa demasiado. */
.nav-sitio .btn {
  min-height: 42px;
  width: auto;
  padding: 0 var(--e-5);
  font-size: var(--t-s);
  margin: 0;
}
.nav-enlaces {
  align-items: center;
  gap: var(--e-5);
}
/* Ojo con esto: el display puesto por el autor sobre el hijo le gana al cierre
   del <details>. Es justo lo que se aprovecha más abajo para el escritorio,
   así que acá no puede ir de base o el panel queda abierto para siempre. */
.nav-menu[open] > .nav-enlaces {
  display: flex;
}
.nav-enlaces a:not(.btn) {
  font-weight: 600;
  font-size: var(--t-s);
  color: var(--texto);
  text-decoration: none;
  white-space: nowrap;
}

/* ---------- menú de teléfono ----------
   Va con <details> y sin una línea de JavaScript, por lo mismo que el acordeón
   de preguntas: un menú que depende de JS es un menú que un día no abre. Y de
   paso entra en la CSP sin excepciones, que es estricta a propósito.

   Antes de esto, abajo de 900 px los enlaces eran display:none a secas y no los
   reemplazaba nada: en la portada desaparecían las cuatro secciones y en las
   páginas de contenido, hasta el "volver". El teléfono se quedaba sin
   navegación.

   En escritorio el <details> no se ve: se esconde el botón y se fuerza el panel
   a la vista aunque esté cerrado. Los navegadores esconden el contenido de dos
   maneras distintas —el display del slot, y ::details-content en los más
   nuevos— así que se desarman las dos. La regla de ::details-content va sola:
   donde no se entiende, se descarta y alcanza con la otra. */
.nav-menu {
  margin-left: auto;
}
.nav-menu > summary {
  display: none;
  list-style: none;
  cursor: pointer;
}
.nav-menu > summary::-webkit-details-marker {
  display: none;
}
.nav-burger {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  position: relative;
}
.nav-burger::before,
.nav-burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.nav-burger::before {
  top: -6px;
}
.nav-burger::after {
  top: 6px;
}
/* Abierto, las tres rayas se cruzan: el mismo control cierra lo que abrió. */
.nav-menu[open] > summary .nav-burger {
  background: transparent;
}
.nav-menu[open] > summary .nav-burger::before {
  top: 0;
  transform: rotate(45deg);
}
.nav-menu[open] > summary .nav-burger::after {
  top: 0;
  transform: rotate(-45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .nav-burger,
  .nav-burger::before,
  .nav-burger::after {
    transition:
      transform var(--mov),
      top var(--mov),
      background var(--mov);
  }
}
.chip-borde {
  padding: 5px 10px;
  border: 1.5px solid var(--linea);
  border-radius: var(--r-full);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  color: var(--tenue);
}

@media (min-width: 901px) {
  .nav-menu > .nav-enlaces {
    display: flex !important;
  }
  .nav-menu::details-content {
    content-visibility: visible;
    display: contents;
  }
}

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: calc(var(--e-7) * 1.75);
  align-items: center;
  padding: var(--e-7) 0 calc(var(--e-7) * 1.5);
}
.titulo-hero {
  font-size: var(--t-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: var(--e-4) 0 0;
}
.bajada {
  font-size: var(--t-l);
  line-height: 1.5;
  color: var(--tenue);
  max-width: 30em;
  margin: var(--e-4) 0 0;
}
.hero-botones {
  display: flex;
  gap: var(--e-3);
  margin: var(--e-6) 0 var(--e-4);
  flex-wrap: wrap;
}
.hero-botones .btn {
  width: auto;
  padding: 0 var(--e-6);
}
.chip-vivo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 7px 14px;
  border-radius: var(--r-full);
  background: var(--agua-tinte);
  color: var(--acento);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  margin: 0;
}
.punto-vivo {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: latir 2.4s ease-in-out infinite;
}
@keyframes latir {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* ---------- el mockup con el dato en vivo ---------- */
/* La pastilla se sale del mockup a la izquierda, como en el diseño: rompe el
   rectángulo y le da profundidad. Va como hermana y no como hija, porque el
   mockup recorta con overflow:hidden para que la regla respete las esquinas. */
.mockup-envoltura {
  position: relative;
}
.mockup {
  background: var(--panel);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.mockup-cabecera {
  padding: var(--e-5) var(--e-5) var(--e-4);
}
.mockup-numero {
  display: flex;
  align-items: flex-end;
  gap: var(--e-2);
  margin-top: var(--e-2);
}
.mockup .dato {
  font-size: 56px;
}
.mockup-m {
  font-weight: 800;
  font-size: var(--t-l);
  color: var(--tenue);
  padding-bottom: 6px;
}
.chip-delta {
  margin-left: auto;
  padding: 5px 10px;
  border-radius: var(--r-full);
  background: var(--alerta-tinte);
  color: var(--alerta-texto);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 700;
}
.mockup .chico {
  margin: var(--e-3) 0 0;
}
.globo[hidden] {
  display: none;
}
.globo {
  position: absolute;
  left: calc(var(--e-7) * -1);
  bottom: var(--e-4);
  z-index: 2;
  margin: 0;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-m);
  background: var(--panel);
  box-shadow: var(--sombra);
  font-weight: 700;
  font-size: var(--t-s);
  line-height: 1.35;
}
.globo b {
  color: var(--alerta-texto);
}
@media (max-width: 900px) {
  /* Fuera del escritorio no hay lugar a la izquierda: se mete adentro. */
  .globo {
    left: var(--e-4);
    bottom: var(--e-4);
  }
}
/* La regla del mockup representa de 0 a 8 m; las alturas las fija landing.js
   sobre esa escala. */
.regla-mini {
  position: relative;
  height: 230px;
  background: var(--panel-2);
  background-image: linear-gradient(var(--linea) 1px, transparent 1px);
  background-size: 100% 28px;
}
.rm-agua {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: var(--agua);
  transition: height 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.rm-linea {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  bottom: 0;
  background: var(--agua-clara);
  transition: bottom 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.rm-umbral {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
}
.rm-umbral b {
  position: absolute;
  right: var(--e-3);
  bottom: 5px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-family: var(--mono);
  font-size: var(--t-xs);
}
.rm-alerta {
  bottom: 66.25%; /* 5,30 de 8 m */
  background: var(--alerta);
  height: 2px;
}
.rm-alerta b {
  background: var(--alerta-tinte);
  color: var(--alerta-texto);
}
/* La etiqueta del nivel va dentro del agua: es lo que convierte el bloque
   azul en un dato. Sobre el relleno --agua, el texto va del color del botón,
   que es el par que ya está medido para ese fondo. */
.rm-ahora {
  position: absolute;
  /* A la derecha: el globo flotante entra por la izquierda y se pisaban. */
  right: var(--e-4);
  bottom: 0;
  color: var(--btn-texto);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 700;
  transition: bottom 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- franja histórica ---------- */
.landing .franja-oscura {
  background: var(--fondo-invertido);
  color: var(--texto-invertido);
  border-radius: var(--r-xl);
  padding: var(--e-7);
  margin: var(--e-6) 0;
}
.franja-oscura .eti {
  color: var(--tenue-invertido);
}
.hitos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-7);
  margin-top: var(--e-5);
}
.hitos b {
  display: block;
  font-size: var(--t-xxl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hitos p {
  margin: var(--e-2) 0 0;
  font-size: var(--t-s);
  color: var(--tenue-invertido);
}
.franja-cierre {
  margin: var(--e-6) 0 0;
  font-weight: 600;
  font-size: var(--t-m);
}

/* ---------- tres pasos y métricas ---------- */
.tres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-5);
}
.tres .tarjeta {
  margin: 0;
}
.tres h3 {
  margin: var(--e-4) 0 var(--e-2);
}
.tres p {
  margin: 0;
  color: var(--tenue);
  font-size: var(--t-s);
}
.numerito {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-s);
  background: var(--agua-tinte);
  color: var(--acento);
  font-weight: 800;
}
.metricas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-5);
}
.metrica {
  background: var(--panel);
  box-shadow: var(--sombra);
  border-radius: var(--r-l);
  padding: var(--e-5);
}
.metrica b {
  display: block;
  font-size: var(--t-xxl);
  font-weight: 800;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.metrica span {
  display: block;
  margin-top: var(--e-2);
  font-size: var(--t-s);
  color: var(--tenue);
}
.metrica.fuerte {
  background: var(--fondo-invertido);
  color: var(--texto-invertido);
}
.metrica.fuerte b {
  color: inherit;
}
.metrica.fuerte span {
  color: var(--tenue-invertido);
}

/* ---------- secciones a dos columnas ---------- */
.dosc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-7);
  align-items: center;
}
.dosc .btn {
  width: auto;
  padding: 0 var(--e-6);
}
.mapa-caja {
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--sombra);
  background: var(--panel-2);
}
#mapa-landing {
  height: 420px;
}
.citas {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.cita {
  border-radius: var(--r-m);
  background: var(--alerta-tinte-suave);
  border: 2px solid var(--alerta-tinte);
  padding: var(--e-4) var(--e-5);
}
.cita.neutra {
  background: transparent;
  border-color: var(--linea);
}
.cita p {
  margin: var(--e-2) 0 0;
  font-weight: 600;
}
.eti-alerta {
  color: var(--alerta-texto);
}

/* ---------- llamada final ---------- */
.landing .cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e-7);
  align-items: center;
  background: var(--fondo-invertido);
  color: var(--texto-invertido);
  border-radius: var(--r-xl);
  padding: var(--e-7);
  margin-bottom: var(--e-7);
}
.cta h2 {
  margin: var(--e-4) 0 0;
}
.cta p {
  margin: var(--e-3) 0 0;
  color: var(--tenue-invertido);
  max-width: 30em;
}
.cta .btn {
  width: auto;
  padding: 0 var(--e-7);
}

/* ---------- pie del sitio ---------- */
/* La línea que separa el pie va de borde a borde de la ventana, no del
   contenedor: es el corte entre la página y el pie, y cortada a 1100 px parece
   el borde de una tarjeta. Por eso el borde vive en la envoltura, que es ancho
   completo, y el contenido del pie se centra adentro. */
.pie-envoltura {
  border-top: 1.5px solid var(--linea);
}
.pie-sitio {
  display: grid;
  /* La marca se lleva la mitad y las dos listas se van a la derecha: con
     1.4fr el aire se juntaba todo al final, después de la última columna. */
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--e-7);
  max-width: var(--ancho-sitio);
  margin: 0 auto;
  padding: var(--e-7) var(--e-5);
}
.pie-sitio > div {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  align-items: flex-start;
}
/* Las tres columnas empiezan con elementos de distinta altura —la marca mide
   24 px, las etiquetas menos— y los encabezados quedaban desalineados. Se les
   da a las tres la misma primera fila. */
.pie-sitio > div > :first-child {
  display: flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: var(--e-2);
}
.pie-sitio a {
  font-weight: 600;
  font-size: var(--t-s);
  color: var(--texto);
  text-decoration: none;
}
.pie-sitio a:hover {
  text-decoration: underline;
}
.pie-sitio .chico {
  max-width: 32ch;
  margin: var(--e-2) 0 0;
}
.pie-sitio .firma {
  margin: var(--e-2) 0 0;
  font-size: var(--t-s);
}
.chip-tel {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin: var(--e-3) 0 0;
  padding: 10px 16px;
  border-radius: var(--r-m);
  background: var(--fondo-invertido);
  color: var(--texto-invertido);
  font-weight: 700;
  font-size: var(--t-s);
}
.chip-tel b {
  color: var(--agua-clara);
  font-size: var(--t-l);
}

/* Un <a class="btn"> es un botón, no un enlace: sin esto las reglas de enlace
   le ganan por especificidad y lo pintan subrayado sobre el relleno. */
.btn {
  text-decoration: none;
}
.landing a.btn,
.pagina a.btn {
  text-decoration: none;
  color: var(--btn-texto);
}
/* El secundario no lleva relleno de color: su texto es el del cuerpo. Sin
   esto quedaba blanco sobre blanco en tema claro. */
.landing a.btn.sec,
.pagina a.btn.sec {
  color: var(--texto);
}
.btn-oscuro {
  background: var(--btn-fuerte);
  color: var(--btn-fuerte-texto);
}
.landing a.btn-oscuro,
.pagina a.btn-oscuro {
  color: var(--btn-fuerte-texto);
}
.btn-claro {
  background: var(--agua-clara);
  color: #0b1418;
}
.landing a.btn-claro {
  color: #0b1418;
}

/* Un h1 que dice sólo la marca no le sirve a quien busca "hasta dónde llega
   el agua". El complemento existe para el buscador y para un lector de
   pantalla; no se ve. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- bienvenida ---------- */
/* Overlay y no vista: la barra de pestañas se queda en cuatro. */
/* [hidden] del navegador es display:none, pero pierde contra cualquier regla
   de autor que fije display. Sin esta línea el overlay no se ocultaba nunca.
   Vale para todo lo que se oculta con el atributo y tiene display propio. */
.bienvenida[hidden],
.instalar-pie[hidden] {
  display: none;
}
.bienvenida {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--fondo);
  display: flex;
  align-items: center;
  padding: var(--e-5);
  overflow-y: auto;
}
body.con-bienvenida {
  overflow: hidden;
}
.bienvenida-caja {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}
.bienvenida .lockup {
  display: flex;
}
.bienvenida .dato {
  margin-top: var(--e-2);
}
.bienvenida-botones {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-top: var(--e-6);
}

/* ---------- barras de contexto ---------- */
.barra-fila {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-2);
}
.barra-nom {
  flex: none;
  width: 92px;
  font-size: var(--t-s);
  color: var(--tenue);
}
.barra-pista {
  flex: 1;
  background: var(--panel-2);
  border-radius: var(--r-full);
  overflow: hidden;
}
.barra-pista i {
  display: block;
  height: 14px;
  border-radius: var(--r-full);
  min-width: 3px;
}
.b-hoy {
  background: var(--agua);
}
.b-alerta {
  background: var(--alerta);
}
.b-peligro {
  background: var(--peligro);
}
.b-record {
  background: var(--linea);
}
.barra-val {
  flex: none;
  width: 48px;
  text-align: right;
  font-family: var(--mono);
  font-size: var(--t-s);
  font-variant-numeric: tabular-nums;
}

/* ---------- ajustes ---------- */
.acciones-top {
  display: flex;
  gap: var(--e-2);
  align-items: center;
}
.fila-ajuste {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--linea);
  flex-wrap: wrap;
}
.fila-ajuste:last-child {
  border-bottom: none;
}
.fila-ajuste > div:first-child {
  flex: 1;
  min-width: 12em;
}
.fila-ajuste b {
  display: block;
}
.fila-ajuste .chico {
  display: block;
  margin-top: 2px;
}
.segmentado {
  display: flex;
  gap: var(--e-1);
  background: var(--panel-2);
  border-radius: var(--r-full);
  padding: 3px;
}
.segmentado button {
  border: none;
  background: none;
  border-radius: var(--r-full);
  padding: 8px 14px;
  min-height: 40px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-s);
  color: var(--tenue);
  cursor: pointer;
}
.segmentado button.on {
  background: var(--panel);
  color: var(--texto);
  box-shadow: var(--sombra);
}

/* Tamaño de texto: una clase en <html> escala todo junto, incluidos los
   números de la regla, sin duplicar reglas. */
html.texto-grande {
  font-size: 118%;
}

/* ---------- variantes de la página legal ---------- */
/* Chips de anclaje: la página es larga y la gente entra buscando una sección
   concreta, no a leerla entera. */
.chips-ancla {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-5);
}
.chips-ancla a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 var(--e-4);
  border-radius: var(--r-full);
  border: 1.5px solid var(--linea);
  font-weight: 700;
  font-size: var(--t-s);
  color: var(--texto);
  text-decoration: none;
}
.chips-ancla a:hover {
  border-color: var(--acento);
  color: var(--acento);
}
/* El ancla no puede quedar debajo del borde superior de la ventana. */
.bloque[id] {
  scroll-margin-top: var(--e-5);
}
.kicker-alerta {
  color: var(--alerta-texto) !important;
}

.rejilla-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3);
}
.mini-tarjeta {
  border-radius: var(--r-m);
  background: var(--panel-2);
  padding: var(--e-4) var(--e-5);
}
.mini-tarjeta b {
  display: block;
  font-size: var(--t-base);
}
.mini-tarjeta p {
  margin: var(--e-2) 0 0;
  font-size: var(--t-s);
  color: var(--tenue);
}

/* Las licencias son pares nombre/descripción: en dos columnas se leen de un
   vistazo, apiladas se leerían como prosa. */
.filas-licencia > div {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: var(--e-5);
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--linea);
}
.filas-licencia > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.filas-licencia b {
  font-size: var(--t-base);
}
.filas-licencia p {
  margin: 0;
  font-size: var(--t-s);
  color: var(--tenue);
}

/* Un bloque de contorno, sin relleno: para lo que acompaña pero no es una
   sección más. */
.landing .bloque.borde {
  background: transparent;
  box-shadow: none;
  border: 2px solid var(--linea);
  padding: var(--e-5) var(--e-6);
}

@media (max-width: 700px) {
  .rejilla-2 {
    grid-template-columns: 1fr;
  }
  .filas-licencia > div {
    grid-template-columns: 1fr;
    gap: var(--e-2);
  }
}

/* ---------- acordeón de preguntas ---------- */
/* Va con <details> y no con JavaScript: una página de ayuda que depende de JS
   es una página que un día no se abre. Además así el buscador lee todas las
   respuestas, estén abiertas o cerradas. */
.faq {
  border-bottom: 1px solid var(--linea);
}
.faq:last-child {
  border-bottom: none;
}
.faq summary {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  min-height: 56px;
  padding: var(--e-3) 0;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--t-m);
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--r-s);
  background: var(--panel-2);
  color: var(--acento);
  font-weight: 800;
  font-size: var(--t-m);
  text-align: center;
  line-height: 30px;
}
.faq[open] summary::after {
  content: "−";
}
.faq p {
  margin: 0 0 var(--e-4);
  color: var(--tenue);
}

/* ---------- tabla de una cuenta ---------- */
.cuenta {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.cuenta td {
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linea);
  font-size: var(--t-s);
  color: var(--tenue);
}
.cuenta td:last-child {
  text-align: right;
  white-space: nowrap;
  font-family: var(--mono);
  color: var(--texto);
}
.cuenta .total td {
  border-bottom: none;
  padding-top: var(--e-4);
  font-weight: 700;
  color: var(--texto);
}
.cuenta .total td:last-child {
  font-size: var(--t-l);
  font-weight: 800;
  color: var(--acento);
}

/* ---------- pines del mapa de la portada ---------- */
.pin-landing {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--agua-clara);
  border: 3px solid var(--fondo-invertido);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.mapa-caido {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mapa-caido::after {
  content: "El mapa no cargó. La lista completa está más abajo.";
  padding: var(--e-5);
  text-align: center;
  color: var(--tenue);
  font-size: var(--t-s);
}

/* ---------- angosto ---------- */
@media (max-width: 900px) {
  .landing .bloque {
    padding: var(--e-5);
  }
  .pg-cabecera h1 {
    font-size: var(--t-xxl);
  }
  .pie-simple {
    grid-template-columns: 1fr;
  }
  /* Tercera vez que muerde el mismo bug de cascada, así que queda anotado: la
     caja de cierre se define como `.landing .cta`, y una consulta de medios NO
     suma especificidad. Escrito `.cta` a secas, este override perdía 0-1-0
     contra 0-2-0 y la sección se quedaba en dos columnas en el teléfono: el
     título partido en siete renglones de una palabra al lado de un botón. El
     selector de acá tiene que ser tan específico como el de la definición. */
  .hero,
  .dosc,
  .landing .cta {
    grid-template-columns: 1fr;
    gap: var(--e-6);
  }
  .hitos,
  .tres,
  .metricas {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e-5);
  }
  .pie-sitio {
    grid-template-columns: 1fr;
    gap: var(--e-6);
  }
  .titulo-hero {
    font-size: var(--t-xxl);
  }
  .bajada {
    font-size: var(--t-m);
  }
  .nav-sitio {
    position: relative;
    row-gap: var(--e-3);
  }
  .nav-menu > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -4px 0;
    border-radius: var(--r-m);
    color: var(--texto);
  }
  .nav-menu > summary:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
  }
  /* El panel cuelga de la barra en vez de empujar la página: abrir el menú no
     tiene por qué mover el contenido que la persona estaba mirando. */
  .nav-menu > .nav-enlaces {
    position: absolute;
    top: calc(100% - var(--e-4));
    right: 0;
    min-width: 220px;
    z-index: 5;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--e-2);
    border-radius: var(--r-m);
    background: var(--panel);
    box-shadow: var(--sombra);
  }
  .nav-menu > .nav-enlaces a:not(.btn) {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 var(--e-4);
    border-radius: var(--r-s);
    font-size: var(--t-base);
  }
  .landing .franja-oscura,
  .landing .cta {
    padding: var(--e-6) var(--e-5);
  }
  .landing section {
    padding: var(--e-6) 0;
  }
}
@media (max-width: 560px) {
  /* Los hitos y las tres tarjetas son párrafos: en dos columnas de 170 px el
     texto reflota y no se gana nada, así que van apilados. Las métricas son un
     número y un renglón corto — ahí dos columnas ahorran media pantalla. */
  .hitos,
  .tres {
    grid-template-columns: 1fr;
  }
  .metricas {
    grid-template-columns: repeat(2, 1fr);
  }
  .nav-sitio {
    padding: var(--e-4) 0;
  }
  /* 420 px de mapa en un teléfono son media pantalla de un elemento que es
     ilustrativo: la lista completa está a un toque. */
  #mapa-landing {
    height: 280px;
  }
  .pg-cabecera {
    padding: var(--e-5) 0 var(--e-4);
  }
  .pg-cta .btn {
    width: 100%;
  }
  .nav-sitio {
    gap: var(--e-3);
  }
  /* Con el menú al lado, el botón entra en la misma fila que la marca: una
     barra de teléfono normal en vez de dos renglones. */
  .nav-sitio .btn {
    width: auto;
    padding: 0 var(--e-4);
  }
  .nav-sitio .chip-borde {
    display: none;
  }
  .hero-botones .btn,
  .dosc .btn,
  .cta .btn {
    width: 100%;
  }

  /* ---------- apretar el aire en el teléfono ----------
     El escritorio puede gastar 40 px entre secciones porque los ve de reojo;
     en una pantalla de 844 px ese mismo aire son siete pantallas y media de
     scroll. Se achica el espaciado y la escala tipográfica, no el contenido:
     todo lo que se leía se sigue leyendo, con menos dedo. */
  .landing section {
    padding: var(--e-5) 0;
  }
  .landing h2 {
    font-size: var(--t-xl);
    margin: var(--e-2) 0 var(--e-4);
  }
  .landing p {
    margin-bottom: var(--e-3);
  }
  .landing .bloque {
    padding: var(--e-4);
    margin-bottom: var(--e-4);
  }
  .bloque h2 {
    font-size: var(--t-l);
    margin: var(--e-2) 0 var(--e-3);
  }
  .muestras-widget {
    grid-template-columns: 1fr;
  }
  .caja-codigo .btn {
    position: static;
    display: block;
    margin-bottom: var(--e-4);
  }
  .charla {
    grid-template-columns: 1fr;
    gap: var(--e-4);
  }
  /* El sello pasa a ser una pastilla horizontal: en una columna de 350 px un
     cuadrado de 96 px al costado le come un tercio del ancho al texto. */
  .charla .sello {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--e-3);
    min-height: 0;
    /* En el teléfono la ficha es una grilla de una sola columna: sin
       justify-self la pastilla se estira de lado a lado. */
    justify-self: start;
    padding: var(--e-2) var(--e-4);
    border-radius: var(--r-full);
  }
  .charla .sello .t {
    font-size: var(--t-base);
  }
  .charla .tit {
    font-size: var(--t-m);
  }
  .rejilla-puntos {
    grid-template-columns: 1fr;
  }
  .telefonos-emergencia {
    grid-template-columns: 1fr;
    gap: var(--e-4);
    padding: var(--e-5);
  }
  .paso {
    grid-template-columns: 32px 1fr;
    gap: var(--e-4);
  }
  .paso .numerito {
    width: 32px;
    height: 32px;
  }
  .bloque.paso h2 {
    font-size: var(--t-m);
  }
  .resultado .dato-grande {
    font-size: var(--t-xxl);
  }
  .landing .franja-oscura,
  .landing .cta {
    padding: var(--e-5) var(--e-4);
  }
  .hero {
    padding: var(--e-5) 0 var(--e-6);
    gap: var(--e-5);
  }
  .hero-botones {
    margin: var(--e-5) 0 var(--e-3);
  }
  .hitos,
  .tres,
  .metricas {
    gap: var(--e-3);
  }
  .pie-sitio {
    gap: var(--e-5);
    padding-bottom: var(--e-6);
  }
  .pg-cta {
    margin: var(--e-5) 0 var(--e-6);
  }
}

/* ---------- impresión ---------- */
#plan-impreso {
  display: none;
}
@media print {
  /* Lo único que tiene sentido en papel es el plan, y en texto plano: los
     campos de formulario se imprimen mal y los textarea se recortan. */
  body > *:not(#plan-impreso) {
    display: none !important;
  }
  html,
  body {
    background: #fff;
    color: #000;
    padding: 0;
  }
  #plan-impreso {
    display: block;
    white-space: pre-wrap;
    font-family: ui-monospace, monospace;
    font-size: 11.5pt;
    line-height: 1.45;
    color: #000;
    padding: 0;
  }
}

/* ---------- sugerencias ---------- */
.sugerir {
  max-width: 640px;
  margin: var(--e-6) auto 0;
  padding: 0 var(--e-5);
}
.sugerir > summary {
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-m);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tenue);
  padding: var(--e-3) 0;
  border-top: 1px solid var(--linea);
}
.sugerir > summary:hover {
  color: var(--texto);
}
.sugerir[open] > summary {
  color: var(--texto);
}

.pie {
  padding: var(--e-6) var(--e-5) var(--e-7);
  text-align: center;
  font-size: var(--t-s);
  color: var(--tenue);
  border-top: 1px solid var(--linea);
  margin-top: var(--e-6);
  line-height: 1.6;
}
/* Una herramienta que dice "no tiene vínculo con organismos oficiales"
   gana en que se vea quién responde por ella. */
.firma {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea);
  font-size: var(--t-s);
}
.firma b {
  color: var(--texto);
  font-weight: 600;
}
.firma .redes {
  display: inline-flex;
  gap: var(--e-2);
  margin-left: var(--e-2);
}
.firma .redes a {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--e-1) var(--e-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-full);
  color: var(--acento);
}
.firma .redes a:hover {
  border-color: var(--acento);
}

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

/* ==========================================================================
   ESTADOS E INTERACCIÓN
   Había 4 hover y 1 active en toda la app: nada respondía al toque. La
   diferencia entre "funciona" y "está hecho" suele ser esto.
   Todo va bajo (hover: hover) para que en el teléfono no queden estados
   pegados después de tocar.
   ========================================================================== */
.btn,
.tema,
.punto,
.tel,
.chk,
.barra-app button,
summary,
input,
select,
textarea {
  transition:
    background-color var(--mov),
    border-color var(--mov),
    color var(--mov),
    transform var(--mov);
}

.btn:active,
.tema:active {
  transform: translateY(1px);
}

/* Las filas de lista son links: tienen que sentirse como tales. */
.punto,
.tel {
  margin: 0 calc(var(--e-2) * -1);
  padding-left: var(--e-2);
  padding-right: var(--e-2);
  border-radius: var(--r-m);
}
.punto .ir {
  transition: transform var(--mov);
}

@media (hover: hover) {
  .btn:hover:not(:disabled) {
    filter: brightness(1.08);
  }
  .btn.sec:hover:not(:disabled) {
    filter: none;
    border-color: var(--agua);
    color: var(--acento);
  }
  .punto:hover,
  .tel:hover {
    background: var(--panel-2);
  }
  .punto:hover .ir {
    transform: translateX(3px);
  }
  .chk:hover span {
    color: var(--texto);
  }
  .barra-app button:hover {
    color: var(--texto);
  }
  summary:hover {
    color: var(--texto);
  }
}

/* El foco visible tiene que verse igual en todos lados, no heredar el que
   trae cada control. */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--agua);
  outline-offset: 0;
}

/* ---- el número grande ----
   Es el centro de la app: una app de datos se juzga por cómo trata sus
   números. A 30px una monoespaciada queda suelta; el tracking negativo la
   compacta y la hace leer como un instrumento. */
.dato {
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.dato .unidad {
  letter-spacing: 0;
  margin-left: 2px;
}
.leyenda-item .v,
.tel .n {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   PANTALLAS ANCHAS — sólo "Dónde ir"
   El resto de la app se queda igual que en el teléfono a propósito: una
   columna centrada. La única pantalla que gana de verdad con más ancho es
   ésta, porque un mapa y su lista se usan juntos.
   La grilla va en .mapa-y-lista, no en la sección: poniéndola en la sección,
   los <h2> a ancho completo cortan cada fila y la segunda columna no se forma
   nunca. Eso fue exactamente lo que salió mal el intento anterior.
   ========================================================================== */
@media (min-width: 900px) {
  #v-donde.on {
    max-width: 1000px;
  }
  .mapa-y-lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--e-5);
    align-items: start;
  }
  /* El mapa queda a la vista mientras se recorre la lista. */
  .col-mapa {
    position: sticky;
    top: var(--e-5);
  }
  #mapa {
    height: 440px;
  }
}

/* El foco programático de las secciones es para que un lector de pantalla
   anuncie el cambio, no para dibujar un recuadro alrededor de media página.
   Sólo se puede enfocar por script (tabindex="-1"), así que sacar el contorno
   no le quita nada a quien navega con teclado. */
.vista:focus {
  outline: none;
}

/* ==========================================================================
   TRAZABILIDAD — las fichas de fuente
   --------------------------------------------------------------------------
   Aparecen en /datos y al pie de los bloques que muestran un número. La idea
   es que citar la fuente se sienta parte del dato y no una nota al pie: el
   nombre del organismo va en el mismo peso que un título chico, y el enlace
   al dato crudo va al lado del botón, en tono menor, porque sirve a mucha
   menos gente pero es el que hace auditable la app.
   ========================================================================== */
.fuente-ficha {
  margin-top: var(--e-5);
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  background: var(--panel-2);
}
.fuente-que {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tenue);
}
.fuente-quien {
  margin: var(--e-1) 0 0;
  font-family: var(--sans);
  font-size: var(--t-m);
  font-weight: 700;
}
.fuente-ficha .chico {
  margin: var(--e-2) 0 0;
}
.fuente-enlaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  margin: var(--e-4) 0 0;
}
.fuente-enlaces .btn {
  margin: 0;
  width: auto;
}
.enlace-crudo {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--tenue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.enlace-crudo:hover {
  color: var(--acento);
}
.fuentes-rejilla {
  display: grid;
  gap: var(--e-4);
  margin-top: var(--e-4);
}
/* El sello chico que va debajo de un número dentro de la app. No lleva caja:
   una caja acá compite con la tarjeta que lo contiene. */
.sello-fuente {
  display: block;
  margin: var(--e-2) 0 0;
  font-size: var(--t-xs);
  color: var(--tenue);
}
.sello-fuente .k {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: var(--e-1);
}
.sello-fuente a {
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* La ficha de la estación: pares clave/valor que se leen salteando. */
.ficha-estacion {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: var(--e-5) 0;
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  overflow: hidden;
}
.ficha-estacion > div {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--linea);
}
.ficha-estacion > div:last-child {
  border-bottom: none;
}
.ficha-estacion .k {
  font-size: var(--t-s);
  color: var(--tenue);
}
.ficha-estacion .v {
  font-family: var(--mono);
  font-size: var(--t-s);
  text-align: right;
}

/* ==========================================================================
   LA CUENTA, EN VERTICAL
   --------------------------------------------------------------------------
   Tres sumandos y un total, con el operador entre medio en su propio renglón.
   Antes esto era prosa con números adentro y no lo seguía nadie: la cuenta
   escrita como cuenta se entiende sin leer.
   ========================================================================== */
.cuenta-vertical {
  margin: var(--e-5) 0;
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  overflow: hidden;
}
.cv-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-4);
  padding: var(--e-4);
}
.cv-k {
  font-size: var(--t-base);
  color: var(--tenue);
}
.cv-v {
  font-family: var(--mono);
  font-size: var(--t-m);
  font-weight: 700;
  white-space: nowrap;
}
.cv-op {
  padding: 0 var(--e-4) var(--e-1);
  font-family: var(--mono);
  font-size: var(--t-l);
  color: var(--acento);
  line-height: 1;
}
.cv-total {
  background: var(--agua-tinte);
  border-top: 1px solid var(--linea);
}
.cv-total .cv-k {
  color: var(--texto);
  font-weight: 600;
}
.cv-total .cv-v {
  color: var(--acento);
  font-size: var(--t-l);
}

/* El corte del terreno. Ancho completo y alto libre: es un esquema, no un
   plano, y estirarlo en un teléfono no rompe nada. */
.corte {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--e-5) 0;
  border-radius: var(--r-m);
  background: var(--panel-2);
  padding: var(--e-3);
}

/* Las dos curvas con la casa en el medio. Es la ilustración más barata
   posible de "estás entre dos líneas" y explica la interpolación sin decir
   la palabra interpolación. */
.curvas-dibujo {
  margin: var(--e-5) 0;
  padding: var(--e-5) var(--e-4);
  border-radius: var(--r-m);
  background: var(--panel-2);
}
.cd-linea {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}
.cd-linea span {
  font-family: var(--mono);
  font-size: var(--t-s);
  color: var(--tenue);
  min-width: 58px;
}
.cd-linea i {
  flex: 1;
  height: 1px;
  background: var(--tierra);
  opacity: 0.75;
}
.cd-casa {
  margin: var(--e-3) 0 var(--e-3) 70px;
  font-size: var(--t-s);
}

/* Una cita textual de un documento. Va en monoespaciada para que se lea como
   lo que es: palabras copiadas de otro lado, no nuestras. */
.cita {
  font-family: var(--mono);
  font-size: 0.92em;
  padding: 2px 6px;
  border-radius: var(--r-s);
  background: var(--panel-2);
}

@media (min-width: 700px) {
  .fuentes-rejilla {
    grid-template-columns: 1fr 1fr;
  }
  .ficha-estacion {
    grid-template-columns: 1fr 1fr;
  }
  .ficha-estacion > div:nth-last-child(2) {
    border-bottom: none;
  }
}

/* ==========================================================================
   /historia — cien años del Paraná
   ========================================================================== */
.h-franja {
  margin: var(--e-5) 0 var(--e-3);
  border-radius: var(--r-m);
  background: var(--panel-2);
  padding: var(--e-3) var(--e-2);
}
/* La franja se estira a lo ancho y se queda baja en el teléfono: lo que
   importa es la silueta del siglo, no leer año por año. */
.h-franja-caja {
  position: relative;
  padding-left: 20px;
}
.h-svg-franja {
  display: block;
  width: 100%;
  height: 170px;
}
/* Los rótulos son HTML encima del SVG, no <text> adentro: el dibujo se estira
   sin conservar proporción y eso aplasta las letras. */
.h-umbral,
.h-y {
  position: absolute;
  font-family: var(--sans);
  font-size: var(--t-xs);
  line-height: 1;
  pointer-events: none;
}
/* Los dos umbrales van sobre las barras, así que llevan pastilla: sin fondo,
   "evacuación 5,7" caía encima de las crecidas del 80 y no se leía ninguno de
   los dos. Y el de alerta va debajo de su línea porque las dos líneas están a
   40 cm y los rótulos se montaban. */
.h-umbral {
  right: var(--e-1);
  margin-bottom: 3px;
  padding: 1px 5px;
  border-radius: var(--r-s);
  background: var(--panel);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.h-franja-caja .h-alerta {
  margin-bottom: 0;
  transform: translateY(100%);
}
.h-y {
  left: 0;
  width: 16px;
  text-align: right;
  transform: translateY(50%);
  color: var(--tenue);
}
.h-eje {
  position: relative;
  height: 16px;
  margin: var(--e-2) 0 0 20px;
}
.h-eje span {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: var(--t-xs);
  color: var(--tenue);
  white-space: nowrap;
}
/* Los extremos se pegan al borde en vez de salirse de la caja. */
.h-eje span:first-child {
  transform: none;
}
.h-eje span:last-child {
  transform: translateX(-100%);
}
.h-barra {
  cursor: pointer;
}
.h-barra:hover {
  opacity: 1;
}
.h-modos {
  display: flex;
  gap: var(--e-2);
  margin: var(--e-4) 0;
}
.h-modos .btn {
  margin: 0;
  width: auto;
  flex: 1;
}
.h-modos .btn[aria-pressed="true"] {
  border-color: var(--acento);
  color: var(--acento);
}
/* En el teléfono el tanque va a lo ancho y la lectura debajo: con el tanque
   en una columna angosta las etiquetas de los umbrales —"Evacuación · 5,7 m"—
   no entraban y se salían de la caja. En pantalla ancha sí se pone al costado. */
.h-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-4);
  align-items: stretch;
}
/* El tanque. La línea del agua es la altura de un div, así que animarla es
   una transición de `height` y nada más: sin canvas, sin librería y sin
   repintar el SVG en cada paso del recorrido. */
.h-tanque {
  position: relative;
  min-height: 240px;
  border-radius: var(--r-m);
  border: 1px solid var(--linea);
  background: var(--panel-2);
  overflow: hidden;
}
.h-agua {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    var(--agua) 0,
    var(--agua-tinte) 100%
  );
  border-top: 2px solid var(--agua-clara);
  transition: height 0.32s ease-out;
}
.h-agua.h-sin-transicion {
  transition: none;
}
.h-marcas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.h-marca {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed currentColor;
}
.h-marca span {
  position: absolute;
  right: var(--e-2);
  bottom: 2px;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
/* Alerta y evacuación están a 40 cm una de otra: en un tanque de 240 px eso
   son 11 px y los dos rótulos se montaban. El de alerta va DEBAJO de su línea
   y el de evacuación encima, y quedan separados. El del récord también va
   debajo, porque a 93 % de altura no le queda lugar arriba. */
.h-alerta span,
.h-record span {
  bottom: auto;
  top: 3px;
}
.h-alerta {
  color: var(--alerta);
}
.h-peligro {
  color: var(--peligro);
}
.h-record {
  color: var(--tierra);
}
.h-tenue {
  color: var(--tenue);
}
.h-lectura {
  align-self: center;
}
.h-anio {
  font-family: var(--sans);
  font-size: var(--t-xl);
  font-weight: 800;
  line-height: 1;
}
.h-num {
  font-family: var(--mono);
  font-size: var(--t-xxl);
  font-weight: 700;
  color: var(--acento);
  line-height: 1.1;
  margin-top: var(--e-1);
}
.h-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.h-lista li {
  font-size: var(--t-s);
  color: var(--tenue);
  padding: var(--e-2) 0;
  border-top: 1px solid var(--linea);
}
.h-lista li b {
  color: var(--texto);
}
.h-ojo {
  color: var(--alerta-texto) !important;
}
.h-control {
  margin-top: var(--e-5);
}
/* El control es un range nativo a propósito: teclado, lector de pantalla y
   el gesto de arrastre del sistema vienen gratis y funcionan mejor que
   cualquier cosa que pudiéramos escribir. */
.h-control input[type="range"] {
  width: 100%;
  accent-color: var(--acento);
  height: 34px;
}
.h-control-pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-2);
}
.h-control-pie .btn {
  margin: 0;
  width: auto;
}
.h-ranking {
  margin: var(--e-4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.h-ranking li {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linea);
}
.h-ranking li:last-child {
  border-bottom: none;
}
.h-puesto {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--panel-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--tenue);
}
.h-detalle summary {
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-base);
}
/* La tabla scrollea en su propia caja: la página nunca se mueve de costado. */
.h-tabla-caja {
  max-height: 420px;
  overflow: auto;
  margin-top: var(--e-4);
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
}
.h-tabla {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: var(--t-xs);
}
.h-tabla th,
.h-tabla td {
  padding: var(--e-2) var(--e-3);
  text-align: right;
  border-bottom: 1px solid var(--linea);
}
.h-tabla th:first-child,
.h-tabla td:first-child {
  text-align: left;
}
.h-tabla thead th {
  position: sticky;
  top: 0;
  background: var(--panel);
  color: var(--tenue);
  font-family: var(--sans);
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (min-width: 700px) {
  .h-panel {
    grid-template-columns: 220px 1fr;
    gap: var(--e-5);
  }
  .h-tanque {
    min-height: 320px;
  }
  .h-svg-franja {
    height: 230px;
  }
}
/* Quien pidió menos movimiento igual puede recorrer los años: lo que se quita
   es la transición, no la función. */
@media (prefers-reduced-motion: reduce) {
  .h-agua {
    transition: none;
  }
}

/* La lista de "esto está a tanto de cada umbral", en la tarjeta En contexto.
   Tres renglones cortos: el número primero, porque es lo que se busca. */
.lista-contra {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lista-contra li {
  font-size: var(--t-base);
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--linea);
}
.lista-contra li:last-child {
  border-bottom: none;
}

/* El sello "plan municipal" en las listas del plan familiar. Marca lo que sale
   del Plan de Contingencia del municipio y lo separa de lo que agregamos
   nosotros: mezclarlos sin decirlo sería atribuirnos un respaldo que no
   tenemos. Va chico y en tono menor — es una nota de origen, no una jerarquía
   entre los renglones. */
.sello-oficial {
  display: inline-block;
  margin-left: var(--e-2);
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: var(--agua-tinte);
  color: var(--acento);
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
  white-space: nowrap;
}

/* ==========================================================================
   RESERVAR EL LUGAR DE LO QUE LLEGA DESPUÉS
   --------------------------------------------------------------------------
   Cuatro tarjetas de la pantalla del río se llenan cuando contesta la red, no
   al pintar: el veredicto, la lluvia, la tendencia del caudal y el bloque de
   contexto. Hasta que llegan miden poco, y al llenarse empujan hacia abajo
   todo lo que tienen debajo.

   Medido en /app con caché frío y 4G lento, eso daba CLS 0,264 — el único
   número de Core Web Vitals que este sitio tenía en rojo (el límite es 0,1).
   No es sólo una métrica: es la pantalla saltando bajo el dedo de alguien que
   está tratando de leer el nivel del río.

   Los valores salen de medir la altura final de cada una a 390 px de ancho.
   Son mínimos, no alturas fijas: si el contenido crece, la tarjeta crece. En
   pantallas anchas el contenido entra en menos líneas y puede sobrar un poco
   de aire; se prefiere ese aire antes que el salto. */
#veredicto-rio {
  min-height: 225px;
}
/* El renglón que dice de dónde salió el dato arranca vacío y termina en dos
   líneas con sus dos enlaces: son 60 px que empujan toda la pantalla. */
#origen-dato {
  min-height: 60px;
}
#tendencia {
  min-height: 250px;
}
#contexto-caja {
  min-height: 380px;
}
#lluvia-caja {
  min-height: 270px;
}
@media (min-width: 700px) {
  /* En pantalla ancha el texto entra en menos renglones: reservar lo mismo
     dejaría un hueco visible y no hay nada que ganar — el salto se nota
     mucho menos cuando la tarjeta no ocupa media pantalla. */
  #veredicto-rio,
  #tendencia,
  #contexto-caja,
  #lluvia-caja {
    min-height: 0;
  }
}

/* ==========================================================================
   /contacto
   ========================================================================== */

/* El aviso de emergencia va antes del título, no después: alguien con agua en
   la puerta no lee hasta el final de la página. El 103 es un enlace que llama,
   no un adorno. */
.aviso-emergencia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin: var(--e-5) 0 var(--e-7);
  padding: var(--e-5);
  border-radius: var(--r-l);
  /* Las mismas variables que `.bloque.oscuro`: son las que ya saben invertirse
     en tema claro y en oscuro. Antes esto usaba `--c-fondo`, que es el fondo
     CLARO del sitio — el texto quedaba blanco sobre blanco. */
  background: var(--fondo-invertido);
  color: var(--texto-invertido);
}
.aviso-emergencia p {
  margin: 0;
  font-size: var(--t-base);
  max-width: 46ch;
}
.btn-emergencia {
  display: inline-flex;
  align-items: baseline;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-5);
  border-radius: var(--r-full);
  background: var(--peligro-solido);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  white-space: nowrap;
}
.btn-emergencia b {
  font-size: var(--t-l);
  letter-spacing: 0.02em;
}
/* El botón del 103 se suma a la lista de exclusiones de la regla general de
   enlaces —junto a .btn, .lockup, .punto y .charla—: si no, hereda el color
   de acento y queda azul sobre rojo, ilegible. */
.btn-emergencia,
.btn-emergencia:hover {
  color: #fff;
  text-decoration: none;
}

/* Las pastillas de categoría son radios de verdad. El input queda accesible
   —no `display:none`, que lo saca del foco— y se dibuja el label. */
.campo-cat {
  border: 0;
  padding: 0;
  margin: var(--e-5) 0 var(--e-4);
}
.campo-cat legend {
  padding: 0;
  margin-bottom: var(--e-3);
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-base);
}
.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}
.cat-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cat-chip {
  display: inline-block;
  padding: var(--e-3) var(--e-5);
  border: 1px solid var(--linea);
  border-radius: var(--r-full);
  background: var(--panel-2);
  font-family: var(--sans);
  font-size: var(--t-base);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.cat-radio:checked + .cat-chip {
  background: var(--texto);
  border-color: var(--texto);
  color: var(--fondo);
}
/* El foco tiene que verse: el input está oculto, así que el anillo lo dibuja
   la pastilla. Sin esto, quien navega con teclado no sabe dónde está. */
.cat-radio:focus-visible + .cat-chip {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

#form-contacto textarea,
#form-contacto input[type="text"] {
  width: 100%;
  padding: var(--e-4);
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  background: var(--panel-2);
  color: var(--texto);
  font-family: var(--sans);
  font-size: var(--t-base);
}
#form-contacto textarea {
  resize: vertical;
  min-height: 150px;
}
#form-contacto .campo {
  display: block;
  margin: var(--e-5) 0 var(--e-2);
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-base);
}
#form-contacto .campo i {
  font-style: normal;
  font-weight: 500;
  color: var(--tenue);
}
#form-contacto .btn {
  margin-top: var(--e-5);
  width: auto;
}
.cuenta-texto {
  margin: var(--e-2) 0 0;
  color: var(--tenue);
}
.estado-mal {
  color: var(--alerta-texto);
}
.estado-bien {
  color: var(--ok-texto);
}
.letra-chica {
  margin-top: var(--e-5);
  color: var(--tenue);
}
.tarjetas-contacto {
  margin-top: var(--e-5);
}

@media (max-width: 640px) {
  .aviso-emergencia {
    flex-direction: column;
    align-items: flex-start;
  }
  .tarjetas-contacto {
    grid-template-columns: 1fr;
  }
}