@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:73.75rem; --r:6px;

  /* MAPA */
  --sea:#EEF4F8; --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);   /* ya no la usa el motor (1.10.0): los botones van con las --btn-* */

  /* BOTONES. El botón no sabe dónde está: lee estas variables, y cada superficie pone las suyas.
     Aquí van las de la página; más abajo, .hero y .offair-box ponen las de encima de una foto.
     El hover dice siempre de qué color va la letra: si no, manda «a:hover», que la pone en
     --hot, y en el hero eso era letra ámbar oscura sobre la foto oscura (Edgar, 30/09/2026). */
  --sobre-acento:#FFFFFF;          /* la letra encima del color de marca (oscura en un tema oscuro) */
  --acento-hover:var(--acento);    /* el color de marca con el ratón encima: más oscuro, ver @supports */
  --linea-clara:rgba(255,255,255,.8);   /* el filo de un botón encima de una foto */
  --btn-fondo:var(--deep); --btn-texto:var(--snow); --btn-linea:var(--dim);
  --btn-fondo-hover:var(--snow); --btn-texto-hover:var(--night); --btn-linea-hover:var(--snow);
  --btn-hot-fondo:var(--acento); --btn-hot-texto:var(--sobre-acento); --btn-hot-linea:var(--acento);
  --btn-hot-fondo-hover:var(--acento-hover); --btn-hot-texto-hover:var(--sobre-acento); --btn-hot-linea-hover:var(--acento-hover);
  --btn-ghost-fondo:var(--deep); --btn-ghost-texto:var(--snow); --btn-ghost-linea:var(--dim);
  --btn-ghost-fondo-hover:var(--snow); --btn-ghost-texto-hover:var(--night);

  /* 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;
}
/* El color de marca, un tercio más oscuro al pasar el ratón: la letra clara gana contraste. Un
   navegador que no sabe mezclar colores deja el botón como está, que es mejor que dejarlo sin
   fondo. Un tema oscuro (letra oscura sobre el acento) tiene que aclararlo: lo pone tema.py. */
@supports (color:color-mix(in srgb,red 50%,blue)){:root{--acento-hover:color-mix(in srgb,var(--acento) 68%,#000)}}
/* Encima de una foto o de un velo oscuro. El botón principal va en el color de marca con un filo
   blanco que lo separa de la foto, y el secundario en contorno blanco (decidido por Edgar mirando
   las cinco webs, 30/09/2026: letra de 5,7 a 8,4 y botón de 7,5 a 11,8 frente a la foto). */
.hero,.offair-box{
  --btn-fondo:var(--acento); --btn-texto:var(--sobre-acento); --btn-linea:var(--linea-clara);
  --btn-fondo-hover:var(--acento-hover); --btn-texto-hover:var(--sobre-acento); --btn-linea-hover:#FFFFFF;
  --btn-hot-linea:var(--linea-clara); --btn-hot-linea-hover:#FFFFFF;
  --btn-ghost-fondo:rgba(var(--chapa-rgb),.55); --btn-ghost-texto:#FFFFFF; --btn-ghost-linea:var(--linea-clara);
  --btn-ghost-fondo-hover:#FFFFFF; --btn-ghost-texto-hover:rgb(var(--chapa-rgb));
}
/* En el hero, sin velo detrás (motor 1.28.0), el botón principal va en el oscuro de la web con filo
   blanco, y blanco al pasar el ratón: contrasta con cualquier foto. Una web pone su oscuro de marca
   aquí mismo, en su sitio.css (Canarias, su azul marino). */
.hero{--btn-fondo:rgb(var(--chapa-rgb)); --btn-texto:#FFFFFF; --btn-linea:#FFFFFF;
  --btn-fondo-hover:#FFFFFF; --btn-texto-hover:rgb(var(--chapa-rgb)); --btn-linea-hover:#FFFFFF}
/* Y una sombra suave alrededor, que lo despega de la foto: sobre piedra o arena de tono medio, el
   oscuro del botón y la foto se parecían (2,5 en Canarias y 2,8 en Galicia en el móvil, botones.py) */
.hero .btn{box-shadow:0 2px 14px rgba(0,0,0,.45)}

*,*::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-alto» es lo que mide la franja sin resultados (campo + relleno + sus dos rayas): el panel
     del menú se coloca justo debajo, así que tiene que ser un número fijo. */
  .top{--ts-alto:calc(4.15rem + 2px)}
  .ts-caja{display:none;position:absolute;z-index:45;top:100%;left:0;right:0;min-height:var(--ts-alto);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;height:2.75rem;padding:0 .9rem}
  /* La lupa, con el buscador abierto, es su botón de cerrar: un aspa */
  .ts.is-abierta .ts-abrir .i{display:none}
  .ts.is-abierta .ts-abrir::before,.ts.is-abierta .ts-abrir::after{content:"";grid-area:1/1;width:1.15rem;border-top:2px solid;transform:rotate(45deg)}
  .ts.is-abierta .ts-abrir::after{transform:rotate(-45deg)}
  .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;inset-inline-start:-999px;top:0;background:var(--skip-fondo);color:var(--skip-texto);padding:.6rem 1rem;z-index:99}
.skip:focus{inset-inline-start:.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;position:relative;align-self:stretch;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)}
/* La cuenta de «en erupción» es un DATO, no un adorno: va en el color del nivel más alto de la
   escala de actividad, no en el de marca. En una web sin escala, «--lv2» es el color de marca, así
   que para ella no cambia nada. Se vio al poner a Nature Live Cams una marca verde: la chapa que
   cuenta volcanes en erupción salía verde, que es justo lo contrario de lo que dice. */
.nav-n{display:inline-grid;place-items:center;min-width:1.45em;height:1.45em;margin-inline-start:.35em;padding:0 .35em;border-radius:1em;background:var(--lv2);color:var(--abyss);font-weight:700;font-size:.8em}
details>summary{list-style:none}
details>summary::-webkit-details-marker{display:none}
.nav>a,.drop>.drop-t{white-space:nowrap}
.drop{position:relative;display:flex}
.drop>.drop-t::before{content:"";display:inline-block;width:.4em;height:.4em;margin:-.2em 0 0;margin-inline-start:.45em;order:2;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* El panel se despliega con el ratón encima y también al llegar con el tabulador, sin JavaScript.
   site.js añade lo que el CSS no puede: «aria-expanded», que el botón lo abra y lo cierre con el
   dedo y con el teclado («is-abierto») y cerrarlo con Escape («is-cerrado»).
   Nunca más alto que la ventana ni más ancho que la página: 26 países en una columna medían 850 px.
   El panel tarda 0,3 s en irse: yendo en diagonal hacia un enlace lejano el ratón sale un instante
   del botón, y sin ese margen el panel desaparecía antes de llegar (no se alcanzaba ni la mitad). */
.drop-p{display:block;visibility:hidden;transition:visibility 0s linear .3s;position:absolute;z-index:50;inset-inline-end:0;top:100%;min-width:15rem;max-width:calc(100vw - 2*var(--pad));max-height:calc(100vh - 6rem);overflow:auto;padding:.5rem 0;background:var(--deep);border:1px solid var(--rule);border-radius:var(--r);box-shadow:0 12px 28px rgba(var(--sombra-rgb),.28);font-size:1.02rem;line-height:1.25}
.drop-p--grupos{display:grid}
.drop:hover>.drop-p,.drop:focus-within>.drop-p,.drop.is-abierto>.drop-p{visibility:visible;transition-delay:0s}
/* El que tiene el ratón encima va delante: si no, el que se está yendo tapaba al de al lado */
.drop:hover>.drop-p{z-index:51}
/* Un puente para el ratón: bajando en línea recta de «Explorar» a su primer enlace se pasaba por
   encima del botón de al lado, se abría su panel y el clic caía en otro sitio (en cuatro webs).
   Mientras el ratón está en un botón, una franja invisible a su izquierda, en el borde de abajo
   de la barra, sigue siendo suya. Solo con ratón: el dedo no pasa por encima de nada. Los paneles
   anchos se alinean con la barra (abajo) y no la necesitan. */
@media (hover:hover) and (pointer:fine){
  .drop:hover::after{content:"";position:absolute;z-index:52;inset-inline-end:100%;bottom:0;width:10rem;height:.75rem}
  .drop:has(>.drop-p--cols)::after,.drop:has(>.drop-p--grupos)::after,.drop.is-cerrado::after{display:none}
}
/* Con el teclado no hay diagonal que proteger: con el foco en la barra el panel se va al momento
   (si no, tabulando se veían dos a la vez durante 0,3 s) */
.nav:focus-within .drop-p{transition-delay:0s}
.drop.is-cerrado>.drop-p{visibility:hidden;transition-delay:0s}
/* Un panel ancho se alinea con el borde de la barra, no con su botón: así no puede salirse de la
   página por el otro lado. Sin «:has» (navegadores viejos) se queda bajo su botón, como antes. */
.drop:has(>.drop-p--cols),.drop:has(>.drop-p--grupos){position:static}
.drop-p ul{list-style:none;margin:0;padding:0}
.drop-p li{break-inside:avoid}
.drop-p a{display:block;padding:.45rem 1rem;color:var(--snow);text-decoration:none}
.drop-p a:hover{background:var(--deep2)}
.drop-p a[aria-current]{color:var(--hot)}
.drop-p a:focus-visible{outline-offset:-2px}
/* Una lista larga, en columnas */
.drop-p--cols{width:min(44rem,calc(100vw - 2*var(--pad)))}
.drop-p--cols>ul{columns:3 12rem;column-gap:0}
/* Las zonas bajo su sección: un bloque por sección, tantos por fila como quepan */
.drop-p--grupos{width:min(46rem,calc(100vw - 2*var(--pad)));grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));gap:.4rem 0;align-items:start}
.nav-g .nav-gh{font-weight:600}
/* Grupos de secciones (motor 1.43.0): el título del grupo no es un enlace —no hay página detrás—, así
   que se distingue de las secciones como el del pie: pequeño, en versalitas y en gris. Un grupo de una
   sola sección lleva la sección de cabecera, como enlace */
.drop-p span.nav-gh{display:block;padding:.6rem 1rem .15rem;font:600 .76rem/1.3 var(--display);text-transform:uppercase;letter-spacing:.07em;color:var(--dim)}
.drop-p a.nav-gh{padding-block:.6rem .3rem}
.drop-p .nav-g li a{padding-block:.3rem;padding-inline:1.7rem 1rem;font-size:.96em}
/* El gris de los grupos no puede taparle a la página actual su color de «estás aquí», que es uno
   solo para todo panel: `.drop-p a[aria-current]`, o el que ponga la web (Canarias, 08/10/2026) */
.drop-p .nav-g li a:not([aria-current]){color:var(--haze)}
/* «Todos los sitios», al final y separado: lleva al mapa de la portada */
.drop-p .nav-todo:not(:first-child),.drop-p .drop-fin{border-top:1px solid var(--rule);margin-top:.4rem;padding-top:.3rem}
.drop-p .drop-fin{grid-column:1/-1}
.drop-p .drop-fin .nav-todo{border:0;margin:0;padding:0}
.menu{position:static}
.menu>summary{display:flex;align-items:center;gap:.5rem;cursor:pointer;font:600 1.1rem/1 var(--display);padding:.45rem .2rem;min-height:2.6rem}
.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}
/* Abierto, el mismo botón es el de cerrar: las tres rayas pasan a un aspa y dice «Cerrar».
   Los dos rótulos ocupan la misma celda y solo se ve uno: el botón mide siempre lo que el más
   largo, en cualquier idioma y sin medir nada, y la lupa de al lado no se mueve al abrirlo. */
