@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlowcondensed-normal-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlowcondensed-normal-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlowcondensed-normal-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlowcondensed-normal-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlowcondensed-normal-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlowcondensed-normal-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400 600;font-display:swap;src:url(fonts/sourceserif4-italic-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400 600;font-display:swap;src:url(fonts/sourceserif4-italic-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/sourceserif4-normal-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/sourceserif4-normal-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Retocado el 22/09/2026 para que cambie su huella y nadie se quede con la version anterior en
   cache: al publicar, el codigo subio antes que esta hoja y durante unos segundos la web sirvio
   HTML nuevo con CSS viejo. Ya esta arreglado el orden de subida en publicar_ftp.py. */
/* ───────── Motor de las webs de webcams ─────────
   EL TEMA DE PARTIDA, y nada más que eso. Es un tema CLARO y sin marca: gris de papel, azul
   pizarra y ámbar. No es el aspecto de ninguna web de la red; es lo que ve una web que todavía
   no ha puesto el suyo, y está medido para que se lea (todo por encima de 4,5).

   Cada web pone el suyo en public/assets/sitio.css redeclarando estas variables, que se enlaza
   DESPUÉS de esta hoja. No hace falta copiar nada más: así sigue recibiendo las mejoras del
   motor y manda en el color, la tipografía y la forma.
   Hasta el 23/09/2026 aquí estaba la paleta morada de Nature Live Cams y cualquier web nueva
   nacía con su aspecto; hoy esa paleta vive en sitios/naturelivecams.com/public/assets/sitio.css.

   Para generar el sitio.css de una web nueva a partir de uno o dos colores, con el contraste
   medido: .claude/skills/webcams-motor/scripts/tema.py  */
:root{
  /* SUPERFICIES, de la página hacia dentro. En un tema oscuro van al revés (night oscuro,
     snow claro) y no hay que cambiar nada más: los nombres dicen la función, no el color. */
  --night:#F4F6F8;       /* fondo de la página */
  --deep:#FFFFFF;        /* papel: tarjetas y bloques */
  --deep2:#E8ECF0;       /* un escalón por encima del fondo */
  --abyss:#DFE4EA;       /* lo más hundido, y el texto que va ENCIMA de una chapa de color */
  --rule:#CFD6DE;        /* líneas */
  --snow:#16202B;        /* texto principal */
  --haze:#3C4855;        /* texto secundario */
  --dim:#5A6674;         /* texto apagado */

  /* MARCA Y ESCALA. Los niveles (--lv0 el más tranquilo) y el color de marca son cosas
     distintas: una web sin escala de actividad deja los tres en su color y no pasa nada. */
  --acento:#12597E;      /* color de marca */
  --hot:#8A5A00;         /* lo que está en directo, lo cálido */
  --link:#12597E;
  --lv0:#5A6674; --lv1:#8F4A00; --lv2:#A81F17;
  --lv1-valor:var(--lv1);   /* el nivel 1 como TEXTO grande; a veces pide un tono aparte */

  --display:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --text:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --pad:clamp(1rem,4vw,2rem); --max:1180px; --r:6px;

  /* MAPA */
  --sea:#FFFFFF; --land:#DCE3EA; --map-frontera:#B4BEC9; --ctl:rgba(255,255,255,.92);

  /* SOBRE UNA FOTO O UN VELO OSCURO. Estos NO siguen al tema: una foto es oscura por debajo
     del velo tanto en una web clara como en una oscura, así que aquí el texto va claro
     siempre. El que sí sigue al tema es --texto-suave, que va sobre la página. */
  --texto-foto:#F2F5F8;     /* hero, crédito de la foto, rótulo del reproductor */
  --texto-tenue:#EAEFF4;    /* dentro del panel de «sin emisión» y sus etiquetas */
  --sobre-velo:#FFFFFF;     /* títulos encima de un velo */
  --sobre-velo-borde:rgba(255,255,255,.55);
  --texto-suave:var(--haze);   /* entradilla, descripción de la cámara, texto de una fuente */
  --negro:#0A0D12;          /* el fondo del reproductor mientras carga */

  /* VELOS, CHAPAS Y SOMBRAS, en componentes RGB para poder darles opacidad sin reescribir el
     degradado. Todos van encima de una foto, así que son oscuros también en un tema claro. */
  --velo:16,32,43;          /* el degradado grande del hero sobre la foto */
  --velo-hero-rgb:8,14,20;  /* el velo de debajo del texto del hero */
  --chapa-rgb:16,24,33;     /* chapas de texto encima de una foto */
  --tapa-rgb:12,18,26;      /* el panel de «no emite» */
  --sombra-rgb:16,24,33;    /* sombra de menús, fichas del mapa y desplegables */
  --acento-rgb:18,89,126;   /* halo del acento; mismos componentes que --acento */
  --btn-borde:rgba(22,32,43,.35);

  /* Lo cálido del hero va ENCIMA de la foto: en una web clara necesita un tono claro aunque
     su --hot sea oscuro. El reloj de noche, en cambio, va sobre la tarjeta. */
  --hero-sol:#FFD166; --hora-noche:var(--hot);

  /* El pie es la única superficie que puede ir a contracorriente del tema: en una web clara
     suele ser oscuro. Por eso declara sus colores enteros en vez de heredarlos. */
  --pie-fondo:#16202B; --pie-texto:#C3CCD6; --pie-fuerte:#FFFFFF;

  /* El «saltar al contenido» solo lo ve quien navega con teclado, y por eso se pasa por alto. */
  --skip-fondo:var(--acento); --skip-texto:#FFFFFF;

  /* Las rayas del recuadro de «esta cámara no emite» */
  --offline-a:#E3E8ED; --offline-b:#DAE0E6;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:1rem}
body{margin:0;background:var(--night);color:var(--snow);font:400 1.0625rem/1.6 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (min-width:60rem){body{font-size:1.125rem}}
img,svg,iframe{display:block;max-width:100%}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--hot)}
:focus-visible{outline:2px solid var(--hot);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:.005em;margin:0 0 .5em;text-wrap:balance}
h1{font-weight:700;font-size:clamp(2.35rem,7vw,4rem);line-height:.98;letter-spacing:-.005em}
h2{font-size:clamp(1.55rem,3.4vw,2rem)}
h3{font-size:1.3rem}
p{margin:0 0 1em}
/* Buscador de la cabecera. Discreto: un campo que crece al enfocarlo y una lista debajo. */
.ts{position:relative;flex:0 1 15rem;min-width:8rem;margin-left:auto}
.ts-abrir{display:none}
.ts-q{width:100%;padding:.42rem .7rem;border:1px solid var(--rule);border-radius:999px;background:var(--deep2);color:var(--snow);font:400 .95rem/1.2 var(--text)}
.ts-q::placeholder{color:var(--dim)}
.ts-q:focus{outline:2px solid var(--acento);outline-offset:1px;background:var(--deep)}
.ts-r{position:absolute;z-index:40;top:calc(100% + .35rem);right:0;width:min(22rem,80vw);max-height:60vh;overflow:auto;list-style:none;margin:0;padding:.25rem;background:var(--deep);border:1px solid var(--rule);border-radius:var(--r);box-shadow:0 12px 32px rgba(var(--sombra-rgb),.35)}
.ts-r a{display:flex;align-items:center;gap:.6rem;padding:.4rem .5rem;border-radius:4px;color:var(--snow);text-decoration:none}
.ts-r a:hover,.ts-r [aria-selected="true"] a{background:var(--deep2)}
.ts-r img{width:3rem;height:1.7rem;object-fit:cover;border-radius:3px;flex:none}
.ts-r b{display:block;font:600 .98rem/1.2 var(--display)}
.ts-r small{display:block;font-size:.8rem;color:var(--dim)}
.ts-nada{padding:.5rem;color:var(--dim);font-size:.92rem}
/* Movil: en la barra solo cabe un boton. Al pulsarlo, el campo ocupa el ancho entero justo debajo
   de la cabecera, con sitio de sobra para escribir y para leer los resultados. El menu se queda
   siempre a la derecha del buscador, que es donde tiene que estar. */
@media (max-width:59.99rem){
  /* «static» para que el panel se coloque contra la CABECERA y no contra el boton: anclado al
     boton se salia por la izquierda de la pantalla. */
  .ts{flex:0 0 auto;min-width:0;position:static}
  .ts-abrir{display:grid;place-items:center;width:2.6rem;height:2.6rem;padding:0;border:1px solid var(--rule);border-radius:999px;background:var(--deep2);color:var(--snow);cursor:pointer}
  .ts-abrir .i{width:1.25rem;height:1.25rem}
  .ts-caja{display:none;position:absolute;z-index:45;top:100%;left:0;right:0;padding:.7rem var(--pad);background:var(--night);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);box-shadow:0 14px 28px rgba(var(--sombra-rgb),.28)}
  .ts.is-abierta .ts-caja{display:block}
  .ts-q{font-size:1.05rem;padding:.65rem .9rem}
  .ts-r{position:static;width:auto;max-height:55vh;margin-top:.5rem;box-shadow:none}
  .ts-r a{padding:.55rem .5rem}
  .ts-r img{width:3.6rem;height:2rem}
}
.skip{position:absolute;left:-999px;top:0;background:var(--skip-fondo);color:var(--skip-texto);padding:.6rem 1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}
.progress{position:fixed;inset:0 0 auto;height:3px;z-index:60;pointer-events:none}
.progress span{display:block;height:100%;background:var(--acento);transform-origin:0 50%;transform:scaleX(0)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.wrap--narrow{max-width:760px}
.i{width:1.15em;height:1.15em;flex:none}

/* ── Cabecera ── */
.top{border-bottom:1px solid var(--rule);background:var(--night);position:relative;z-index:40}
.top-in{max-width:var(--max);margin:0 auto;padding:.7rem var(--pad);display:flex;align-items:center;gap:1rem}
.brand{display:flex;align-items:center;gap:.55rem;color:var(--snow);text-decoration:none;font:700 1.35rem/1 var(--display);letter-spacing:.01em;margin-right:auto}
.brand-mark{width:34px;height:26px}
.bm-cone{fill:var(--lv0)} .bm-glow{fill:var(--acento)}
.nav{display:none;align-items:stretch;gap:1.6rem;font:500 1.12rem/1 var(--display)}
/* Todos los elementos con la MISMA altura y el texto centrado dentro. Si no, la chapa del número
   de «en erupción» estira su elemento y su letra se queda un pelo más arriba que las demás. */
.nav>a,.drop>.drop-t{position:relative;display:flex;align-items:center;min-height:2rem;padding:0;border:0;background:none;color:var(--snow);text-decoration:none;cursor:pointer;font:inherit}
.nav>a:hover,.drop>.drop-t:hover{color:var(--hot)}
/* Dónde estoy: una barra fina debajo, del color de la marca. El texto no cambia de color, que si
   no se confunde con el de pasar el ratón por encima. */
.nav>a[aria-current]::after,.drop.is-aqui>.drop-t::after{content:"";position:absolute;left:0;right:0;bottom:-.15rem;height:2px;border-radius:2px;background:var(--acento)}
.nav-n{display:inline-grid;place-items:center;min-width:1.45em;height:1.45em;margin-left:.35em;padding:0 .35em;border-radius:1em;background:var(--acento);color:var(--abyss);font-weight:700;font-size:.8em}
details>summary{list-style:none}
details>summary::-webkit-details-marker{display:none}
.drop{position:relative;display:flex}
.drop>.drop-t::before{content:"";display:inline-block;width:.4em;height:.4em;margin:-.2em 0 0 .45em;order:2;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* Se despliega con el ratón encima y también al llegar con el tabulador. Sin JavaScript. */
.drop ul{display:none;position:absolute;right:0;top:100%;min-width:15rem;margin:0;padding:.5rem 0;list-style:none;background:var(--deep);border:1px solid var(--rule);border-radius:var(--r);box-shadow:0 12px 28px rgba(var(--sombra-rgb),.28)}
.drop:hover>ul,.drop:focus-within>ul{display:block}
.drop li a[aria-current]{color:var(--hot)}
.drop li a{display:block;padding:.45rem 1rem;color:var(--snow);text-decoration:none}
.drop li a:hover{background:var(--deep2)}
.menu{position:static}
.menu>summary{display:flex;align-items:center;gap:.5rem;cursor:pointer;font:600 1.1rem/1 var(--display);padding:.45rem .2rem}
.menu-lines{width:20px;height:12px;border-top:2px solid;border-bottom:2px solid;position:relative}
.menu-lines::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid}
.menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--deep);border-bottom:1px solid var(--rule);padding:1rem var(--pad) 1.4rem;display:grid;gap:.2rem;font:500 1.2rem/1.3 var(--display)}
.menu-panel a{color:var(--snow);text-decoration:none;padding:.35rem 0}
.menu-panel ul{list-style:none;margin:0 0 .6rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.menu-panel li a{display:flex;justify-content:space-between;font-size:1.05rem;color:var(--haze)}
.menu-h{margin:.6rem 0 0;color:var(--dim);font-size:.95rem}
.menu-hot{color:var(--hot)!important}
@media (min-width:56rem){.nav{display:flex}.menu{display:none}}

/* ── Botones ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.15rem;border:1.5px solid var(--btn-borde);border-radius:4px;color:inherit;text-decoration:none;font:600 1.1rem/1 var(--display);letter-spacing:.01em;background:rgba(var(--velo),.35)}
.btn:hover{border-color:var(--snow)}   /* solo el borde: el color del texto lo pone el tema */
.btn-hot{background:var(--acento);border-color:var(--acento);color:var(--abyss)}
.btn-hot:hover{background:var(--hot);border-color:var(--hot);color:var(--abyss)}

/* ── Portada ── */
.hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:flex-end;overflow:hidden;background:var(--abyss)}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(var(--velo),.15) 0%,rgba(var(--velo),.35) 45%,var(--night) 100%)}
@media (min-width:60rem){.hero::before{background:linear-gradient(90deg,rgba(var(--velo),.92) 0%,rgba(var(--velo),.55) 45%,rgba(var(--velo),0) 75%),linear-gradient(180deg,transparent 70%,var(--night))}}
/* Un velo por debajo del bloque de texto. La sombra de la letra no cuenta para la norma de
   contraste y una foto clara se come el titular: con esto el hero se lee salga la foto que salga. */
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;padding:6rem var(--pad) 2.2rem;color:var(--texto-foto);background:linear-gradient(180deg,rgba(var(--velo-hero-rgb),0) 0%,rgba(var(--velo-hero-rgb),.34) 38%,rgba(var(--velo-hero-rgb),.60) 100%)}
.hero-h{font-size:clamp(2.8rem,9.5vw,5.6rem);max-width:11ch;margin-bottom:.35em;text-shadow:0 2px 24px rgba(var(--chapa-rgb),.55)}
.hero-p{max-width:36rem;font-size:1.12rem;color:var(--texto-foto);text-shadow:0 1px 12px rgba(var(--chapa-rgb),.7)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.4rem 0 1.8rem}
.hero-datos{display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;margin:1.2rem 0 0;color:var(--texto-foto)}
.hero-dato{display:flex;align-items:center;gap:.7rem}
.hero-dato .i{width:1.75rem;height:1.75rem;flex:none}
/* El sol va en el color cálido de la web y el reloj en blanco: son dos datos distintos y el que
   importa de un vistazo es cuánto queda de luz. */
