/* Vigía Ecuador — sistema visual.

   Toma el sistema de CampoEc, el mismo de la familia (LigasEC, Academia
   Einstein, Cajamarca): verde de marca, ámbar para la acción principal y base
   clara "Tierra Viva". Dos decisiones heredadas de ese archivo que aquí valen
   doble, porque esta herramienta se consulta en el campo:

     · El borde define la tarjeta, no la sombra: bajo sol directo las sombras
       desaparecen y todo se vuelve una mancha.
     · Nada de transparencias ni vidrio esmerilado.

   Los colores de alerta (verde a rojo) son código de estado, no decoración, y
   se mantienen aparte del verde de marca. El azul aparece solo donde significa
   agua: lluvia y caudal.                                                     */

:root {
  /* Superficies — "Tierra Viva" */
  --ground: #fbf9f4;
  --surface: #ffffff;
  --raised: #f5f4ee;
  --line: #e5e1d8;
  --line-soft: #ede9e0;

  /* Tinta */
  --ink: #1b1c19;
  --ink-2: #5a6153;
  --ink-3: #8a9182;

  /* Marca */
  --marca: #154212;
  --marca-claro: #22611c;
  --marca-osc: #0e2e0b;
  --marca-canto: #081f06;
  --marca-suave: #e8efe6;
  --on-marca: #ffffff;
  /* La tarjeta de condición actual es una superficie grande, no un acento: no
     puede tomar --marca, que en oscuro es un verde claro para texto. */
  --tarjeta-fondo: #154212;
  --tarjeta-canto: #081f06;
  --tarjeta-tinta: #fbf9f4;

  /* Acción principal: ámbar */
  --acento: #fbbf24;
  --acento-fuerte: #f59e0b;
  --acento-canto: #b45309;
  --on-acento: #451a03;

  /* Terracota: avisos y bloques de plan */
  --terracota: #a14009;
  --terracota-suave: #fdf2ec;

  /* Agua: lluvia y caudal. Es color de dato, no de marca. */
  --agua: #1d6fa5;
  --agua-claro: #2d8fd5;
  --agua-fondo: #e6f1f8;

  /* Estado: escala de alerta */
  --a0: #2e9e4f; --a1: #94b81c; --a2: #e0a30c; --a3: #e8701f; --a4: #c92a2a;
  --oro: var(--acento);

  --sombra: 0 1px 2px rgba(27,28,25,.05);
  --r: 16px;
  --rail: 68px;
  --ancho: 1240px;

  --display: Outfit, "Plus Jakarta Sans", system-ui, sans-serif;
  --cuerpo: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}

/* Modo oscuro. Regla heredada de CampoEc y poco intuitiva: la tarjeta tiene que
   ser MÁS clara que la página, al revés que en modo claro. */
:root[data-tema="oscuro"] {
  --ground: #0a1220;
  --surface: #111b2e;
  --raised: #17233a;
  --line: #26344f;
  --line-soft: #1d2a42;
  --ink: #eaf1fb;
  --ink-2: #9fb0c9;
  --ink-3: #6b7c97;
  --marca: #38bdf8;
    --marca-osc: #0c2c4d;
    --marca-canto: #07203a;
  --marca-claro: #7dd3fc;
  --marca-suave: #0f2a45;
  --on-marca: #04121f;
  --tarjeta-fondo: #123a66;
  --tarjeta-canto: #0a2444;
  --tarjeta-tinta: #eaf1fb;
  --agua-fondo: #0f2a45;
  --agua-claro: #5ab4ef;
  --terracota-suave: #2c1a10;
  --sombra: 0 1px 2px rgba(0,0,0,.4);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --ground: #0a1220;
    --surface: #111b2e;
    --raised: #17233a;
    --line: #26344f;
    --line-soft: #1d2a42;
    --ink: #eaf1fb;
    --ink-2: #9fb0c9;
    --ink-3: #6b7c97;
    --marca: #38bdf8;
    --marca-osc: #0c2c4d;
    --marca-canto: #07203a;
    --marca-claro: #7dd3fc;
    --marca-suave: #0f2a45;
    --on-marca: #04121f;
    --tarjeta-fondo: #123a66;
    --tarjeta-canto: #0a2444;
    --tarjeta-tinta: #eaf1fb;
    --agua-fondo: #0f2a45;
    --agua-claro: #5ab4ef;
    --terracota-suave: #2c1a10;
    --sombra: 0 1px 2px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--cuerpo); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); margin: 0; line-height: 1.14; letter-spacing: -.022em; text-wrap: balance; }
h1 { font-size: clamp(1.5rem, 4vw, 2.15rem); font-weight: 700; }
h2 { font-size: clamp(1.15rem, 2.6vw, 1.4rem); font-weight: 600; }
p { margin: 0 0 .85em; }
a { color: var(--marca); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── Estructura ─────────────────────────────────────────────────────────── */

.marco { display: flex; min-height: 100vh; }

.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail);
  padding: 18px 0; background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 5px; z-index: 60;
}
.rail-logo { margin-bottom: 14px; }
.rail-btn {
  width: 44px; height: 44px; border-radius: 12px; border: 0; cursor: pointer;
  background: transparent; color: var(--ink-3);
  display: grid; place-items: center; transition: background .15s, color .15s;
  position: relative;
}
.rail-btn:hover { background: var(--raised); color: var(--ink-2); }
.rail-btn.activo { background: var(--marca-suave); color: var(--marca); }
.rail-btn svg { width: 20px; height: 20px; }
.rail-btn small {
  position: absolute; bottom: 2px; font-size: .52rem; letter-spacing: .03em;
  text-transform: uppercase; opacity: .9;
}
.rail-sep { flex: 1; }

.lienzo { flex: 1; margin-left: var(--rail); min-width: 0; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 18px 20px 48px; }

/* ── Encabezado ─────────────────────────────────────────────────────────── */

.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.cabecera-fila {
  max-width: var(--ancho); margin: 0 auto; padding: 11px 20px;
  display: flex; align-items: center; gap: 11px;
}
.marca { display: none; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
.cab-fin { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ── Controles ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 17px; border-radius: 11px; border: 1px solid transparent;
  background: var(--acento); color: var(--on-acento); font: inherit; font-size: .9rem; font-weight: 700;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: filter .15s, border-color .15s;
}
.btn:hover { filter: brightness(1.12); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-2 { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-2:hover { border-color: var(--ink-3); filter: none; }
.btn-3 { background: transparent; color: var(--ink-2); border-color: transparent; padding: 8px 11px; }
.btn-3:hover { background: var(--raised); color: var(--ink); filter: none; }
.btn-oro { background: var(--marca); color: var(--on-marca); }
.btn-bloque { width: 100%; }
.btn svg { width: 16px; height: 16px; }

.icono-btn {
  width: 38px; height: 38px; border-radius: 11px; cursor: pointer; flex: none;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
  display: grid; place-items: center;
}
.icono-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.icono-btn svg { width: 17px; height: 17px; }

label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
input, select {
  width: 100%; padding: 11px 13px; font: inherit; font-size: .92rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 11px;
}
input::placeholder { color: var(--ink-3); }
input:focus, select:focus, .btn:focus-visible, .icono-btn:focus-visible,
.rail-btn:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--acento-fuerte); outline-offset: 2px;
}
select:disabled { opacity: .5; }
.campo { margin-bottom: 14px; }

/* ── Buscador ───────────────────────────────────────────────────────────── */

.buscador { position: relative; flex: 1; min-width: 0; }
.buscador > svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--ink-3); pointer-events: none;
}
.buscador input { padding-left: 39px; }
.buscador-grande input { padding: 15px 15px 15px 46px; font-size: 1rem; border-radius: 13px; }
.buscador-grande > svg { left: 16px; width: 19px; height: 19px; }

.resultados {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 70;
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
  box-shadow: var(--sombra); max-height: 380px; overflow-y: auto;
}
.resultado {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 11px 14px; border: 0; border-bottom: 1px solid var(--line-soft);
  background: transparent; color: var(--ink); font: inherit; cursor: pointer;
}
.resultado:last-child { border-bottom: 0; }
.resultado:hover, .resultado:focus { background: var(--marca-suave); }
/* Un <svg> sin medidas se dibuja al tamaño que le dé el contenedor y tapa la
   lista entera. Todo icono suelto lleva medida explícita. */
.resultado > svg { width: 17px; height: 17px; flex: none; color: var(--ink-3); }
.resultado-txt { flex: 1; min-width: 0; }
.resultado b { display: block; font-size: .92rem; font-weight: 600; }
.resultado small { display: block; font-size: .74rem; color: var(--ink-3); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultado-tipo { font-size: .64rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; flex: none; }

/* ── Paneles y rejilla ──────────────────────────────────────────────────── */

.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; align-items: start; }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; }
.c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; }
.c12 { grid-column: span 12; }

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 17px; box-shadow: var(--sombra);
}
.panel-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.panel-cab h2 {
  font-size: .73rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); font-family: var(--cuerpo);
}
.panel-cab .fin { margin-left: auto; font-size: .73rem; color: var(--ink-3); font-family: var(--mono); }

.seccion { margin-bottom: 26px; }
.encabezado-pag { margin-bottom: 18px; }
.encabezado-pag p { color: var(--ink-2); max-width: 68ch; }
.ruta-mini { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px; }

/* ── Niveles ────────────────────────────────────────────────────────────── */

.n0 { --nv: var(--a0); } .n1 { --nv: var(--a1); } .n2 { --nv: var(--a2); }
.n3 { --nv: var(--a3); } .n4 { --nv: var(--a4); }

.pildora {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
  border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--nv, var(--agua)) 16%, transparent);
  color: color-mix(in srgb, var(--nv, var(--agua)) 70%, var(--ink));
  border: 1px solid color-mix(in srgb, var(--nv, var(--agua)) 32%, transparent);
}
.pildora i { width: 6px; height: 6px; border-radius: 50%; background: var(--nv, var(--agua)); flex: none; }

/* ── Tarjeta actual ─────────────────────────────────────────────────────── */

