/* naturelivecams.com — su aspecto, encima del motor.
   Generado por .claude/skills/webcams-motor/scripts/tema.py el 27/09/2026.
   Marca #166534. Tema claro.

   Va DESPUÉS de site.css, así que aquí solo está lo que cambia: la web sigue recibiendo las
   mejoras de maquetación del motor y manda en el color. Cada pareja de texto y fondo está
   medida por encima de 4,5 (docs/legibilidad.md); si se cambia un valor a mano, hay que volver
   a medir, y para eso está «tema.py … --ver».

   Lo que este archivo NO decide y hay que elegir a mano: la tipografía (--display y --text, más
   su @font-face y su «precargar» en config.php), la foto del hero y la forma de las esquinas. */

:root {
  /* Superficies, de la página hacia dentro */
  --night: #F5F8F6;      /* fondo de la página */
  --deep: #FFFFFF;        /* papel: tarjetas y bloques */
  --deep2: #E9EFEB;      /* un escalón por encima del fondo */
  --abyss: #E0E9E3;      /* lo más hundido, y el texto encima de una chapa de color */
  --rule: #D0DDD5;        /* líneas */
  --snow: #15281C;        /* texto principal */
  --haze: #305A40;        /* texto secundario */
  --dim: #3D7150;          /* texto apagado */

  /* Marca y escala */
  --acento: #166534;

  --hot: #8A5B1E;          /* lo que está en directo */
  --link: #166534;
  --lv0: #5B6B62; --lv1: #9F5104; --lv2: #C52616;
  --lv1-valor: var(--lv1);

  /* tema.py no escribe la tipografía ni las medidas: son de la web y se ponen a mano. Sin estas
     cuatro líneas la web se queda con el «system-ui» del motor, que es lo que pasó al regenerar
     el archivo. */
  --display: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --text: "Source Serif 4", Georgia, "Times New Roman", serif;
  --max: 73.75rem;   /* 1180 px con la letra normal; en rem, crece con la del navegador */
  --r: 6px;

  /* Mapa */
  --sea: #EEF4F8; --land: #DBE6DF; --map-frontera: #ABC4B5; --ctl: rgba(255, 255, 255, .92);

  /* Encima de una foto o de un velo. NO siguen al tema: por debajo del velo hay una foto, y
     ahí el texto va claro tanto en una web clara como en una oscura. */
  --texto-foto: #F4F6F5;
  --texto-tenue: #EBEFED;
  --texto-suave: var(--haze);
  --sobre-velo: #FFFFFF;
  --sobre-velo-borde: rgba(255,255,255,.55);
  --negro: #0A0F0C;

  /* Velos, chapas y sombras, en componentes RGB para poder darles opacidad */
  --velo: 18,20,24;       /* solo las chapas translúcidas: la foto ya no se vela */
  --chapa-rgb: 21,40,28;
  --tapa-rgb: 17,36,24;
  --sombra-rgb: 21,40,28;
  --acento-rgb: 22,101,52;
  --btn-borde: rgba(21,40,28,.35);

  /* Lo cálido de encima de la foto necesita un tono claro aunque --hot sea oscuro */
  --hero-sol: #FFD166; --hora-noche: var(--hot);

  /* El pie puede ir a contracorriente del tema, y en una web clara suele ser oscuro */
  --pie-fondo: #15281C; --pie-texto: #C4D4CA; --pie-fuerte: #FFFFFF;

  --skip-fondo: var(--acento); --skip-texto: #FFFFFF;
  --offline-a: #E2E9E5; --offline-b: #DBE3DE;
}

/* ── El hero: la foto no se toca ───────────────────────────────────────────────────────────────
   El motor la cubre con dos velos, y en esta red la foto ES el producto: una colada de lava, una
   playa, un santuario. Los velos la apagaban y además la teñían con el color de marca, así que el
   mismo Kīlauea salía verdoso. Aquí la foto se ve tal cual y el texto se separa con su propia
   sombra.
   El degradado que queda NO es un velo: es la junta con el fondo de la página en el último 18 %,
   para que el borde de la foto no corte en seco.

   Cómo está hecha la sombra, que no es capricho: un HALO CERRADO de 1 px en las cuatro
   direcciones, que es lo que separa la letra de un fondo claro, más una sombra amplia que la
   despega del fondo oscuro. Con una sola sombra difusa el titular aguanta pero el párrafo pequeño
   no, y en el móvil el hero recorta la foto en vertical y todo el bloque cae sobre el cielo: ese
   es el caso peor y es el que hay que mirar al cambiar la foto.
   Aviso honesto: esto mejora la lectura pero NO garantiza el 4,5 medido, que con velo sí estaba
   asegurado. Al cambiar la foto del hero, volver a mirarlo en móvil. */