.hero-dato .i-sunrise,.hero-dato .i-sunset{color:var(--hero-sol)}
.hero-datos dt{font-size:.85rem;margin:0}
.hero-datos dd{margin:.05rem 0 0;font:700 1.2rem/1.2 var(--display);font-variant-numeric:tabular-nums}
/* Cuánto falta, en el color cálido: es lo que se busca de un vistazo. Sin rebajar la opacidad,
   que encima de una foto clara se quedaba en 4,40 y hacen falta 4,5. */
.hero-falta{font-weight:700;color:var(--hero-sol)}
/* El credito de la foto va ENCIMA de la foto en pantalla grande, y una foto clara se lo come:
   medido a 1,4 de contraste en las dos webs. Con su propia chapa oscura se lee siempre, salga
   la foto que salga. En movil baja debajo de la foto y ahi no hace falta chapa. */
.hero-credit{position:absolute;z-index:2;right:var(--pad);bottom:.6rem;margin:0;padding:.18rem .45rem;border-radius:3px;background:rgba(var(--chapa-rgb),.72);font-size:.72rem;color:var(--texto-foto);max-width:60%;text-align:right}
@media (max-width:59.99rem){.hero-credit{position:static;padding:0 var(--pad) .5rem;background:none;color:var(--haze);text-align:left;max-width:none}.hero{flex-direction:column;align-items:stretch;justify-content:flex-end}}

