/* =========================================================
   TIPOGRAFÍAS (licencias libres para web)
   - Títulos: MuseoModerno (Google Fonts). Solo en:
       inicio → INFO y PROYECTOS
       páginas de campo → los tres campos del centro
       páginas de proyecto → los nombres de los proyectos (izquierda)
   - Subtítulos: Stardom (Fontshare) → nombre de cada fase y campos
     del panel PROYECTOS del inicio.
   - Todo lo demás: Inter (Google Fonts).
   (Absans y Ladi siguen guardadas en fonts/ por si se quieren recuperar)
   ========================================================= */

/* =========================================================
   VARIABLES — cambia aquí tipografías, tamaños y colores
   ========================================================= */
:root {
  --font-titulos: "MuseoModerno", sans-serif;
  --peso-titulos: 400;     /* grosor común de todos los títulos */
  --font-texto: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-subtitulos: "Stardom", Georgia, serif;   /* subtítulos junto a los títulos */
  --fs: 16px;
  --lh: 1.6;
  --fs-menu: 26px;          /* INFO y PROYECTOS */
  --fs-campos-inicio: 20px; /* campos del panel PROYECTOS */
  --fs-contador: 13px;      /* contador (1/20) */

  --ink: #fff;            /* color del texto del inicio (sobre las imágenes) */
  --logo-width: 220px;    /* ancho de la firma (arriba, centrada) */
  --logo-top: 46px;       /* distancia de la firma al borde superior */

  /* Salvapantallas */
  --saver-blur: 28px;                       /* cuánto difumina */
  --saver-veil: rgba(245, 243, 239, 0.35);  /* velo claro encima del difuminado */
  --saver-ink: #111;                        /* color de la firma grande */

  /* Distribución */
  --gutter: 35px;         /* margen lateral (menú derecho) */
  --side: clamp(56px, 7vw, 120px); /* margen del bloque de texto de la izquierda */
  --bottom: 30px;         /* distancia del contador al borde inferior */
  --panel-gap: 56px;      /* hueco MÍNIMO entre la firma / el contador y los textos */
  --col-width: 32ch;      /* ancho del bloque de la izquierda */
  --info-width: 38ch;     /* ancho máximo del panel INFO (centro) */
  --menu-gap: 2.2em;      /* separación entre INFO y PROYECTOS */

  /* Calculados (no hace falta tocarlos) */
  --logo-h: calc(var(--logo-width) * 321 / 1530);  /* alto de la firma */
  --line: calc(var(--fs) * var(--lh));             /* alto de una línea de texto */
  --band-top: calc(var(--logo-top) + var(--logo-h));   /* fin de la firma */
  --band-bottom: calc(var(--bottom) + var(--line));    /* inicio del contador */
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: var(--fs)/var(--lh) var(--font-texto);
  -webkit-font-smoothing: antialiased;
}

/* Cursor: el normal del sistema; mano en enlaces y botones.
   Con ratón, js/cursor.js lo cambia por un punto (abajo) */
a, button { cursor: pointer; }

/* ---------- Cursor propio: un punto ---------- */
html.cursor-propio,
html.cursor-propio * { cursor: none !important; }

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #111;
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.85);
  pointer-events: none;
  transition:
    width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.2s ease;
}

.cursor-texto {
  font: 300 22px/1 var(--font-texto);
  color: #111;
  transform: translateY(-1px);
}

/* Sobre lo que se puede pulsar: un círculo semitransparente, de cristal */
.cursor.es-clic {
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  background: rgb(255 255 255 / 0.22);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);   /* poco: deja leer el enlace que hay debajo */
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.75),
    0 0 0 1px rgb(0 0 0 / 0.14),
    0 4px 14px rgb(0 0 0 / 0.14);
}

/* En las fotos, algo más opaco para que el signo se lea bien */
.cursor.con-signo {
  background: rgb(255 255 255 / 0.5);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
}