.menu-r{display:inline-grid}
.menu-r>*{grid-area:1/1}
.menu-c,.menu[open]>summary .menu-t{visibility:hidden}
.menu[open]>summary .menu-c{visibility:visible}
.menu[open]>summary .menu-lines{border-color:transparent}
.menu[open]>summary .menu-lines::before{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid;transform:rotate(45deg)}
.menu[open]>summary .menu-lines::after{transform:rotate(-45deg)}
.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;padding-inline:max(var(--pad),calc((100% - var(--max))/2 + var(--pad)));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 .nav-hot{color:var(--hot)}
/* Dónde estoy, igual que en la barra: una raya del color de la marca debajo */
.menu-panel a[aria-current]{text-decoration:underline;text-decoration-color:var(--acento);text-decoration-thickness:2px;text-underline-offset:.3em}
/* Las listas, a dos columnas; «Explorar», a una, que sus textos son largos. El número de lugares de
   una zona va FUERA del enlace: no es parte de su nombre. */
.menu-panel ul{list-style:none;margin:0;padding:0 0 .6rem;display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.menu-panel ul.menu-1{grid-template-columns:1fr}
.menu-panel li{display:flex;align-items:baseline;gap:.5rem;font-size:1.05rem}
.menu-panel li a{flex:1;color:var(--haze);padding:.5rem 0}
.menu-panel .nav-c{color:var(--dim);font-variant-numeric:tabular-nums}
.menu-panel li.nav-todo{grid-column:1/-1}
.menu-panel li.nav-todo a{color:var(--snow)}
.menu-h{margin:.8rem 0 0;color:var(--dim);font-size:.95rem}
/* ABIERTO, EL MENÚ OCUPA LA PANTALLA ENTERA (Edgar, 01/10/2026). La cabecera se queda arriba, con
   el botón de cerrar donde estaba el de abrir, y el panel llena el resto con su propio
   desplazamiento: «100dvh» menos lo que mide la cabecera, que es el 100 % de su caja. La página
   de debajo se queda quieta, así que el menú no se puede «perder» bajando. Todo con CSS: las reglas
   de «cabecera fija» y «página quieta» van más abajo, junto a las que deciden cuándo se ve el
   menú. Un navegador sin «:has» (anterior a 2024) se queda con el panel bajo la cabecera, como antes. */
.menu[open]>.menu-panel{height:calc(100vh - 100%);height:calc(100dvh - 100%);overflow-y:auto;overscroll-behavior:contain;align-content:start;padding-bottom:calc(1.4rem + env(safe-area-inset-bottom,0px))}
/* Divisores suaves del menú (Edgar, 01/10/2026): entre las entradas principales y al final de
   cada submenú. Una web que no los quiera los quita en su sitio.css. */
.menu-panel>a{border-bottom:1px solid var(--rule);padding:.6rem 0}
.menu-panel>ul,.menu-g{border-bottom:1px solid var(--rule)}
/* Un grupo largo (26 países, 16 zonas) va plegado en una fila con su número; se abre con un toque,
   sin salir del menú, y sale ya abierto si la página que se está viendo es de dentro. */
.menu-g>summary{display:flex;align-items:center;gap:.6rem;cursor:pointer;padding:.6rem 0;color:var(--snow)}
.menu-g>summary span{color:var(--dim);font-size:.85em;font-variant-numeric:tabular-nums}
.menu-g>summary::after,.foot-g>summary::after{content:"";flex:none;margin-inline-start:auto;width:.5rem;height:.5rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s ease}
.menu-g[open]>summary::after,.foot-g[open]>summary::after{transform:rotate(-135deg)}
@media (prefers-reduced-motion:reduce){.menu-g>summary::after,.foot-g>summary::after{transition:none}}
.menu-panel .nav-gh{display:block;font-size:1.05rem;padding:.45rem 0 .1rem;color:var(--snow)}
.menu-panel span.nav-gh{font:600 .78rem/1.3 var(--display);text-transform:uppercase;letter-spacing:.07em;color:var(--dim);padding-top:.8rem}
/* Las zonas bajo su sección, a una columna: «Santa Cruz y La Laguna» no cabe en media pantalla */
.menu-panel .nav-g ul{grid-template-columns:1fr;padding-bottom:.35rem}
/* Desde qué ancho se enseña la barra. Lo decide el motor según lo que mide la de cada web
   («top--d56», «d64», «d70», «d74», ver NAV_TRAMOS en nav.php): por debajo se usa el menú, que en
   esos anchos se maneja mejor que una barra apretada. Antes cada web lo arreglaba a mano en su
   sitio.css, con un corte que el motor no conocía. */
/* Con la barra a la vista, la marca no encoge: si falta sitio, el que cede es el buscador */
@media (min-width:56rem){.nav{display:flex}.menu{display:none}.brand{flex:none}}
@media (min-width:56rem) and (max-width:63.99rem){.top--d64 .nav,.top--d70 .nav,.top--d74 .nav{display:none}.top--d64 .menu,.top--d70 .menu,.top--d74 .menu{display:block}}
@media (min-width:64rem) and (max-width:69.99rem){.top--d70 .nav,.top--d74 .nav{display:none}.top--d70 .menu,.top--d74 .menu{display:block}}
@media (min-width:70rem) and (max-width:73.99rem){.top--d74 .nav{display:none}.top--d74 .menu{display:block}}
/* Con el menú abierto: la cabecera, fija arriba, y la página, quieta. Solo donde el menú se ve (los
   mismos anchos de arriba): si se quedara abierto y escondido al ensanchar la ventana, no debe
   bloquear nada. «scrollbar-gutter» guarda el hueco de la barra de desplazamiento en ordenador. */
@media (max-width:55.99rem){.top:has(details.menu[open]){position:sticky;top:0}html:has(details.menu[open]){overflow:hidden;scrollbar-gutter:stable}}
@media (min-width:56rem) and (max-width:63.99rem){:is(.top--d64,.top--d70,.top--d74):has(details.menu[open]){position:sticky;top:0}html:has(:is(.top--d64,.top--d70,.top--d74) details.menu[open]){overflow:hidden;scrollbar-gutter:stable}}
@media (min-width:64rem) and (max-width:69.99rem){:is(.top--d70,.top--d74):has(details.menu[open]){position:sticky;top:0}html:has(:is(.top--d70,.top--d74) details.menu[open]){overflow:hidden;scrollbar-gutter:stable}}
@media (min-width:70rem) and (max-width:73.99rem){.top--d74:has(details.menu[open]){position:sticky;top:0}html:has(.top--d74 details.menu[open]){overflow:hidden;scrollbar-gutter:stable}}
/* Red de seguridad: el ancho de la barra se estima en el servidor. Si la barra ya pintada no cabe
   (letra del navegador ampliada, palabras anchas, una marca larga), site.js pone esta clase. */
.top.top--estrecha .nav{display:none}.top.top--estrecha .menu{display:block}
.top--estrecha:has(details.menu[open]){position:sticky;top:0}html:has(.top--estrecha details.menu[open]){overflow:hidden;scrollbar-gutter:stable}
/* EL BUSCADOR Y EL MENÚ COMPARTEN PANEL (Edgar, 01/10/2026). «Menú» abre la misma franja del
   buscador que abre la lupa, en el mismo sitio y con el mismo aspecto, y debajo las opciones. Así
   se pasa de uno a otro (lupa, menú, lupa) sin que la franja se mueva ni desaparezca: solo cambia
   lo de debajo. Pulsar dos veces el mismo botón lo cierra todo. Solo donde hay lupa (menos de
   60rem) y si el buscador funciona (su script pone «ts--lista»); si no, el menú va solo. */
@media (max-width:59.99rem){
  .top:has(details.menu[open]) .ts--lista .ts-caja{display:block}
  .top:has(.ts--lista) .menu[open]>.menu-panel{top:calc(100% + var(--ts-alto));height:calc(100vh - 100% - var(--ts-alto));height:calc(100dvh - 100% - var(--ts-alto))}
}
/* Pantallas muy estrechas (menos de 360 px): marca, lupa y «Menú» no cabían en una línea y el
   botón quedaba fuera. Menos hueco y, por debajo, el botón solo con su icono (el nombre sigue ahí
   para un lector de pantalla). */
@media (max-width:23.4rem){.top-in{gap:.5rem}}
@media (max-width:22.49rem){
  .menu-r{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .menu>summary{min-width:2.6rem;justify-content:center}
}

/* ── Botones ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.15rem;border:1.5px solid var(--btn-linea);border-radius:2rem;color:var(--btn-texto);text-decoration:none;font:600 1.1rem/1 var(--display);letter-spacing:.01em;background:var(--btn-fondo);cursor:pointer}
.btn:hover,.btn:focus-visible{background:var(--btn-fondo-hover);border-color:var(--btn-linea-hover);color:var(--btn-texto-hover)}
.btn-hot{background:var(--btn-hot-fondo);border-color:var(--btn-hot-linea);color:var(--btn-hot-texto)}
.btn-hot:hover,.btn-hot:focus-visible{background:var(--btn-hot-fondo-hover);border-color:var(--btn-hot-linea-hover);color:var(--btn-hot-texto-hover)}
.btn-ghost{background:var(--btn-ghost-fondo);border-color:var(--btn-ghost-linea);color:var(--btn-ghost-texto)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--btn-ghost-fondo-hover);border-color:var(--btn-ghost-fondo-hover);color:var(--btn-ghost-texto-hover)}

/* ── 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%}
/* La vista previa (32 px) debajo de la foto: difuminada, y la foto la tapa al llegar */
.hero-previa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%;filter:blur(14px);transform:scale(1.08)}
/* EL HERO DE LA RED (Edgar, 08/10/2026, motor 1.28.0; era el de Canarias): la foto limpia, sin la
   caja velada, con un negro suave (20 %) encima que da contraste sin lavar los colores (un gris o un
   blanco sí los lavarían) y el fundido de abajo. «--hero-negro» es su opacidad: una web con una foto
   muy clara la sube en su sitio.css. El texto se separa con su sombra y la hora va en una placa. */
.hero{--hero-negro:.2}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(0,0,0,var(--hero-negro)),rgba(0,0,0,var(--hero-negro))),linear-gradient(180deg,transparent 82%,var(--night) 100%)}
.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)}
/* El bloque de letra pequeña del hero, junto y sin fondo: así una web puede velar SOLO este hueco
   en vez de la foto entera, y el velo le queda del tamaño de su contenido en cualquier pantalla.
   Sin que la web declare nada, esto no pinta nada: las webs que ya estaban no cambian. */
