/* Webcams Costa Rica — su aspecto, encima del motor.
   «Estación de campo»: fondo claro de niebla de bosque nuboso, verde de selva para la marca y
   amarillo azufre solo para lo que está en directo. El color informa; no decora.

   Va DESPUÉS de site.css, así que aquí solo está lo que cambia. No se copia la hoja del motor:
   esta web sigue recibiendo sus arreglos de maquetación, y a cambio manda en el color, la
   tipografía y la forma. */

@font-face {
  font-family: "Archivo";
  src: url("archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  /* Su paleta, en los nombres que usa el motor. Es un tema CLARO: donde el motor pone noche,
     aquí va niebla, y donde pone nieve, va tinta. */
  --night: #EEF2EE;      /* fondo general: niebla del bosque nuboso */
  --deep: #FBFCFA;       /* papel: tarjetas y bloques */
  --deep2: #E7EDE8;      /* un escalón por encima del fondo */
  --abyss: #E2E8E3;      /* lo más hundido: cabecera del mapa, pie */
  --rule: #D3DCD6;       /* líneas */
  --snow: #15261F;       /* texto principal: verde casi negro */
  --haze: #33463D;       /* texto secundario */
  --dim: #5A6862;        /* texto apagado */

  /* --texto-suave ya no hace falta aquí: desde el 23/09/2026 el motor arranca claro y su valor por
     omisión es el mismo var(--haze) que se ponía en esta línea. Quitada el 24/09/2026. */

  /* Esta web no tiene escala de actividad (niveles a 0 en config.php), así que los tres niveles
     se quedan en el verde de marca: si algún día enciende el módulo «volcanes», aquí se separan. */
  --lv0: #1E5C45; --lv1: #1E5C45; --lv2: #1E5C45;
  --acento: #1E5C45;     /* selva: color de marca */
  --hot: #B08900;        /* azufre, legible sobre claro: lo que está en directo */
  /* El sol del hero va ENCIMA de la foto, no sobre la página: el azufre de arriba se queda ahí
     en 2,1 de contraste. Este oro claro da 4,8 en ordenador y 9,5 en móvil, medido. */
  --hero-sol: #FFD166;
  /* El reloj de noche va sobre la tarjeta clara, no sobre una foto: el azufre de arriba se queda
     en 3,18 y hacen falta 4,5. Este oro oscuro da 4,88, medido. */
  --hora-noche: #8A6B00;

  /* Iconos del tiempo. El motor ya los trae para fondo claro; estos van un poco más hacia el verde
     del tema y tienen el contraste medido sobre la tarjeta (#FBFCFA) y sobre la celda de las horas
     (#E7EDE8). Revisado el 24/09/2026: todos difieren del motor salvo la gota y el grosor de la nube,
     que se quitan por ser iguales. sitio.css se carga después que prevision.css, así que estos mandan. */
  --wi-sol-borde: #A67F00;      /* 3,61 y 3,12 */
  --wi-luna: #DDE4E0; --wi-luna-borde: #6F7D77;   /* 4,19 y 3,63 */
  --wi-nube: #F2F6F4; --wi-nube-borde: #4E5B56;   /* 6,91 y 5,98 */
  --wi-tormenta: #A67F00;
  --wi-niebla: #5C6A64;         /* 5,51 y 4,78 */
  --link: #145A73;       /* pacífico */

  --display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max: 76rem;
  --r: 6px;
}

/* El motor es oscuro por dentro: hay que devolver el contraste al texto sobre fondo claro. */
body { background: var(--night); color: var(--snow); font-size: 1.0625rem; line-height: 1.6; }
a { color: var(--link); }
a:hover { color: var(--acento); }

/* Tipografía: Archivo estrecha para los títulos, como en su web, en vez de la serif del motor. */
h1, h2, h3, .brand, .card-title, .hero-h, .now-big, .band-head h2 {
  font-family: var(--display);
  font-stretch: 68%;
  letter-spacing: .01em;
}
h1, .hero-h { font-weight: 800; }
.prose, .lede, .card-meta, .facts { font-family: var(--text); }

/* Cabecera: barra de papel con la marca en verde, no la franja oscura del motor. */
.top { background: var(--deep); border-bottom: 1px solid var(--rule); }
.brand { color: var(--acento); }
.nav a, .menu summary { color: var(--haze); }
.nav a:hover { color: var(--acento); }

/* Portada. El velo va en verde y MAS FLOJO que el del motor: la foto del crater es lo que vende
   la web y no hay que apagarla. La legibilidad del titular la sostiene su sombra, no el velo. */
:root { --velo: 18,59,45; }
/* En MOVIL el texto va sobre la parte baja de la foto, y el degradado del motor acaba en el color
   de fondo: en un tema claro eso deja texto blanco sobre un fade claro. Medido sobre la captura,
   la entradilla se quedaba en 2,5 de contraste. Aqui el degradado se oscurece de la mitad hacia
   abajo y solo al final se funde con la pagina. */
.hero::before { background:
  linear-gradient(180deg, rgba(18,59,45,.10) 0%, rgba(18,59,45,.28) 45%, rgba(18,59,45,.45) 78%, var(--night) 100%); }
/* Y el velo fuerte SOLO detras del texto, no sobre toda la foto: asi la parte de arriba del crater
   se sigue viendo limpia y el texto tiene su contraste medido donde esta. */
.hero-in { background: linear-gradient(180deg, rgba(9,30,23,0) 0%, rgba(9,30,23,.58) 14%, rgba(9,30,23,.84) 42%, rgba(9,30,23,.90) 100%); }
/* En pantalla grande basta un velo suave por abajo a la izquierda, donde va el texto: sin el, el
   dato del atardecer se quedaba en 4,40 sobre la parte clara de la foto. */
@media (min-width: 60rem) {
  /* Dos velos: el diagonal para el titular y uno de abajo arriba para la fila de la hora y el
     sol, que cae sobre la parte clara de la foto. */
  .hero-in { background:
      linear-gradient(0deg, rgba(9,30,23,.55) 0%, rgba(9,30,23,.28) 22%, rgba(9,30,23,0) 42%),
      linear-gradient(105deg, rgba(9,30,23,.62) 0%, rgba(9,30,23,.42) 38%, rgba(9,30,23,0) 72%); }
}
/* En movil el credito de la foto SALE de la foto y cae sobre el fondo claro de la pagina: ahi el
   blanco no se lee. Medido: 1,18 de contraste. */
@media (min-width: 60rem) {
  .hero::before { background:
    linear-gradient(90deg, rgba(18,59,45,.80) 0%, rgba(18,59,45,.34) 44%, rgba(18,59,45,0) 70%),
    linear-gradient(180deg, transparent 70%, var(--night)); }
}
.hero-h, .hero-p { color: #FBFCFA; }
.hero-h { text-shadow: 0 2px 20px rgba(9,30,23,.65); }
.hero-p { text-shadow: 0 1px 10px rgba(9,30,23,.75); }
.hero-datos { color: #FBFCFA; text-shadow: 0 1px 10px rgba(9,30,23,.75); }
/* La etiqueta del dato va al 85 % de opacidad en el motor y sobre la foto se quedaba en 4,46 de
   contraste, justo por debajo del minimo. Aqui va entera. */
.hero-datos dt { opacity: 1; }

/* Tarjetas: papel, borde fino y esquina viva. Nada de sombras ni de degradados. */
.card { background: var(--deep); border: 1px solid var(--rule); }
.card:hover { border-color: var(--acento); }
.card-title { color: var(--snow); }
.card-meta, .card-cams { color: var(--dim); }
.card-clock { background: rgba(21,38,31,.78); color: #FBFCFA; }
.is-night .i-noche { color: #F2DE8A; }

/* «En directo» es lo único que lleva el amarillo. */
.card-flag, .btn-hot, .now-status { background: var(--hot); color: #15261F; }

/* Botones: el principal en verde selva, el secundario en papel con borde. */
.btn { background: var(--acento); color: #FBFCFA; border-radius: var(--r); }
.btn:hover { background: #123B2D; color: #FBFCFA; border-color: #123B2D; }
.btn-ghost { background: transparent; color: var(--acento); border: 1px solid var(--acento); }
.btn-ghost:hover { background: var(--deep2); }

/* Mapa: el país en verde claro sobre papel, como el suyo de antes. El motor saca el mar, la
   tierra y los controles de variables, así que basta con cambiarlas. */
:root { --sea: #FBFCFA; --land: #CFDDD3; --ctl: rgba(251,252,250,.92); }
.gm-view { border: 1px solid var(--rule); }
.map-border { stroke: #B9CBBF; }
.dot text { fill: #15261F; }
.dot circle { stroke: #FBFCFA; }
.gm-ctl, .gm-chips .pill { background: var(--deep); color: var(--haze); border: 1px solid var(--rule); }
.gm-chips .pill[aria-pressed="true"] { background: var(--acento); color: #FBFCFA; border-color: var(--acento); }
.gm-pop { background: var(--deep); color: var(--snow); border: 1px solid var(--rule); }
/* La X de cerrar la ficha del mapa: sin esto era verde oscuro sobre verde oscuro. */
.gm-x { background: #FBFCFA; color: #15261F; border-color: var(--rule); }
.gm-x:hover { background: var(--acento); color: #FBFCFA; }
.dot { stroke: var(--deep); }

/* Bloques de datos y texto */
/* El motor los pinta planos, sin recuadro; aqui son tarjetas, y una tarjeta necesita su hueco por
   dentro: sin el, el texto se queda pegado al borde, que era justo lo que se veia. */
.band--text, .facts, .now, .qa, .links, .minimap {
  background: var(--deep); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 1.05rem 1.15rem;
}
@media (max-width: 35rem) { .band--text, .facts, .now, .qa, .links, .minimap { padding: .9rem 1rem; } }
.prose a { text-decoration: underline; text-underline-offset: .15em; }
.crumbs, .fine, .credits, .cap-credit { color: var(--dim); }

/* ── El bloque de «ahora mismo», compacto (23/09/2026) ──────────────────────────────────────────
   De 409 a 345 px en ordenador y de 746 a 441 en móvil, con el mismo dato. Tres cosas:

   1. El icono sale a un lado y la etiqueta y el valor se apoyan en la MISMA izquierda. Con el valor
      pegado detrás de la etiqueta no hay manera: «Hora local», «Cielo» y «Temperatura» no miden lo
      mismo, así que los tres datos caían a distinta altura (medido: 115, 88 y 109 px).
   2. El icono, dentro del <h3> por el motor, se coloca en absoluto a la izquierda y centrado entre
      la etiqueta y el valor. Así no hace falta tocar la plantilla.
   3. En móvil, una fila por dato: etiqueta a la izquierda, valor a la derecha y el detalle debajo.
      Ni tarjetas dentro de tarjetas ni un renglón para cada cosa.

   Esto vive AQUÍ y no en el motor a propósito: es una prueba de esta web. Si convence, se sube. */
/* El diseño compacto del bloque está en el motor. Aquí solo el color: todos los datos en el verde
   de marca, la hora también. El dorado de noche no se entendía —nadie tiene por qué saber que ese
   color significa «ya ha anochecido»— y eso ya lo dice el texto de debajo, con todas sus letras. */
.now-big, .now-clock.is-night .now-big { color: var(--acento); }
.now .prev { margin-top: .5rem; padding: .7rem .9rem; }
.now .prev-h { margin-bottom: .35rem; }

@media (max-width: 47.99rem) {
  .now .prev { margin-top: .6rem; padding: .6rem .1rem 0; background: none; }
}

/* Pie: verde hondo, como cerraba su web. Es la unica superficie oscura de un tema claro, asi que
   sus colores se declaran enteros: heredando los del resto salia texto oscuro sobre fondo oscuro. */
:root { --pie-fondo: #123B2D; --pie-texto: #C4D6CB; --pie-fuerte: #FBFCFA; }
/* «Saltar al contenido»: verde de marca con texto blanco. Con el amarillo del motor no se leia. */
:root { --skip-fondo: #123B2D; --skip-texto: #FBFCFA; }
.foot { border-top: 0; }

/* Módulo «externas»: lista sobria, sin competir con lo nuestro. */
.externas { border-top: 1px solid var(--rule); }
.externas h2 { color: var(--haze); }