/* =========================================================
   PÁGINAS DE PROYECTO
   Hoja fija: firma arriba, contador abajo, proyectos a la
   izquierda y texto a la derecha. Solo la columna central de
   imágenes se desplaza con el scroll.
   Se apoya en styles.css (tipografía, firma).
   ========================================================= */
body.proyecto {
  /* ---- Ajustes de maquetación ---- */
  --m: clamp(44px, 5.5vw, 88px);    /* margen de la hoja (bandas de arriba y abajo) */
  --col: min(42vw, 680px);          /* ancho de la columna central de imágenes */
  --hueco: 48px;                    /* separación entre columnas */
  --separacion: 14vh;               /* espacio entre imágenes (modo "separadas") */
  --firma-w: 120px;

  --fs-mini: 11px;                  /* etiquetas pequeñas (mayúsculas) */
  --fs-otro: 15px;                  /* nombres de los otros proyectos (títulos, gris) */
  --fs-texto: 14.5px;                 /* texto de las fases (Figtree) */
  --fs-titulo: 40px;                /* nombre del proyecto (títulos) */
  --fs-fase: 24px;                  /* nombre de cada fase */

  --papel: #f3f1ec;
  --tinta: #111;
  --tinta-suave: #98958f;

  --apagada: 0.2;                   /* opacidad de las imágenes no activas */

  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-size: var(--fs-texto);
  line-height: 1.65;
}

/* Etiquetas pequeñas (mayúsculas espaciadas): campo, contador, números,
   ficha y visor. Misma tipografía que el texto; la jerarquía la marcan
   el tamaño, las mayúsculas y el gris */