.hero::before{background:linear-gradient(180deg,transparent 82%,var(--night) 100%)}
@media (min-width:60rem){.hero::before{background:linear-gradient(180deg,transparent 82%,var(--night) 100%)}}
.hero-in{background:none}
.hero-h{text-shadow:0 1px 2px rgba(0,0,0,.6), 0 3px 10px rgba(0,0,0,.6), 0 10px 34px rgba(0,0,0,.45)}
.hero-p,.hero-datos,.hero-dato,.hero-credito{
  text-shadow:0 0 2px rgba(0,0,0,.95), 0 1px 1px rgba(0,0,0,.95), 1px 0 1px rgba(0,0,0,.85),
              -1px 0 1px rgba(0,0,0,.85), 0 -1px 1px rgba(0,0,0,.85), 0 2px 12px rgba(0,0,0,.8)}

/* La marca ocupa algo más de alto que la del motor, y en el móvil eso partía «Nature Live Cams»
   en dos líneas. */
@media (max-width:26rem){.brand-mark{width:26px;height:26px}.brand{font-size:1.2rem;gap:.45rem}}

/* ── La marca ──────────────────────────────────────────────────────────────────────────────────
   El icono NO lleva el verde de la interfaz como color principal, y es a propósito: en una lista
   de resultados casi todos los iconos son azules o grises, así que uno verde o azul no destaca por
   bien dibujado que esté. Lo que el ojo encuentra ahí es lo cálido, y en esta web lo cálido es el
   tema. El cono sí va en el verde de la web, que es lo que ata el icono al sitio.
   Está explicado en docs/tema-y-mapa.md, «La marca y el favicon NO llevan por fuerza el color de
   la web». */
.brand-mark{width:30px;height:30px}

/* El bloque pequeño del hero —entradilla, botones, escala y datos— sobre su propio velo. NO es el
   velo que se quitó: aquel cubría la foto entera y la teñía; este cubre exactamente el hueco del
   texto, que es letra pequeña sobre una foto y no se puede fiar a una sombra. El titular se queda
   fuera, a pelo sobre la foto, porque es grande y con sombra se lee.
   El envoltorio «.hero-sub» lo pone el motor y no pinta nada por su cuenta: el fondo es de aquí.

   El 0,80 de alfa no es a ojo. Lo que va encima no es solo texto blanco: los números de la escala
   llevan SU color —rojo el de erupción, ámbar el de inquietud—, y un color no es blanco. Medido
   contra el caso peor, que es que detrás del panel haya una parte clara de la foto:
     · 0,60 → el texto blanco pasa (4,77) pero el rojo se queda en 2,03 y el ámbar en 2,83;
     · 0,80 → pasan los tres.
   Y de paso arregla la pega que arrastraba esto: con el panel así de opaco, el contraste deja de
   depender de qué foto haya detrás, que era lo único que no se podía garantizar. */
.hero-sub{background:rgba(10,12,16,.8);border-radius:10px;padding:1rem 1.15rem 1.15rem;margin-left:-1.15rem}
.hero-p,.hero-datos,.hero-dato{text-shadow:none}
.hero .heat-legend{color:var(--texto-foto)}
.hero .heat-legend strong{color:var(--sobre-velo)}

/* El botón principal del hero dice «ver lo que está en erupción»: va en el color de la erupción,
   no en el de marca. Es la misma regla que la chapa del menú. Solo el color: el filo blanco que lo
   separa de la foto y el cambio al pasar el ratón los pone el motor (1.10.0), y machacarlos con
   «border-color» dejaba la silueta en 2,89 sobre 3,0. */
.hero{--btn-hot-fondo:var(--lv2); --btn-hot-texto:#FFF;
      --btn-hot-fondo-hover:#A81F12; --btn-hot-texto-hover:#FFF}
/* Y el rojo del hover, con la misma fórmula que el motor usa para el suyo: un tercio más oscuro.
   A mano se quedaba en un 15 % y el cambio al pasar el ratón no se notaba (1,28 de 1,5). */
@supports (color:color-mix(in srgb,red 50%,blue)){
  .hero{--btn-hot-fondo-hover:color-mix(in srgb,var(--lv2) 68%,#000)}
}

/* Los dos primeros números vuelven a llevar su color, como en el tema anterior: ahí el dato está
   en el color y no solo en la palabra. Sobre el panel hacen falta los tonos claros y no los de
   página: el #C52616 de la página se queda en 1,11 sobre este fondo. */
.hero .heat-l2 strong{color:#FF8A73}
.hero .heat-l1 strong{color:#FFB020}

/* La barra, como una rampa de verdad: del verde de la calma al ámbar de la inquietud y al rojo de
   la erupción, y cada tramo entrega su color al siguiente para que no se vean tres pegotes. */
.hero .heat-bar{background:rgba(255,255,255,.18)}
.hero .heat-0{background:linear-gradient(90deg,#3E9A67,#8CBB62)}
.hero .heat-1{background:linear-gradient(90deg,#C9A03A,#F2A93B)}
.hero .heat-2{background:linear-gradient(90deg,#FF8A3D,#E0331A)}