.ahora {
  border-radius: var(--r); padding: 20px; position: relative; overflow: hidden;
  background: var(--tarjeta-fondo); border: 1px solid var(--tarjeta-canto);
  color: var(--tarjeta-tinta); box-shadow: var(--sombra); min-height: 262px;
  display: flex; flex-direction: column;
}
.ahora::after {
  content: ''; position: absolute; right: -60px; top: -70px; width: 230px; height: 230px;
  border-radius: 50%; background: rgba(255,255,255,.05);
}
.ahora > * { position: relative; }
.ahora-fecha { font-family: var(--mono); font-size: .72rem; opacity: .85; }
.ahora-lugar { font-family: var(--display); font-size: 1.05rem; font-weight: 600; margin-top: 2px; }
.ahora-medio { display: flex; align-items: center; gap: 6px; margin: 8px 0 auto; }
.ahora-grados { font-family: var(--display); font-size: 4.2rem; font-weight: 700; line-height: .92; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.ahora-glifo { width: 90px; height: 90px; flex: none; margin-left: auto; }
.ahora-txt { font-size: .93rem; font-weight: 500; }
.ahora-sens { font-size: .8rem; opacity: .82; }
.ahora-pie { display: flex; gap: 4px; margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.2); }
.ahora-dato { flex: 1; min-width: 0; text-align: center; }
.ahora-dato svg { width: 16px; height: 16px; opacity: .85; }
.ahora-dato b { display: block; font-size: .92rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.ahora-dato span { display: block; font-size: .63rem; opacity: .75; letter-spacing: .05em; text-transform: uppercase; }

/* ── Días ───────────────────────────────────────────────────────────────── */

.dias { display: flex; flex-direction: column; gap: 1px; }
.dia {
  display: grid; grid-template-columns: 64px 30px 1fr auto; align-items: center;
  gap: 10px; padding: 9px 10px; border-radius: 10px; border-left: 3px solid var(--nv, transparent);
}
.dia:hover { background: var(--raised); }
.dia-nom { font-weight: 600; font-size: .83rem; }
.dia-nom small { display: block; font-family: var(--mono); font-size: .64rem; color: var(--ink-3); font-weight: 400; }
.dia svg { width: 26px; height: 26px; }
.dia-txt { font-size: .78rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dia-der { text-align: right; }
.dia-t { font-family: var(--mono); font-size: .8rem; font-weight: 500; white-space: nowrap; }
.dia-t span { color: var(--ink-3); }
.dia-mm { font-family: var(--mono); font-size: .76rem; color: var(--agua-claro); font-weight: 500; }

/* ── Ciudades ───────────────────────────────────────────────────────────── */

.ciudades { display: flex; flex-direction: column; gap: 6px; }
.ciudades-alto { max-height: 360px; overflow-y: auto; padding-right: 3px; }
.ciudad {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 11px;
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: 9px 12px; border-radius: 11px;
  background: var(--raised); border: 1px solid transparent; border-left: 3px solid var(--nv);
}
.ciudad:hover { border-color: var(--line); }
.ciudad.activa { border-color: var(--marca); background: var(--marca-suave); }
.ciudad svg { width: 26px; height: 26px; }
.ciudad > span { display: flex; flex-direction: column; min-width: 0; }
.ciudad > span:last-child { align-items: flex-end; }
.ciudad-n { display: block; font-weight: 600; font-size: .86rem; }
.ciudad-p { display: block; font-size: .69rem; color: var(--ink-3); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ciudad-t { display: block; font-family: var(--display); font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ciudad-mm { display: block; font-family: var(--mono); font-size: .66rem; color: var(--agua-claro); }

/* ── Mapa ───────────────────────────────────────────────────────────────── */

.mapa-caja svg { width: 100%; height: auto; display: block; }
.tierra { fill: var(--raised); stroke: var(--line); stroke-width: 1.4; }
.punto-ciudad { cursor: pointer; }
.punto-ciudad:hover .halo { opacity: .35; }
.leyenda { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; }
.leyenda span { display: inline-flex; align-items: center; gap: 5px; font-size: .69rem; color: var(--ink-3); }
.leyenda i { width: 8px; height: 8px; border-radius: 50%; }

/* ── Gráficas ───────────────────────────────────────────────────────────── */

.tabs { display: flex; gap: 3px; background: var(--raised); padding: 3px; border-radius: 10px; }
.tab { padding: 6px 13px; border-radius: 8px; border: 0; cursor: pointer; background: transparent; color: var(--ink-3); font: inherit; font-size: .76rem; font-weight: 600; }
.tab.activo { background: var(--surface); color: var(--ink); }
.grafica { width: 100%; height: auto; display: block; overflow: visible; }
.rejilla-linea { stroke: var(--line-soft); stroke-width: 1; }
.eje-txt { fill: var(--ink-3); font-family: var(--mono); font-size: 10px; }

/* ── Señales y tablas ───────────────────────────────────────────────────── */

.senal { display: grid; grid-template-columns: 54px 1fr; gap: 11px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.senal:last-of-type { border-bottom: 0; }
.senal-riel { height: 6px; border-radius: 3px; background: var(--raised); overflow: hidden; }
.senal-lleno { height: 100%; border-radius: 3px; background: var(--nv); }
.senal-n { font-size: .82rem; font-weight: 600; }
.senal-d { font-size: .73rem; color: var(--ink-2); }

.regla { position: relative; height: 30px; margin: 14px 0 6px; }
.regla-base { position: absolute; left: 0; right: 0; top: 11px; height: 7px; border-radius: 4px; background: var(--raised); overflow: hidden; }
.regla-lleno { height: 100%; background: linear-gradient(90deg, var(--agua), var(--agua-claro)); }
.regla-hito { position: absolute; top: 4px; width: 2px; height: 21px; background: var(--ink-3); opacity: .7; }
.regla-hito b { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: .58rem; color: var(--ink-3); font-weight: 500; }
.regla-aguja { position: absolute; top: 1px; width: 3px; height: 27px; border-radius: 2px; background: var(--nv); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nv) 22%, transparent); }

.tabla { width: 100%; border-collapse: collapse; font-size: .8rem; }
.tabla th, .tabla td { padding: 7px 0; text-align: left; border-bottom: 1px solid var(--line-soft); }
.tabla th { color: var(--ink-3); font-weight: 500; }
.tabla td { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tabla tr:last-child th, .tabla tr:last-child td { border-bottom: 0; }

/* ── Bloqueo por plan ───────────────────────────────────────────────────── */

.cerrado {
  position: relative; border-radius: var(--r); overflow: hidden;
  border: 1px dashed color-mix(in srgb, var(--terracota) 45%, transparent);
  background: var(--terracota-suave);
  padding: 18px; text-align: center;
}
.cerrado-llave { width: 34px; height: 34px; color: var(--terracota); margin-bottom: 8px; }
.cerrado h3 { font-size: 1rem; font-weight: 600; margin-bottom: 5px; }
.cerrado p { font-size: .84rem; color: var(--ink-2); max-width: 46ch; margin: 0 auto 13px; }
.cerrado-lista { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 14px; }
.cerrado-lista span { font-size: .72rem; color: var(--ink-2); background: var(--raised); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }

.borroso { filter: blur(5px); opacity: .5; pointer-events: none; user-select: none; }

/* ── Planes ─────────────────────────────────────────────────────────────── */

.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 14px; }
.plan { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); padding: 20px; background: var(--surface); }
.plan.destacado { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca), var(--sombra); }
.plan-eti { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.plan-nom { font-family: var(--display); font-size: 1.5rem; font-weight: 700; margin: 4px 0 2px; }
.plan-precio { font-family: var(--display); font-size: 2rem; font-weight: 700; letter-spacing: -.03em; }
.plan-precio small { font-size: .8rem; font-weight: 500; color: var(--ink-3); font-family: var(--cuerpo); letter-spacing: 0; }
/* Ninguno de los tres precios es una cifra —«Sin cuenta», «Gratis, con cuenta»,
   «Por definir»—: al tamaño de precio se desbordan de la tarjeta. */
.plan-precio-sin-cifra { font-size: 1.3rem; color: var(--ink-2); letter-spacing: -.01em; }
.plan-res { font-size: .84rem; color: var(--ink-2); margin: 8px 0 14px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 7px; }
.plan li { display: flex; gap: 8px; font-size: .84rem; align-items: flex-start; }
.plan li svg { width: 15px; height: 15px; flex: none; margin-top: 3px; }
.plan li.si svg { color: var(--a0); }
.plan li.no { color: var(--ink-3); }
.plan li.no svg { color: var(--ink-3); }
.plan-fin { margin-top: auto; }

/* ── Varios ─────────────────────────────────────────────────────────────── */

.aviso { padding: 13px 15px; border-radius: 12px; font-size: .85rem; display: flex; gap: 11px; align-items: flex-start;
  background: color-mix(in srgb, var(--nv, var(--agua)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--nv, var(--agua)) 30%, transparent); }
.aviso svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--nv, var(--agua-claro)); }
.aviso-error { --nv: var(--a4); }
.aviso-ok { --nv: var(--a0); }

.nota { font-size: .76rem; color: var(--ink-3); line-height: 1.55; }
.nota a { color: var(--ink-2); }

.cargando { display: flex; align-items: center; justify-content: center; gap: 11px; padding: 52px 16px; color: var(--ink-2); }
.giro { width: 19px; height: 19px; border: 2.5px solid var(--line); border-top-color: var(--agua); border-radius: 50%; animation: giro .7s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); font-size: .8rem; cursor: pointer;
  color: var(--ink); font-family: inherit; white-space: nowrap; }
.chip svg { width: 15px; height: 15px; flex: none; }
.chip:hover { border-color: var(--marca); color: var(--marca); }
.chip-fila { display: flex; gap: 8px; flex-wrap: wrap; }

.boletin { display: block; padding: 9px 0; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: inherit; }
.boletin:last-child { border-bottom: 0; }
.boletin b { font-size: .82rem; font-weight: 600; display: block; }
.boletin span { font-family: var(--mono); font-size: .66rem; color: var(--ink-3); }
.boletin:hover b { color: var(--agua-claro); }

.pie { border-top: 1px solid var(--line); margin-top: 32px; padding: 22px 0 34px; font-size: .78rem; color: var(--ink-3); }
.pie-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; }
.pie h4 { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2); margin: 0 0 8px; font-family: var(--cuerpo); }
.pie ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.pie a { color: var(--ink-2); text-decoration: none; }
.pie a:hover { color: var(--agua-claro); }

.enso-fase { font-family: var(--display); font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.enso-serie { display: flex; align-items: stretch; gap: 2px; height: 82px; position: relative; margin-top: 12px; }
.enso-serie::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--ink-3); opacity: .45; }
.enso-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.enso-arr { flex: 1; display: flex; align-items: flex-end; }
.enso-abj { flex: 1; display: flex; align-items: flex-start; }
.enso-barra { width: 100%; border-radius: 2px; }
.enso-esc { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .62rem; color: var(--ink-3); margin-top: 5px; }

.cuenta-caja { max-width: 430px; margin: 34px auto; }
.oculto { display: none !important; }

/* ── Pantallas pequeñas ─────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .c3, .c4, .c5 { grid-column: span 6; }
  .c7, .c8 { grid-column: span 12; }
}
@media (max-width: 720px) {
  :root { --rail: 0px; }
  .rail {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 60px;
    flex-direction: row; justify-content: space-around; gap: 0; padding: 5px 6px;
    border-right: 0; border-top: 1px solid var(--line);
  }
  .rail-logo, .rail-sep { display: none; }
  .rail-btn { width: 54px; height: 48px; flex-direction: column; gap: 2px; }
  .rail-btn svg { width: 19px; height: 19px; }
  .marca { display: block; font-size: .98rem; }
  .lienzo { margin-left: 0; }
  .envoltura { padding: 16px 16px 90px; }
  .c3, .c4, .c5, .c6, .c7, .c8 { grid-column: span 12; }
  .ahora-grados { font-size: 3.5rem; }
  .ahora-glifo { width: 70px; height: 70px; }
  .cabecera-fila { padding: 9px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Mapa climático animado ─────────────────────────────────────────────── */

.controles-mapa { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.controles-mapa input[type="range"] {
  flex: 1; min-width: 160px; width: auto; padding: 0; border: 0; background: transparent;
  accent-color: var(--marca); height: 26px; cursor: pointer;
}
.reloj-mapa { text-align: right; min-width: 126px; }
.reloj-mapa b { display: block; font-family: var(--display); font-size: .92rem; font-weight: 600; text-transform: capitalize; }
.reloj-mapa span { font-family: var(--mono); font-size: 1.15rem; color: var(--marca); font-weight: 600; }

.leyenda-clima { display: flex; align-items: center; gap: 4px; margin-top: 12px; flex-wrap: wrap; }
.leyenda-clima span { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: .68rem; color: var(--ink-2); }
.leyenda-clima i { width: 20px; height: 11px; border-radius: 3px; border: 1px solid var(--line); }
.leyenda-clima .unidad { color: var(--ink-3); margin-left: 4px; font-weight: 600; }

.pin-ciudad { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 4px; }
.pin-ciudad i { width: 7px; height: 7px; border-radius: 50%; background: var(--nv); border: 1.5px solid var(--surface); flex: none; }
.pin-ciudad b {
  font-size: .6rem; font-weight: 600; color: var(--ink); white-space: nowrap;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  padding: 0 3px; border-radius: 3px;
}

.tab.bloqueado { opacity: .55; }
.tab.bloqueado svg { width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; }

@media (max-width: 720px) {
  .reloj-mapa { min-width: 0; text-align: left; }
  .controles-mapa input[type="range"] { order: 3; width: 100%; flex-basis: 100%; }
  .pin-ciudad b { display: none; }
}

/* ── Instalación en el teléfono ─────────────────────────────────────────── */

.ventajas { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.ventajas li { display: flex; gap: 11px; align-items: flex-start; }
.ventajas li > svg { width: 19px; height: 19px; flex: none; color: var(--marca); margin-top: 2px; }
.ventajas b { display: block; font-size: .88rem; }
.ventajas span { display: block; font-size: .8rem; color: var(--ink-2); }

.pasos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: .86rem; }
.pasos li { padding-left: 2px; }
.pasos li::marker { color: var(--marca); font-weight: 700; }

.pasos-destacado { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca); }

/* ── Lluvias e inundaciones ─────────────────────────────────────────────── */