.hero-sub{display:inline-block;max-width:100%}
.hero-h{font-size:clamp(2.8rem,9.5vw,5.6rem);max-width:11ch;margin-bottom:.35em;text-shadow:0 1px 2px rgba(0,0,0,.55),0 3px 10px rgba(0,0,0,.6),0 10px 34px rgba(0,0,0,.45)}
.hero-p{max-width:36rem;font-size:1.12rem;color:var(--texto-foto);text-shadow:0 1px 2px rgba(0,0,0,.92),0 2px 8px rgba(0,0,0,.8),0 6px 22px rgba(0,0,0,.5)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.4rem 0 1.8rem}
/* La hora y el sol, en una placa del oscuro de la web: caen donde la foto se funde con la página, y
   ahí la sombra no basta */
.hero-datos{display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;margin:1.2rem 0 0;color:var(--texto-foto);width:fit-content;max-width:100%;padding:.65rem 1.1rem;border-radius:14px;background:rgba(var(--chapa-rgb),.84);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hero-dato{position:relative;padding-left:2.45rem}
.hero-dato .i{width:1.75rem;height:1.75rem;position:absolute;left:0;top:50%;transform:translateY(-50%)}
/* 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}
/* Siempre del color del texto de la chapa: el de noche iba en el color de acento, que sobre la
   chapa oscura no contrastaba (luna, nubes y lluvia de noche; Edgar, 01/10/2026). */
.is-night .i-noche{display:block}
.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)}
/* El agua en un azul grisáceo más claro que la tierra y la costa marcada (Edgar, 14/10/2026, motor 1.46.4; el #D7E9F7 de la 1.46.3 tenía la misma luz que la tierra y se confundía): con el mar en blanco, con zoom
   no se sabía qué era tierra y qué agua. Puntos y nombres llevan su propio borde blanco, que los separa
   de la tierra y del agua por igual (antes el de los nombres era el color del agua) */