/* Escala de calor: reparto de volcanes por estado */
.heat{max-width:30rem}
.heat-bar{display:flex;height:.6rem;border-radius:1rem;overflow:hidden;background:var(--deep2)}
.heat-bar span{flex:1 1 0}
.heat-0{background:var(--lv0)}.heat-1{background:var(--lv1)}.heat-2{background:linear-gradient(90deg,var(--lv2),var(--hot))}
.heat-legend{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin:.6rem 0 0;padding:0;font:500 1.05rem/1.2 var(--display);color:var(--haze)}
.heat-legend strong{color:var(--snow);font-weight:700;font-size:1.2em;margin-right:.15em}
.heat-l2 strong{color:var(--lv2)}.heat-l1 strong{color:var(--lv1)}

/* ── Bandas y rejillas ── */
.band{max-width:var(--max);margin:0 auto;padding:2.6rem var(--pad) .5rem}
.band--flush{padding-left:0;padding-right:0}
.band--text{padding-bottom:2rem}
.band-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.band-head h2{margin:0}
/* Los tres de abajo son enlaces sueltos que se pulsan con el dedo, no texto corrido: se les da
   altura suficiente para acertar en movil (24 px es el minimo que pide la norma). */
.more{display:inline-block;padding:.32rem 0;font:500 1.05rem/1 var(--display);white-space:nowrap}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr));gap:1.4rem 1.2rem}
@media (max-width:35rem){.cards{grid-template-columns:1fr 1fr;gap:1.1rem .8rem}}
.card{display:flex;flex-direction:column;color:var(--snow);text-decoration:none;min-width:0}
.card-media{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--deep2);border-top:3px solid var(--lv0)}
.card--lv1 .card-media{border-top-color:var(--lv1)}
.card--lv2 .card-media{border-top-color:var(--lv2)}
.card-media img{width:100%;height:100%;object-fit:cover}
/* La chapa del nivel lleva el color del fondo de la web, no blanco: en Nature Live Cams el blanco
   sobre el rosa se queda en 3,77 y hace falta 4,5. Asi vale para un tema oscuro y para uno claro,
   igual que ya hacia la chapa del nivel 2. */
.card-flag{position:absolute;left:.45rem;top:.45rem;padding:.2rem .5rem;border-radius:3px;font:600 .88rem/1.1 var(--display);background:var(--lv1);color:var(--abyss)}
.card--lv2 .card-flag{background:var(--lv2);color:var(--abyss)}
.card-clock{position:absolute;left:.45rem;bottom:.45rem;display:flex;align-items:center;gap:.3rem;padding:.18rem .45rem;border-radius:3px;background:rgba(var(--chapa-rgb),.72);font:500 .92rem/1.1 var(--display);font-variant-numeric:tabular-nums;color:var(--texto-foto)}
.card-clock .i{width:.95em;height:.95em}
/* El reloj lleva dos iconos, el de día y el de noche, y el navegador enseña el que toca. Ya no son
   siempre el sol y la luna: si hay previsión, son el cielo de ahora (nubes, lluvia, niebla…). */
.card-clock .i-noche,.is-night .i-dia{display:none}
.is-night .i-noche{display:block;color:var(--hot)}
.card-clock:not(.is-night):not(.is-day) .i{display:none}
.card-body{display:grid;gap:.1rem;padding:.55rem 0 0}
.card-title{font:600 1.3rem/1.1 var(--display);margin:0}
.card:hover .card-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.card-meta{color:var(--haze);font-size:.9rem;line-height:1.3}
.card-cams{display:flex;align-items:center;gap:.35rem;color:var(--dim);font:500 .95rem/1.2 var(--display)}
.card-cams .i{width:1em;height:1em}