.comparativa { display: flex; flex-direction: column; gap: 9px; }
.comparativa-fila { display: grid; grid-template-columns: 116px 1fr 86px; align-items: center; gap: 11px; }
.comparativa-fila > span { font-size: .78rem; color: var(--ink-2); }
.comparativa-fila > b { font-family: var(--mono); font-size: .85rem; text-align: right; font-variant-numeric: tabular-nums; }
.comparativa-riel { height: 20px; background: var(--raised); border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.comparativa-barra { height: 100%; border-radius: 5px; }
.comparativa-barra.normal { background: var(--ink-3); opacity: .55; }
.comparativa-barra.prevista { background: var(--agua); }

.barras-dia { display: flex; gap: 6px; align-items: flex-end; overflow-x: auto; padding-bottom: 6px; }
.barra-dia { flex: 1; min-width: 42px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.barra-valor { font-family: var(--mono); font-size: .64rem; color: var(--agua); font-weight: 600; min-height: 14px; }
.barra-cuerpo { width: 100%; background: var(--nv); border-radius: 4px 4px 0 0; min-height: 2px; }
.barra-dia-nom { font-size: .68rem; font-weight: 600; text-transform: uppercase; }
.barra-dia-fecha { font-family: var(--mono); font-size: .6rem; color: var(--ink-3); }

.que-vigilar { display: flex; gap: 12px; align-items: flex-start; }
.que-vigilar > svg { width: 24px; height: 24px; flex: none; color: var(--marca); margin-top: 2px; }

/* ── Aviso de nivel ─────────────────────────────────────────────────────────
   Hoja única, angosta y centrada: se lee de un tirón en el celular, que es
   donde llegaría. La franja de color arriba dice el nivel antes que el texto. */

.aviso-hoja {
  max-width: 560px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.aviso-franja { height: 7px; background: var(--nv); }
.aviso-cuerpo { padding: 20px; }

.aviso-alto { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.aviso-hora { margin-left: auto; font-family: var(--mono); font-size: .78rem; color: var(--ink-3); }

.aviso-titular { font-size: clamp(1.25rem, 4vw, 1.6rem); font-weight: 700; }
.aviso-lugar {
  font-family: var(--display); font-size: clamp(1.6rem, 6vw, 2.2rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin-top: 4px;
}
.aviso-ruta {
  font-family: var(--mono); font-size: .74rem; color: var(--ink-3);
  letter-spacing: .03em; margin-top: 4px;
}

.aviso-motivo {
  margin-top: 18px; padding: 15px 16px; border-radius: 12px;
  background: var(--raised); border: 1px solid var(--line);
  font-size: .95rem;
}
.aviso-cifra { color: var(--nv); font-weight: 700; }

.aviso-acciones { display: flex; flex-direction: column; gap: 9px; margin-top: 22px; }

.aviso-origen {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: .78rem; color: var(--ink-3); line-height: 1.55;
}
.aviso-origen b { color: var(--ink-2); }
.aviso-origen a { color: var(--ink-2); }
.aviso-origen li { margin-bottom: 3px; }

/* ── Ilustraciones y video ──────────────────────────────────────────────────
   Todo con preload y lazy: buena parte de quien consulta esto lo hace desde el
   campo con conexión escasa, y una ilustración no vale un segundo de espera. */

.regiones { display: flex; flex-direction: column; gap: 14px; }
.region { display: flex; gap: 14px; align-items: flex-start; }
.region img { width: 76px; height: 76px; flex: none; }
.region h3 { font-size: .98rem; font-weight: 600; margin-bottom: 3px; }
.region p { font-size: .84rem; color: var(--ink-2); margin: 0; }

.video-ambiente {
  width: 100%; height: auto; display: block; border-radius: 12px;
  border: 1px solid var(--line); background: var(--raised);
}

.ilustracion-movil { width: 100%; max-width: 240px; margin: 0 auto 14px; display: block; }

.resultado-vacio {
  display: flex; gap: 14px; align-items: center; padding: 18px 16px;
}
.resultado-vacio img { width: 62px; height: 62px; flex: none; opacity: .9; }
.resultado-vacio b { display: block; font-size: .92rem; }
.resultado-vacio small { display: block; font-size: .78rem; color: var(--ink-3); line-height: 1.5; }

@media (max-width: 560px) {
  .region img { width: 58px; height: 58px; }
}

/* ── Barra del sitio activo ─────────────────────────────────────────────── */

.barra-sitio {
  position: sticky; top: 54px; z-index: 45;
  background: var(--marca-suave);
  border-bottom: 1px solid color-mix(in srgb, var(--marca) 22%, transparent);
}
.barra-sitio { display: flex; align-items: center; gap: 10px;
  max-width: var(--ancho); margin: 0 auto; padding: 8px 20px; flex-wrap: wrap; }

.volver {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  background: transparent; border: 0; cursor: pointer; padding: 5px 8px;
  color: var(--marca); font: inherit; font-size: .84rem; font-weight: 600;
  border-radius: 8px;
}
.volver:hover { background: color-mix(in srgb, var(--marca) 12%, transparent); }
.volver svg { width: 16px; height: 16px; }

.barra-sitio-nom {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  font-weight: 600; font-size: .9rem; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barra-sitio-nom svg { width: 15px; height: 15px; flex: none; color: var(--marca); }
.barra-sitio-cambiar { margin-left: auto; font-size: .76rem; padding: 5px 11px; }

.pin-propio {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 5px;
}
.pin-propio i {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  background: var(--acento); border: 3px solid var(--marca);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 35%, transparent);
}
.pin-propio b {
  font-size: .74rem; font-weight: 700; color: var(--ink); white-space: nowrap;
  background: var(--surface); padding: 2px 7px; border-radius: 6px;
  border: 1px solid var(--line);
}

/* ── Portada con fondo ──────────────────────────────────────────────────────
   Técnica del proyecto Lex Digital, traída a esta paleta: la imagen va al fondo
   y encima se apilan degradados radiales que la oscurecen justo donde va el
   texto, más un desvanecido al color de página abajo. Así la portada tiene
   presencia sin que el titular pierda contraste. */

.portada-fondo {
  position: relative;
  margin: -18px -20px 0;
  padding: 44px 20px 30px;
  overflow: hidden;
  isolation: isolate;
}
.portada-fondo::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  /* Basta con dejar el archivo en web/img/portada.webp y aparece. Si no está,
     el navegador no pinta nada y la portada se sostiene con los degradados. */
  background-image: var(--imagen-portada, url('/img/portada.webp'));
  background-size: cover; background-position: center 38%;
  opacity: .5;
}
.portada-fondo::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(58% 60% at 28% 42%, color-mix(in srgb, var(--ground) 92%, transparent), transparent 74%),
    radial-gradient(46% 44% at 84% 16%, color-mix(in srgb, var(--marca) 22%, transparent), transparent 72%),
    radial-gradient(40% 40% at 12% 84%, color-mix(in srgb, var(--acento) 14%, transparent), transparent 70%),
    linear-gradient(to bottom, color-mix(in srgb, var(--ground) 55%, transparent) 0%,
                    color-mix(in srgb, var(--ground) 30%, transparent) 46%, var(--ground) 96%);
}
.portada-fondo > * { position: relative; }

/* Trama fina de puntos, como en los otros proyectos de la familia. */
.portada-fondo .trama {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--marca) 26%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .28;
  mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 76%);
}

.portada-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--marca); font-weight: 700; margin-bottom: 12px;
}
.portada-eyebrow::before {
  content: ''; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--acento));
}

@media (max-width: 720px) {
  .barra-sitio { top: 50px; padding: 7px 16px; }
  .portada-fondo { margin: -16px -16px 0; padding: 30px 16px 22px; }
  .pin-propio b { font-size: .68rem; }
}

/* ── Modo demostración ──────────────────────────────────────────────────── */

.cinta-demo {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; text-align: center;
  background: var(--acento); color: var(--on-acento);
  padding: 7px 16px; font-size: .8rem; line-height: 1.4;
}
.cinta-demo b { font-weight: 700; }
.cinta-demo span { opacity: .82; }

/* La cabecera y la barra de sitio dejan sitio a la cinta. */
body.demostracion .cabecera { top: 0; }
body.demostracion .barra-sitio { top: 54px; }

@media (max-width: 720px) {
  .cinta-demo { font-size: .74rem; padding: 6px 12px; }
  body.demostracion .barra-sitio { top: 50px; }
}

/* ── Medidas complementarias ────────────────────────────────────────────── */

.medidas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1px; margin-top: 14px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
}
.medida {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 12px; background: var(--surface);
}
.medida > svg { width: 18px; height: 18px; flex: none; color: var(--marca); }
.medida b { display: block; font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.medida span { display: block; font-size: .68rem; color: var(--ink-3); letter-spacing: .02em; }

/* ── Tira horaria de 48 horas ───────────────────────────────────────────── */

.episodio {
  margin: 0 0 12px; font-size: .92rem; padding: 11px 14px;
  background: var(--agua-fondo); border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--agua) 25%, transparent);
}
.episodio.sin {
  background: var(--raised); border-color: var(--line); color: var(--ink-2);
}
.episodio b { color: var(--agua); font-variant-numeric: tabular-nums; }