.p-campo,
.p-contador,
.p-item-num,
.p-fase-num,
.p-ficha,
.p-visor-barra {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* DM Mono: medium para datos y números destacados, cursiva para
   las etiquetas secundarias */
.p-campo,
.p-contador,
.p-item-num,
.p-ficha dd { font-weight: 500; }

.p-fase-num,
.p-ficha dt,
.p-visor-pie { font-style: italic; }

.p-ficha dt { text-transform: none; }

/* Nombres de los proyectos (columna izquierda): tipografía de títulos.
   El actual en negro y grande; el resto en gris */
.p-item-nombre { font-family: var(--font-titulos); }



html:has(> body.proyecto) { background: #f3f1ec; }
body.proyecto a:hover,
body.proyecto a:focus-visible { text-decoration: none; }
body.con-visor { overflow: hidden; }

@view-transition { navigation: auto; }


/* ---------- Fondo con textura de bocetos ----------
   Por defecto: bocetos finos, versión suave (img/fondo/fino-suave.jpg).
   --fondo-intensidad: 1 = tal cual, 0.5 = la mitad de marcado, 0 = liso.
   Otras láminas para probar con body data-fondo="…" (panel de ajustes).
   Las láminas salen de herramientas/generar-fondo.ps1. Queda fija
   mientras se hace scroll, igual en el fondo y en las bandas. */
body.proyecto {
  --fondo-textura: url("../img/fondo/fino-suave.jpg");
  --fondo-intensidad: 0.5;   /* mitad de marcado que la lámina original */
}
body[data-fondo="liso"] { --fondo-textura: none; }
body[data-fondo="suave"] { --fondo-textura: url("../img/fondo/bocetos-suave.jpg"); }
body[data-fondo="medio"] { --fondo-textura: url("../img/fondo/bocetos-medio.jpg"); }
body[data-fondo="marcado"] { --fondo-textura: url("../img/fondo/bocetos-marcado.jpg"); }
body[data-fondo="ref-suave"] { --fondo-textura: url("../img/fondo/referencia-suave.jpg"); }
body[data-fondo="ref-medio"] { --fondo-textura: url("../img/fondo/referencia-medio.jpg"); }
body[data-fondo="ref-marcado"] { --fondo-textura: url("../img/fondo/referencia-marcado.jpg"); }
body[data-fondo="fino-suave"] { --fondo-textura: url("../img/fondo/fino-suave.jpg"); }
body[data-fondo="fino-medio"] { --fondo-textura: url("../img/fondo/fino-medio.jpg"); }
body[data-fondo="fino-marcado"] { --fondo-textura: url("../img/fondo/fino-marcado.jpg"); }

body.proyecto,
.p-banda {
  --fondo-velo: rgb(243 241 236 / calc(1 - var(--fondo-intensidad, 1)));
  background-image: linear-gradient(var(--fondo-velo), var(--fondo-velo)), var(--fondo-textura, none);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* ---------- Bandas fijas de arriba y abajo (márgenes de la hoja) ---------- */
.p-banda {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 5;
  height: var(--m);
  display: grid;
  place-items: center;
  background-color: var(--papel);
}

.p-banda--arriba { top: 0; }
.p-banda--abajo { bottom: 0; }

.p-firma { transition: opacity 0.2s; }

/* Campo desde el que se ha entrado (o "todos los proyectos") */
.p-campo {
  position: absolute;
  left: var(--m);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-mini);
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
  transition: color 0.2s;
}

.p-campo:hover,
.p-campo:focus-visible { color: var(--tinta); }
.p-firma:hover { opacity: 0.55; }

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

.p-contador {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Columnas laterales fijas ---------- */
.p-proyectos,
.p-texto {
  position: fixed;
  z-index: 4;
  top: 50%;
  transform: translateY(-50%);
  width: calc((100vw - var(--col)) / 2 - var(--m) - var(--hueco));
}

/* Izquierda: lista de proyectos, siempre en el mismo orden y sitio */
.p-proyectos {
  left: var(--m);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

/* El número en su columna y el nombre a la derecha, centrado en
   altura con él. El actual crece y pasa a negrita y en negro; el
   resto, más pequeño y en gris. El cambio es una transición suave */
.p-item {
  display: flex;
  align-items: center;
  font-size: var(--fs-otro);
  line-height: 1.2;
  color: var(--tinta-suave);
  transition:
    font-size 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    font-weight 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.4s ease;
}

.p-item:hover,
.p-item:focus-visible { color: var(--tinta); }

.p-item.es-actual {
  margin: 0.6rem 0;
  font-size: var(--fs-titulo);
  font-weight: var(--peso-proyecto-actual, 600);
  line-height: 1.1;
  color: var(--tinta);
}

.p-item-num {
  flex: none;
  min-width: 3.4em;
  font-family: var(--font-texto);
  font-size: var(--fs-mini);
}

.p-item-nombre { display: block; }

/* ---------- Cambio de proyecto: el contenido se desvanece y aparece el nuevo ---------- */
.p-imagenes,
.p-texto,
.p-ficha-fija,
.p-contador {
  transition: opacity 0.5s ease;
}
.p-imagenes { transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }

body.cambiando .p-imagenes,
body.cambiando .p-texto,
body.cambiando .p-ficha-fija,
body.cambiando .p-contador {
  opacity: 0;
  transition-duration: 0.3s;
}
body.cambiando .p-imagenes { transform: translateY(14px); }

/* Derecha: texto de cada fase (todos apilados; solo se ve el activo) */
.p-texto {
  right: var(--m);
  display: grid;
  /* centrado en la pantalla, sin llegar nunca a la ficha de abajo */
  max-height: calc(100vh - 2 * (var(--m) + var(--ficha-h, 90px) + 28px));
}

.p-fase {
  grid-area: 1 / 1;           /* todos en la misma celda, uno encima de otro */
  align-self: center;
  visibility: hidden;
}

.p-fase.es-activa,
.p-fase.sale { visibility: visible; }

.p-fase p { margin: 0 0 1.2em; }

.p-fase .p-fase-num {
  margin-bottom: 0.6em;
  font-size: var(--fs-mini);
  letter-spacing: 0.08em;
  color: var(--tinta-suave);
}

.p-fase-nombre {
  margin: 0 0 0.6em;
  font-family: var(--font-subtitulos);
  font-style: var(--estilo-subtitulos, normal);
  font-size: var(--fs-fase);
  font-weight: 400;
  line-height: 1.2;
}

.p-fase-texto { max-width: 40ch; }

/* Ficha del proyecto: fija abajo a la derecha (no cambia con el scroll) */
.p-ficha-fija {
  position: fixed;
  z-index: 6;
  right: var(--m);
  bottom: var(--m);
  width: calc((100vw - var(--col)) / 2 - var(--m) - var(--hueco));
}

.p-ficha {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.15em 1.4em;
  margin: 0;
  font-size: var(--fs-mini);
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.p-ficha dt { color: var(--tinta-suave); }
.p-ficha dd { margin: 0; }
.p-ficha a { text-decoration: underline; text-underline-offset: 2px; }

/* Máscaras de línea: cada línea entra/sale por su "ranura" */
.p-texto .l {
  display: block;
  overflow: clip;
  /* un poco de aire para que no se corten ascendentes ni descendentes */
  padding: 0.12em 0;
  margin: -0.12em 0;
}

.p-texto .l-in {
  display: block;
  transform: translateY(var(--desde, 110%));
}

.p-fase:not(.es-activa):not(.sale) .l-in { transition: none; }

.p-fase.es-activa .l-in {
  transform: none;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(0.28s + var(--i, 0) * 0.035s);
}

.p-fase.sale .l-in {
  transform: translateY(var(--hacia, -110%));
  transition: transform 0.32s cubic-bezier(0.7, 0, 0.84, 0);
  transition-delay: calc(var(--i, 0) * 0.015s);
}

/* ---------- Columna central de imágenes ---------- */
.p-imagenes {
  width: var(--col);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--separacion);
}

/* Por defecto (y si el sistema pide "reducir movimiento"): activa a
   color, el resto apagadas. Con movimiento, proyecto.js lo ajusta de
   forma continua según la distancia de cada imagen al centro. */
.p-img {
  margin: 0;
  opacity: var(--apagada);
  filter: grayscale(1);
}

/* Fotos: marco que recorta, para que la imagen pueda deslizarse
   un poco dentro de él al hacer scroll (parallax) */
.p-img.es-foto { overflow: hidden; }

.p-img.es-foto img {
  transform: scale(var(--escala-parallax, 1.17));
  will-change: transform;
}

.p-img.es-activa {
  opacity: 1;
  filter: none;
}

.p-imagenes {
  /* altura máxima de una imagen: que quepa entera entre las bandas */
  --alto-max: calc(100vh - 2 * var(--m) - 48px);
}

.p-img { width: var(--ancho, 100%); }

/* Las imágenes se amplían al hacer clic (visor); el visor se cierra con otro clic */
.p-img:not(.es-video) { cursor: zoom-in; }
.p-visor { cursor: zoom-out; }
.p-visor button { cursor: pointer; }   /* lo calcula proyecto.js según la proporción de cada imagen */

.p-img img,
.p-img video {
  display: block;
  width: 100%;
  height: auto;
}

.p-img video { background: #fff; }

/* Planos, bocetos y etiquetas: el blanco del papel se funde con
   el fondo, como si estuvieran impresos en la misma hoja */
.p-img.es-dibujo { mix-blend-mode: multiply; }

/* Modo "pegadas": imágenes del mismo ancho, una tras otra sin hueco */
body[data-imagenes="pegadas"] .p-imagenes { gap: 0; }
body[data-imagenes="pegadas"] .p-img { width: 100%; }

/* Bloques de texto intercalados: solo en móvil */
.p-fase--movil,
.p-otros-movil { display: none; }

/* ---------- Visor a pantalla completa ---------- */
.p-visor {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: var(--m) var(--m) 0;
  background: rgba(243, 241, 236, 0.97);
}

.p-visor[hidden] { display: none; }

.p-visor img {
  max-width: 100%;
  max-height: calc(100vh - 2 * var(--m) - 20px);
  width: auto;
  height: auto;
}

.p-visor-barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: var(--m);
  font-size: var(--fs-mini);
  letter-spacing: 0.06em;
}

.p-visor-barra button { color: var(--tinta-suave); }
.p-visor-barra button:hover { color: var(--tinta); }

/* ---------- Pantallas medianas ---------- */
@media (max-width: 1200px) {
  body.proyecto {
    --fs-titulo: 30px;
    --fs-texto: 14px;
    --fs-fase: 22px;
    --hueco: 36px;
  }
}

/* ---------- Móvil y tablet: todo apilado, con scroll normal ---------- */
@media (max-width: 900px) {
  body.proyecto {
    --m: 20px;
    --col: 100%;
    --firma-w: 110px;
    --fs-titulo: 34px;
    --fs-fase: 22px;
  }

  .p-banda { position: static; height: auto; padding: 24px 0 8px; background: none; }
  .p-banda--abajo { display: none; }

  .p-proyectos,
  .p-texto { position: static; transform: none; width: auto; }

  .p-texto { display: none; }

  .p-proyectos { padding: 24px var(--m) 8px; }
  .p-proyectos .p-item:not(.es-actual) { display: none; }
  .p-proyectos .p-item.es-actual { margin: 0; }

  .p-imagenes {
    width: auto;
    padding: 0 var(--m) 48px;
    gap: 16px;
    align-items: stretch;
  }

  .p-img { opacity: 1; filter: none; }
  .p-img { width: 100% !important; }
  .p-img.es-foto img { transform: none; }

  .p-banda--arriba {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .p-campo { position: static; transform: none; }

  .p-ficha-fija {
    position: static;
    width: auto;
    padding: 16px var(--m) 8px;
  }

  .p-fase--movil {
    display: block;
    visibility: visible;
    margin-top: 32px;
  }

  .p-otros-movil {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 32px var(--m) 48px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    margin: 0 var(--m);
  }

  .p-otros-movil .p-item { font-size: var(--fs-otro); }
}

/* ---------- Sin animaciones si el sistema lo pide ---------- */
.sin-movimiento .p-texto .l-in { transform: none !important; transition: none !important; }
.sin-movimiento .p-img { transition: opacity 0.45s ease, filter 0.45s ease; }
.sin-movimiento .p-img.es-foto img { transform: none; }
.sin-movimiento .p-item,
.sin-movimiento .p-imagenes { transition: none; }