/* ── Mapa ── */
.atlas{display:grid;gap:1.6rem}
@media (min-width:60rem){.atlas{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:start}}
.atlas-map{margin:0}
.atlas-map--wide{margin:1.2rem 0 1.6rem}
.map{width:100%;height:auto;background:transparent}
.map-land{fill:var(--land)}
.dot circle{fill:var(--lv0);stroke:var(--night);stroke-width:1.5px;vector-effect:non-scaling-stroke}
.dot--lv1 circle{fill:var(--lv1)}
.dot--lv2 circle{fill:var(--lv2)}
.dot .dot-halo{fill:var(--lv2);opacity:.28;stroke:none;animation:glow 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.dot--here circle:not(.dot-halo){stroke:var(--hot);stroke-width:3px}
.dot:hover circle:not(.dot-halo),.dot:focus-visible circle{stroke:var(--snow);stroke-width:3px}
.dot text{fill:var(--snow);font-family:var(--display);font-weight:600;paint-order:stroke;stroke:var(--sea);stroke-width:4px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
@keyframes glow{50%{opacity:.08;transform:scale(1.5)}}
@media (prefers-reduced-motion:reduce){.dot .dot-halo{animation:none}}
.legend{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin-top:.6rem;font:500 .98rem/1.2 var(--display);color:var(--haze)}
.lg::before{content:"";display:inline-block;width:.7em;height:.7em;border-radius:50%;margin-right:.4em;background:var(--lv0)}
.lg-1::before{background:var(--lv1)}.lg-2::before{background:var(--lv2)}
.region{padding:.7rem 0;border-top:1px solid var(--rule)}
.region h3{margin:0 0 .2rem;font-size:1.2rem}
.region h3 a{display:inline-block;padding:.15rem 0;color:var(--snow);text-decoration:none}
.region h3 a:hover{text-decoration:underline}
.region p{margin:0;font-size:.95rem;color:var(--haze)}
.region p a{color:var(--haze)}
.region p a:hover{color:var(--hot)}

/* ── Cabeceras de página ── */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem .45rem;margin:1.1rem 0 .9rem;padding:0;font:500 .98rem/1.3 var(--display);color:var(--dim)}
/* Cada miga en fila: el enlace lleva relleno para poder pulsarlo y el nombre de la pagina actual
   no, asi que alineados por la linea base se quedaban a distinta altura. */
.crumbs li{display:flex;align-items:center}
.crumbs [aria-current]{padding:.22rem 0}
.crumbs li+li::before{content:"/";margin-right:.45rem;color:var(--rule)}
/* Tambien a los lados: una miga corta como «Italy» no llegaba a los 24 px de ancho. El margen
   negativo deja la linea de migas exactamente igual de larga. */
.crumbs a{display:inline-block;padding:.22rem .25rem;margin:0 -.25rem;color:var(--haze);text-decoration:none}
.crumbs a:hover{color:var(--hot);text-decoration:underline}
.head{margin:0 0 1.2rem;max-width:52rem}
.lede{font-size:1.15rem;color:var(--texto-suave);max-width:44rem}
.lede p:last-child{margin-bottom:0}
.stamp,.fine{font-size:.85rem;color:var(--dim);margin:.6rem 0 0}
.fine{margin:.6rem 0 1.4rem}
.count{display:inline-block;font-weight:500;color:var(--dim);font-size:.75em;vertical-align:.1em;margin-left:.2em}
.filters{display:flex;gap:.5rem;overflow-x:auto;padding:.2rem 0 1rem;margin:0 calc(-1*var(--pad));padding-left:var(--pad);padding-right:var(--pad);scrollbar-width:none}
.filters button{flex:none;font:500 1.02rem/1 var(--display);color:var(--snow);background:transparent;border:1.5px solid var(--rule);border-radius:2rem;padding:.5rem .9rem;cursor:pointer}
.filters button[aria-pressed=true]{background:var(--snow);color:var(--night);border-color:var(--snow)}
.zone-block{margin:1.2rem 0 2.2rem}
.zone-h a{color:var(--snow);text-decoration:none}
.zone-h a:hover{text-decoration:underline}
.zone-grid{display:grid;gap:1.6rem;margin-bottom:2rem}
@media (min-width:60rem){.zone-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}.atlas-map--zone{position:sticky;top:1rem}}
.cards--zone{grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr))}
.more-zones{border-top:1px solid var(--rule);margin:2.5rem 0 3rem;padding-top:1.2rem}
/* Cuatro columnas como mucho: con cinco, una lista de seis zonas deja una sola huérfana en la
   segunda fila. El suelo de cada columna es la cuarta parte del ancho menos su parte del hueco. */
.more-zones ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(max(13rem,calc(25% - .9rem)),1fr));gap:.1rem 1.2rem;font:500 1.12rem/1.3 var(--display)}
/* Lista de enlaces, uno debajo de otro: cada uno con sus 24 px de alto para el dedo. */
.more-zones li>a{display:inline-block;padding:.25rem 0}
.more-zones span{color:var(--dim);font-size:.9em}
.others-list{list-style:none;padding:0;margin:.8rem 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.5rem 1.2rem}
.others-list li{border-top:1px solid var(--rule);padding:.5rem 0;display:grid}
.others-list strong{font:600 1.2rem/1.2 var(--display)}
.others-list span,.others-list em{color:var(--haze);font-size:.92rem}

