/* ==========================================================================
   THEME · variables de diseño de ayaeliav.net
   Única hoja que hay que tocar para cambiar el aspecto general. site.css sólo lee estas variables.
   Orden: 1 colores · 2 tipografía · 3 medidas · 4 catálogo · 5 movimiento.
   ========================================================================== */
:root{
  /* ---------- 1. COLORES ---------- */
  --bg:           #f6f6f3;            /* blanco mate: fondo de todo el sitio */
  --ink:          #1d1d1d;            /* texto principal y menú */
  --muted:        #6b6b68;            /* texto secundario: pies de imagen, rótulos, pie de página */
  --active:       rgb(153,0,0);       /* bordó: elemento activo del menú y copyright */
  --hover:        dimgray;            /* color al pasar el cursor por menú, enlaces y botones (viraje a gris) */
  --title-color:  #666;               /* título de página (<h1>) y migas de pan */
  --rule:         rgba(0,0,0,.14);    /* líneas finas */
  --sold:         #c8102e;            /* punto rojo de obra vendida */

  /* ---------- 2. TIPOGRAFÍA ---------- */
  --font:         system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;  /* familia única del sitio */
  --fs-body:      1rem;
  --lh-body:      1.7;
  --measure:      72ch;               /* ancho máximo de línea en textos largos */
  --fs-brand:     1.4rem;             /* nombre del sitio, arriba a la izquierda (antes 1.2rem). 1rem = 16 px */
  --fw-brand:     700;                /* grosor del nombre del sitio */
  --fs-subtitle:  1rem;               /* subtítulo bajo el nombre («Visual artist»): ≈ 0,7 × el nombre */
  --fs-crumbs:    .85rem;             /* migas de pan (Home » Sección): ≈ 0,5 × el título de página */
  --fs-menu:      clamp(.95rem,1.2vw,1.1rem);
  --fs-h1:        1.75rem;            /* título de página */
  --fw-h1:        700;                /* grosor del título de página */
  --fs-h2:        .85rem;             /* rótulos de sección (CV, publicaciones) */
  --fs-caption:   .8rem;              /* pies bajo imagen y vídeo */
  --ls-caption:   .05em;
  --ls-h2:        .14em;

  /* ---------- 3. MEDIDAS ---------- */
  --hero-w:       70vw;               /* ancho del bloque central en escritorio (100 % en móvil) */
  --pad:          clamp(16px,4vw,48px);
  --gap:          8px;                /* separación entre obras del mosaico */
  --hero-ratio:   3/2;                /* marco del visor de la portada */
  --hero-max-h:   70vh;

  /* ---------- 4. CATÁLOGO ---------- */
  --row-h:        240px;              /* altura de referencia de cada fila del mosaico */
  --row-max-h:    460px;              /* altura máxima de una obra en el mosaico (evita que una pieza aislada crezca demasiado) */
  --blend:        multiply;           /* mezcla de las fotos con el fondo: multiply funde el blanco de la foto con el blanco mate de la página */
  --sold-size:    12px;               /* diámetro del punto rojo en el mosaico */
  --sold-size-lb: 14px;               /* diámetro del punto rojo en el visor ampliado */
  --crit-bg:      rgba(255,255,255,.6);  /* fondo semitransparente del desplegable de criterios */
  --crit-border:  .5px solid rgba(0,0,0,.55); /* borde del desplegable */
  --lb-bg:        #fff;               /* fondo del visor ampliado */

  /* ---------- 5. MOVIMIENTO ---------- */
  --t-fade:       1s;                 /* fundido entre imágenes de la portada (antes .9s) */
  --t-menu-step:  70ms;               /* retardo entre elementos del submenú al desplegarse (efecto cascada) */
  --menu-bg:      rgba(246,246,243,.6) ; /* fondo semitransparente del submenú */
  --menu-blur:    10px;               /* desenfoque de lo que queda bajo el submenú */
  --t-ui:         .15s;
}