.dot circle{fill:var(--lv0);stroke:var(--map-halo,#fff);stroke-width:2px;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}
/* Los puntos de cámara de una ficha (motor 1.56.0): más pequeños y más apagados que los de los
   lugares, que son las fichas a las que se va (Edgar, 26/10/2026: los anillos destacaban más que los
   lugares). La que se ve, en el color vivo y con su nombre, pero del mismo tamaño */
.dot--cam circle{fill:var(--lv0);fill-opacity:.6;stroke:var(--map-halo,#fff);stroke-width:1px}
.dot--cam[aria-current="true"] circle{fill:var(--hot);fill-opacity:1;stroke-width:1.5px}
.dot--cam[aria-current="true"] text{display:inline;font-weight:600}
.dot:hover circle:not(.dot-halo),.dot:focus-visible circle{stroke:var(--snow);stroke-width:3px}
.dot--cam:hover circle,.dot--cam:focus-visible circle{stroke-width:2px;fill-opacity:1}
/* Las cámaras de los demás lugares (motor 1.59.0): escondidas; de cerca, site.js las cambia por su lugar */
.dot--sub{display:none}
.dot--sub.is-on{display:inline}
.dot.is-split{display:none}
.dot text{fill:var(--snow);font-family:var(--display);font-weight:600;paint-order:stroke;stroke:var(--map-halo,#fff);stroke-width:4.5px;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;flex-wrap:wrap;gap:.5rem;padding:.2rem 0 1rem}
.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}
/* Entradilla del bloque: va entre el encabezado y las tarjetas, que es donde se lee antes de
   mirarlas. Discreta —un punto por debajo del cuerpo y en texto suave— y con el ancho de lectura
   de la entradilla de la página, para que no compita con las fotos. */
.zone-lede{margin:.15rem 0 .9rem;max-width:44rem;color:var(--texto-suave);font-size:.98rem;line-height:1.5}
.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))}
.hijas ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem .6rem;margin:0 0 1.5rem;padding:0;font:500 1rem/1.2 var(--display)}
.hijas li{display:flex;align-items:baseline;gap:.4rem;padding:.4rem .85rem;border:1px solid var(--rule);border-radius:999px;background:var(--deep)}
.hijas a{color:var(--snow);text-decoration:none}
.hijas a:hover{text-decoration:underline}
.hijas li>span{color:var(--dim);font-size:.9em}
.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 h3{margin:1.1rem 0 .3rem;color:var(--dim);font:500 .95rem/1.3 var(--display)}
.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}}
/* Una cámara suelta en una página de contenido: sin selector, a todo el ancho */
.stage--suelta{margin:1rem 0 1.5rem}
@media (min-width:62rem){.stage--suelta{grid-template-columns:minmax(0,1fr)}}
.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}
/* TARJETAS QUE NO SON 16:9 (Edgar, 14/10/2026). La cámara insertada de 3Cat El Temps no es un vídeo
   sino una tarjeta: cabecera con su logo, la foto en 16:9 y un pie con los datos del tiempo, el
   nombre y la hora de la foto. En el marco 16:9 se cortaba por abajo y, en escritorio, dejaba un
   hueco blanco a la derecha. Medida el 14/10/2026: la tarjeta mide como mucho 686 px de ancho, la
   foto ocupa el ancho menos 16 px y lo demás suma 240 px fijos. El marco toma ese alto (el de la
   tarjeta entera, con su marca y sus datos, sin recortar nada) y la tarjeta va centrada. Antes de
   pulsar, la portada ya tiene ese alto: la página no salta. Otra tarjeta así: su selector y sus
   medidas aquí al lado. */
.frame:has(>.facade[data-embed*="/el-temps/"],>iframe[src*="/el-temps/"]){aspect-ratio:auto;container-type:inline-size}
.frame>.facade[data-embed*="/el-temps/"],.frame>iframe[src*="/el-temps/"]{position:relative;display:block;width:min(100%,686px);height:calc((min(100cqw,686px) - 16px)*.5625 + 240px);margin:0 auto}
.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)}
/* La imagen de ahora de una cámara de Windy, en la esquina de la portada: nunca más grande que la suya (400 px), como piden sus
   condiciones (Edgar eligió la grande, 16/10/2026). El botón de reproducir, en el centro y por encima: pisa
   su esquina, y por eso «Ahora» va abajo a la derecha (Edgar, 16/10/2026) */
