/* ==========================================================================
   THEME · variables de diseño del sitio (colores, tipografía, medidas, efectos)

   Es la ÚNICA hoja que hay que tocar para cambiar el aspecto general.
   Se carga antes que las demás (gallery.css, video.css, site.css, pages.css),
   que solo leen estas variables con var(--nombre).
   Orden: 1 colores · 2 tipografía · 3 medidas y rejilla · 4 tarjetas · 5 galería y vídeo · 6 movimiento.
   ========================================================================== */

:root{

  /* ---------- 1. COLORES ---------- */
  --bg:            rgb(102,102,102);   /* fondo de todo el sitio (versión anterior: rgb(245,243,249)) */
  --ink:           rgb(255,255,255);   /* texto por defecto: párrafos, menú y enlaces */
  --muted:         rgba(255,255,255,.78); /* texto secundario: pie, cabeceras pequeñas, descripciones */
  --title-color:   rgb(255,255,255);   /* título <h1> de cada página */
  --accent:        rgb(255,102,0);     /* naranja de marca: página actual del menú, iconos, enlaces al pasar el cursor, subrayado de highlights */
  --accent-hover:  rgb(255,255,255);   /* iconos del visor de galería y del reproductor al pasar el cursor */
  --rule:          rgba(255,255,255,.25); /* líneas finas: borde del menú móvil, separadores de artículos y notas */
  --nav-active:    var(--link-hover);  /* elemento activo del menú (página actual) y del selector de idioma */
  --link-hover:    rgb(255,255,0);     /* color del subrayado de los enlaces al pasar el cursor (el texto no cambia de color) */
  --dashed:        rgba(43,48,62,.35); /* borde discontinuo del contenedor reservado de la nube de texto */

  /* ---------- 2. TIPOGRAFÍA ---------- */
  --font:          system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;   /* una sola familia para todo el sitio */
  --fs-body:       1rem;                           /* párrafos de los textos largos (.prose) */
  --lh-body:       1.7;                            /* interlineado de los párrafos */
  --measure:       72ch;                           /* ancho máximo de una línea de texto (legibilidad) */
  --fs-brand:      1.4rem;                         /* nombre del sitio, arriba a la izquierda (antes 1.15rem). 1rem = 16 px, el tamaño base del navegador */
  --fw-brand:      600;                            /* grosor del nombre del sitio: 400 normal, 500 medio, 700 negrita */
  --fs-menu:       clamp(.95rem,1.25vw,1.15rem);   /* elementos del menú en escritorio */
  --fs-menu-m:     1.1rem;                         /* elementos del menú desplegable en móvil */
  --fs-h1:         clamp(1.8rem,2.6vw,2.2rem);     /* título de página (.page-title) */
  --fs-h2:         .85rem;                         /* rótulos de sección, p. ej. «Highlights» */
  --fs-crumbs:     .875rem;                        /* migas de pan (Home > Sección > Página); antes 1rem */
  --ws-crumbs:     -.12em;                         /* espacio entre palabras de las migas (negativo = más junto; 0 = normal) */
  --crumbs-color:  #E0E0E0;                        /* color de las migas de pan: gris claro sobre el fondo del sitio */
  --crumbs-hover:  #FFFFFF;                        /* color de las migas al pasar el cursor (más claro, sin subrayado) */
  --font-crumbs:   "Courier New",Courier,monospace; /* tipografía de las migas de pan */
  --fst-crumbs:    italic;                         /* estilo de las migas: italic o normal */
  --fs-link-hl:    1.05rem;                        /* enlaces de la sección Highlights */
  --fs-caption:    13px;                           /* títulos bajo la galería y el vídeo */
  --fs-small:      .8rem;                          /* pie de página y rótulo de la nube */
  --fw-h1:         400;                            /* grosor del título de página */
  --ls-caption:    .06em;                          /* espaciado de letras en títulos bajo imagen */
  --ls-article-title: 1px;                    /* espaciado extra de letras en los títulos de artículo (listado y página) */
  --ls-h2:         .14em;                          /* espaciado de letras en rótulos de sección */

  /* ---------- 3. MEDIDAS Y REJILLA ---------- */
  --hero-w:        75vw;                      /* ancho del bloque central de la portada y de todos los bloques de página (100 % en móvil) */
  --pad:           clamp(16px,4vw,48px);      /* margen lateral de la página */
  --gap:           32px;                      /* separación entre tarjetas */
  --bp-mobile:     760px;                     /* referencia: punto de corte del menú móvil (se escribe a mano en @media de site.css, que no admite variables) */

  /* ---------- 4. TARJETAS DE LISTADO (Interactive, Videos) ---------- */
  --tile-ratio:    16/9;                      /* proporción de la imagen de cada tarjeta */
  --tile-cap-bg:   rgba(20,20,20,.93);        /* cara oculta de la tarjeta (fondo del título al girar) */
  --tile-cap-ink:  #fff;                      /* texto sobre la cara oculta */
  --fs-tile-title: clamp(1.3rem,2.1vw,1.9rem);/* título sobre la cara oculta */
  --fs-tile-desc:  clamp(.9rem,1.2vw,1.1rem); /* descripción sobre la cara oculta */
  --tile-ratio-video: 3/2;                    /* proporción de las miniaturas del listado de Videos */
  --fs-vtitle:     1rem;                      /* título en negrita bajo cada miniatura del listado de Videos */
  --fs-tile-cta:   .95rem;                    /* texto de llamada «Watch now» sobre la cara oculta */
  --fs-meta:       .95rem;                    /* datos de la ficha de vídeo (año, duración, formato, créditos) */
  --tile-perspective: 880px;                  /* profundidad del giro: menor = giro más acusado */

  /* ---------- 5. GALERÍA Y VÍDEO ---------- */
  --count-color:   var(--link-hover);         /* número del contador sobre la foto */
  --count-bg:      rgba(18,18,18,.8);         /* caja oscura del contador y de los botones del vídeo */
  --caption-color: rgba(255,255,255,.78);     /* título bajo la imagen o el vídeo */
  --lb-bg:         var(--bg);                 /* fondo del visor ampliado de la galería (también en pantalla completa): el mismo que el de las páginas */
  --icon:          var(--link-hover);         /* iconos y contador del visor de galería y botones del reproductor de vídeo */
  --stage-max-h:   78vh;                      /* altura máxima del vídeo de portada */

  /* ---------- 6. MOVIMIENTO ---------- */
  --t-flip:        .4s;                       /* duración de cada mitad del giro de las tarjetas (imagen que sale, texto que entra); total = el doble */
  --t-fade:        .9s;                       /* duración del fundido entre fotos de la galería */

  /* ---------- 7. ARTÍCULOS Y NOTAS (citas interactivas) ---------- */
  --note-mark:     rgb(255,0,0);              /* número de llamada de nota en el texto */
  --fs-note-mark:  .83rem;                    /* tamaño del número de llamada (superíndice) */
  --note-bg:       rgb(232,232,232);          /* fondo del recuadro que muestra la nota */
  --note-border:   rgb(255,102,0);            /* borde del recuadro de la nota */
  --note-ink:      #000;                      /* texto de la nota */
  --fs-note:       .875rem;                   /* tamaño del texto de la nota */
  --note-w:        280px;                     /* ancho del recuadro de la nota */
  --note-radius:   6px;                       /* redondeo del recuadro */
  --note-shadow:   0 5px 10px rgba(0,0,0,.2); /* sombra del recuadro */
  --btn-bg:        rgba(0,0,0,.8);            /* botón «Read more» del listado de artículos y botón del formulario */
  --btn-ink:       #fff;                      /* texto del botón */
  --btn-bg-hover:  var(--link-hover);         /* botón al pasar el cursor */
  --btn-ink-hover: #000;                      /* texto del botón al pasar el cursor (negro: legible sobre el amarillo) */
  --brand-color:   rgba(255,255,255,1);       /* nombre del sitio (cabecera) */
  --brand-hover:   rgba(255,255,255,.8);      /* nombre del sitio al pasar el cursor: la transparencia baja de 1 a 0,8 */
}