/* ===========================================================================
   style.css — negro sobre blanco, una sola tipografía y un solo tamaño.
   Las medidas salen del Figma (ancho 1920px) pasadas a vw, así el sitio se
   ve igual de proporcionado en cualquier pantalla ancha.
   El naranja aparece SOLO en el recuadro de info de cada proyecto.
   ======================================================================== */

@font-face {
  font-family: "ITC Avant Garde Gothic Std";
  /* woff2 convertido sin hinting: el .otf original deforma la S en Windows
     a tamaños chicos. Mismo dibujo y mismo kerning. Ver _herramientas/. */
  src: url("fonts/ITCAvantGardeStd-DemiCn.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --negro: #000;
  --blanco: #fff;
  --naranja: #ff4a00;       /* recuadro de info, nada más */

  /* Recuadro que aparece cuando una imagen todavía no existe. */
  --hueco: #e9e9e9;
  --hueco-texto: #5a5a5a;   /* 6.3:1 sobre --hueco */

  --ui: max(14px, 1.43vw);          /* 27.4px en el Figma: todo el texto */
  --interlinea: 1.03;               /* párrafos: el "87.7%" del Figma es sobre el alto de la fuente, no sobre el cuerpo */
  --borde: max(12px, 0.97vw);       /* margen lateral: 18–20px en el Figma */
  --separacion: 1.12em;             /* entre dato y dato de una fila: 4–5 espacios en el Figma */
  --columna: 65.2%;                 /* ancho de los párrafos de proyecto: 1252px */
  --hasta-contenido: 15.15vw;       /* del borde de arriba al primer texto de un proyecto: 291px */
  --hasta-about: 13.18vw;           /* del borde de arriba al about de la home: 253px */
  --alto-encabezado: calc(2 * var(--borde) + 1.35 * var(--ui));
  --entre-bloques: 1.4vw;           /* texto ↔ imagen en la página de proyecto: ~27px */
  --aire-prototipos: 7.8vw;         /* arriba, abajo y entre prototipos: ~150px */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--negro);
  font-family: "ITC Avant Garde Gothic Std", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: var(--ui);
  line-height: 1.35;
  font-feature-settings: "tnum" 1;   /* cifras tabulares: el contador no baila */
}

a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }

/* Botón que no parece botón: mismo tratamiento que un link. */
.plano {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* === Caja de imagen ========================================================
   TODO lo que carga (imagen, video, miniatura) va adentro de un .media.
   El alto queda reservado por aspect-ratio antes de la descarga, así que la
   página nunca salta: ni al clickear, ni al cargar, ni si el archivo falta.
   No la saques de ningún lado.
   ========================================================================= */

.media {
  position: relative;
  aspect-ratio: var(--ar, 1.5);
  overflow: hidden;
}
.media > img,
.media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* nunca recorta: si el ratio no coincide, deja aire */
  display: block;
  background: transparent;
}

/* Falta el archivo: recuadro gris del tamaño correcto con el alt adentro. */
.media.falta { background: var(--hueco); }
.media.falta > img,
.media.falta > video { display: none; }
.media.falta::after {
  content: attr(data-alt);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 10px 12px;
  color: var(--hueco-texto);
  font-size: 13px;
  line-height: 1.3;
}

/* === Saludo y about ====================================================== */

.top {
  display: flex;
  align-items: baseline;
  gap: 2rem;
  padding: var(--borde);
}
.top p { margin: 0; flex: 1; }
/* lab empieza en x=1550 del Figma; info va contra el borde. */
.menu { display: flex; gap: max(1.5rem, 13.6vw); }

.about {
  margin: calc(var(--hasta-about) - var(--alto-encabezado)) 0 10.5vw;
  padding-left: 30.63vw;        /* 588px en el Figma */
  padding-right: var(--borde);
  line-height: var(--interlinea);
}
/* Los saltos de línea son los de data.js, no los del ancho de la ventana. */
.about p {
  margin: 0 0 2.05vw;           /* 39px entre párrafo y párrafo */
  white-space: pre-line;
}
.about p:last-child { margin-bottom: 0; }