/* ── Ficha de volcán ── */
.place-head{margin-bottom:1rem}
.place-head h1{margin-bottom:.3rem}
.place-line{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0;color:var(--haze);font:500 1.12rem/1.3 var(--display)}
.pill{display:inline-block;padding:.2rem .55rem;border-radius:3px;font-weight:600;background:var(--deep2);color:var(--haze)}
.place-line--lv1 .pill{background:var(--lv1);color:var(--abyss)}
.place-line--lv2 .pill{background:var(--lv2);color:var(--abyss)}
.stage{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin:0 0 1.2rem}
.stage>*{min-width:0}
@media (min-width:62rem){.stage{grid-template-columns:minmax(0,1fr) 18.5rem;align-items:start}}
.frame{position:relative;aspect-ratio:16/9;background:var(--negro);overflow:hidden}
@media (max-width:47.99rem){.frame{margin:0 calc(-1*var(--pad))}}
@media (min-width:48rem){.frame{border-radius:var(--r)}}
.frame>img,.frame>iframe,.frame>.facade,.frame>.offline,.frame>.frame-link{position:absolute;inset:0;width:100%;height:100%;border:0}
.frame-img{object-fit:contain}
.frame-img.is-stale{opacity:.85}
.facade{padding:0;margin:0;border:0;background:var(--negro);cursor:pointer;color:var(--texto-foto)}
.facade img{width:100%;height:100%;object-fit:cover;opacity:.6;filter:saturate(.8)}
.facade-play{position:absolute;left:50%;top:50%;width:4.6rem;height:4.6rem;margin:-2.3rem 0 0 -2.3rem;border-radius:50%;display:grid;place-items:center;background:var(--acento);color:var(--abyss);box-shadow:0 0 0 .5rem rgba(var(--acento-rgb),.25)}
.facade-play .i{width:2rem;height:2rem;margin-left:.2rem}
.facade:hover .facade-play{background:var(--hot)}
.facade-note{position:absolute;left:.8rem;bottom:.7rem;padding:.25rem .6rem;border-radius:3px;background:rgba(var(--chapa-rgb),.75);color:var(--texto-foto);font:500 1rem/1.2 var(--display)}
.offline{display:grid;place-items:center;padding:1.5rem;text-align:center;background:repeating-linear-gradient(135deg,var(--offline-a) 0 14px,var(--offline-b) 14px 28px)}
.offline p{max-width:26rem;margin:0;font:500 1.15rem/1.35 var(--display);color:var(--haze)}
.frame-link{display:grid;place-items:center;color:var(--texto-foto);text-decoration:none}
.frame-link img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.frame-link span{color:var(--texto-foto);position:relative;display:flex;align-items:center;gap:.5rem;font:600 1.3rem/1 var(--display);background:rgba(var(--chapa-rgb),.8);padding:.8rem 1.1rem;border-radius:4px}
.frame-alert{position:absolute;left:0;right:0;bottom:0;margin:0;padding:.6rem .9rem;background:rgba(var(--chapa-rgb),.88);font:500 1rem/1.3 var(--display);color:var(--hot)}
.frame.is-pfs{position:fixed;inset:0;z-index:100;aspect-ratio:auto;margin:0;border-radius:0}
.has-pfs{overflow:hidden}
.pfs-close{position:absolute;top:max(.8rem,env(safe-area-inset-top));right:.8rem;z-index:3;width:2.8rem;height:2.8rem;border-radius:50%;border:0;background:rgba(var(--chapa-rgb),.8);color:var(--sobre-velo);display:grid;place-items:center;cursor:pointer}
.frame:fullscreen{border-radius:0}
.stage-bar{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;padding:.75rem 0 0}
.cap-name{font-size:1.35rem;margin:0 0 .2rem}
/* Debajo de la barra y a todo el ancho: ahí explica qué se ve sin estrecharse contra los botones. */
.cap-desc{margin:.35rem 0 0;font-size:.97rem;line-height:1.45;max-width:52rem;color:var(--texto-suave)}
.cap-credit{margin:0;font-size:.88rem;color:var(--dim);display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.cap-credit a{color:var(--haze)}
/* Es un icono suelto y hay que poder pulsarlo: 24 px contando el relleno, sin mover el texto. */
.ext{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;margin:-5px;color:var(--dim)}
.ext .i{width:.95em;height:.95em}
.fs{flex:none;display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .8rem;border:1.5px solid var(--rule);border-radius:4px;background:transparent;color:var(--snow);font:500 1.02rem/1 var(--display);cursor:pointer}
.fs:hover{border-color:var(--snow)}
@media (max-width:30rem){.fs span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
.pick-h{font-size:1.1rem;color:var(--haze);margin:0 0 .6rem;font-weight:500}
.pick-list{list-style:none;margin:0;padding:0;display:flex;gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(-1*var(--pad));padding-right:var(--pad);scrollbar-width:thin}
.pick-list li{flex:0 0 9.5rem;scroll-snap-align:start}
@media (min-width:62rem){.pick-list{display:grid;gap:.35rem;margin:0;padding:0;max-height:36rem;overflow:auto}.pick-list li{flex:none}.pick-opt{grid-template-columns:7rem 1fr!important;align-content:center;column-gap:.7rem;row-gap:.15rem}.pick-opt img{grid-row:1/3}.pick-name{align-self:end}.pick-kind{align-self:start}}
.pick-opt{display:grid;gap:.35rem;color:var(--snow);text-decoration:none;padding:.3rem;border-radius:var(--r);border:1.5px solid transparent}
.pick-opt img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;background:var(--deep2)}
.pick-opt[aria-current]{border-color:var(--hot);background:var(--deep)}
.pick-opt:hover{background:var(--deep)}
.pick-name{font:600 1.02rem/1.15 var(--display)}
.pick-kind{font:500 .88rem/1 var(--display);color:var(--dim);grid-column:2}
@media (max-width:61.99rem){.pick-kind{grid-column:1}}
.pick-opt.is-down img{opacity:.35}
/* La caja de «ahora mismo». Dentro, los datos en su propia rejilla, que se reparte entre los que
   HAYA: con cuatro columnas fijas, una playa —que no tiene nivel de actividad— dejaba un hueco
   vacío del ancho de un cuarto de la caja. La previsión va debajo, a todo el ancho. */
.now{margin:0}
/* En un móvil estrecho, una sola columna: con dos, «27 °C (81 °F)» no cabe y se parte por la
   mitad del valor. Achicar la letra no vale, que ahí deja de contar como texto grande. */
.now-datos{display:grid;grid-template-columns:1fr;gap:.5rem}
@media (min-width:26rem){.now-datos{grid-template-columns:1fr 1fr}}
@media (min-width:60rem){.now-datos{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}}
/* El icono va fuera del flujo, en el hueco de la izquierda, y no delante de la etiqueta: así la
   etiqueta y el dato empiezan en la misma línea vertical y la tarjeta baja de tres renglones a dos.
   «align-content:start» y no el reparto por omisión: las tarjetas se estiran a la altura de la más
   alta, y al repartir el sobrante entre las filas, la etiqueta y el dato de las cortas bajaban unos
   píxeles. Así todas empiezan a la misma altura. */
.now-item{position:relative;display:grid;grid-template-columns:1fr;align-content:start;gap:.05rem;
  background:var(--deep);border-radius:var(--r);padding:.6rem .9rem .7rem 2.9rem;min-width:0}
.now-item h3{margin:0;font:600 1rem/1.25 var(--display);color:var(--snow)}
/* El icono se centra en la etiqueta MÁS el dato, no en todo el bloque: si no, un pie de dos
   renglones lo empujaba hacia abajo y los iconos quedaban a distinta altura. */
.now-item h3 .i{position:absolute;left:.85rem;top:2.15rem;transform:translateY(-50%);
  width:1.7rem;height:1.7rem;color:var(--dim)}
.now-big{margin:0;font:700 1.5rem/1.15 var(--display);font-variant-numeric:tabular-nums}
.now-sub{margin:.2rem 0 0;font-size:.85rem;line-height:1.35;color:var(--haze)}
.now-status{border-left:4px solid var(--lv0)}
.now-status--lv1{border-left-color:var(--lv1)}
.now-status--lv2{border-left-color:var(--lv2)}
.now-status--lv2 .now-big{color:var(--lv2)}
.now-status--lv1 .now-big{color:var(--lv1-valor)}
/* El reloj de noche va en el color cálido. En una web de tema claro «--hot» puede ser demasiado
   suave sobre la tarjeta: en Costa Rica daba 3,18 y solo pasaba por ser texto grande. Por eso
   es su propia variable. */
.now-clock.is-night .now-big{color:var(--hora-noche)}
/* En móvil, filas en vez de tarjetas: etiqueta a la izquierda, dato a la derecha y el pie debajo,
   a todo el ancho. Quita los fondos, las esquinas redondeadas y la mitad de la altura del bloque,
   que es lo que tapaba la cámara. */
@media (max-width:47.99rem){
  .now-datos{grid-template-columns:1fr;gap:0}
  .now-item{grid-template-columns:1fr auto;align-items:baseline;gap:.1rem .7rem;
    padding:.5rem .15rem .5rem 1.6rem;background:none;border-bottom:1px solid var(--rule);border-radius:0}
  .now-item:last-of-type{border-bottom:0}
  .now-item h3{grid-column:1;grid-row:1;font-size:.95rem;color:var(--haze)}
  .now-item h3 .i{left:0;top:.55rem;transform:none;width:1.05rem;height:1.05rem}
  .now-big{grid-column:2;grid-row:1;text-align:right;font-size:1.3rem}
  .now-sub{grid-column:1/-1;grid-row:2;margin:0;font-size:.84rem;color:var(--dim)}
  /* La barra de color del nivel de actividad se queda: es el único dato con semáforo. El icono
     se aparta de ella para no montarse encima. */
  .now-status{padding-left:1.9rem}
  .now-status h3 .i{left:.3rem}
}
.ad{margin:1.5rem 0;min-height:100px}

.read{display:grid;gap:2rem;margin:2.2rem 0 1rem}
@media (min-width:60rem){.read{grid-template-columns:minmax(0,1fr) 17.5rem;align-items:start}.facts{position:sticky;top:1rem}}
.prose{max-width:68ch}
.prose h2{margin-top:1.6em;font-size:1.65rem}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 1em}
.prose li{margin:.25em 0}
.prose strong{font-weight:600}
.prose--after{margin:2rem 0 3rem}
.facts{border-top:3px solid var(--rule);padding-top:.8rem}
.facts h2{font-size:1.25rem;margin-bottom:.6rem}
.facts dl{margin:0}
.facts dl div{padding:.45rem 0;border-bottom:1px solid var(--rule)}
.facts dl div:last-child{border-bottom:0;padding-bottom:0}
.facts dt{font:500 .95rem/1.2 var(--display);color:var(--dim)}
.facts dd{margin:.1rem 0 0;font-size:.97rem}
.near{margin:1.5rem 0}
.near-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (min-width:48rem){.near-list{grid-template-columns:repeat(4,1fr)}}
.near-list a{display:grid;gap:.3rem;color:var(--snow);text-decoration:none}
.near-list img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);background:var(--deep2)}
.near-name{font:600 1.15rem/1.1 var(--display)}
.near-km{font-size:.85rem;color:var(--dim)}
.near-list a:hover .near-name{text-decoration:underline}
.minimap{margin:2.2rem 0 1rem;max-width:52rem}
.minimap-h{font-size:1.5rem}
.minimap-cap{margin:.5rem 0 0;font:500 1.05rem/1.2 var(--display);color:var(--haze)}
/* Tabla de datos. Vivia en el modulo de terremotos, pero la usan tambien las paginas de hora,
   atardecer y tiempo, que son del motor: en una web sin ese modulo la tabla se quedaba sin
   estilo ninguno. Aqui la ve todo el mundo. */