.tira-horas {
  display: flex; gap: 0; overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x proximity;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.hora-col {
  flex: none; width: 58px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 2px 8px; border-right: 1px solid var(--line-soft);
}
.hora-col:last-child { border-right: 0; }
/* La noche sombreada permite ubicarse sin leer las horas. */
.hora-col.noche { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.hora-col.corte { border-left: 2px solid var(--line); }
.hora-col svg { width: 27px; height: 27px; }

.hora-et { font-family: var(--mono); font-size: .66rem; color: var(--ink-3); }
.hora-t { font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hora-barra-caja { height: 34px; display: flex; align-items: flex-end; width: 18px; }
.hora-barra { width: 100%; background: var(--agua); border-radius: 3px 3px 0 0; min-height: 0; }
.hora-mm {
  font-family: var(--mono); font-size: .62rem; color: var(--agua);
  font-weight: 600; min-height: 13px;
}
.hora-prob { font-family: var(--mono); font-size: .6rem; color: var(--ink-3); min-height: 12px; }

/* ── Curva de máximas y mínimas ─────────────────────────────────────────── */

.leyenda-curva { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.leyenda-curva span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; color: var(--ink-2);
}
.leyenda-curva i { width: 14px; height: 3px; border-radius: 2px; }

.curva-caja { overflow-x: auto; }
.curva-caja svg { min-width: 620px; }
.curva-max { fill: var(--ink); font-family: var(--mono); font-size: 11px; font-weight: 600; }
.curva-min { fill: var(--ink-2); font-family: var(--mono); font-size: 11px; }

@media (max-width: 720px) {
  .hora-col { width: 52px; }
  .medidas { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
}

/* ── Mapa real con superposicion del clima ──────────────────────────────── */

.mapa-real {
  height: 520px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: var(--raised);
  z-index: 1;
}
.leaflet-container { font-family: var(--cuerpo); background: var(--raised); }
.leaflet-control-attribution {
  background: color-mix(in srgb, var(--surface) 85%, transparent) !important;
  color: var(--ink-3) !important; font-size: .62rem !important;
}
.leaflet-control-attribution a { color: var(--ink-2) !important; }

/* La superposicion se suaviza al ampliar: es un campo continuo, no pixeles. */
.capa-clima { image-rendering: auto; }

.marca-sitio {
  display: flex !important; align-items: center; gap: 6px;
  width: auto !important; height: auto !important;
  margin-left: -7px !important; margin-top: -7px !important;
}
.marca-punto {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  background: var(--acento); border: 3px solid var(--marca);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 40%, transparent);
}
.marca-sitio b {
  font-size: .78rem; font-weight: 700; color: var(--ink); white-space: nowrap;
  background: var(--surface); padding: 2px 8px; border-radius: 7px;
  border: 1px solid var(--line);
}

@media (max-width: 720px) {
  .mapa-real { height: 400px; }
}

/* ── Pronostico o satelite ──────────────────────────────────────────────── */

.tabs-modo { background: var(--marca-suave); }
.tabs-modo .tab.activo { background: var(--marca); color: var(--on-marca); }
.capa-satelite { filter: saturate(1.05) contrast(1.02); }

/* ── Lo que nos distingue ───────────────────────────────────────────────── */

.diferencias {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 14px; margin-top: 26px;
}
.diferencia {
  padding-left: 13px;
  border-left: 3px solid var(--acento);
}
.diferencia b {
  display: block; font-family: var(--display); font-size: .92rem;
  font-weight: 600; margin-bottom: 3px;
}
.diferencia span {
  display: block; font-size: .8rem; color: var(--ink-2); line-height: 1.5;
}

@media (max-width: 560px) {
  .diferencias { gap: 12px; margin-top: 20px; }
}

/* ── Consentimiento y derechos ──────────────────────────────────────────── */

.consentimiento {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 4px 0 16px; padding: 12px 13px;
  background: var(--raised); border: 1px solid var(--line); border-radius: 11px;
  font-size: .82rem; font-weight: 400; color: var(--ink-2); cursor: pointer;
  line-height: 1.5;
}
.consentimiento input { width: 17px; height: 17px; flex: none; margin-top: 2px; accent-color: var(--marca); }
.consentimiento a { font-weight: 600; }

.derechos-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.derecho { display: flex; gap: 10px; align-items: flex-start; }
.derecho > svg { width: 16px; height: 16px; flex: none; color: var(--a0); margin-top: 3px; }
.derecho b { display: block; font-size: .88rem; }
.derecho span { display: block; font-size: .82rem; color: var(--ink-2); }

.panel-destacado { border-color: var(--terracota); box-shadow: 0 0 0 1px var(--terracota); }

/* ── Eleccion del fondo del mapa ────────────────────────────────────────── */

.fila-fondo {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.fila-fondo .nota { font-size: .72rem; }

/* ── Advertencia de que no es oficial ───────────────────────────────────── */

.aviso-no-oficial {
  display: flex; gap: 11px; align-items: flex-start;
  margin-bottom: 18px; padding: 13px 15px; border-radius: 12px;
  background: var(--terracota-suave);
  border: 1px solid color-mix(in srgb, var(--terracota) 38%, transparent);
  font-size: .84rem; color: var(--ink-2); line-height: 1.55;
}
.aviso-no-oficial > svg { width: 17px; height: 17px; flex: none; color: var(--terracota); margin-top: 2px; }
.aviso-no-oficial b { color: var(--ink); }

.plan li.pendiente { color: var(--ink-3); }
.plan li.pendiente > svg { color: var(--terracota); }

/* El punto de una ciudad, cuando lleva a su ficha. */
.ciudad-tocable { cursor: pointer; transition: r .12s ease; }
.ciudad-tocable:hover { stroke-width: 3; }
.chip.chip-activo { background: var(--acento); color: var(--on-acento); border-color: var(--acento); }

/* ══ El visor: mapa a pantalla completa ════════════════════════════════════
   Cuando el mapa es el contenido y no una ilustración, la interfaz de alrededor
   estorba. En este modo la cabecera, la barra de sitio y el pie desaparecen, y
   todo lo demás flota sobre el mapa.                                          */

body.modo-visor .cabecera,
body.modo-visor .barra-sitio,
body.modo-visor .pie { display: none !important; }

/* Columna flexible en vez de `height: 100%`. La barra de «modo demostracion»
   ocupa 145 pixeles arriba, y con altura porcentual el visor medía la ventana
   entera e ignoraba esa franja: la barra inferior acababa 72 pixeles por debajo
   del borde y se comía la ultima fila de la tabla. Con flex, el visor ocupa lo
   que de verdad queda, haya banda o no la haya. */
body.modo-visor .lienzo {
  overflow: hidden; display: flex; flex-direction: column; height: 100vh;
}
body.modo-visor .envoltura {
  padding: 0; max-width: none; flex: 1; min-height: 0;
  /* `width: 100%` no sobra. Al pasar `.lienzo` a columna flexible, `.envoltura`
     dejo de recibir ancho: su contenido es el visor, que va en posicion
     absoluta y por tanto no cuenta para el flujo. Sin nada en flujo que lo
     ensanche, y con sus margenes automaticos, se quedo en cero y la pantalla
     salio negra aunque los elementos estaban en su sitio. */
  width: 100%; margin: 0;
}

/* `position: relative` no es cosmetico aqui: sin el, el `.visor` absoluto se
   ancla a la ventana entera, se mete debajo del riel de navegacion y se come
   los primeros 56 pixeles, que son justo la columna de etiquetas de la tabla
   («Hora», «Temp.», «Lluvia»). Con esto se ancla al area de contenido. */
body.modo-visor #app {
  padding: 0; max-width: none; height: 100%; min-height: 0; position: relative;
}

/* El control de zoom vive arriba a la izquierda por defecto, que es justo donde
   va el buscador. Se manda abajo, junto al mapa y lejos de todo lo demas. */
body.modo-visor .leaflet-top.leaflet-left { top: auto; bottom: 0; }
body.modo-visor .leaflet-control-zoom { margin: 0 0 14px 14px; }

.visor { position: absolute; inset: 0; overflow: hidden; }
.visor-mapa { position: absolute; inset: 0; z-index: 1; }

/* El buscador, arriba a la izquierda, como en cualquier mapa. */
.visor-buscar {
  position: absolute; top: 14px; left: 14px; z-index: 30;
  width: min(360px, calc(100vw - 100px));
}
.visor-buscar input {
  background: var(--raised); border: 1px solid var(--line);
  box-shadow: 0 6px 22px rgba(0,0,0,.42);
}

/* ── El riel de capas ───────────────────────────────────────────────────── */

.visor-riel {
  position: absolute; top: 14px; right: 14px; z-index: 30;
  display: flex; flex-direction: column; gap: 5px;
  max-height: calc(100vh - 260px); overflow-y: auto;
}
.capa-btn {
  display: flex; align-items: center; gap: 9px; justify-content: flex-end;
  padding: 9px 13px; border-radius: 11px; cursor: pointer;
  background: color-mix(in srgb, var(--raised) 98%, transparent);
  border: 1px solid var(--line); color: var(--ink);
  font: inherit; font-size: .84rem; font-weight: 600;
  backdrop-filter: blur(9px); white-space: nowrap;
  box-shadow: 0 3px 14px rgba(0,0,0,.4);
}
.capa-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.capa-btn.activa {
  background: var(--acento); color: var(--on-acento); border-color: var(--acento);
}
.capa-btn svg { width: 17px; height: 17px; order: 2; flex: none; }
.capa-btn span { order: 1; }
.capa-sep { height: 10px; }

.capa-oficial { border-color: color-mix(in srgb, var(--terracota) 55%, transparent); }
.capa-oficial.activa { background: var(--terracota); border-color: var(--terracota); color: #fff; }
.capa-cuenta {
  order: 0; min-width: 19px; height: 19px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--terracota); color: #fff; font-size: .72rem;
}
.capa-oficial.activa .capa-cuenta { background: rgba(255,255,255,.28); }

/* ── El escudo de la fuente y la leyenda ────────────────────────────────── */

.visor-pie {
  position: absolute; left: 14px; right: 14px; bottom: calc(100% + 10px); z-index: 25;
  display: flex; gap: 10px; align-items: flex-end;
  justify-content: space-between; pointer-events: none;
}
.visor-leyenda, .visor-escudo {
  pointer-events: auto;
  background: color-mix(in srgb, var(--raised) 98%, transparent);
  border: 1px solid var(--line); border-radius: 11px;
  backdrop-filter: blur(9px); box-shadow: 0 3px 14px rgba(0,0,0,.4);
}
.visor-leyenda {
  display: flex; align-items: center; gap: 11px; padding: 8px 12px;
  font-size: .76rem; color: var(--ink-2); flex-wrap: wrap;
}
.ley-unidad { font-weight: 700; color: var(--ink); }
.ley-paso { display: inline-flex; align-items: center; gap: 5px; }
.ley-paso i { width: 15px; height: 11px; border-radius: 3px; display: block; }

.visor-escudo { padding: 9px 13px; max-width: 320px; font-size: .76rem; color: var(--ink-3); }
.visor-escudo p { margin: 4px 0 0; line-height: 1.45; }
.escudo-marca {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--ink); font-size: .8rem;
  letter-spacing: .01em;
}
.escudo-marca svg { width: 14px; height: 14px; color: var(--acento); }

/* ── La barra inferior: tiempo y tabla ──────────────────────────────────── */

.visor-inferior {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 28;
  /* Ancla del escudo y la leyenda, que cuelgan justo encima. */
  background: color-mix(in srgb, var(--raised) 96%, transparent);
  border-top: 1px solid var(--line); backdrop-filter: blur(12px);
}

.visor-tiempo { display: flex; align-items: center; gap: 12px; padding: 9px 14px 4px; }
.tiempo-play {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  border: none; background: var(--acento); color: var(--on-acento);
  cursor: pointer; display: grid; place-items: center;
}
.tiempo-play svg { width: 15px; height: 15px; }
.tiempo-barra { flex: 1; min-width: 0; accent-color: var(--acento); }
.tiempo-eti {
  flex: none; min-width: 132px; text-align: right;
  font-size: .82rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.visor-tabla { padding: 0 14px 10px; }
.tabla-sitio {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 700; color: var(--ink-2); margin-bottom: 5px;
}
.tabla-sitio svg { width: 13px; height: 13px; color: var(--acento); }
.tabla-vacia {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  padding: 16px; font-size: .82rem; color: var(--ink-3);
}
.tabla-vacia svg { width: 15px; height: 15px; }

/* La rejilla se desplaza en horizontal; las etiquetas se quedan fijas. */
.tabla-rejilla { overflow-x: auto; overflow-y: hidden; }
.tf { display: flex; align-items: stretch; }
.tf-eti {
  position: sticky; left: 0; z-index: 2; flex: none; width: 62px;
  display: flex; flex-direction: column; justify-content: center;
  font-size: .72rem; font-weight: 700; color: var(--ink-2);
  background: var(--raised); padding-right: 6px;
}
.tf-eti small { font-weight: 400; color: var(--ink-3); font-size: .66rem; }
.tf-celdas { display: flex; }
.td {
  flex: none; width: 38px; text-align: center; padding: 3px 0;
  font-size: .74rem; color: var(--ink-2); font-variant-numeric: tabular-nums;
  border-left: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
}
.td-hora { font-size: .68rem; color: var(--ink-3); }
.td-icono { font-size: .92rem; line-height: 1.1; }
.td-prob { color: var(--ink-3); font-size: .68rem; }
.td-lluvia.hay {
  background: color-mix(in srgb, #2d8fd5 calc(var(--i) * 65%), transparent);
  color: var(--ink); font-weight: 700; border-radius: 3px;
}
.td-ahora { background: color-mix(in srgb, var(--acento) 22%, transparent); }

.tf-dias .td-dia {
  flex: none; width: calc(var(--n) * 38px);
  font-size: .72rem; font-weight: 700; color: var(--ink);
  padding: 2px 0 3px; text-align: left; padding-left: 5px;
  border-left: 1px solid var(--line);
}

/* ── El globo de una alerta oficial ─────────────────────────────────────── */

.pop-alerta { max-width: 310px; font-size: .82rem; line-height: 1.5; }
.pop-emisor {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: #b45309; font-weight: 700; margin-bottom: 3px;
}
.pop-alerta b { display: block; font-size: .92rem; margin-bottom: 3px; }
.pop-sev, .pop-zona { font-size: .74rem; color: #555; }
.pop-zona { font-style: italic; margin-bottom: 6px; }
.pop-alerta p { margin: 0 0 7px; }
.pop-vig { font-size: .72rem; font-weight: 700; margin-bottom: 5px; }

/* ── Sismos, focos de calor y volcanes ──────────────────────────────────────
   Botones de otra familia que los del pronostico: se encienden por separado,
   asi que no comparten el verde de «la capa elegida». Cada uno lleva el color
   de lo que dibuja, para que el boton y el punto del mapa se reconozcan.   */

.capa-amenaza.activa { color: #fff; }
.capa-amenaza.amz-sismos.activa { background: #b91c1c; border-color: #b91c1c; }
.capa-amenaza.amz-incendios.activa { background: #c2410c; border-color: #c2410c; }
.capa-amenaza.amz-volcanes.activa { background: #57534e; border-color: #57534e; }
.capa-amenaza .capa-cuenta { background: var(--ink-3); }
.capa-amenaza.activa .capa-cuenta { background: rgba(255,255,255,.28); }
.capa-amenaza.sin-datos { opacity: .55; }
.capa-cargando {
  order: 0; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--ink-3); border-top-color: transparent;
  animation: giro .8s linear infinite;
}
.capa-compartir svg { color: var(--acento); }

/* El triangulo del volcan: se dibuja con bordes para no cargar imagenes. */
.marca-volcan span {
  display: block; width: 0; height: 0; margin: 0 auto;
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-bottom: 15px solid #a8a29e;
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
.marca-volcan.activo span { border-bottom-color: #dc2626; }
.marca-volcan.vecino span { opacity: .6; }

.ley-amenaza {
  display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px;
  font-size: .7rem; color: var(--ink-2);
}
.ley-punto { width: 10px; height: 10px; border-radius: 50%; display: block; border: 1px solid #fff; }
.ley-tri {
  width: 0; height: 0; display: block;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 9px solid #a8a29e;
}
.ley-tri.activo { border-bottom-color: #dc2626; }
.ley-nota { color: var(--ink-3); font-style: italic; }
/* Una linea por amenaza encendida: con las tres puestas, el escudo en columna
   crecia hasta taparle los botones al riel en una pantalla de portatil. */
.escudo-extra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px;
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line);
}
.escudo-extra .escudo-marca { font-size: .74rem; }
.escudo-extra .ley-amenaza { margin-top: 0; }
.escudo-extra p { margin: 0; flex-basis: 100%; }
/* Con amenazas encendidas, la explicacion larga de la capa sobra: esta en el
   globo de ayuda del boton. Queda la procedencia, que es lo que no puede faltar. */
.visor-escudo:has(.escudo-extra) > p { display: none; }
/* Con once botones el riel baja hasta donde vive el escudo. En pantalla ancha
   la franja de leyenda y escudo termina antes de la columna del riel. */
@media (min-width: 761px) {
  /* 197 px mide el riel con «Focos de calor 79», mas su margen y aire. */
  .visor-pie { right: 226px; }
}
/* En un portatil bajo los once botones no caben con el relleno de siempre. */
@media (min-width: 761px) and (max-height: 820px) {
  .visor-riel { gap: 4px; }
  .capa-btn { padding: 6px 12px; font-size: .8rem; }
  .capa-sep { height: 6px; }
}
.escudo-viejo { color: var(--terracota); font-weight: 600; }

.pop-amenaza { max-width: 300px; font-size: .82rem; line-height: 1.5; }
.pop-amenaza b { display: block; font-size: .95rem; }
.pop-amenaza table { border-collapse: collapse; margin: 6px 0; font-size: .76rem; }
.pop-amenaza th { text-align: left; font-weight: 600; color: #666; padding: 1px 10px 1px 0; }
.pop-amenaza td { padding: 1px 0; }
.pop-amenaza p { margin: 6px 0; font-size: .76rem; }
.pop-dist { font-size: .76rem; font-weight: 700; color: #1d4ed8; margin: 4px 0; }
.pop-nota { color: #666; font-style: italic; }
.pop-aviso {
  margin: 6px 0; padding: 6px 8px; border-radius: 6px;
  background: #fef2f2; color: #991b1b; font-size: .76rem; font-weight: 600;
}
.pop-semanal { margin: 6px 0; padding: 6px 8px; border-radius: 6px; background: #f5f5f4; }
.pop-semanal b { font-size: .76rem; }

/* El boletin de tsunamis: arriba y al centro, donde no se puede no ver. */
.visor-franja {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 35; width: min(520px, calc(100% - 420px));
}
.franja-tsunami {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 14px; border-radius: 12px;
  background: #1e3a8a; color: #fff; box-shadow: 0 6px 22px rgba(0,0,0,.45);
  font-size: .8rem; line-height: 1.45;
}
.franja-tsunami.grave { background: #b91c1c; }
.franja-tsunami svg { width: 26px; height: 26px; flex: none; margin-top: 2px; }
.franja-tsunami b { display: block; font-size: .88rem; }
.franja-tsunami span { display: block; opacity: .92; }
.franja-tsunami a { color: #fff; font-weight: 700; }
#panel-amenazas .franja-tsunami { margin-bottom: 12px; }

/* El aviso de que una capa es de un plan mayor. Mismo lugar que el boletin de
   tsunamis —arriba y al centro— pero en el color de Premium, no en el rojo de
   alerta: no es un peligro, es una puerta cerrada con la llave a la vista. */
.visor-plan-aviso {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 34; width: min(520px, calc(100% - 420px));
}
.plan-aviso-caja {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 14px; border-radius: 12px;
  background: var(--marca); color: var(--on-marca);
  box-shadow: 0 6px 22px rgba(0,0,0,.4); font-size: .82rem; line-height: 1.45;
}
.plan-aviso-caja svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--acento); }
.plan-aviso-caja p { margin: 0 0 5px; }
.plan-aviso-caja a {
  display: inline-block; color: var(--on-marca); font-weight: 700;
  background: var(--acento); color: var(--ink); padding: 4px 10px; border-radius: 7px;
  text-decoration: none;
}
@media (max-width: 1100px) {
  .visor-plan-aviso { top: 64px; left: 14px; right: 226px; width: auto; transform: none; }
}
@media (max-width: 760px) {
  .visor-plan-aviso { top: 112px; left: 10px; right: 10px; }
  .plan-aviso-caja { font-size: .76rem; padding: 9px 11px; }
}

/* El aviso de «enlace copiado». */
.visor-copiado {
  position: absolute; left: 50%; top: 70px; z-index: 40;
  transform: translate(-50%, -8px); opacity: 0; pointer-events: none;
  padding: 9px 15px; border-radius: 10px;
  background: var(--ink); color: var(--raised); font-size: .82rem; font-weight: 600;
  transition: opacity .2s, transform .2s;
}
.visor-copiado.visible { opacity: 1; transform: translate(-50%, 0); }

/* El bloque de la ficha: tres tarjetas, una por amenaza. */
.amz-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.amz-tarjeta {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 5px;
}
.amz-cab {
  display: flex; align-items: center; gap: 7px;
  font-size: .76rem; font-weight: 700; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .05em;
}
.amz-cab svg { width: 16px; height: 16px; color: var(--terracota); }
.amz-principal { font-size: .95rem; font-weight: 700; color: var(--ink); }
.amz-detalle { font-size: .82rem; color: var(--ink-2); line-height: 1.45; }
.amz-fuente { font-size: .7rem; color: var(--ink-3); margin-top: auto; }
.amz-nota { display: block; margin-top: 4px; font-size: .74rem; color: var(--terracota); }
@media (max-width: 1100px) {
  /* Sin sitio entre el buscador y el riel: la franja baja a su propia fila. */
  .visor-franja { top: 64px; left: 14px; right: 226px; width: auto; transform: none; }
}
@media (max-width: 760px) {
  .amz-rejilla { grid-template-columns: 1fr; }
  /* En telefono el escudo queda en una fila de procedencias: la leyenda de
     cada amenaza ocupaba un renglon entero y se salia por la derecha. Los
     colores se explican en el globo de cada punto. */
  .visor-escudo:has(.escudo-extra) {
    display: flex; flex-wrap: wrap; gap: 3px 10px; flex: 1 1 auto; min-width: 0;
  }
  .escudo-extra { margin: 0; padding: 0; border: 0; }
  .escudo-extra .ley-amenaza { display: none; }
  .visor-franja { top: 112px; left: 10px; right: 10px; }
  .franja-tsunami { font-size: .74rem; padding: 9px 11px; }
  .visor-copiado { top: 112px; }
}

/* ── Teléfono ───────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  /* En telefono el mapa es casi todo lo que hay, asi que lo que flota encima
     tiene que ocupar lo minimo y no pisarse entre si. Antes el riel de capas
     caia junto al buscador, y la leyenda, el escudo y el boton de alertas se
     amontonaban los tres sobre el mismo trozo de mapa. */

  .visor-buscar { width: calc(100% - 20px); top: 10px; left: 10px; }

  /* El riel arranca DEBAJO del buscador, en fila que se desliza: en vertical
     se comia media pantalla. */
  .visor-riel {
    top: 62px; left: 10px; right: 10px;
    flex-direction: row; gap: 6px;
    overflow-x: auto; overflow-y: hidden; max-height: none;
    padding-bottom: 2px; scrollbar-width: none;
  }
  .visor-riel::-webkit-scrollbar { display: none; }

  /* Colapsados a icono: sin fijar el ancho, el boton conserva el hueco del
     texto que acaba de ocultarse y queda una barra vacia. */
  .capa-btn {
    padding: 0; width: 40px; height: 40px; flex: none;
    justify-content: center; font-size: .76rem;
  }
  .capa-btn span { display: none; }
  .capa-btn.activa { width: auto; padding: 0 13px; gap: 7px; }
  .capa-btn.activa span { display: inline; }
  .capa-oficial { width: auto; padding: 0 11px; gap: 6px; }
  .capa-oficial span { display: inline; }
  .capa-sep { display: none; }

  /* Leyenda y escudo en una sola linea, y del escudo solo la procedencia: la
     explicacion larga se lee en la ficha, no tapando el mapa. */
  .visor-pie { flex-direction: row; align-items: center; gap: 7px; left: 10px; right: 10px; }
  .visor-leyenda { padding: 5px 9px; font-size: .68rem; gap: 7px; flex-wrap: nowrap; overflow-x: auto; }
  .visor-escudo { padding: 5px 9px; max-width: none; flex: none; }
  .visor-escudo p { display: none; }
  .escudo-marca { font-size: .7rem; }

  /* La tabla se desliza tambien en vertical y deja su franja al riel de abajo. */
  .visor-inferior { padding-bottom: 60px; max-height: 58vh; display: flex; flex-direction: column; }
  .visor-tabla { overflow-y: auto; min-height: 0; }
  .tiempo-eti { min-width: 0; font-size: .74rem; }
  .td { width: 34px; }
  .tf-dias .td-dia { width: calc(var(--n) * 34px); }
  .tf-eti { width: 54px; font-size: .68rem; }
}


/* ── El aviso oficial del INAMHI ────────────────────────────────────────────
   Se ve distinto a todo lo demas a proposito: la franja de color de severidad
   y el sello del emisor son lo que separa un acto de autoridad de nuestra
   lectura de modelos.                                                        */

.oficial-caja { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }

.oficial {
  border: 1px solid var(--line); border-left: 4px solid var(--sev, var(--terracota));
  border-radius: 12px; padding: 14px 16px; background: var(--raised);
}
.oficial-cab {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 7px;
}
.oficial-sello {
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sev, var(--terracota));
  border: 1px solid color-mix(in srgb, var(--sev, var(--terracota)) 45%, transparent);
  border-radius: 5px; padding: 2px 7px;
}
.oficial-nivel { font-size: .74rem; font-weight: 700; color: var(--ink-2); }
.oficial h3 { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.3; }
.oficial-zona, .oficial-vig {
  display: flex; align-items: flex-start; gap: 7px; margin: 0 0 5px;
  font-size: .84rem; color: var(--ink-2); line-height: 1.5;
}
.oficial-zona svg, .oficial-vig svg {
  width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--sev, var(--terracota));
}
.oficial-mas {
  margin-top: 8px; background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: .82rem; font-weight: 700; color: var(--acento);
  text-decoration: underline; text-underline-offset: 3px;
}
.oficial-detalle { margin-top: 10px; font-size: .86rem; line-height: 1.6; color: var(--ink-2); }
.oficial-detalle p { margin: 0 0 9px; white-space: pre-line; }
.oficial-instruccion {
  background: var(--raised); border-radius: 9px; padding: 11px 13px; margin-bottom: 9px;
}
.oficial-instruccion b { display: block; margin-bottom: 4px; font-size: .82rem; }
.oficial-pie {
  margin: 11px 0 0; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: .76rem; color: var(--ink-3); line-height: 1.5;
}

/* Cuando no hay aviso, o cuando no se pudo preguntar. */
.oficial-mudo {
  display: flex; gap: 10px; align-items: flex-start; border-left-width: 1px;
  font-size: .84rem; color: var(--ink-2); line-height: 1.55; margin-bottom: 18px;
}
.oficial-mudo > svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ink-3); }
.oficial-mudo b { color: var(--ink); }

/* ══ La portada nueva ══════════════════════════════════════════════════════
   El encabezado es una banda oscura a sangre con la lluvia real animada
   detrás. Va en oscuro a propósito aunque el sistema sea claro: es la única
   banda de la aplicación que tiene que impactar antes de que nadie lea nada,
   y sobre oscuro el color de la lluvia se enciende en vez de ensuciarse.     */

body.modo-portada .envoltura { max-width: none; padding: 0; }
body.modo-portada #app { max-width: none; padding: 0; }

.portada-v2 { display: block; }

/* ── El encabezado ──────────────────────────────────────────────────────── */

.heroe {
  position: relative; overflow: hidden;
  background: #0b1a0e;
  padding: clamp(46px, 8vw, 96px) clamp(18px, 5vw, 64px) clamp(38px, 6vw, 72px);
  isolation: isolate;
}

/* La lluvia de verdad, recortada al país. Se agranda y se desenfoca: a tamaño
   real sería un mapa, y aquí hace de fondo, no de dato consultable. */
/* A la derecha, no al centro: el texto vive a la izquierda y ahí el velo tiene
   que ser opaco para que se lea. Con el lienzo centrado, el velo que protegía
   el titular apagaba justo la parte que había que enseñar. */
/* La Tierra desde órbita. Va debajo del mapa animado y del velo. Se desplaza
   hacia la derecha para que el continente quede del lado sin texto. */
.heroe-foto {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%;
  /* Tenue y desenfocada a propósito. A plena vista la foto es un mapa, y el
     contorno del Ecuador que va encima está a otra escala y en otro sitio: las
     dos cosas juntas se contradecían. Así queda como la textura del espacio,
     que es lo que tiene que ser, y el mapa animado manda. */
  opacity: .34; filter: blur(3px) saturate(1.1);
}

.heroe-lienzo {
  position: absolute; z-index: 1;
  top: 50%; right: 2%; transform: translateY(-50%) scale(1.18);
  width: min(620px, 58vw); height: auto;
  opacity: .95; filter: blur(2px) saturate(1.3) contrast(1.05);
  animation: heroe-latir 26s ease-in-out infinite;
}
@keyframes heroe-latir {
  0%, 100% { transform: translateY(-50%) scale(1.18); }
  50%      { transform: translateY(-53%) scale(1.28); }
}
@media (prefers-reduced-motion: reduce) {
  .heroe-lienzo { animation: none; }
}

/* Velo para que el texto se lea siempre, pase lo que pase con el color de la
   lluvia detrás. Sin esto, un día de tormenta el titular desaparece. */
.heroe-velo {
  position: absolute; inset: 0; z-index: 2;
  /* Opaco donde va el texto, transparente donde va la lluvia, y cerrando por
     abajo para que la banda termine en el color de fondo y no en un filo. */
  background:
    linear-gradient(95deg, #0b1a0e 0%, rgba(11,26,14,.96) 38%,
                    rgba(11,26,14,.55) 58%, rgba(11,26,14,.12) 78%, rgba(11,26,14,0) 100%),
    linear-gradient(180deg, rgba(11,26,14,.35) 0%, rgba(11,26,14,0) 30%,
                    rgba(11,26,14,0) 68%, #0b1a0e 100%);
}

/* La marca de agua: la silueta del país. En una herramienta del tiempo el
   territorio es la marca, y un logotipo de fondo no diría nada. */
.heroe-silueta {
  position: absolute; z-index: 2; pointer-events: none;
  right: -4%; bottom: -14%; width: min(520px, 52vw); aspect-ratio: 400 / 460;
  background: url('/img/silueta-ecuador.svg') center / contain no-repeat;
  opacity: .07;
}

.heroe-dentro { position: relative; z-index: 3; max-width: 760px; }

.heroe-ceja {
  margin: 0 0 18px; font-family: var(--display);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--acento);
}

.heroe-titulo {
  margin: 0 0 18px; font-family: var(--display);
  font-size: clamp(2.1rem, 6.4vw, 4.1rem);
  font-weight: 800; line-height: 1.02; letter-spacing: -.012em;
  text-transform: uppercase; color: #fbf9f4;
}
.heroe-titulo em {
  font-style: normal; color: var(--acento);
  /* El subrayado va por debajo de las tildes, no encima de la línea base. */
  box-shadow: inset 0 -.14em 0 rgba(251,191,36,.28);
}

.heroe-bajada {
  margin: 0 0 30px; max-width: 58ch;
  font-size: clamp(.98rem, 1.9vw, 1.12rem); line-height: 1.62;
  color: rgba(251,249,244,.8);
}
.heroe-bajada b { color: #fbf9f4; font-weight: 700; }

.heroe-buscador { max-width: 620px; margin-bottom: 18px; }
.heroe-buscador input {
  background: rgba(251,249,244,.97); color: #1b1c19;
  border: 1px solid rgba(251,249,244,.22);
  box-shadow: 0 18px 44px rgba(0,0,0,.42);
  height: 56px; font-size: 1rem;
}
.heroe-buscador input::placeholder { color: #6b7266; }

.heroe-atajos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.heroe-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 12px; border: 1px solid var(--acento);
  background: var(--acento); color: var(--on-acento);
  font: inherit; font-family: var(--display); font-size: .82rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.heroe-btn:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }
.heroe-btn svg { width: 16px; height: 16px; }
.heroe-btn-2 {
  background: transparent; color: #fbf9f4;
  border-color: rgba(251,249,244,.32);
}
.heroe-btn-2:hover { background: rgba(251,249,244,.1); border-color: rgba(251,249,244,.55); }

/* Cifras vivas. Son datos reales del país, no adornos del encabezado. */
.heroe-tira {
  display: flex; flex-wrap: wrap; gap: clamp(20px, 5vw, 52px);
  padding-top: 26px; border-top: 1px solid rgba(251,249,244,.16);
}
.tira-dato { display: flex; flex-direction: column; gap: 5px; }
.tira-eti {
  font-family: var(--display); font-size: .66rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(251,249,244,.5);
}
.tira-val {
  font-family: var(--mono); font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 600; color: #fbf9f4; font-variant-numeric: tabular-nums;
}
.tira-val small { font-size: .62em; font-weight: 400; color: rgba(251,249,244,.55); }

/* ── El cuerpo ──────────────────────────────────────────────────────────── */

.portada-cuerpo { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
.franja { padding: clamp(38px, 6vw, 66px) 0; border-bottom: 1px solid var(--line-soft); }
.franja:last-of-type { border-bottom: 0; }
.franja > h2 { font-size: clamp(1.4rem, 3.4vw, 2rem); margin-bottom: 12px; max-width: 24ch; }
.franja > p { max-width: 62ch; color: var(--ink-2); line-height: 1.65; margin: 0 0 22px; }

.franja-ceja {
  margin: 0 0 20px; font-family: var(--display);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--terracota);
}

.razones {
  display: grid; gap: clamp(20px, 3vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.razon { border-top: 2px solid var(--marca); padding-top: 16px; }
.razon-num {
  display: block; font-family: var(--mono); font-size: .8rem; font-weight: 600;
  color: var(--acento-canto); margin-bottom: 9px; letter-spacing: .06em;
}
.razon h3 {
  font-size: .88rem; font-weight: 800; margin: 0 0 9px;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.3;
}
.razon p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--ink-2); }

.panel-cifra { display: flex; flex-direction: column; }
.cifra-grande {
  font-family: var(--display); font-size: clamp(2.6rem, 7vw, 3.6rem);
  font-weight: 800; line-height: 1; color: var(--marca); margin-bottom: 6px;
}
.cifra-grande small { font-size: .3em; font-weight: 600; color: var(--ink-2); }
.cifra-lista { margin: 18px 0 0; display: flex; flex-direction: column; gap: 9px; }
.cifra-lista > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding-top: 9px; border-top: 1px solid var(--line-soft); font-size: .86rem;
}
.cifra-lista dt { color: var(--ink-2); margin: 0; }
.cifra-lista dd { margin: 0; font-weight: 600; color: var(--ink); }

.franja-cierre { text-align: left; }

@media (max-width: 860px) {
  /* Sin dos columnas no hay «derecha»: la lluvia pasa detrás de todo, más
     tenue, y el velo vuelve a ser vertical para que el texto se lea. */
  .heroe-lienzo {
    right: 50%; transform: translate(50%, -50%) scale(1.3);
    width: 132vw; opacity: .6; filter: blur(3px) saturate(1.25);
  }
  @keyframes heroe-latir {
    0%, 100% { transform: translate(50%, -50%) scale(1.3); }
    50%      { transform: translate(50%, -53%) scale(1.42); }
  }
  .heroe-velo {
    background:
      linear-gradient(180deg, rgba(11,26,14,.82) 0%, rgba(11,26,14,.6) 42%, #0b1a0e 100%);
  }
  .heroe-silueta { right: -18%; bottom: -8%; width: 78vw; opacity: .05; }
  .heroe-tira { gap: 22px; }
  .heroe-atajos .heroe-btn { flex: 1 1 100%; justify-content: center; }
}

/* ══ El cielo del sitio ════════════════════════════════════════════════════
   Fondo que corresponde a la hora, la nubosidad, la lluvia y la temperatura
   reales del punto consultado. Todo es degradado: ni una imagen que descargar
   ni una licencia que respetar, y se adapta a cualquier pantalla.            */

.cielo {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  border-radius: inherit; pointer-events: none;
}
.cielo > * { position: absolute; inset: 0; }

.cielo-fondo { z-index: 0; }

/* ── Estrellas ─────────────────────────────────────────────────────────── */
.cielo-estrellas {
  z-index: 1; background-repeat: no-repeat;
  animation: cielo-titilar 5.5s ease-in-out infinite;
}
@keyframes cielo-titilar { 0%,100% { opacity: .85; } 50% { opacity: .55; } }

/* ── Sol y luna ────────────────────────────────────────────────────────── */
.cielo-astro {
  z-index: 2; inset: auto; width: 74px; height: 74px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%,
    var(--astro) 0%, var(--astro) 34%, var(--brillo) 46%, transparent 72%);
  filter: blur(.4px);
}
/* La luna es más pequeña y con un mordisco: un disco liso parece una farola. */
.cielo-luna {
  width: 46px; height: 46px;
  background: radial-gradient(circle at 38% 38%,
    var(--astro) 0%, var(--astro) 44%, var(--brillo) 56%, transparent 78%);
}
.cielo-luna::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 74% 30%, rgba(10,14,26,.92) 0 34%, transparent 36%);
}

/* ── Nubes ─────────────────────────────────────────────────────────────────
   Bandas anchas que cruzan. Cada una es una fila de manchas redondas que se
   mueven juntas; el desenfoque las funde y deja de verse que son círculos.  */
.cielo-nubes {
  z-index: 3; top: auto; height: var(--alto); bottom: 0;
  left: -100%; right: -100%; width: 300%;
  background-repeat: repeat-x;
  /* Cada nube tiene NÚCLEO y borde, no un desvanecido desde el centro. Con el
     degradado suave de antes ninguna llegaba a tener filo y el cielo entero era
     una nube sola; con el color plano hasta el 55% y la caída en los veinte
     puntos siguientes, se distingue una de otra.
     El orden importa: las sombras van debajo de los claros, como en el cielo. */
  background-image:
    radial-gradient(26% 40% at 12% 66%, rgba(var(--claro),.97) 0 52%, rgba(var(--claro),0) 74%),
    radial-gradient(19% 30% at 21% 54%, rgba(var(--claro),.93) 0 56%, rgba(var(--claro),0) 78%),
    radial-gradient(24% 34% at 30% 70%, rgba(var(--sombra),.62) 0 54%, rgba(var(--sombra),0) 76%),
    radial-gradient(22% 36% at 40% 58%, rgba(var(--claro),.95) 0 54%, rgba(var(--claro),0) 76%),
    radial-gradient(17% 26% at 49% 72%, rgba(var(--claro),.9) 0 58%, rgba(var(--claro),0) 80%),
    radial-gradient(25% 38% at 60% 56%, rgba(var(--sombra),.55) 0 52%, rgba(var(--sombra),0) 75%),
    radial-gradient(21% 32% at 70% 68%, rgba(var(--claro),.94) 0 55%, rgba(var(--claro),0) 77%),
    radial-gradient(18% 28% at 80% 54%, rgba(var(--claro),.88) 0 56%, rgba(var(--claro),0) 79%),
    radial-gradient(27% 40% at 91% 66%, rgba(var(--claro),.96) 0 53%, rgba(var(--claro),0) 75%);
  background-size: 62% 100%;
  /* Poco desenfoque. Con once píxeles las nubes se fundían en una sola mancha
     y el cielo parecía niebla; con seis se distingue el borde de cada una. */
  filter: blur(4px) contrast(1.22);
  animation-name: cielo-cruzar;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.cielo-nubes-2 { filter: blur(7px) contrast(1.16); animation-direction: reverse; }
.cielo-nubes-3 { filter: blur(11px) contrast(1.1); background-size: 78% 100%; }
@keyframes cielo-cruzar {
  from { transform: translateX(0); }
  to   { transform: translateX(-62%); }
}

/* ── Lluvia ────────────────────────────────────────────────────────────── */
.cielo-lluvia {
  z-index: 4;
  /* Dos tramas de hilos muy finos y separados, una más rápida que la otra.
     La primera versión eran líneas de dos píxeles cada nueve: no parecía lluvia,
     parecía una tela mosquitera delante de la pantalla. */
  background-image:
    repeating-linear-gradient(var(--inclina),
      rgba(255,255,255,0) 0px, rgba(255,255,255,0) 21px,
      rgba(255,255,255,.20) 21px, rgba(255,255,255,.20) 22px),
    repeating-linear-gradient(var(--inclina),
      rgba(255,255,255,0) 0px, rgba(255,255,255,0) 13px,
      rgba(255,255,255,.10) 13px, rgba(255,255,255,.10) 13.6px);
  background-size: auto 26px, auto 17px;
  animation: cielo-llover var(--prisa) linear infinite;
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 88%, transparent 100%);
}
@keyframes cielo-llover {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 26px, 0 17px; }
}

/* ── Relámpago ─────────────────────────────────────────────────────────────
   Un destello corto y separado por pausas largas. Si fuera rítmico parecería
   un letrero de discoteca en vez de una tormenta.                           */
.cielo-rayo {
  z-index: 5; background: rgba(255,255,255,.85); opacity: 0;
  animation: cielo-destello 9s linear infinite;
}
@keyframes cielo-destello {
  0%, 100% { opacity: 0; }
  1.2%  { opacity: .55; }
  2.0%  { opacity: 0; }
  2.6%  { opacity: .34; }
  3.4%  { opacity: 0; }
  46%   { opacity: 0; }
  47%   { opacity: .4; }
  48%   { opacity: 0; }
}

.cielo-tinte { z-index: 6; mix-blend-mode: soft-light; }

/* Cierre: bordes oscuros y fundido inferior, para que el texto se lea siempre. */
.cielo-cierre {
  z-index: 7;
  background:
    radial-gradient(120% 100% at 50% 0%, transparent 42%, rgba(8,12,20,.38) 100%),
    linear-gradient(180deg, rgba(8,12,20,.30) 0%, transparent 32%,
                    transparent 52%, rgba(8,12,20,.62) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .cielo-nubes, .cielo-lluvia, .cielo-rayo, .cielo-estrellas { animation: none; }
}

/* ── La franja de condición actual sobre el cielo ──────────────────────── */

.ficha-cielo {
  position: relative; overflow: hidden;
  border-radius: 16px; border: 1px solid var(--line);
  min-height: 300px; margin-bottom: 18px;
  display: flex; align-items: flex-end;
}
.ficha-cielo-dentro {
  position: relative; z-index: 8; width: 100%;
  padding: clamp(18px, 3.5vw, 30px);
  color: #fbf9f4; text-shadow: 0 1px 14px rgba(8,12,20,.6);
}
.ficha-cielo-temp {
  font-family: var(--display); font-size: clamp(3rem, 9vw, 4.6rem);
  font-weight: 800; line-height: .94; letter-spacing: -.03em;
}
.ficha-cielo-tiempo {
  font-family: var(--display); font-size: clamp(1rem, 2.4vw, 1.25rem);
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  margin: 6px 0 4px;
}
.ficha-cielo-nota { font-size: .86rem; opacity: .82; margin: 0; }
.ficha-cielo-datos {
  display: flex; flex-wrap: wrap; gap: clamp(14px, 3vw, 30px);
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(251,249,244,.22);
}
.ficha-cielo-datos > div { display: flex; flex-direction: column; gap: 3px; }
.ficha-cielo-datos dt {
  font-family: var(--display); font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; opacity: .62; margin: 0;
}
.ficha-cielo-datos dd {
  margin: 0; font-family: var(--mono); font-size: .98rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* El claro por donde el sol atraviesa un cielo cubierto. */
.cielo-claro {
  z-index: 2;
  background: radial-gradient(42% 34% at var(--x) var(--y),
    rgba(255,250,235,.38) 0%, rgba(255,250,235,.14) 45%, transparent 76%);
}

/* Fotografía o video de fondo, cuando el manifiesto declara uno para el estado
   actual. Va por debajo de todo lo dibujado; cuando carga, el degradado de base
   se atenúa y el resto de capas —nubes, lluvia, relámpago— se quedan encima. */
.cielo-medio {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.cielo-con-medio .cielo-fondo { opacity: .28; mix-blend-mode: multiply; }
.cielo-con-medio .cielo-nubes { opacity: .3 !important; }
.cielo-con-medio .cielo-astro { display: none; }

/* ══ Pantalla de acceso ════════════════════════════════════════════════════
   Dos columnas: a la izquierda por qué registrarse, a la derecha el formulario.
   Un formulario suelto en medio de la página no le dice a nadie qué gana.     */

.acceso {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 3vw, 38px); align-items: stretch;
  max-width: 1020px; margin: 0 auto;
}

.acceso-lado {
  position: relative; overflow: hidden; border-radius: 16px;
  min-height: 420px; display: flex; align-items: flex-end;
  background: #0b1a0e;
}
.acceso-foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .82;
}
.acceso-velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,26,14,.28) 0%,
              rgba(11,26,14,.62) 48%, rgba(11,26,14,.93) 100%);
}
.acceso-lado-dentro {
  position: relative; z-index: 2; padding: clamp(20px, 3vw, 32px); color: #fbf9f4;
}
.acceso-ceja {
  margin: 0 0 12px; font-family: var(--display);
  font-size: .68rem; font-weight: 700; letter-spacing: .26em;
  text-transform: uppercase; color: var(--acento);
}
.acceso-titulo {
  margin: 0 0 20px; font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.05rem); font-weight: 800;
  line-height: 1.06; letter-spacing: -.01em; text-transform: uppercase;
}
.acceso-ventajas { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 13px; }
.acceso-ventajas li { display: flex; gap: 10px; align-items: flex-start; }
.acceso-ventajas svg { width: 15px; height: 15px; flex: none; margin-top: 3px;
  color: var(--acento); }
.acceso-ventajas b {
  display: block; font-family: var(--display); font-size: .76rem; font-weight: 700;
  letter-spacing: .1em; margin-bottom: 2px;
}
.acceso-ventajas span { display: block; font-size: .84rem; line-height: 1.5;
  color: rgba(251,249,244,.76); }

.acceso .cuenta-caja {
  max-width: none; margin: 0;
  /* Columna, no fila. En fila la nota de «su contraseña se guarda cifrada» se
     colocaba AL LADO del formulario en vez de debajo, y se salía de la tarjeta. */
  display: flex; flex-direction: column; justify-content: center; gap: 0;
}
.acceso .cuenta-caja > * { width: 100%; }

.acceso-h1 {
  font-family: var(--display); font-size: 1.35rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px;
}

@media (max-width: 880px) {
  /* En teléfono el formulario es lo único que importa: la imagen se reduce a
     una franja que dice de qué va, y deja de competir por la pantalla. */
  .acceso { grid-template-columns: 1fr; gap: 16px; }
  .acceso-lado { min-height: 0; }
  .acceso-lado-dentro { padding: 18px; }
  .acceso-ventajas { display: none; }
  .acceso-titulo { margin-bottom: 0; font-size: 1.25rem; }
}

/* ── Entrar con Google ─────────────────────────────────────────────────── */

.google-zona { margin-bottom: 16px; }
.google-boton { display: flex; justify-content: center; min-height: 44px; }
.google-o {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; font-size: .8rem; color: var(--ink-3);
}
.google-o::before, .google-o::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* Las dos líneas de precio de los planes gratuitos son más largas que «Gratis»
   y necesitan caber sin romper la tarjeta. */
.plan-precio { text-wrap: balance; }

/* ── El sello de Cajamarca Lex Digital ──────────────────────────────────────
   Mismo tratamiento que en Kontia, para que las dos se lean como productos de
   la misma firma y no como dos cosas sueltas que coinciden en el color.      */

.respaldo {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: inherit;
}
.respaldo span {
  font-family: var(--display); font-size: .64rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap;
}
/* El logotipo viene en blanco: sobre fondo claro hay que oscurecerlo. En modo
   oscuro se deja tal cual, que es para lo que se dibujó. */
.respaldo img { height: 26px; width: auto; filter: invert(1) brightness(.35); }
:root[data-tema="oscuro"] .respaldo img { filter: none; opacity: .92; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .respaldo img { filter: none; opacity: .92; }
}
.respaldo:hover img { opacity: 1; }

.pie-marca {
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
/* «Desarrollado por»: tan legible como el resto del pie (.78rem) y sin
   desbordar en el celular. */
.pie-desarrollo { margin: 0; font-size: .78rem; text-align: center; overflow-wrap: anywhere; }
.pie .pie-desarrollo a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.pie .pie-desarrollo a:hover { color: var(--agua-claro); }

.franja-marca { display: flex; justify-content: center; border-bottom: 0; }
.respaldo-grande span { font-size: .7rem; }
.respaldo-grande img { height: 34px; }

/* ── Lluvia inmediata por satélite: lo primero que se ve en una ficha ───── */
.lluvia-hero {
  margin: 14px 0 18px; padding: 16px 18px 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 6px solid var(--agua-claro); border-radius: var(--r);
}
.lluvia-cab { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; align-items: baseline; }
.lluvia-eti { font: 700 .74rem var(--cuerpo); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.lluvia-fuente { font: .74rem var(--mono); color: var(--ink-3); }
.lluvia-titular { display: flex; gap: 12px; align-items: center; margin: 12px 0 14px; }
.lluvia-icono {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: var(--raised); color: var(--ink-2);
}
.lluvia-icono svg { width: 26px; height: 26px; }
.lluvia-frase { font: 800 clamp(1.15rem, 2.6vw, 1.55rem)/1.2 var(--display); color: var(--ink); }
.lluvia-detalle { margin-top: 3px; font-size: .95rem; color: var(--ink-2); }
.lluvia-titular.est-seca .lluvia-icono { background: color-mix(in srgb, var(--a0) 18%, transparent); color: var(--a0); }
.lluvia-titular.est-llega .lluvia-icono { background: color-mix(in srgb, var(--acento) 30%, transparent); color: var(--acento-canto); }
.lluvia-titular.est-cayendo .lluvia-icono { background: var(--agua-claro); color: #fff; }
.lluvia-hero:has(.lluvia-titular.est-seca) { border-left-color: var(--a0); }
.lluvia-hero:has(.lluvia-titular.est-llega) { border-left-color: var(--acento-fuerte); }

.lluvia-linea {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.lluvia-hora {
  position: relative; flex: 0 0 96px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 22px 6px 10px; border-radius: 14px;
  background: var(--raised); border: 1px solid var(--line); color: var(--ink);
  text-align: center;
}
.lluvia-h { font: 800 1.15rem var(--display); letter-spacing: .01em; }
.lluvia-ico svg { width: 22px; height: 22px; }
.lluvia-t { font: 700 .82rem/1.15 var(--cuerpo); }
.lluvia-mm { font: .72rem var(--mono); opacity: .8; min-height: 1em; }
.lluvia-ahora-eti {
  position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  font: 800 .62rem var(--cuerpo); letter-spacing: .12em;
  padding: 2px 8px; border-radius: 999px; background: var(--ink); color: var(--surface);
}
.lluvia-hora.es-ahora { outline: 2px solid var(--ink); outline-offset: 1px; }
.lluvia-hora.h-seca { border-top: 4px solid var(--a0); }
.lluvia-hora.h-seca .lluvia-ico { color: var(--a0); }
.lluvia-hora.h-debil { background: #bfdbfe; border-color: #93c5fd; color: #0b2a4a; }
.lluvia-hora.h-moderada { background: #3b82f6; border-color: #2563eb; color: #fff; }
.lluvia-hora.h-fuerte { background: #1d4ed8; border-color: #1e3a8a; color: #fff; }
.lluvia-hora.h-torrencial { background: #7c3aed; border-color: #5b21b6; color: #fff; }
.lluvia-hora.h-sin-dato { opacity: .6; border-style: dashed; }
@media (max-width: 760px) {
  .lluvia-hero { padding: 14px 12px 12px; margin-top: 10px; }
  .lluvia-hora { flex-basis: 84px; }
}

/* ── Situación de invierno ──────────────────────────────────────────────── */
.inv-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.inv-cifra {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 16px; border-top: 4px solid var(--line);
}
.inv-cifra.alerta { border-top-color: var(--a4); }
.inv-cifra.atencion { border-top-color: var(--a2); }
.inv-num { font: 800 2.4rem/1 var(--display); color: var(--ink); }
.inv-eti { margin-top: 6px; font: 700 .85rem/1.25 var(--cuerpo); color: var(--ink); }
.inv-nota { margin-top: 2px; font: .72rem var(--mono); color: var(--ink-3); }
.inv-avisos { display: grid; gap: 10px; }
.inv-aviso { padding: 10px 12px; border: 1px solid var(--line); border-left: 5px solid var(--a4); border-radius: 12px; background: var(--raised); }
.inv-aviso-cab { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }

/* ── Marea y riesgo combinado ───────────────────────────────────────────── */
.marea-titular { margin: 0 0 8px; font: 800 1.1rem/1.3 var(--display); }
.marea-titular.alto { color: var(--a4); }
.marea-titular.atencion { color: var(--acento-canto); }
.marea-fila { display: flex; gap: 8px; flex-wrap: wrap; }
.marea-item {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 12px;
  background: var(--raised); border: 1px solid var(--line); border-radius: 12px; font-size: .85rem;
}
.marea-item.aguaje { border-color: var(--acento-fuerte); box-shadow: inset 0 0 0 1px var(--acento-fuerte); }
.marea-item small { font: 800 .62rem var(--cuerpo); letter-spacing: .1em; color: var(--acento-canto); }

/* El boletín de tsunamis solo informativo ocupaba un cuarto del mapa: se
   compacta a una línea. El grave conserva su tamaño y su rojo. */
.franja-tsunami:not(.grave) { padding: 7px 12px; font-size: .74rem; align-items: center; }
.franja-tsunami:not(.grave) svg { width: 20px; height: 20px; margin-top: 0; }
.franja-tsunami:not(.grave) > div { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.franja-tsunami:not(.grave) b, .franja-tsunami:not(.grave) span { display: inline; }
.franja-tsunami:not(.grave) span:nth-of-type(2) { display: none; }

/* El planeta de la portada: a la derecha, donde antes estaba la foto de órbita
   y la lluvia recortada. Si no cargó, la portada queda como estaba. */
.heroe-globo { display: none; }
.heroe-con-globo .heroe-globo {
  display: block; position: absolute; z-index: 2;
  right: clamp(8px, 4vw, 70px); top: 50%; transform: translateY(-50%);
  width: min(52vh, 46vw, 540px); aspect-ratio: 1;
}
.heroe-con-globo .heroe-foto, .heroe-con-globo .heroe-lienzo { display: none; }
.globo-lienzo { width: 100%; height: 100%; display: block; }
@media (max-width: 900px) {
  .heroe-con-globo .heroe-globo {
    position: relative; right: auto; top: auto; transform: none;
    width: min(62vw, 300px); margin: 0 auto 6px;
  }
  .heroe-con-globo { display: flex; flex-direction: column-reverse; }
}

/* El texto cede un poco de ancho al planeta en pantallas medianas. */
@media (min-width: 901px) {
  .heroe-con-globo .heroe-dentro { max-width: min(760px, 62%); }
  .heroe-con-globo .heroe-globo { width: min(50vh, 36vw, 540px); }
}

/* ── Resumen sencillo (arriba de todo en la ficha de un sitio) ──────────── */
.sin { margin: 10px 0 8px; }
.sin * { box-sizing: border-box; }
.sin-banner {
  display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 18px;
  color: #fff; background: #15803d;
}
.sin-banner.c-amarillo { background: #facc15; color: #1c1917; }
.sin-banner.c-rojo { background: #b91c1c; }
.sin-banner-ico {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.2);
}
.sin-banner.c-amarillo .sin-banner-ico { background: rgba(0,0,0,.1); }
.sin-banner-ico svg { width: 38px; height: 38px; }
.sin-banner-txt { flex: 1 1 auto; min-width: 0; }
.sin-banner-eti { font: 700 .8rem var(--cuerpo); letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.sin-banner-titulo { font: 900 clamp(1.7rem, 5vw, 2.4rem)/1.05 var(--display); letter-spacing: .01em; }
.sin-banner-frase { margin-top: 4px; font-size: 1.12rem; line-height: 1.35; font-weight: 600; }
.sin-banner-ahora { margin-top: 4px; font-size: .95rem; opacity: .92; }

.sin-oir {
  flex: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  min-height: 52px; padding: 0 16px; border-radius: 999px; border: 2px solid currentColor;
  background: rgba(255,255,255,.14); color: inherit; font: 800 1rem var(--cuerpo);
}
.sin-oir svg { width: 26px; height: 26px; }
.sin-oir.activo { background: rgba(255,255,255,.34); }
.sin-oir-chico { min-height: 42px; padding: 0 12px; font-size: .9rem; color: var(--ink); background: var(--raised); border-color: var(--line); }
.sin-oir-chico svg { width: 22px; height: 22px; }

.sin-fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 12px; }
.sin-ficha {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px;
  background: #15803d; color: #fff;
}
.sin-ficha.c-azul { background: #1d4ed8; }
.sin-ficha.c-amarillo { background: #facc15; color: #1c1917; }
.sin-ficha.c-rojo { background: #b91c1c; }
.sin-ficha.c-gris { background: #475569; }
.sin-ficha-ico { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.2); }
.sin-ficha.c-amarillo .sin-ficha-ico { background: rgba(0,0,0,.1); }
.sin-ficha-ico svg { width: 32px; height: 32px; }
.sin-ficha-tit { font: 700 .74rem var(--cuerpo); letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.sin-ficha-grande { font: 900 1.35rem/1.15 var(--display); margin: 2px 0 4px; }
.sin-ficha-frase { font-size: 1rem; line-height: 1.35; }

.sin-preg-t { margin: 20px 0 10px; font-size: 1.3rem; }
.sin-preguntas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.sin-pregunta {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  min-height: 64px; padding: 10px 14px; border-radius: 16px;
  background: var(--surface); color: var(--ink); border: 2px solid var(--line);
  font: 700 1.05rem/1.25 var(--cuerpo);
}
.sin-pregunta svg { flex: none; width: 30px; height: 30px; color: var(--marca); }
.sin-pregunta:hover { border-color: var(--marca); }
.sin-pregunta.activo { border-color: var(--marca); background: var(--marca-suave); }

.sin-respuesta { display: none; margin-top: 12px; padding: 16px 18px; border-radius: 18px; border: 3px solid var(--line); background: var(--surface); }
.sin-respuesta.abierta { display: block; }
.sin-respuesta.c-verde { border-color: #15803d; }
.sin-respuesta.c-azul { border-color: #1d4ed8; }
.sin-respuesta.c-amarillo { border-color: #facc15; }
.sin-respuesta.c-rojo { border-color: #b91c1c; }
.sin-resp-cab { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--ink-2); font-size: .95rem; }
.sin-resp-titulo { margin: 6px 0 6px; font: 900 1.6rem/1.15 var(--display); color: var(--ink); }
.sin-respuesta ul { margin: 0; padding-left: 22px; font-size: 1.12rem; line-height: 1.5; color: var(--ink); }
.sin-respuesta li { margin: 4px 0; }

.sin-pie { margin: 12px 0 0; font-size: .85rem; color: var(--ink-3); }
.sin-detalle-t {
  margin: 22px 0 6px; padding-top: 14px; border-top: 1px solid var(--line);
  font: 800 .78rem var(--cuerpo); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
@media (max-width: 560px) {
  .sin-banner { flex-wrap: wrap; }
  .sin-banner-ico { width: 54px; height: 54px; }
  .sin-oir { width: 100%; justify-content: center; }
}
.sin-banner.c-gris { background: #475569; }

/* ── Lo que dice y mide el INAMHI ───────────────────────────────────────── */
.inam-sub { margin: 4px 0 6px; font: 800 1rem var(--cuerpo); color: var(--ink); }
.inam-dias { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.inam-dia { border: 1px solid var(--line); background: var(--raised); border-radius: 14px; padding: 10px 12px; }
.inam-dia-cab { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; text-transform: capitalize; }
.inam-dia-cab span { color: var(--ink-2); font: .85rem var(--mono); text-transform: none; }
.inam-dia ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .92rem; }
.inam-dia li { display: flex; gap: 8px; align-items: center; }
.inam-dia li svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); }
.inam-dia li.llueve svg { color: var(--agua-claro); }

.inv-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.inv-docs li { padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); }
.inv-docs a { font-weight: 700; }
.inv-caido { color: var(--a4); }

.salud-punto { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #94a3b8; vertical-align: middle; }
.salud-punto.s-ok { background: #16a34a; }
.salud-punto.s-degradada { background: #f59e0b; }
.salud-punto.s-caida { background: #dc2626; }

.sin-seg {
  display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px;
  font: 700 .78rem var(--cuerpo); background: rgba(255,255,255,.22);
}
.sin-ficha.c-amarillo .sin-seg { background: rgba(0,0,0,.12); }
.sin-seg.s-baja { outline: 1px dashed currentColor; }

/* ── Mire el cielo: reporte con un toque y foto ──────────────────────────── */
.rcielo { margin: 18px 0 8px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.rcielo-t { font-size: 1.4rem; margin: 0 0 4px; }
.rcielo-sub { margin: 0 0 12px; color: var(--ink-2); font-size: 1.02rem; }
.rcielo-botones { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rcielo-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 92px; padding: 10px; cursor: pointer; text-align: center;
  background: var(--raised); color: var(--ink); border: 2px solid var(--line); border-radius: 16px;
  font: 800 1rem/1.2 var(--cuerpo);
}
.rcielo-btn svg { width: 34px; height: 34px; color: var(--marca); }
.rcielo-btn:hover { border-color: var(--marca); }
.rcielo-btn:disabled { opacity: .55; cursor: wait; }
.rcielo-foto { margin-top: 14px; }
.rcielo-foto-btn { min-height: 58px; font-size: 1.1rem; }
.rcielo-compartir { display: flex; gap: 10px; align-items: center; margin-top: 10px; font-size: .95rem; }
.rcielo-compartir input { width: 22px; height: 22px; }
.rcielo-resultado { display: none; margin-top: 12px; padding: 14px 16px; border-radius: 16px; border: 3px solid var(--line); background: var(--raised); }
.rcielo-resultado.c-verde, .rcielo-resultado.c-azul, .rcielo-resultado.c-amarillo,
.rcielo-resultado.c-rojo, .rcielo-resultado.c-gris { display: block; }
.rcielo-resultado.c-verde { border-color: #15803d; }
.rcielo-resultado.c-azul { border-color: #1d4ed8; }
.rcielo-resultado.c-amarillo { border-color: #facc15; }
.rcielo-resultado.c-rojo { border-color: #b91c1c; }
.rcielo-res-cab { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--ink-2); }
.rcielo-res-titulo { margin: 6px 0; font: 900 1.45rem/1.15 var(--display); color: var(--ink); }
.rcielo-v-t { margin: 16px 0 4px; font-size: 1rem; }
.rcielo-vecinos { margin: 0; font-size: 1rem; color: var(--ink-2); }

/* ── Lluvia en vivo (satélite) ───────────────────────────────────────────────
   La barra de tiempo se parte en dos colores: verde lo medido, ámbar lo
   estimado. El rótulo de la hora repite la diferencia con palabras, porque el
   color solo no basta (y menos bajo el sol del campo).                        */
.capa-radar { image-rendering: auto; }
.tiempo-barra.radar {
  -webkit-appearance: none; appearance: none;
  height: 9px; border-radius: 99px; cursor: pointer;
  background: linear-gradient(to right, var(--a0) 0, var(--a0) var(--ahora, 50%),
    var(--acento) var(--ahora, 50%), var(--acento) 100%);
}
.tiempo-barra.radar::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--ink-3);
}
.tiempo-barra.radar::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--surface);
}
.tiempo-barra.radar::-moz-range-track { background: transparent; }
.visor-tiempo.tiempo-estimado .tiempo-eti { color: var(--terracota); }
/* La leyenda de la lluvia en vivo tiene ocho pasos: en el teléfono pasa a su
   propia fila en vez de quedar recortada al lado del escudo de la fuente. */
@media (max-width: 760px) {
  .visor-pie:has(.visor-leyenda .ley-paso:nth-child(9)) { flex-wrap: wrap; }
  .visor-pie:has(.visor-leyenda .ley-paso:nth-child(9)) .visor-leyenda { flex: 1 1 100%; }
}