/* About desordenado (app.js → desordenar): las letras sueltas no generan
   scroll lateral. */
.about.desordenado { overflow-x: clip; }
.about .palabra { display: inline-block; white-space: nowrap; }
.about .letra { display: inline-block; will-change: transform; }

/* === Bloque de proyecto en la portada ==================================== */

.proyecto { margin-bottom: 1vw; }

/* Fila de datos: de borde a borde, con explore al extremo derecho. */
.meta {
  display: flex;
  align-items: baseline;
  gap: 0 var(--separacion);
}
/* Una sola línea siempre: si no entra, app.js esconde datos (compactar). */
.meta > * { white-space: nowrap; flex-shrink: 0; }
.meta.apretada .titulo {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proyecto .meta { padding: 0 var(--borde) 0.5vw; }
.meta .ver { margin-left: auto; }

/* El visor: ancho y proporción salen de data.js por custom property. */
.visor {
  position: relative;
  width: var(--w);
  margin: 0 auto;
  aspect-ratio: var(--ar);
}

/* Todas las láminas montadas desde el principio; se alterna cuál se ve.
   visibility (no display) para que el navegador ya las tenga resueltas. */
.visor .lamina {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
}
/* Transición entre láminas (SITIO.transicion en data.js). "saliendo" es la
   que se va: sigue visible mientras dura la transición.
   - transparencia: la nueva aparece encima de la que se va, que queda entera
     abajo hasta que termina (así no se ve el blanco del fondo).
   - desplazamiento: las dos se corren juntas; lo mueve app.js y el visor
     recorta lo que queda afuera.                                          */
.visor .lamina.activa {
  visibility: visible;
  opacity: 1;
  z-index: 2;
  transition: opacity var(--fundido, 0s) var(--curva, ease-in-out);
}
.visor .lamina.saliendo { visibility: visible; opacity: 1; z-index: 1; }
.visor.desliza { overflow: hidden; }

/* El recuadro de info: última lámina, y lo que asoma con ABC. */
.lamina-texto {
  display: flex;
  align-items: center;
  padding: 0 14%;
  background: var(--naranja);
}
.lamina-texto p {
  margin: 0;
  max-width: 46ch;
  line-height: var(--interlinea);
}

/* Dos zonas de click sobre la imagen: 30% izquierda vuelve, el resto avanza. */
.zona {
  position: absolute;
  top: 0;
  bottom: 0;
  border: 0;
  background: none;
  padding: 0;
  z-index: 9999;       /* arriba de las láminas, que se apilan durante el fundido */
}
.zona-prev { left: 0; width: 30%; cursor: w-resize; }
.zona-next { right: 0; width: 70%; cursor: e-resize; }

.pie {
  margin: 10px 0 0;
  padding: 0 var(--borde);
}

/* === Página de proyecto ================================================== */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: 0 max(1.5rem, 12.1vw);   /* de website a back: 233px en el Figma */
  padding: var(--borde);
  background: var(--blanco);
}
.cabecera .meta { flex: 1; min-width: 0; }
.cabecera > a { white-space: nowrap; }

#contenido { padding-top: calc(var(--hasta-contenido) - var(--alto-encabezado)); }

.texto {
  width: var(--columna);
  margin: 0 auto var(--entre-bloques);
  line-height: var(--interlinea);
}

/* La galería ocupa todo el ancho para que el contador pueda ir al margen
   derecho, alineado con el borde de arriba de la foto. */
.galeria {
  position: relative;
  margin-bottom: var(--entre-bloques);
}
.galeria .contador {
  position: absolute;
  top: 0;
  right: var(--borde);
}

.bloque { margin: 0 auto var(--entre-bloques); }
.bloque.ancho { width: var(--w); }
.bloque.sangre { width: 100%; }
/* El pie del video se alinea con el bloque, no con el margen de la página,
   salvo cuando el bloque va a sangre y no hay margen con el que alinearse. */