.facade{--ahora:clamp(11rem,48%,400px)}
.facade:has(.facade-ahora) .facade-play{z-index:2}
.facade-ahora{position:absolute;top:.7rem;right:.7rem;width:var(--ahora);border-radius:4px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.45);outline:2px solid rgba(255,255,255,.85);outline-offset:-1px}
.frame.is-pfs .facade-ahora,.frame:fullscreen .facade-ahora{top:4.4rem}
.facade .facade-ahora img{display:block;width:100%;height:auto;aspect-ratio:400/224;opacity:1;filter:none}
.facade-ahora span{position:absolute;right:.35rem;bottom:.3rem;padding:.05rem .4rem;border-radius:3px;background:rgba(var(--chapa-rgb),.8);color:var(--texto-foto);font:600 .8rem/1.3 var(--display);letter-spacing:.02em}
.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}
/* Imagen que abre el directo en la web de su dueño: la imagen entera y el rótulo abajo, sin tapar el centro */
.frame-link--vivo{place-items:end start}
.frame-link--vivo img{object-fit:contain;opacity:1}
.frame-link--vivo span{margin:.7rem .8rem;padding:.4rem .7rem;font-size:1rem}
.frame-link--vivo:hover span,.frame-link--vivo:focus-visible span{background:var(--acento);color:var(--abyss)}
/* El aviso de cámara caída va sobre la franja oscura: en ámbar claro (unos 13:1). Con el naranja del
   tema, que es para fondo claro, daba 2,8 (medido el 30/09/2026, la primera vez que se enseñó) */
.frame-alert,.frame-reserva{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:#FFE3B3}
.frame.is-pfs{position:fixed;inset:0;z-index:100;aspect-ratio:auto;margin:0;border-radius:0}
.has-pfs{overflow:hidden}
.frame:fullscreen{border-radius:0}
/* PANTALLA COMPLETA (Edgar, 08/10/2026; la parte de JavaScript, en site.js).
   Cerrar, siempre a la vista: también en la de verdad, donde en el móvil solo estaba el aviso del
   navegador. Translúcido, para tapar poco del vídeo. */
.pfs-close,.pfs-full{display:none}
/* «:fullscreen» va siempre en reglas aparte: un navegador que no la entiende (Safari antes de la
   16.4) descarta la regla entera, y la de mentira, que es la de esos iPhone, se quedaba sin «cerrar» */
.frame.is-pfs .pfs-close,.frame.is-pfs .pfs-full{position:absolute;top:max(.8rem,env(safe-area-inset-top));right:max(.8rem,env(safe-area-inset-right));z-index:3;width:3rem;height:3rem;border-radius:50%;border:0;background:#2B2F36;box-shadow:0 2px 8px rgba(0,0,0,.4);color:#fff;display:grid;place-items:center;cursor:pointer}
.frame:fullscreen .pfs-close{position:absolute;top:max(.8rem,env(safe-area-inset-top));right:max(.8rem,env(safe-area-inset-right));z-index:3;width:3rem;height:3rem;border-radius:50%;border:0;background:#2B2F36;box-shadow:0 2px 8px rgba(0,0,0,.4);color:#fff;display:grid;place-items:center;cursor:pointer}
/* Al lado, en la de mentira (CSS): pasar a la de verdad, que esconde la barra del navegador */
/* Cerrar, con presencia (Edgar, 15/10/2026, motor 1.48.5): fondo gris oscuro SÓLIDO y la X blanca y gruesa.
   Translúcido (1.48.2) se perdía sobre un logotipo blanco de la cámara (Witch's Rock, en Tamarindo) */
.pfs-close svg,.pfs-full svg{stroke-width:2.8}
.frame.is-pfs .pfs-full{right:calc(max(.8rem,env(safe-area-inset-right)) + 3.6rem)}
.pfs-full .i{width:1.4rem;height:1.4rem}
/* El vídeo en su 16:9, centrado sobre negro, sea cual sea la forma de la pantalla. El reproductor de
   Windy pone su imagen arriba y rellena lo que sobra con una copia de ella: estirado a la pantalla
   entera, esa copia asomaba por debajo. Los demás ya se encajaban solos, así que no cambian. */
.frame.is-pfs{container-type:size;background:var(--negro)}
.frame:fullscreen{container-type:size;background:var(--negro)}
/* Iframe de tamaño fijo escalado por site.js (columna «marco»): su caja la pone él, no el 100 % */
.frame>iframe.if-marco,.frame:fullscreen>iframe.if-marco{inset:0 auto auto 0;margin:0;max-width:none;max-height:none;transform-origin:0 0;overflow:hidden}
.frame.is-pfs>:is(iframe,.facade,.frame-link,.frame-img,.frame-video){inset:0;margin:auto;width:min(100cqw,calc(100cqh*16/9));height:min(100cqh,calc(100cqw*9/16))}
.frame:fullscreen>:is(iframe,.facade,.frame-link,.frame-img,.frame-video){inset:0;margin:auto;width:min(100cqw,calc(100cqh*16/9));height:min(100cqh,calc(100cqw*9/16))}
/* Siempre apaisada: site.js fija la orientación donde el navegador deja (Android). Donde no (iPhone,
   iPad), con el móvil en vertical sale debajo del vídeo «Gira la pantalla», que se va al girarlo.
   Girar el vídeo con CSS se probó: el reproductor de Windy no lo aguanta y se descoloca. */
.fs-gira{display:none}
@media (orientation:portrait) and (pointer:coarse) and (max-width:32rem){
  .frame.fs-sin-giro .fs-gira{position:absolute;left:50%;bottom:max(1.5rem,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:3;margin:0;display:flex;align-items:center;gap:.55rem;padding:.55rem .95rem;border-radius:2rem;background:rgba(var(--chapa-rgb),.6);color:var(--sobre-velo);font:500 1rem/1.2 var(--display);width:max-content;max-width:calc(100% - 2rem);text-align:center}
  .fs-gira .i{width:1.5rem;height:1.5rem;flex:none}
}
/* La pista en el botón, solo en el móvil en vertical: la pantalla completa sale en horizontal */
.fs .i-girar{display:none}
@media (orientation:portrait) and (pointer:coarse) and (max-width:32rem){.fs .i-girar{display:block}}
.stage-bar{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:flex-start;justify-content:space-between;padding:.75rem 0 0}
/* El nombre y la fuente piden su sitio: si al lado de los botones les quedan menos de 15rem, los
   botones bajan a su propia línea. Con una fuente larga («Cabildo de Tenerife, Centro de Información
   de Carreteras») el crédito se partía palabra a palabra en una columna estrecha (Edgar, 26/10/2026). */
.cap{flex:1 1 15rem;min-width: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)}
/* El chevron, dibujado con dos bordes: dice que el enlace baja en la misma página (Edgar: la flecha «↓» se veía cutre) */
.cap-mas{white-space:nowrap}
.cap-mas::after{content:"";display:inline-block;width:.38em;height:.38em;margin:0 .15em 0 .45em;border-right:.11em solid currentColor;border-bottom:.11em solid currentColor;transform:translateY(-.22em) rotate(45deg)}
[id^="vista-"]{scroll-margin-top:5rem}
/* Texto corrido, no flex: con flex, el enlace de la fuente era una caja aparte que se doblaba sola */
.cap-credit{margin:0;font-size:.88rem;color:var(--dim)}
.cap-credit .ext{vertical-align:middle;margin:-5px -5px -5px .1rem}
.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(--btn-linea);border-radius:4px;background:transparent;color:var(--snow);font:500 1.02rem/1 var(--display);cursor:pointer}
.fs:hover,.fs:focus-visible{border-color:var(--btn-linea-hover);background:var(--deep2);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}}
/* Cada cámara, una tarjeta con su borde gris y su fondo, como los días de la previsión: delimita y
   se ve que se puede elegir (Edgar, 08/10/2026; antes solo la elegida tenía borde). La elegida, con
   el borde de 2 px en el color de lo que está en directo, sin mover nada: el segundo píxel es una
   sombra por dentro. */
.pick-opt{display:grid;gap:.35rem;color:var(--snow);text-decoration:none;padding:.3rem;border-radius:var(--r);border:1px solid var(--rule);background:var(--deep)}
.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);box-shadow:inset 0 0 0 1px var(--hot)}
.pick-opt:not([aria-current]):hover{border-color:var(--haze)}
.pick-name{font:600 1.02rem/1.15 var(--display)}
.pick-kind{font:500 .88rem/1 var(--display);color:var(--dim);grid-column:2}
.pick-desc{font:400 .86rem/1.35 var(--text);color:var(--haze)}
@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. */
/* La entradilla de la ficha, debajo de las cámaras y a su ancho (motor 1.44.0) */
.place-intro{margin:.2rem 0 .4rem}
.place-intro>:last-child{margin-bottom:0}
.place-intro.prose{max-width:none}
/* En el ordenador, la lista de cámaras ocupa la columna derecha en dos filas (el reproductor y la
   entradilla), así la entradilla sube al lado de la lista en vez de empezar debajo de ella */
