/* ==========================================================================
   Más Vida Iglesia: tokens de diseño
   "Del Edén al Apocalipsis": ver DESIGN.md para el porqué de cada valor.
   ========================================================================== */

:root {
  /* Paleta ------------------------------------------------------------- */
  --noche: #121a36;          /* Noche: fondo de las escenas y del pie */
  --noche-2: #1d2752;
  --abismo: #07080f;         /* El negro de antes de la luz (entrada) */
  --lampara: #eba94c;        /* Oro: la luz de Dios en todo el recorrido */
  --lampara-suave: #f3c98a;
  --marfil: #fbf3e4;         /* Texto sobre las pinturas */
  --piedra: #e8e0cf;         /* Pergamino: fondo de lectura */
  --piedra-2: #dad0bb;
  --piedra-clara: #f4efe5;
  --tinta: #1f1810;          /* Texto sobre pergamino */
  --tinta-suave: #4f4537;
  --olivo: #56622f;          /* Eco del verde de la marca actual */
  --grana: #9e2b25;          /* Solo para errores en formularios */

  /* Colores del amanecer (portadas internas) */
  --alba-horizonte: #f0b65e;
  --alba-medio: #b8707a;
  --alba-alto: #4b3f78;
  --colina-noche: #262c58;
  --colina-alba: #6e5a72;

  /* Tipografía: la misma pareja del logo de Más Vida ------------------- */
  --fuente-firma: "Birthstone Bounce", "Segoe Script", cursive;          /* el "Más" */
  --fuente-marca: "Montserrat", "Segoe UI", system-ui, sans-serif;       /* el "VIDA" */
  --fuente-titulo: var(--fuente-marca);
  --fuente-texto: var(--fuente-marca);

  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-19: 1.0625rem;
  --t-24: 1.5rem;
  --t-36: 2.25rem;
  --t-48: 3rem;
  --t-72: 4.5rem;

  --t-titulo: clamp(2.1rem, 1.3rem + 3vw, 3.9rem);
  --t-subtitulo: clamp(1.35rem, 1.1rem + 1vw, 2rem);
  --t-firma: clamp(4.5rem, 2rem + 9vw, 10.5rem);
  --t-valor: clamp(3.6rem, 1rem + 9.5vw, 10rem);

  /* Medidas ------------------------------------------------------------ */
  --gutter: clamp(1rem, 4vw, 3rem);
  --ancho: 78rem;
  --medida: 64ch;
  --espacio-seccion: clamp(5rem, 11vw, 10rem);
  --alto-cabecera: 4.5rem;
  --alto-colinas: clamp(90px, 20vh, 220px);

  /* Movimiento --------------------------------------------------------- */
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rapido: 0.25s;
  --normal: 0.45s;

  /* Grano de película (ruido SVG en escala de grises) */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}