.qk-table{overflow-x:auto}
.qk-table table{width:100%;border-collapse:collapse;font-size:.9rem}
.qk-table th,.qk-table td{text-align:left;padding:.35rem .5rem;border-bottom:1px solid var(--rule)}
.qk-table th{font:500 .9rem var(--display);color:var(--haze)}
/* El enlace de la celda se alto hasta los 24 px que pide la norma para pulsar con el dedo. El
   margen negativo devuelve el hueco, asi que la tabla se ve exactamente igual que antes. */
.qk-table td a{display:inline-block;padding:.3rem 0;margin:-.3rem 0}

.links{margin:1rem 0 3rem;font-size:.88rem;color:var(--dim)}
/* Era un acordeón que no lo parecía: solo texto, sin nada que invitara a pulsarlo. Con su
   flecha, que gira al abrirlo. El marcador nativo está quitado más arriba, así que no se duplica. */
.links summary{display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.3rem 0;font:500 1rem/1.2 var(--display);color:var(--haze)}
.links summary::before{content:"";flex:none;width:.45rem;height:.45rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease}
.links[open]>summary::before{transform:rotate(45deg)}
.links summary:hover{color:var(--hot)}
@media (prefers-reduced-motion:reduce){.links summary::before{transition:none}}
.links ul{margin:.6rem 0 0;padding-left:1.1em}
.links a{color:var(--haze)}

/* ── Fuentes ── */
.src-list{list-style:none;padding:0;margin:0 0 3rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr))}
.src{background:var(--deep);border-radius:var(--r);padding:1rem 1.1rem}
.src h2{font-size:1.35rem;margin-bottom:.3rem}
.src h2 a{color:var(--snow)}
.src p{font-size:.95rem;color:var(--texto-suave)}
.src dl{margin:0;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;font-size:.85rem}
.src dt{color:var(--dim);font-family:var(--display)}
.src dd{margin:0}
.nf{padding:4rem var(--pad) 5rem}
.nf p:last-child{display:flex;gap:.7rem;flex-wrap:wrap}

/* ── Pie ── */
.foot{background:var(--pie-fondo);border-top:1px solid var(--rule);margin-top:3rem}
.foot-in{max-width:var(--max);margin:0 auto;padding:2.2rem var(--pad) 2.6rem;display:grid;gap:1rem;font-size:.9rem;color:var(--pie-texto)}
.foot-cols{display:grid;gap:1.6rem 2.4rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));align-items:start}
.foot-marca{grid-column:span 1;min-width:12rem}
.foot-brand{font:700 1.2rem/1.3 var(--display);color:var(--pie-fuerte);margin:0 0 .4rem}
.foot-sub{margin:0;max-width:22rem}
.foot-col-h{font:600 1rem/1.2 var(--display);color:var(--pie-fuerte);margin:0 0 .5rem}
/* Los enlaces del pie van uno debajo de otro y en movil se pulsan con el dedo: el hueco se pasa
   del espacio entre ellos al relleno de cada uno, para que cada enlace tenga sus 24 px de alto. */
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.foot-col a{display:inline-block;padding:.3rem 0;color:var(--pie-texto);text-decoration:none}
.foot-col a:hover{color:var(--pie-fuerte);text-decoration:underline}
.foot-credits,.foot-c{margin:0;max-width:52rem}
.foot a{color:var(--pie-texto)}