.cursor.pulsado.es-clic { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
.cursor.oculto { opacity: 0; }

/* Todos los títulos: mismo grosor */
.nav-btn,
.campo-item,
.p-item {
  font-weight: var(--peso-titulos);
}

p { margin: 0 0 1.4em; }

/* Títulos del inicio: INFO y PROYECTOS */
.nav-btn {
  font-family: var(--font-titulos);
  font-size: var(--fs-menu);
  line-height: 1.2;
}

/* Etiqueta pequeña: contador */
.counter {
  font-size: var(--fs-contador);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

/* =========================================================
   IMÁGENES A PANTALLA COMPLETA
   Efecto "fondo fijo": cada imagen se queda clavada a la
   pantalla (position: fixed) y su .slide actúa como una
   ventana que sube con el scroll (clip-path recorta la imagen
   al tamaño de la ventana). Así la siguiente imagen va
   destapándose sobre la anterior sin que ninguna se mueva.
   ========================================================= */
.slides { margin: 0; }

.slide {
  position: relative;
  margin: 0;
  height: 100vh;
  height: 100svh;
  clip-path: inset(0);
  background: #ddd;
}

.slide a {
  display: block;
  height: 100%;
}

.slide img {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

/* =========================================================
   AVATAR DE LA PRIMERA IMAGEN
   La figura se ve pixelada (un lienzo encima de la foto, con
   el mismo encuadre). Al acercar el ratón, los píxeles se
   difuminan y se ve el avatar tal cual.
   ========================================================= */
.avatar-pixeles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  transition: opacity 0.6s ease, filter 0.6s ease;
}

/* Ratón cerca: los píxeles se difuminan y desaparecen */
.avatar-visible .avatar-pixeles {
  opacity: 0;
  filter: blur(8px);
}

/* Mientras se prepara el pixelado, la foto no se enseña (así
   no asoma el avatar nítido un instante al abrir la web) */
.slide--avatar.avatar-espera img { visibility: hidden; }

/* =========================================================
   VELO DE LECTURA
   Oscurece un poco los bordes de la imagen, donde están los
   textos (más a la izquierda, donde va el bloque principal),
   para que el texto blanco se lea sobre cualquier foto. Con
   INFO o PROYECTOS abiertos, la imagen se difumina y oscurece.
   ========================================================= */
.velo {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(to right, rgb(10 10 10 / var(--velo-izq, 0.5)) 0, rgb(10 10 10 / calc(var(--velo-izq, 0.5) * 0.52)) 26%, rgb(10 10 10 / 0) 46%),
    linear-gradient(to left, rgb(10 10 10 / 0.34) 0, rgb(10 10 10 / 0) 26%),
    linear-gradient(to bottom, rgb(10 10 10 / 0.28) 0, rgb(10 10 10 / 0) 20%),
    linear-gradient(to top, rgb(10 10 10 / 0.28) 0, rgb(10 10 10 / 0) 14%);
  transition: background-color 0.45s ease, backdrop-filter 0.45s ease, -webkit-backdrop-filter 0.45s ease;
}

body.panel-abierto .velo {
  background-color: rgb(10 10 10 / 0.32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* =========================================================
   CAPA DE INTERFAZ
   Texto blanco con una sombra muy suave (casi invisible) que
   lo separa de la imagen
   ========================================================= */
.ui {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  text-shadow: 0 0 2px rgb(0 0 0 / 0.18), 0 1px 12px rgb(0 0 0 / 0.3);
}

.ui .firma { filter: drop-shadow(0 0 10px rgb(0 0 0 / 0.35)); }

.ui a,
.ui button,
.ui .panel { pointer-events: auto; }

/* Sobre las fotos el texto necesita un trazo algo más grueso */
.ui .panel { font-weight: 500; }

.topbar > *,
.panel,
.counter { position: absolute; }

/* Logotipo (firma). Toma el color del texto. */
.firma {
  display: block;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: var(--firma-grosor, 0.7px);
  overflow: visible;
}

/* Firma dentro del texto (bloque de la izquierda del inicio), a la
   altura de una línea, en lugar de una palabra */
.firma--texto {
  display: inline-block;
  height: 1.55em;
  width: auto;
  aspect-ratio: 1530 / 321;
  margin-right: 0.15em;
  vertical-align: -0.45em;
}

/* Engrosa un poco los trazos finos para que no desaparezcan
   cuando la firma se ve pequeña */
#firma path { vector-effect: non-scaling-stroke; }

/* Firma centrada arriba (mismo eje que el contador de abajo) */
.logo {
  left: 50%;
  top: var(--logo-top);
  transform: translateX(-50%);
}

.logo .firma {
  width: var(--logo-width);
  aspect-ratio: 1530 / 321;
  height: auto;
}

.logo:hover,
.logo:focus-visible { opacity: 0.6; text-decoration: none; }

/* Menú: a la derecha, centrado en vertical, un botón encima del otro */
.menu {
  right: var(--menu-right, var(--gutter));
  top: var(--menu-top, 50%);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: var(--menu-align, flex-start);
  gap: var(--menu-gap);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
}

.nav-btn[aria-expanded="true"] { text-decoration: underline; }

/* Paneles de texto: se colocan en la franja que queda entre la
   firma (arriba) y el contador (abajo), centrados en ella. Así el
   hueco firma→texto es igual que el hueco texto→contador, y nunca
   menor que --panel-gap. Si el texto no cabe, hace scroll. */
.panel {
  top: calc(var(--band-top) + var(--panel-gap));
  bottom: calc(var(--band-bottom) + var(--panel-gap));
  height: fit-content;
  max-height: calc(100svh - var(--band-top) - var(--band-bottom) - 2 * var(--panel-gap));
  margin-block: auto;
  max-width: calc(100vw - 2 * var(--gutter));
  overflow-y: auto;
  scrollbar-width: none;
}

.panel::-webkit-scrollbar { display: none; }

/* Bloque principal: a la izquierda, texto alineado a la izquierda.
   Se queda siempre visible, aunque se abra INFO o PROYECTOS. */
.panel--main {
  left: var(--side);
  width: var(--col-width);
}

/* INFO y PROYECTOS: en el centro de la pantalla */
.panel--info,
.panel--index {
  left: 50%;
  transform: translateX(-50%);
}

/* El ancho de INFO se ajusta para no pisar nunca el bloque de la izquierda */
.panel--info {
  width: min(var(--info-width), calc(100vw - 2 * (var(--side) + var(--col-width) + 40px)));
}

.panel--index { width: max-content; }

/* INFO: títulos de apartado y fechas */
.info-titulo {
  margin: 0 0 0.7em;
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}
.info-titulo:not(:first-child) { margin-top: 2.2em; }
.info-fecha {
  display: block;
  font-size: 0.85em;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.panel--info p + p { margin-top: 1.1em; }
.panel--info a { text-decoration: underline; text-underline-offset: 2px; }

/* Con INFO o PROYECTOS abiertos, el bloque de la izquierda se difumina
   y se apaga, igual que la imagen de fondo (con INFO, los logotipos de
   los programas pueden pasar por encima) */
.panel--main { transition: filter 0.45s ease, opacity 0.45s ease; }
body.panel-abierto .panel--main {
  filter: blur(6px);
  opacity: 0.3;
  pointer-events: none;
}

/* ---------- Logotipos de los programas (INFO) ---------- */
.programas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.programa {
  position: absolute;
  width: var(--t, 64px);
  height: var(--t, 64px);
  opacity: 0;
  transform: scale(0.6) rotate(var(--g, 0deg));
  transition:
    opacity 0.5s ease var(--retraso, 0s),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--retraso, 0s);
}

.programa.es-visible {
  opacity: 1;
  transform: scale(1) rotate(var(--g, 0deg));
}

.programa img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgb(0 0 0 / 0.35));
  pointer-events: auto;   /* al pasar el ratón se ve el nombre del programa */
  animation: flotar var(--flota, 6s) ease-in-out var(--fase, 0s) infinite alternate;
}

/* Muy despacio, arriba y abajo */
@keyframes flotar {
  from { transform: translateY(-5px); }
  to { transform: translateY(5px); }
}

/* Versión móvil: en fila, debajo del texto de INFO */
.info-programas { display: none; }

.panel[hidden] { display: none; }

.index-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Campos (panel PROYECTOS), con aire entre uno y otro */
.index-list li { line-height: 1.5; }
.index-list li + li { margin-top: var(--campos-aire, 0.5em); }

.index-list a {
  font-family: var(--font-subtitulos);
  font-style: var(--estilo-subtitulos, normal);
  font-size: var(--fs-campos-inicio);
  font-weight: 400;
}

/* Contador (n/total), centrado abajo */
.counter {
  left: 50%;
  bottom: var(--bottom);
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
}

.counter-project { margin-left: 1ch; }

/* Portátiles pequeños: letra algo menor y bloque izquierdo más
   estrecho para que quepan los tres (izquierda, centro, menú) */
@media (max-width: 1200px) {
  :root {
    --fs: 16px;
    --col-width: 28ch;
  }
}

/* Tablets en vertical: ya no caben el bloque de la izquierda y el
   panel central a la vez, así que el panel ocupa su lugar */
@media (max-width: 900px) {
  .ui.has-open-panel .panel--main { display: none; }
  .panel--info { width: min(var(--info-width), calc(100vw - 2 * var(--side))); }
}

/* =========================================================
   AJUSTES SOLO PARA ORDENADOR (pantallas de más de 1200 px)
   Valores elegidos con el panel de ajustes
   ========================================================= */
@media (min-width: 1201px) {
  :root {
    --fs-menu: 27px;
    --fs-campos-inicio: 28px;
    --fs-contador: 20px;
    --logo-top: 50px;
    --side: 88px;
    --col-width: 35ch;
    --info-width: 45ch;
    --menu-gap: 1.5em;
    --panel-gap: 40px;
    --menu-right: 88px;       /* INFO/PROYECTOS a la misma distancia del borde que el bloque izq. */
    --menu-top: 50%;
    --menu-align: flex-end;   /* INFO y PROYECTOS alineados a la derecha */
  }

  .ui .panel p { line-height: 1.45; }
}

/* =========================================================
   SALVAPANTALLAS
   ========================================================= */
.screensaver {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  /* Cristal esmerilado: difumina la web que queda detrás */
  background: var(--saver-veil);
  -webkit-backdrop-filter: blur(var(--saver-blur)) saturate(1.1);
  backdrop-filter: blur(var(--saver-blur)) saturate(1.1);
  color: var(--saver-ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s linear, visibility 0s linear 0.1s;
}

.screensaver.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s linear;
}

.firma--xl {
  --firma-grosor: 1px;
  width: min(72vw, 1100px);
  aspect-ratio: 1530 / 321;
  height: auto;
}

/* =========================================================
   MÓVIL
   ========================================================= */
@media (max-width: 600px) {
  :root {
    --fs: 15px;
    --gutter: 16px;
    --bottom: 22px;
    --logo-top: 30px;
    --logo-width: 140px;
    --side: 24px;
    --panel-gap: 32px;
    --menu-top: calc(var(--logo-top) + var(--logo-h) + 18px);
    /* En móvil la franja de texto empieza debajo del menú */
    --band-top: calc(var(--menu-top) + var(--line));
  }

  .firma--xl { width: 86vw; }

  /* En móvil no hay sitio a la derecha: el menú pasa a una fila
     centrada justo debajo de la firma */
  .menu {
    right: auto;
    left: 50%;
    top: var(--menu-top);
    transform: translateX(-50%);
    flex-direction: row;
    gap: 2.5em;
  }

  .panel--main { width: auto; right: var(--side); }
  .panel--info { width: calc(100vw - 2 * var(--side)); }

  /* En móvil solo se ve un panel a la vez */
  .ui.has-open-panel .panel--main { display: none; }

  /* Logotipos: en fila debajo del texto de INFO, no repartidos */
  .programas { display: none; }
  .info-programas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 2em;
  }
  .info-programas img { width: 38px; height: 38px; object-fit: contain; }

  /* En móvil el texto ocupa todo el ancho: velo algo más fuerte y parejo */
  .velo { background-color: rgb(10 10 10 / 0.18); --velo-izq: 0.42; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .programa img { animation: none; }
  .avatar-pixeles,
  .velo,
  .screensaver,
  .screensaver.is-visible { transition: none; }
}