@media (min-width:62rem){.stage>.pick{grid-column:2;grid-row:1 / span 2}.stage>.stage-main,.stage>.place-intro{grid-column:1}}
/* Las páginas relacionadas («parte_de», 1.48.0): en la columna de la lista de cámaras, debajo de ella;
   en el móvil, tras el carrusel. Tarjetas como las de las cámaras, con una flecha: llevan a otra página */
.stage-side{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-content:start}
.stage-side>*{min-width:0}   /* sin esto la columna crece con el carrusel y este deja de deslizarse */
@media (min-width:62rem){.stage>.stage-side{grid-column:2;grid-row:1 / span 2}}
.rel-h{font-size:1.1rem;color:var(--haze);margin:0 0 .6rem;font-weight:500}
.rel-list{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.rel-opt{display:grid;grid-template-columns:7rem minmax(0,1fr) auto;column-gap:.7rem;row-gap:.15rem;align-items:center;padding:.3rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--deep);color:var(--snow);text-decoration:none}
.rel-opt img{grid-row:1 / 3;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:4px;background:var(--deep2)}
.rel-name{font:600 1.02rem/1.15 var(--display);align-self:end}
.rel-meta{grid-column:2;font:500 .88rem/1.2 var(--display);color:var(--dim);align-self:start}
.rel-opt .i{grid-column:3;grid-row:1 / 3;width:1.1rem;height:1.1rem;color:var(--dim)}
.rel-opt:hover{border-color:var(--haze)}
.rel-opt:hover .rel-name{text-decoration:underline}
.rel-opt:hover .i{color:var(--hot)}
.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}
/* Módulo «fases»: el rótulo del directo cercano que ocupa el reproductor de una ficha parada */
.frame-vecina{margin:.6rem 0 0;padding:.6rem .85rem;border-left:3px solid var(--hot);border-radius:0 var(--r) var(--r) 0;background:var(--deep2);font-size:.95rem;line-height:1.45}
.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%;height:auto;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.2rem 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 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. En el móvil van a dos columnas (a una
   medían el doble) y los grupos largos, plegados: son acordeones nativos, sin JavaScript. */
.foot-col ul{list-style:none;margin:0;padding:0;columns:2;column-gap:1.5rem}
.foot-col li{break-inside:avoid}
.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-col a[aria-current="page"]{color:var(--pie-fuerte)}
/* El título de un grupo largo va dos veces en el HTML: el rótulo «.foot-g-t» y el botón del
   acordeón (<summary>). Por omisión manda el botón; el rótulo solo sale donde el grupo va abierto. */