/* ── Mapa interactivo ── */
.gmap{position:relative}
.gm-view{position:relative;aspect-ratio:16/9;background:var(--sea);border-radius:var(--r);overflow:hidden;touch-action:pan-x pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
/* La forma de cada mapa, por dónde va. NO la decide el territorio: el 23/09/2026 se probó a
   que la caja se ajustara a lo que enseña y Edgar lo paró. Que sobre mapa por los lados o por
   arriba con terreno que no viene al caso no es un problema —no se puede acercar más sin dejar
   fuera algún lugar—; un mapa alargado o estrecho sí lo es: queda mal y se arrastra peor.

   Son DOS proporciones, no seis. Había 2/1 para el mapa ancho, 19/10 para el de una sección y
   16/9 para el de la portada en pantalla grande: tres valores entre 1,78 y 2,00, indistinguibles
   a ojo y tres cosas que mantener. Ahora el mapa ancho es 16/9, que es con lo que está hecho el
   resto del diseño —miniaturas, reproductor, tarjetas—, y el de zona y ficha, 3/2, que es más
   contenido porque va dentro de una columna. En móvil, cuadrado los dos. */
.gmap--zone .gm-view{aspect-ratio:3/2}
/* La portada y la página de una sección van anchas aunque su mapa tenga encuadre —una web de un
   país lo tiene siempre—, así que DÓNDE va el mapa manda sobre QUÉ mapa es. Estas dos van después
   de la de arriba a propósito: empatan en especificidad y gana la última. */
.atlas .gm-view,.atlas-map--wide .gm-view{aspect-ratio:16/9}
/* El de una seccion es una franja ancha: con 3/2 sobraba medio mapa de alto y el dibujo quedaba
   pequeno en el centro. Este alto es el del propio encuadre, asi que no sobra ni falta nada. */
/* En móvil vertical todos los mapas son cuadrados: al acercar hay alto suficiente; en la vista del mundo, el mar arriba y abajo */
/* En móvil, cuadrado siempre: decisión de Edgar, y al acercar hace falta alto. Van los cuatro
   selectores porque los de arriba llevan dos clases y con uno solo no ganaban. */
@media (max-width:40rem){
  .gm-view,.gmap--zone .gm-view,.atlas .gm-view,.atlas-map--wide .gm-view{aspect-ratio:1/1}
}
.gm-view:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.gm-view>svg{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
.gm-view.is-drag>svg{cursor:grabbing}
.gm-view>svg image{opacity:1}
.map-land{fill:var(--land)}
.map-lake{fill:var(--sea)}
.map-border{fill:none;stroke:var(--map-frontera);stroke-width:.7px;vector-effect:non-scaling-stroke;stroke-linejoin:round;display:none;opacity:.8}
.show-b .map-border{display:inline}
svg[data-lod="lejos"] .lod-cerca,svg[data-lod="cerca"] .lod-lejos{display:none}
.dot{cursor:pointer}
.dot text{display:none;pointer-events:none}
.dot.lbl text,.dot:hover text,.dot:focus-visible text,.dot.is-sel text{display:inline}
.dot:focus{outline:none}
.dot:focus-visible .dot-core,.dot.is-sel .dot-core{stroke:var(--hot);stroke-width:3px}
.hide-0 .dot--lv0,.hide-1 .dot--lv1,.hide-2 .dot--lv2{display:none}
/* Los controles, en UNA COLUMNA abajo a la derecha, como en Google Maps. Hasta el 23/09/2026
   iban arriba en forma de L —el par de zoom en vertical y los otros dos en fila al lado—, y esa
   L ocupa dos esquinas del mapa: más superficie tapada y más trozo de mapa que no se puede
   arrastrar. En columna gastan una tira estrecha y dejan el mapa libre.
   «column-reverse» con el orden del HTML deja, de arriba abajo: pantalla completa, centrar y
   el par de zoom; los de zoom quedan abajo, que es donde cae el pulgar. */
.gm-ctl{position:absolute;right:.6rem;bottom:.6rem;z-index:2;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:.45rem}
.gm-ctl button,.gm-zoom{background:var(--ctl);border:1px solid var(--rule);border-radius:6px;color:var(--snow)}
.gm-ctl button{width:2.6rem;height:2.6rem;display:grid;place-items:center;cursor:pointer;padding:0}
.gm-ctl button:hover{border-color:var(--haze);color:var(--hot)}
.gm-zoom{display:grid;overflow:hidden}
.gm-zoom button{border:0;border-radius:0;background:transparent}
.gm-zoom button+button{border-top:1px solid var(--rule)}
.gmap:not(.is-live) .gm-ctl{display:none}
.gm-hint{position:absolute;inset:0;z-index:4;margin:0;display:grid;place-items:center;padding:1rem;text-align:center;background:rgba(var(--chapa-rgb),.6);color:var(--sobre-velo);font:600 1.2rem/1.2 var(--display);opacity:0;transition:opacity .2s;pointer-events:none}
.gm-hint.on{opacity:1}
.gm-pop{position:absolute;z-index:5;width:16rem;background:var(--deep);border:1px solid var(--rule);border-radius:8px;box-shadow:0 12px 32px rgba(var(--sombra-rgb),.55);overflow:hidden}
.gm-pop-img{position:relative;display:block;aspect-ratio:16/9;background:var(--deep2)}
.gm-pop-img img{width:100%;height:100%;object-fit:cover}
.gm-pop .card-flag.lv-2{background:var(--lv2);color:var(--abyss)}
.gm-pop-b{padding:.65rem .8rem .8rem}
.gm-pop-n{font:600 1.3rem/1.1 var(--display);margin:0 0 .25rem}
.gm-pop-m{font-size:.86rem;line-height:1.35;color:var(--haze);margin:0 0 .6rem}
.gm-go{padding:.55rem .9rem;font-size:1.02rem}
.gm-x{position:absolute;right:.35rem;top:.35rem;z-index:2;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--rule);background:var(--ctl);color:var(--snow);font-size:1.3rem;line-height:1;cursor:pointer}
.gm-pop.is-sheet{left:.5rem!important;right:.5rem;bottom:.5rem;top:auto!important;width:auto;display:grid;grid-template-columns:minmax(0,9rem) 1fr;align-items:center}
.gm-pop.is-sheet .gm-pop-img{height:100%;aspect-ratio:auto;min-height:6.5rem}
.gm-pop.is-sheet .gm-pop-n{font-size:1.15rem;padding-right:1.8rem}
.gm-pop.is-sheet .gm-pop-m{margin-bottom:.45rem}
.gm-bar{display:grid;gap:.6rem;margin-top:.7rem}
.gm-legend{display:flex;flex-wrap:wrap;gap:.4rem .5rem}
.gm-legend button,.gm-legend span.lg{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border:1.5px solid var(--rule);border-radius:2rem;background:transparent;color:var(--snow);font:500 1rem/1 var(--display);cursor:pointer}
.gm-legend button span,.gm-legend span.lg span{color:var(--dim)}
.gm-legend span.lg{cursor:default;border-color:transparent;padding-left:0;padding-right:.4rem}
.gm-legend .is-dim{opacity:.4}
.gm-legend button[aria-pressed=false]{opacity:.45;text-decoration:line-through}
.gmap:not(.is-live) .gm-legend button{pointer-events:none;border-color:transparent;padding-left:0}
.gm-chips{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.2rem;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
/* En tabletas y ordenador, los botones de región pasan a varias líneas: todos a la vista */
@media (min-width:40.01rem){.gm-chips{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}}
@media (max-width:40rem){.gm-chips{margin:0 calc(-1*var(--pad));padding:0 var(--pad) .2rem}}
.gm-chips::-webkit-scrollbar{display:none}
.gm-chips button,.gm-chips a{flex:none;padding:.42rem .8rem;border-radius:2rem;border:1.5px solid var(--rule);background:var(--deep);color:var(--haze);font:500 .98rem/1 var(--display);cursor:pointer;text-decoration:none}
.gm-chips a[aria-current]{border-color:var(--acento);color:var(--snow)}
.gm-chips button:hover{color:var(--snow);border-color:var(--haze)}
.gm-chips button[aria-pressed=true]{background:var(--snow);border-color:var(--snow);color:var(--night)}
.gmap:not(.is-live) .gm-chips{display:none}
.gmap.is-full{position:fixed;inset:0;z-index:300;margin:0;background:var(--night);display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) max(.6rem,env(safe-area-inset-bottom)) env(safe-area-inset-left)}
.gmap.is-full .gm-view{flex:1;aspect-ratio:auto;border-radius:0;touch-action:none}
.gmap.is-full .gm-bar{padding:0 .8rem}
.gmap.is-full .gm-chips{margin:0;padding:0}


/* ── Ficha: aviso compacto, botón Actualizar e iconos ── */
.off-note{background:var(--deep);border-left:4px solid var(--lv1);border-radius:var(--r);padding:.8rem 1rem;margin:0 0 1rem}
.off-note p{margin:0;font-size:.97rem}
.frame.is-hidden-down{display:none}
.stage-btns{display:flex;gap:.5rem;flex:none}
.fs--refresh.is-new{border-color:var(--acento);color:var(--hot);box-shadow:0 0 0 3px rgba(var(--acento-rgb),.2)}
.frame-new{position:absolute;right:.6rem;top:.6rem;z-index:2;padding:.3rem .6rem;border-radius:3px;background:var(--acento);color:var(--abyss);font:600 .92rem/1.1 var(--display)}
.now-status--lv2 h3 .i{color:var(--lv2)}.now-status--lv1 h3 .i{color:var(--lv1)}
.band-more{margin:1.2rem 0 0;font:500 1.08rem/1.3 var(--display)}
.band-sub{color:var(--haze);font-size:.95rem;margin:-.3rem 0 1rem}
.credits{margin-top:1.4rem}
.credits a{color:var(--dim)}
.near{margin:1.2rem 0 1.6rem}
@media (max-width:40rem){
.gm-ctl button{width:2.4rem;height:2.4rem}
}

/* ── Cámaras que no emiten: foto del lugar, mensaje claro y alternativas ── */
.offair{position:relative;aspect-ratio:16/9;background:var(--deep2);overflow:hidden;display:grid;align-items:end}
.offair-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.55) brightness(.5)}
/* El velo ya no empieza en transparente: el titular va justo arriba del recuadro y sobre una foto
   de dia se quedaba en 2,1 de contraste. */
