/* santuariosenvivo.com — su aspecto, encima del motor.
   Generado por .claude/skills/webcams-motor/scripts/tema.py el 27/09/2026.
   Marca #1E4D8C, azul mariano, elegido por Edgar el 27/09/2026. 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: #F5F6F8;      /* fondo de la página */
  --deep: #FFFFFF;        /* papel: tarjetas y bloques */
  --deep2: #E9EBEF;      /* un escalón por encima del fondo */
  --abyss: #E0E4E9;      /* lo más hundido, y el texto encima de una chapa de color */
  --rule: #D0D5DD;        /* líneas */
  --snow: #151D28;        /* texto principal */
  --haze: #30425A;        /* texto secundario */
  --dim: #476285;          /* texto apagado */

  /* Marca y escala */
  --acento: #1E4D8C;
  --hot: #8B5B1E;          /* lo que está en directo */
  --link: #1E4D8C;
  --lv0: #1E4D8C; --lv1: #1E4D8C; --lv2: #1E4D8C;
  --lv1-valor: var(--lv1);

  /* Mapa */
  --sea: #FFFFFF; --land: #DBE0E6; --map-frontera: #ABB6C4; --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: #F4F5F6;
  --texto-tenue: #EBEDEF;
  --texto-suave: var(--haze);
  --sobre-velo: #FFFFFF;
  --sobre-velo-borde: rgba(255,255,255,.55);
  --negro: #0A0C0F;

  /* Velos, chapas y sombras, en componentes RGB para poder darles opacidad */
  --velo: 21,29,40;
  --velo-hero-rgb: 13,21,32;
  --chapa-rgb: 21,29,40;
  --tapa-rgb: 17,25,36;
  --sombra-rgb: 21,29,40;
  --acento-rgb: 30,77,140;
  --btn-borde: rgba(21,29,40,.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: #151D28; --pie-texto: #C4CBD4; --pie-fuerte: #FFFFFF;

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

/* ── A mano (27/09/2026), encima de lo generado ──────────────────────────────────────────────
   Azul mariano y un solo toque de oro, el del umbral del logo. El oro nunca va como texto sobre
   blanco (no llega a 4,5): solo en el dibujo de la marca. */

/* Titulares en Source Serif 4 (la trae el motor): más sobria que la de palo seco, sin llegar a
   solemne. El texto corrido sigue en la del sistema, que se lee mejor en el móvil. */
:root { --display: 'Source Serif 4', Georgia, 'Times New Roman', serif; }
h1, h2, h3, .hero-h { font-weight: 600; letter-spacing: -.005em; }

/* Pie azul marino de la casa. Medido: #D6E0EE sobre #14335C da 9,5; el blanco, 12,7; el oro del «en vivo», 8,4. */
:root { --pie-fondo: #14335C; --pie-texto: #D6E0EE; --pie-fuerte: #FFFFFF; }

/* La marca: el disco del favicon y el nombre, «Santuarios» grande y «en vivo» pequeño debajo */
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.marca-disco { display: block; flex: none; width: 42px; height: 42px; }
.marca-disco svg { display: block; width: 100%; height: 100%; }
.marca-nombre { display: flex; flex-direction: column; line-height: 1; }
.marca-nombre b { font: 600 1.55rem/1 var(--display); color: #14335C; letter-spacing: -.01em; }
.marca-nombre small { font: 700 .7rem/1 var(--text); letter-spacing: .28em; text-transform: uppercase; color: var(--acento); margin-top: 3px; }
.foot-brand .marca-disco { width: 36px; height: 36px; }
.foot-brand .marca-nombre b { color: #FFFFFF; font-size: 1.4rem; }
.foot-brand .marca-nombre small { color: #F0CF7E; }
@media (max-width: 35rem) {
  .brand .marca-disco { width: 36px; height: 36px; }
  .brand .marca-nombre b { font-size: 1.3rem; }
  .brand .marca-nombre small { font-size: .62rem; }
}

/* La barra lleva Santuarios, Cámaras 24 horas, Misa hoy, Festividades y Países: sin partirse */
.nav { gap: 1.15rem; }
.nav > a, .drop > .drop-t, .brand { white-space: nowrap; }
@media (min-width: 56rem) and (max-width: 74rem) {
  .nav { display: none; }
  .menu { display: block; }
}