.foot-g-t{display:none}
.foot-g>summary{display:flex;align-items:center;gap:.5rem;cursor:pointer;margin:0;padding:.55rem 0}
.foot-g>summary span{font-weight:400;font-size:.85em;color:var(--pie-texto)}
.foot-col .nav-gh{color:var(--pie-fuerte);font-weight:600}
.foot-col .nav-g{break-inside:avoid;margin-bottom:.5rem}
@media (max-width:47.99rem){
  .foot-cols{grid-template-columns:1fr;gap:.9rem}
  .foot-col--larga{border-top:1px solid var(--pie-raya,rgba(128,128,128,.35));border-bottom:1px solid var(--pie-raya,rgba(128,128,128,.35))}
  .foot-col--larga+.foot-col--larga{border-top:0;margin-top:-.9rem}
  /* El enlace entero es la zona de toque, no solo sus letras («Surf» medía 27 px de ancho) */
  .foot-col a{display:block}
  .foot-g[open]>summary{margin-bottom:.2rem}
  .foot-g[open]{padding-bottom:.6rem}
}
@media (min-width:48rem){
  .foot-col ul{columns:1}
  /* En ordenador no se pliega nada, y sin JavaScript: «::details-content» deja a la vista el
     contenido de un <details> cerrado. El botón se esconde y manda el rótulo, así que no queda una
     parada del tabulador que no hace nada. Un navegador que no lo conozca (anterior a 2025) se
     queda con el acordeón, que funciona igual. */
  @supports selector(::details-content){
    .foot-g-t{display:block}
    .foot-g>summary{display:none}
    .foot-g::details-content{content-visibility:visible}
  }
  /* Las columnas las reparte el motor, web a web y en cada tramo de ancho (nav_pie_plan en nav.php):
     una fila que se llena entera, y lo que no cabe en una fila propia debajo, a todo el ancho. Aquí
     solo se dice cuánto ocupa cada cosa. */
  .foot-marca{min-width:0}
  .foot-col--u2{grid-column:span 2}
  .foot-col--u3{grid-column:span 3}
  .foot-col--u4{grid-column:span 4}
  .foot-col--u5{grid-column:span 5}
  .foot-col--u2 ul{columns:2}
  .foot-col--ancha ul{columns:3}
  .foot-col--anchisima ul{columns:4}
  .foot-grupos{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.8rem 1.5rem;align-items:start}
  .foot-col--grupos .nav-g ul{columns:1}
  /* En ordenador, el nombre de cada sección dentro de un grupo (las islas, los destinos) es un
     subtítulo: más pequeño y en versalitas, para que no parezca el título de otra columna. En el
     móvil se queda como estaba (Edgar, 07/10/2026: «en móvil los footer están muy bien») */
  .foot-col .nav-gh{display:block;font:600 .76rem/1.3 var(--display);text-transform:uppercase;letter-spacing:.07em;padding:.2rem 0}
}
@media (min-width:72rem){
  .foot-cols--a1{grid-template-columns:repeat(1,minmax(0,1fr))}.foot-cols--a2{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-cols--a3{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-cols--a4{grid-template-columns:repeat(4,minmax(0,1fr))}.foot-cols--a5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .foot-col--fila-a{grid-column:1/-1;order:2}
  .foot-col--fila-a ul{columns:11rem}
  .foot-col--fila-a .foot-grupos{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
  .foot-col--fila-a.foot-col--gr-a1 .foot-grupos{grid-template-columns:repeat(1,minmax(0,1fr))}.foot-col--fila-a.foot-col--gr-a2 .foot-grupos{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-col--fila-a.foot-col--gr-a3 .foot-grupos{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-col--fila-a.foot-col--gr-a4 .foot-grupos{grid-template-columns:repeat(4,minmax(0,1fr))}.foot-col--fila-a.foot-col--gr-a5 .foot-grupos{grid-template-columns:repeat(5,minmax(0,1fr))}.foot-col--fila-a.foot-col--gr-a6 .foot-grupos{grid-template-columns:repeat(6,minmax(0,1fr))}
  .foot-col--fila-a>.foot-col-h,.foot-col--fila-a .foot-g-t{padding-bottom:.45rem;border-bottom:1px solid var(--pie-raya,rgba(128,128,128,.35));margin-bottom:.8rem}
  .foot-marca--cab-a{grid-column:1/-1;order:-1}
  .foot-marca--cab-a .foot-sub{max-width:48rem}
}
@media (min-width:60rem) and (max-width:71.99rem){
  .foot-cols--b1{grid-template-columns:repeat(1,minmax(0,1fr))}.foot-cols--b2{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-cols--b3{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-cols--b4{grid-template-columns:repeat(4,minmax(0,1fr))}.foot-cols--b5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .foot-col--fila-b{grid-column:1/-1;order:2}
  .foot-col--fila-b ul{columns:11rem}
  .foot-col--fila-b .foot-grupos{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
  .foot-col--fila-b.foot-col--gr-b1 .foot-grupos{grid-template-columns:repeat(1,minmax(0,1fr))}.foot-col--fila-b.foot-col--gr-b2 .foot-grupos{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-col--fila-b.foot-col--gr-b3 .foot-grupos{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-col--fila-b.foot-col--gr-b4 .foot-grupos{grid-template-columns:repeat(4,minmax(0,1fr))}.foot-col--fila-b.foot-col--gr-b5 .foot-grupos{grid-template-columns:repeat(5,minmax(0,1fr))}.foot-col--fila-b.foot-col--gr-b6 .foot-grupos{grid-template-columns:repeat(6,minmax(0,1fr))}
  .foot-col--fila-b>.foot-col-h,.foot-col--fila-b .foot-g-t{padding-bottom:.45rem;border-bottom:1px solid var(--pie-raya,rgba(128,128,128,.35));margin-bottom:.8rem}
  .foot-marca--cab-b{grid-column:1/-1;order:-1}
  .foot-marca--cab-b .foot-sub{max-width:48rem}
}
@media (min-width:48rem) and (max-width:59.99rem){
  .foot-cols--c1{grid-template-columns:repeat(1,minmax(0,1fr))}.foot-cols--c2{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-cols--c3{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-cols--c4{grid-template-columns:repeat(4,minmax(0,1fr))}.foot-cols--c5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .foot-col--fila-c{grid-column:1/-1;order:2}
  .foot-col--fila-c ul{columns:11rem}
  .foot-col--fila-c .foot-grupos{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
  .foot-col--fila-c.foot-col--gr-c1 .foot-grupos{grid-template-columns:repeat(1,minmax(0,1fr))}.foot-col--fila-c.foot-col--gr-c2 .foot-grupos{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-col--fila-c.foot-col--gr-c3 .foot-grupos{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-col--fila-c.foot-col--gr-c4 .foot-grupos{grid-template-columns:repeat(4,minmax(0,1fr))}.foot-col--fila-c.foot-col--gr-c5 .foot-grupos{grid-template-columns:repeat(5,minmax(0,1fr))}.foot-col--fila-c.foot-col--gr-c6 .foot-grupos{grid-template-columns:repeat(6,minmax(0,1fr))}
  .foot-col--fila-c>.foot-col-h,.foot-col--fila-c .foot-g-t{padding-bottom:.45rem;border-bottom:1px solid var(--pie-raya,rgba(128,128,128,.35));margin-bottom:.8rem}
  .foot-marca--cab-c{grid-column:1/-1;order:-1}
  .foot-marca--cab-c .foot-sub{max-width:48rem}
}
.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);stroke:var(--map-costa,color-mix(in srgb,#2F8FD8 30%,var(--sea)));stroke-width:.8px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.map-lake{fill:var(--sea)}
.map-border{fill:none;stroke:color-mix(in srgb,var(--map-frontera) 75%,var(--snow));stroke-width:1.2px;vector-effect:non-scaling-stroke;stroke-linejoin:round;display:none}
.show-b .map-border{display:inline}
/* Referencias al acercarse: provincias y ríos (map-refs.json). La frontera, continua y más gruesa;
   la provincia, fina y a trazos, para que no se confundan. Las dos se mezclan con el color del texto
   para que se vean sobre cualquier tierra: con el color de frontera solo, en el verde de Costa Rica
   no pasaban de 1,3:1. El río, del azul del agua mezclado con la
   tierra, para que se lea como agua en cualquier tema, claro u oscuro. */
.gm-refs{display:none}
.show-r .gm-refs{display:inline}
.map-prov{fill:none;stroke:var(--map-prov,color-mix(in srgb,var(--map-frontera) 80%,var(--snow)));stroke-width:.9px;stroke-dasharray:5 3;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.map-rio{fill:none;stroke:var(--map-rio,color-mix(in srgb,#2F8FD8 55%,var(--land)));stroke-width:1.4px;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
svg[data-lod="lejos"] .lod-cerca,svg[data-lod="cerca"] .lod-lejos{display:none}
/* La capa fina (mapa.py, «fino»): con sus teselas ya pintadas, lo del 1:50m se esconde */
.gm-fino{display:none}
.show-f .gm-fino{display:inline}
.show-f .lod-cerca,.show-f .gm-base>.map-lake,.show-f .gm-base>.gm-refs,.show-f .gm-base>.map-border{display:none}
/* El recuadro («mapa.recuadro»): abajo, a la izquierda de los botones; solo con la vista inicial */
.gm-inset{position:absolute;z-index:1;right:3.7rem;bottom:.6rem;width:clamp(7.5rem,27%,11.5rem);background:var(--sea);border:1px solid var(--rule);border-radius:6px;box-shadow:0 2px 8px rgba(var(--sombra-rgb),.18);overflow:hidden}
.gm-inset--izq{right:auto;left:.6rem}
.gm-inset svg{display:block;width:100%;height:auto}
.gm-inset .map-land{fill:color-mix(in srgb,var(--land) 82%,var(--snow));stroke-width:1px}
.gm-inset .dot circle{stroke-width:1.2px}
.gm-inset-n{position:absolute;left:.45rem;top:.3rem;font:600 .74rem/1.15 var(--display);color:var(--snow);pointer-events:none}
.gm-inset-b{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer}
.gm-inset:hover{border-color:var(--haze)}
.gm-inset-b:focus-visible{outline:2px solid var(--hot);outline-offset:-3px}   /* hacia dentro: la caja recorta lo de fuera */
.gmap:not(.is-live) .gm-inset-b,.sin-recuadro .gm-inset{display:none}
.gmap:not(.is-live) .gm-inset{right:.6rem}   /* sin JavaScript no hay botones: a la esquina */
.dot{cursor:pointer}
/* El nombre es parte del enlace, no un adorno. Iba con «pointer-events:none», así que el cursor lo
   atravesaba: quien probaba a pulsar sobre «Volcán Poás» no conseguía nada, y al mover el ratón del
   círculo al nombre se perdía el hover y la etiqueta desaparecía debajo del dedo. Quitarlo arregla
   las tres cosas de golpe, porque el <text> ya está DENTRO del <a>: se pulsa, el círculo responde
   igual que si estuvieras encima de él, y la zona de toque pasa de un círculo de pocos píxeles a
   todo el rótulo, que en un móvil es la diferencia entre acertar y no.
   No se le pone una caja invisible alrededor: el área sensible es la del propio trazo del texto
   —«visiblePainted», que es como se comporta el SVG—, así que dos nombres que se cruzan no se roban
   la pulsación en los huecos entre letras. */
.dot text{display:none}
.dot.lbl text,.dot:hover text,.dot:focus-visible text,.dot.is-sel text{display:inline}
/* Los puntos de cámara (motor 1.56.2), sin nombre fijo: solo el de la que se ve, o al pasar por encima */
.dot--cam.lbl text{display:none}
.dot--cam:hover text,.dot--cam:focus-visible text,.dot--cam[aria-current="true"] 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}
/* Los botones de zona van siempre en varias líneas, todos a la vista. En pantalla estrecha, si pasan
   de dos filas, site.js deja dos y un botón «+N más» que las despliega (Edgar, 02/10/2026). Hasta la
   1.16 iban en el móvil en una fila que se deslizaba y no se veía que seguía: con 26 países eran
   ocho pantallas de arrastre. Lo mismo los filtros de la página de sección (.filters). Sin
   JavaScript salen todos. */
.gm-chips{display:flex;flex-wrap:wrap;gap:.4rem;padding-bottom:.2rem}
.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}
/* El botón que despliega no es una zona: va en el color de la marca, para que no se confunda con ellas */
.gm-chips .chips-mas,.filters .chips-mas{flex:none;border:1.5px solid var(--acento);border-radius:2rem;background:var(--acento);color:var(--sobre-acento);font-weight:600;cursor:pointer}
.gm-chips .chips-mas[aria-expanded=true],.filters .chips-mas[aria-expanded=true]{background:transparent;color:var(--acento)}
.gm-chips .chips-mas:hover,.filters .chips-mas:hover{background:var(--acento-hover);border-color:var(--acento-hover);color:var(--sobre-acento)}
.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}
/* Créditos de las fotos (06/10/2026): en línea si son pocos; si son muchos, una línea con su flecha
   que abre la lista en columnas. Pequeño y apagado como el resto de la letra menuda, pero con la
   misma flecha que los demás desplegables de la web, para que se vea que se abre. */
.credits{margin:1.4rem 0}
.credits .fine{margin:0}
.credits a{color:var(--dim);text-decoration-thickness:1px;text-underline-offset:.15em;text-decoration-color:var(--rule)}
.credits a:hover{color:var(--hot);text-decoration-color:currentColor}
.credits-d>summary{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;padding:.35rem 0;min-height:24px}
.credits-d>summary::before{content:"";flex:none;width:.4rem;height:.4rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease}
.credits-d[open]>summary::before{transform:rotate(45deg)}
.credits-d>summary:hover{color:var(--hot)}
@media (prefers-reduced-motion:reduce){.credits-d>summary::before{transition:none}}
.credits-l{list-style:none;margin:.5rem 0 0;padding:.8rem 0 0;border-top:1px solid var(--rule);columns:17rem;column-gap:2rem;font-size:.8rem;line-height:1.45;color:var(--dim)}
.credits-l li{break-inside:avoid;padding:0 0 .35rem}
.credits-p{color:var(--haze)}
.credits-h{margin:0}
.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}
@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)}
/* En el móvil la lista corre en horizontal, y tiene que VERSE que corre (Edgar, 07/10/2026): con
   tarjetas de 11,5 rem cabían casi dos enteras, parecía una cuadrícula y un visitante nuevo no sabía
   que había más cámaras. Ahora la siguiente asoma y site.js añade la flecha para pasar (y la de
   volver), los puntos con «1 / 5», que dicen cuántas hay, y el degradado del lado por donde quedan
   más. Sin JavaScript queda lo de CSS: la tarjeta cortada, que ya avisa. En el ordenador es una
   lista y nada de esto sale.
   La primera tarjeta va al borde izquierdo, la última al derecho y las del medio CENTRADAS, con un
   trozo de la anterior y de la siguiente a los lados: las flechas caen sobre esos trozos y no tapan
   la que se está mirando (Edgar, 07/10/2026; antes la de volver le comía 44 px). Por eso la tira va
   de borde a borde de la pantalla y la tarjeta deja a cada lado sitio para una flecha
   (2 × 4,25 rem: la flecha, su margen y el hueco entre tarjetas). */
@media (max-width:61.99rem){
  .pick{position:relative}
  .pick-list{margin-left:calc(-1*var(--pad));padding-left:var(--pad);scroll-padding-inline:var(--pad)}
  .pick-list li{flex-basis:min(15rem,100vw - 8.5rem);scroll-snap-align:center}
  .pick-list li:first-child{scroll-snap-align:start}
  .pick-list li:last-child{scroll-snap-align:end}
  .pick.is-ini .pick-list{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 3rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 3rem),transparent)}
  .pick.is-medio .pick-list{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3rem,#000 calc(100% - 3rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 3rem,#000 calc(100% - 3rem),transparent)}
  .pick.is-fin .pick-list{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3rem);mask-image:linear-gradient(90deg,transparent,#000 3rem)}
  .pick-fl{position:absolute;z-index:2;top:var(--pick-y,5rem);width:2.75rem;height:2.75rem;margin:0;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.96);color:#14201F;box-shadow:0 2px 10px rgba(0,0,0,.3);cursor:pointer}
  /* Contra el borde de la pantalla, no del texto: así quedan fuera de la tarjeta centrada */
  .pick-fl--ant{left:calc(.5rem - var(--pad))}
  .pick-fl--sig{right:calc(.5rem - var(--pad))}
  .pick-fl .i{width:1.3rem;height:1.3rem}
  .pick-pts{display:flex;justify-content:center;align-items:center;gap:.45rem;margin:.7rem 0 0}
  .pick-pts i{width:.5rem;height:.5rem;border-radius:1rem;background:var(--rule);transition:width .2s ease,background-color .2s ease}
  .pick-pts i.on{width:1.4rem;background:var(--acento)}
  .pick-pts span{margin-inline-start:.5rem;font:500 .85rem/1 var(--display);color:var(--dim);font-variant-numeric:tabular-nums}
}
.pick-fl[hidden],.pick-pts[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.pick-pts i{transition:none}}
@media (min-width:62rem){.pick-opt .pick-thumb{grid-row:1/4;align-self:start}.pick-desc{grid-column:2}}
.fs--sound[aria-pressed=true]{border-color:var(--hot);color:var(--hot)}

/* ── 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}
/* Página de sección sin nivel de zona: la barra de filtros solo tendría «todos» (views/section.php) */
.filters[data-solo]{display:none!important}