.offair-box{position:relative;margin:0;padding:1rem 1.1rem 1.1rem;color:var(--texto-tenue);background:linear-gradient(180deg,rgba(var(--tapa-rgb),.58),rgba(var(--tapa-rgb),.90) 34%)}
.offair-h{margin:0 0 .3rem;font:600 1.35rem/1.15 var(--display);color:var(--sobre-velo)}
.offair-t{margin:0;font-size:.95rem;line-height:1.45;color:var(--texto-tenue);max-width:44rem}
.offair-act{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0 0}
.offair-act .btn{padding:.5rem .9rem;font-size:1rem}
.btn-ghost{background:transparent;border:1.5px solid var(--sobre-velo-borde);color:var(--sobre-velo)}
@media (max-width:35rem){.offair{aspect-ratio:auto;min-height:15rem}.offair-h{font-size:1.2rem}.offair-t{font-size:.9rem}}
.frame.is-off,.frame:has(.offair){aspect-ratio:auto;background:transparent}
.pick-thumb{position:relative;display:block}
.pick-off{position:absolute;left:.35rem;bottom:.35rem;padding:.12rem .4rem;border-radius:3px;background:rgba(var(--tapa-rgb),.85);color:var(--texto-tenue);font:500 .8rem/1.2 var(--display)}
.pick-opt.is-off img{filter:grayscale(.7) brightness(.6)}
.pick-opt.is-off .pick-kind{color:var(--dim)}
/* Arriba a la derecha, no abajo: abajo a la izquierda esta la hora del sitio y en una tarjeta
   estrecha se montaban una encima de otra y no se leia ninguna. Arriba a la derecha no hay nada. */
.card-off{position:absolute;right:.5rem;top:.5rem;padding:.2rem .5rem;border-radius:3px;background:rgba(var(--tapa-rgb),.82);color:var(--texto-tenue);font:500 .85rem/1.2 var(--display)}
@media (min-width:62rem){.pick-opt .pick-thumb{grid-row:1/3}}
.fs--sound[aria-pressed=true]{border-color:var(--hot);color:var(--hot)}
@media (min-width:40.01rem){.filters{flex-wrap:wrap;overflow:visible;margin:0;padding:.2rem 0 1rem}}

/* ── Respuesta «¿está en erupción?» y terremotos cercanos ── */
.facts2{display:grid;gap:1.2rem;margin:1.6rem 0 1.4rem}
@media (min-width:60rem){.facts2{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:start}}
/* Recuadro de los bloques que los módulos añaden a la ficha. Se queda en el motor porque lo usan
   varios; lo propio de cada módulo está en assets/modulos/<nombre>.css */
.qa,.quakes{background:var(--deep);border:1px solid var(--rule);border-radius:var(--r);padding:1rem 1.1rem}
.qa h2,.quakes h2{font-size:1.35rem;margin:0 0 .5rem}
.qa p,.quakes p{margin:0 0 .5rem;font-size:.97rem}
.now-h{margin:0 0 .5rem;font-size:1.4rem}
.filter-search{margin:.2rem 0 .7rem}
.filter-search input{width:100%;max-width:26rem;padding:.6rem .85rem;border:1.5px solid var(--rule);border-radius:2rem;background:var(--deep);color:var(--snow);font:400 1rem var(--body)}
.filter-search input::placeholder{color:var(--dim)}
.filter-search input:focus-visible{outline:2px solid var(--hot);outline-offset:1px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}