.bloque .pie { padding: 0; }
.bloque.sangre .pie { padding: 0 var(--borde); }

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: var(--w);
  margin: 0 auto var(--entre-bloques);
}

.cita {
  width: var(--columna);
  margin: 0 auto var(--entre-bloques);
  line-height: var(--interlinea);
}

/* === Prototipos (Figma) ==================================================
   Uno debajo del otro. El celular va centrado en la página y el pie
   (nombre, try it, open in Figma) en la columna de texto, a su izquierda,
   alineado con el borde de arriba de la pantalla. El alto del celular es el
   de la ventana menos el encabezado: se usa entero sin scrollear.         */

.prototipos {
  width: var(--columna);
  margin: var(--aire-prototipos) auto;
  line-height: var(--interlinea);
}
.prototipos-titulo { margin: 0 0 var(--entre-bloques); }

.prototipo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  margin: 0 0 var(--aire-prototipos);
}
.prototipo:last-child { margin-bottom: 0; }

.prototipo-pie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2em;
  padding-right: var(--borde);
}
.prototipo-texto { max-width: 18ch; }

.pantalla {
  height: min(
    calc(100svh - var(--alto-encabezado) - 2 * var(--borde)),
    calc((100vw - 2 * var(--borde)) / var(--ar)),
    900px
  );
}
/* El iframe tiene tamaño fijo (app.js) con la pantalla a 1:1 en el medio.
   Se centra sobre el recuadro y se escala por --escala: la pantalla viva
   cae justo encima del póster y el margen de Figma queda recortado. */
.pantalla iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--escala, 1));
  max-width: none;
  border: 0;
  display: block;
  opacity: 0;
  transition: opacity 0.4s ease;
}
/* Mientras carga se sigue viendo el póster; el iframe aparece encima. */
.prototipo.activo .pantalla iframe { opacity: 1; }

/* Toda la pantalla es el botón de "try it" hasta que arranca. */
.pantalla-tapa {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

/* El proyecto siguiente, enganchado al final: no hay que volver al índice. */
.siguiente {
  border-top: 1px solid var(--negro);
  margin: 4rem var(--borde) 0;
  padding: 1.25rem 0 2rem;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.25rem;
  align-items: center;
}

/* === Franja de contacto ================================================== */

.contacto {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--separacion);
  margin-top: 6vw;
  padding: var(--borde);
}

/* === Responsive ========================================================== */

@media (max-width: 700px) {
  :root { --separacion: 0.6em; --hasta-contenido: 6rem; --entre-bloques: 1.5rem; }
  /* En pantalla angosta los saltos del Figma dejan palabras sueltas: corre solo. */
  :root { --hasta-about: 6rem; }
  .about { padding-left: var(--borde); margin-bottom: 4rem; }
  .about p { white-space: normal; margin-bottom: 1em; }
  .proyecto { margin-bottom: 2rem; }
  .proyecto .meta { padding-bottom: 6px; }
  .visor,
  .bloque.ancho,
  .duo { width: 100%; }              /* en teléfono, todo a ancho completo */
  .duo { grid-template-columns: 1fr; }
  .texto,
  .cita { width: auto; margin-left: var(--borde); margin-right: var(--borde); }
  /* Sin margen al costado, el contador pasa abajo de la foto. */
  .galeria .contador { position: static; display: block; text-align: right; padding: 6px var(--borde) 0; }
  .siguiente { grid-template-columns: 1fr; }
  /* El pie pasa arriba del celular, en una sola línea. */
  :root { --aire-prototipos: 4rem; }
  .prototipos { width: auto; margin-left: var(--borde); margin-right: var(--borde); }
  .prototipo { grid-template-columns: 1fr; gap: 0.6rem; }
  .prototipo-pie { flex-direction: row; flex-wrap: wrap; gap: 0 var(--separacion); padding-right: 0; }
  .prototipo-texto { max-width: none; flex-basis: 100%; order: 1; }
  .pantalla { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pantalla iframe { transition: none; }
}