/* =========================================================================
   Agustín Saez — fotografía callejera en blanco y negro

   Lenguaje visual: documental y de archivo, no de galería de arte.
   Tres tipografías con un trabajo cada una y ninguna decorativa:

     --display  Archivo    rótulos y títulos. Mayúsculas, tracking abierto.
     --sans     Inter      texto corrido. Se lee y desaparece.
     --mono     Plex Mono  datos: lugar, año, cámara, numeración de serie.

   La monoespaciada no es un capricho. En fotografía documental los pies de
   foto SON datos, y una monoespaciada los alinea en columna y los distingue
   del texto de autor de un vistazo. Es el lenguaje de las agencias.
   ========================================================================= */

/* --- Tipografías autoalojadas ------------------------------------------- */

@font-face {
  font-family: "PortfolioDisplay";
  src: url("/assets/fonts/display-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PortfolioDisplay";
  src: url("/assets/fonts/display-medium.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PortfolioSans";
  src: url("/assets/fonts/sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PortfolioSans";
  src: url("/assets/fonts/sans-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PortfolioMono";
  src: url("/assets/fonts/mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Fichas de diseño ---------------------------------------------------

   PAPEL Y OBRA SON DOS COSAS DISTINTAS, y esa separación es la regla que
   sostiene todo lo de abajo.

   El papel envejece: tiene temperatura, tiene grano, tiene tono de archivo.
   La obra no: se monta sobre neutro puro y se sirve tal cual salió de la
   cámara, sin virado, sin grano encima y sin viñeta.

   No es decoración, es óptica. Un gris neutro rodeado de crema se PERCIBE
   azulado —contraste simultáneo—, así que un marco cálido pegado a la imagen
   viraría una fotografía en blanco y negro sin que nadie la hubiera tocado.
   Es el mismo motivo por el que una galería monta con paspartú neutro.

   PRESUPUESTO DE CALOR (canal rojo menos canal azul):
     · papel y tipografía .... 16 como máximo
     · lo que toca la foto ...  0, sin excepción

   Un número se comprueba; «que quede bonito» no.
   ------------------------------------------------------------------------ */

:root {
  --display: "PortfolioDisplay", Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "PortfolioSans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
  --mono: "PortfolioMono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Papel: calor 15, 16, 16, 8, 14, 14. Dentro de presupuesto. */
  --fg: #17160f;
  --fg-suave: #4a473c;
  --mudo: #6f6b61;
  --bg: #f5f0e6;
  --bg-alt: #ede8dd;
  --linea: #ddd7cd;
  --sobre-foto: #ffffff;

  /* Obra: calor 0. Estos dos NUNCA se calientan. */
  --paspartu: #ffffff;
  --montaje: #e8e8e8;
  --copia: clamp(4px, 0.35vw, 7px);

  /* Escala contenida a propósito: en documental los títulos no gritan. */
  --t--2: clamp(0.66rem, 0.64rem + 0.10vw, 0.72rem);
  --t--1: clamp(0.76rem, 0.73rem + 0.14vw, 0.84rem);
  --t-0:  clamp(0.92rem, 0.89rem + 0.16vw, 1.00rem);
  --t-1:  clamp(1.05rem, 1.00rem + 0.28vw, 1.22rem);
  --t-2:  clamp(1.25rem, 1.12rem + 0.60vw, 1.75rem);
  --t-3:  clamp(1.60rem, 1.35rem + 1.20vw, 2.60rem);

  /* Rejilla densa: hoja de contactos, no sala de exposición. */
  --hueco: clamp(0.5rem, 0.3rem + 1vw, 1.1rem);
  --margen: clamp(1rem, 0.5rem + 2.2vw, 3rem);
  --ancho-texto: 36rem;
  --ancho-max: 104rem;
  --columna: 17rem;
  /* Cuadrícula de montaje. El número de columnas sale de --celda-min y del
     ancho disponible: 4 en escritorio, 3 en portátil, 2 en tableta, 1 en
     móvil. Cuadra igual con cualquiera de esos números. */
  --celda-min: 20rem;
  --celda-formato: 1;      /* marcos cuadrados, como en sala */
  --montura: clamp(0.5rem, 1.2vw, 1.1rem);

  /* Caja de lectura sobre fotografía. Una sola receta para las tres que hay:
     el cartel de próximamente, el título de la portada y la barra del logo y
     el menú. El desenfoque hace el trabajo de verdad —separa el texto de lo
     que pasa detrás mucho mejor que bajar la opacidad—, y así el contraste se
     gana donde hace falta en vez de oscureciendo la fotografía entera.
     Va SOBRE la imagen, así que la tinta es neutra y entra en el presupuesto
     de calor con límite 0. */
  --velo-tinta: #0c0c0c;
  --velo-fuerza: 42%;
  --velo-borde: rgba(255, 255, 255, 0.12);
  --velo-desenfoque: blur(14px) saturate(0.9);

  /* Marcas de encuadre. Se dibujan SOBRE la fotografía, así que la tinta
     entra en el presupuesto de calor con límite 0 igual que el paspartú. */
  --visor-tinta: #ffffff;
  --visor-margen: clamp(1rem, 2.4vw, 2.2rem);
  --visor-brazo: clamp(2.4rem, 6.5vw, 5.5rem);
  --visor-tick: clamp(0.7rem, 1.6vw, 1.2rem);
  --visor-trazo: 2px;
  --visor-opacidad: 1;

  /* En la portada la cabecera va superpuesta y absoluta, así que el visor
     tiene que empezar POR DEBAJO o las marcas de arriba caen detrás del logo
     y del menú. Acoplado al padding de .site-header: si cambia allí, cambia
     aquí. */
  --cabecera-alto: 3.4rem;

  --transicion: 200ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Grano del papel. Va incrustado como SVG: cero peticiones, cero
     dependencias, y la CSP ya permite data: en img-src. */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  --grano-fuerza: 0.055;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #ece8de;
    --fg-suave: #b3aea4;
    --mudo: #7a766c;
    --bg: #12110e;
    --bg-alt: #1b1915;
    --linea: #2e2b25;

    /* A oscuras la copia no se monta sobre blanco: sobre cartón neutro. Un
       borde blanco encendido sobre negro deslumbra y se come la fotografía. */
    --paspartu: #242424;
    --montaje: #1c1c1c;

    /* El ruido claro sobre fondo oscuro se ve el triple. */
    --grano-fuerza: 0.03;
  }
}

/* --- Reinicio mínimo ---------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* El grano del papel va DETRÁS del contenido (z-index negativo). Esa es la
   garantía técnica de que no puede caer nunca encima de una fotografía: no es
   una capa que se porta bien, es una capa que no llega. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--grano);
  opacity: var(--grano-fuerza);
  pointer-events: none;
}

img, picture, video { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transicion), opacity var(--transicion);
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--bg);
  color: var(--fg);
}
.skip-link:focus { left: 0; }

/* --- Etiquetas y datos --------------------------------------------------
   Todo lo que es DATO —lugar, año, cámara, numeración, secciones— comparte
   este tratamiento. Es la voz del archivo, distinta de la voz del autor. */

.etiqueta,
.site-nav__link,
.pagina__migas,
.pagina__meta,
.enlace-mas,
.serie-tarjeta__anio,
.serie-tarjeta__cuenta,
.site-footer__inner,
.hero__claim {
  font-family: var(--mono);
  font-size: var(--t--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* --- Logotipo -----------------------------------------------------------
   Una sola tipografía, un solo peso, mayúsculas y tracking muy abierto.
   Las dos palabras se distinguen solo por color. Esa contención es lo que
   lo hace sutil: mezclar dos familias en un logotipo de dos palabras casi
   nunca sale bien, porque cada una viene de un esqueleto distinto. */

.logo {
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.26em;
}

.logo__first { color: var(--fg); }

.logo__second {
  color: var(--mudo);
  margin-left: 0.65em;
  /* El tracking añade espacio TAMBIÉN detrás de la última letra: sin este
     descuento, un logotipo centrado queda corrido hacia la izquierda. */
  margin-right: -0.26em;
}

/* --- Cabecera ----------------------------------------------------------- */

/* El velo de la barra NO puede vivir en .site-header, y esto no es manía.
   Un elemento con backdrop-filter —igual que con filter o transform— pasa a
   ser el BLOQUE CONTENEDOR de sus descendientes position:fixed. El menú de
   móvil es .site-nav{position:fixed;inset:0}: en cuanto la cabecera llevaba el
   desenfoque encima, ese inset:0 dejaba de referirse a la pantalla y pasaba a
   referirse a la barra. Medido: el panel del menú salía de 61px de alto en vez
   de 844, así que el fondo tapaba la barra y los enlaces caían sueltos sobre
   la fotografía. Pasaba en TODAS las páginas, porque el desenfoque estaba en
   la regla base.

   Llevándolo a un pseudo-elemento se ve exactamente igual y la cabecera vuelve
   a ser transparente para el posicionamiento de sus hijos. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hueco);
  padding: 0.9rem var(--margen);
  border-bottom: 1px solid var(--linea);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-header__brand { font-size: 0.95rem; }

/* La barra va superpuesta a la fotografía, así que necesita el mismo velo que
   el resto del texto sobre imagen: en transparente el logo y el menú se perdían
   en cuanto la foto tenía una zona clara arriba. Resuelve además la portada sin
   fotografía, donde el texto blanco caía sobre papel claro. */
.site-header--overlay {
  position: absolute;
  inset: 0 0 auto 0;
  border-bottom: 1px solid var(--velo-borde);
}

/* El velo, en el pseudo-elemento por el mismo motivo que arriba. */
.site-header--overlay::before {
  /* Reserva para quien no entienda color-mix: sin ella se quedaría SIN fondo,
     que es justo el problema que este velo viene a resolver. Aproximada a
     propósito; si se ajusta --velo-fuerza, esta no la sigue. */
  background: rgba(12, 12, 12, 0.42);
  background: color-mix(in srgb, var(--velo-tinta) var(--velo-fuerza), transparent);
  backdrop-filter: var(--velo-desenfoque);
  -webkit-backdrop-filter: var(--velo-desenfoque);
}

.site-header--overlay .logo__first { color: var(--sobre-foto); }
.site-header--overlay .logo__second { color: rgba(255, 255, 255, 0.7); }
.site-header--overlay .site-nav__link { color: var(--sobre-foto); }
.site-header--overlay .nav-toggle__bar { background: var(--sobre-foto); }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.9rem);
}

.site-nav__link { color: var(--fg-suave); }
.site-nav__link:hover { color: var(--fg); }
.site-header--overlay .site-nav__link:hover { opacity: 0.7; }

.site-nav__link.is-current { color: var(--fg); }
.site-nav__link.is-current::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 0.3em;
  background: currentColor;
}

.nav-toggle { display: none; width: 2rem; height: 2rem; padding: 0.4rem; }
.nav-toggle__bar {
  display: block;
  height: 1px;
  background: var(--fg);
  transition: transform var(--transicion), opacity var(--transicion);
}
.nav-toggle__bar + .nav-toggle__bar { margin-top: 0.4rem; }

@media (max-width: 47.99em) {
  /* Por encima del panel, o el aspa de cerrar queda debajo del menú que abre
     y no hay forma de cerrarlo salvo eligiendo una sección. */
  .nav-toggle { display: block; position: relative; z-index: 1; }

  .site-nav {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transicion), visibility var(--transicion);
  }

  .site-nav.is-open { opacity: 1; visibility: visible; }
  .site-nav__list { flex-direction: column; gap: 1.5rem; }

  /* El segundo selector no sobra. Abierto, el menú es un panel del color del
     papel, ya no va sobre la fotografía, así que el blanco de
     `.site-header--overlay .site-nav__link` deja de tener sentido — y con su
     0,2,0 le ganaba a la regla de una sola clase. En la portada y con el
     teléfono en claro salía blanco sobre papel: contraste 1,06:1. Invisible.
     Y sólo se notaba con el tema claro, que es lo que hacía el fallo tan
     escurridizo. */
  .site-nav__link,
  .site-header--overlay .site-nav__link { font-size: var(--t-0); color: var(--fg); }

  .nav-toggle.is-open .nav-toggle__bar:first-child { transform: translateY(0.2rem) rotate(45deg); }
  .nav-toggle.is-open .nav-toggle__bar:last-child { transform: translateY(-0.2rem) rotate(-45deg); }
  .nav-toggle.is-open .nav-toggle__bar { background: var(--fg); }
}

/* --- Portada a pantalla completa ----------------------------------------
   svh y no dvh: con dvh la foto pega un salto en móvil al ocultarse la
   barra del navegador. svh mide con las barras visibles y el encuadre
   se queda quieto. */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 28rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--montaje);
}

/* Marcas de encuadre del visor.
   Van pegadas al borde de la pantalla a propósito: la fotografía sigue yendo
   a sangre y no pierde ni un píxel de tamaño. El gesto sin pagar el peaje.

   Ocho gradientes, dos por esquina: el brazo horizontal y el vertical. Se
   dibuja con fondos y no con bordes porque un borde no sabe recorrerse solo
   una parte del lado, y así no hace falta ni un elemento nuevo en el HTML. */
.hero::after {
  content: "";
  position: absolute;
  inset: calc(var(--cabecera-alto) + var(--visor-margen))
         var(--visor-margen)
         var(--visor-margen);
  z-index: 1;
  pointer-events: none;
  opacity: var(--visor-opacidad);
  --t: linear-gradient(var(--visor-tinta), var(--visor-tinta));
  background:
    var(--t) left    top    / var(--visor-brazo) var(--visor-trazo) no-repeat,
    var(--t) left    top    / var(--visor-trazo) var(--visor-brazo) no-repeat,
    var(--t) right   top    / var(--visor-brazo) var(--visor-trazo) no-repeat,
    var(--t) right   top    / var(--visor-trazo) var(--visor-brazo) no-repeat,
    var(--t) left    bottom / var(--visor-brazo) var(--visor-trazo) no-repeat,
    var(--t) left    bottom / var(--visor-trazo) var(--visor-brazo) no-repeat,
    var(--t) right   bottom / var(--visor-brazo) var(--visor-trazo) no-repeat,
    var(--t) right   bottom / var(--visor-trazo) var(--visor-brazo) no-repeat,
    /* Retículo: los tres ticks centrales. Abajo no lleva porque ahí vive la
       flecha de bajar, que ya hace de marca central. */
    var(--t) center  top    / var(--visor-tick) var(--visor-trazo) no-repeat,
    var(--t) left    center / var(--visor-trazo) var(--visor-tick) no-repeat,
    var(--t) right   center / var(--visor-trazo) var(--visor-tick) no-repeat;
  /* Una foto en blanco y negro puede tener una esquina blanca. Sin esta
     sombra, la marca desaparecería justo ahí. */
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

/* Sin fotografía el fondo es papel claro: la tinta blanca no se vería. */
.hero--vacia::after {
  --visor-tinta: #171717;
  opacity: 0.55;
  filter: none;
}

.hero__media {
  position: absolute;
  inset: 0;
  /* La miniatura de precarga llega como variable, no como estilo en línea:
     así el móvil puede quitarla al montar la copia sobre papel limpio. */
  background-image: var(--lqip, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero__media picture,
.hero__img { width: 100%; height: 100%; }

.hero__img {
  object-fit: cover;
  object-position: var(--focus-mobile, 50% 50%);
}

@media (min-width: 48em) {
  .hero__img { object-position: var(--focus-desktop, 50% 50%); }
}

.hero__velo {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--overlay, 0);
}

.hero__marca {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--sobre-foto);
  text-shadow: 0 1px 40px rgba(0, 0, 0, 0.4);

  /* La misma caja de lectura que el cartel de próximamente. */
  margin: 0 var(--margen);
  padding: clamp(1.5rem, 3.5vw, 2.6rem) clamp(1.6rem, 5vw, 3.5rem);
  /* Reserva para quien no entienda color-mix: sin ella se quedaría SIN fondo,
     que es justo el problema que este velo viene a resolver. Aproximada a
     propósito; si se ajusta --velo-fuerza, esta no la sigue. */
  background: rgba(12, 12, 12, 0.42);
  background: color-mix(in srgb, var(--velo-tinta) var(--velo-fuerza), transparent);
  border: 1px solid var(--velo-borde);
  backdrop-filter: var(--velo-desenfoque);
  -webkit-backdrop-filter: var(--velo-desenfoque);
}

.hero__logo {
  font-size: clamp(1.5rem, 0.9rem + 2.8vw, 3.2rem);
  font-weight: 400;
}
.hero__logo .logo { letter-spacing: 0.34em; }
.hero__logo .logo__second { margin-right: -0.34em; }
.hero__logo .logo__first { color: var(--sobre-foto); }
.hero__logo .logo__second { color: rgba(255, 255, 255, 0.72); }

.hero--vacia .hero__marca {
  color: var(--fg);
  text-shadow: none;
  background: none;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero--vacia .hero__logo .logo__first { color: var(--fg); }
.hero--vacia .hero__logo .logo__second { color: var(--mudo); }

/* --- Portada partida: la fotografía es vertical -------------------------
   `object-fit: cover` llena la pantalla cueste lo que cueste, así que una
   vertical 3:4 en una pantalla apaisada pierde más de la mitad de su altura y
   el encuadre solo elige qué franja se salva. Aquí la fotografía se lleva su
   columna, entera de arriba abajo y a sangre, y el nombre ocupa la otra sobre
   papel limpio. Es lo que se hace en una sala con un vertical: no se recorta,
   se le da su sitio.

   Solo en pantallas anchas DE VERDAD: ancha de píxeles y apaisada de forma.
   El ancho por sí solo no vale —una tableta en vertical mide 768 px y entraba
   aquí—, y partir en dos una pantalla más alta que ancha es estrechar la
   fotografía por gusto. */
@media (min-width: 48em) and (orientation: landscape) {
  .hero--vertical {
    place-items: stretch;
    background: var(--bg);
  }

  .hero--vertical .hero__media,
  .hero--vertical .hero__velo { inset: 0 0 0 42%; }

  .hero--vertical .hero__marca {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 42%;
    margin: 0;
    padding: 0 clamp(1.5rem, 4vw, 3.5rem);
    text-align: left;
    /* Fuera de la fotografía no hace falta velo ni sombra: el texto va sobre
       papel, así que se comporta como el de cualquier otra página. */
    color: var(--fg);
    text-shadow: none;
    background: none;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Con «Agustín Saez» sobra sitio —260 px de nombre en 323 de columna al
       ancho más justo—, pero el nombre sale de los ajustes y el día que sea
       más largo tiene que partir en dos líneas, no salirse de la columna. */
    overflow-wrap: anywhere;
  }

  .hero--vertical .hero__logo .logo__first { color: var(--fg); }
  .hero--vertical .hero__logo .logo__second { color: var(--mudo); }

  /* Las marcas de encuadre enmarcan la OBRA, no la ventana del navegador. */
  .hero--vertical::after { left: calc(42% + var(--visor-margen)); }

  /* Y la flecha de bajar, centrada en la fotografía. */
  .hero--vertical .hero__bajar { left: 71%; }
}

.hero__claim {
  margin-top: 1.1rem;
  letter-spacing: 0.24em;
  opacity: 0.85;
}

/* --- La portada en pantalla estrecha: la copia ENTERA -------------------
   `cover` recorta por el lado que sobre, y en un teléfono sobra muchísimo:
   una apaisada 4:3 en una pantalla 9:19,5 conserva un tercio escaso de su
   anchura. Deja de ser un encuadre y pasa a ser otra fotografía, casi siempre
   peor que la que se hizo.

   Así que aquí manda la obra: se ve entera aunque salga más pequeña, montada
   arriba, y el nombre baja debajo como la cartela de una lámina. Con el nombre
   centrado encima no se ganaría nada —taparía justo la copia que acabamos de
   rescatar—, y por eso baja: es consecuencia de enseñarla entera, no un
   cambio de gusto.

   El criterio es la ORIENTACIÓN, no el ancho, y esa distinción importa: con
   un corte en 48em, una tableta en vertical —768 px justos— se quedaba fuera
   por un píxel y seguía recortando igual que un teléfono. Lo que destroza el
   encuadre no es tener pocos píxeles: es que la pantalla sea mucho más alta
   que ancha. El tope de 68em deja fuera los monitores girados, donde la copia
   a sangre sigue teniendo sentido.

   En apaisado no aplica: allí la pantalla y la fotografía se parecen lo
   suficiente como para que `cover` apenas recorte. */
@media (orientation: portrait) and (max-width: 68em) {
  .hero {
    /* El conjunto —copia y cartela— centrado como una lámina en la pared. */
    grid-template-rows: auto auto;
    place-content: center;
    justify-items: center;
    gap: clamp(1.2rem, 4svh, 2.2rem);
    padding: var(--margen);
    background: var(--bg);
  }

  /* El hueco toma la forma EXACTA de la copia, así que no quedan bandas
     muertas ni hace falta rellenarlas con nada. */
  .hero__media {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: var(--ratio, 1.5);
    max-height: 68svh;
    background-image: none;
  }

  .hero__img { object-fit: contain; }

  /* Un velo pensado para dar contraste al texto SOBRE la fotografía. Con el
     nombre fuera de ella no tiene trabajo, y aquí solo ensuciaría la copia. */
  .hero__velo { display: none; }

  /* Las marcas de encuadre son el gesto de una fotografía a sangre: enmarcan
     la pantalla entera. Con la copia montada sobre papel, el marco lo pone ya
     el propio borde de la fotografía, y dos marcos son uno de más. */
  .hero::after { display: none; }

  /* Fuera de la fotografía no hace falta velo ni sombra: el nombre va sobre
     papel y se comporta como el texto de cualquier otra página. */
  .hero__marca {
    margin: 0 var(--margen);
    padding: 0;
    color: var(--fg);
    text-shadow: none;
    background: none;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .hero__logo .logo__first { color: var(--fg); }
  .hero__logo .logo__second { color: var(--mudo); }

  /* La flecha de bajar vivía sobre la fotografía; ahora estorbaría al nombre. */
  .hero__bajar { display: none; }
}

.hero__bajar {
  position: absolute;
  z-index: 2;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2rem;
  height: 3rem;
  display: grid;
  place-items: end center;
}

.hero__bajar-linea {
  width: 1px;
  height: 2.25rem;
  background: var(--sobre-foto);
  opacity: 0.7;
  animation: bajar 2.4s ease-in-out infinite;
  transform-origin: bottom;
}

.hero--vacia .hero__bajar-linea { background: var(--fg); }

@keyframes bajar {
  0%, 100% { transform: scaleY(0.35); opacity: 0.35; }
  50%      { transform: scaleY(1);    opacity: 0.8; }
}

/* --- Secciones y páginas ------------------------------------------------ */

.seccion {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 4rem) var(--margen);
}

.seccion--centrada { text-align: center; }

.seccion__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hueco);
  margin-bottom: 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--linea);
}

/* Títulos planos, en mayúsculas. Etiqueta de sala, no rótulo de portada. */
.seccion__titulo,
.pagina__titulo {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
}

.seccion__titulo { font-size: var(--t-1); letter-spacing: 0.14em; }
.pagina__titulo { font-size: var(--t-3); letter-spacing: 0.04em; }

.pagina__cabecera {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--linea);
}

.pagina__migas,
.pagina__meta { color: var(--mudo); margin-bottom: 0.45rem; }
.pagina__migas a:hover { color: var(--fg); }
.pagina__meta { margin: 0.5rem 0 0; }

.pagina__entradilla {
  margin-top: 0.9rem;
  max-width: var(--ancho-texto);
  color: var(--fg-suave);
  font-size: var(--t-1);
}

.enlace-mas {
  color: var(--mudo);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15em;
}
.enlace-mas:hover { color: var(--fg); }

.vacio { color: var(--mudo); padding: 2.5rem 0; font-family: var(--mono); font-size: var(--t--1); }

/* --- Rejilla de fotografías ---------------------------------------------
   Columnas estrechas y huecos pequeños: acumulación, secuencia, hoja de
   contactos. Cada hueco conserva la proporción real de la foto, así el
   navegador reserva el espacio y la página no salta al cargar. */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--celda-min)), 1fr));
  gap: var(--hueco);
}

/* Cuadrícula de montaje: todas las celdas EXACTAMENTE iguales, en filas y
   columnas perfectas, con la fotografía entera y centrada dentro.

   Es cómo se cuelga una exposición: marcos del mismo tamaño y las obras, con
   sus formatos distintos, montadas dentro. La cuadrícula cuadra siempre —da
   igual la mezcla de verticales y apaisadas que se suba— y ninguna copia se
   recorta para conseguirlo. Lo que cede es el paspartú, que asoma más a los
   lados en las verticales y arriba y abajo en las apaisadas. Ese es su
   trabajo.

   Hubo antes filas justificadas al vuelo con flexbox. Cuadraban de anchura,
   pero la altura de cada fila dependía de las formas que le tocaran, y el
   conjunto no se leía metódico. */
.grid__item { display: block; }

.photo { display: block; margin: 0; }

/* El marco. Formato fijo e idéntico para todas: aquí manda la cuadrícula. */
.photo__trigger {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: var(--celda-formato);
  padding: var(--montura);
  /* Paspartú: la banda neutra que aísla la obra del papel cálido. */
  background: var(--paspartu);
  /* Convierte el marco en unidad de medida para lo que lleva dentro: sin esto
     la copia sabría lo ancho que es el hueco, pero no lo alto, y una vertical
     no tendría contra qué ajustarse. */
  container-type: size;
}

/* La obra dentro del marco: conserva su proporción real y se ajusta al hueco
   por el lado que le sobre. Nunca se recorta ni se estira. */
.photo__frame {
  display: block;
  aspect-ratio: var(--ratio, 1.5);

  /* Se ajusta por el lado que sobre: una apaisada toca los bordes laterales y
     una vertical los de arriba y abajo. Nunca las dos cosas, nunca recortada.
     La primera línea es el respaldo para navegadores sin consultas de
     contenedor; la segunda es la buena. */
  width: 100%;
  width: min(100cqw, calc(100cqh * var(--ratio, 1.5)));
  height: auto;
  /* Neutro también mientras carga: un hueco cálido teñiría la miniatura
     borrosa que se ve durante la descarga. */
  background-color: var(--montaje);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.photo__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--transicion);
}

/* --- La cuadrícula, en una sola columna ---------------------------------
   El marco cuadrado existe para que la rejilla cuadre: celdas idénticas en
   filas y columnas, como los marcos de una sala. Con UNA columna no hay nada
   que alinear, así que ese marco deja de comprar nada y solo cobra: una
   vertical se ceñía a la altura del cuadrado y dejaba dos bandas de paspartú
   a los lados, quedando casi la mitad de pequeña de lo que cabía.

   Aquí cada fotografía ocupa el ancho entero con su forma real. El paspartú
   sigue, ceñido a la copia. La cuadrícula se conserva intacta de 48em hacia
   arriba, que es donde hace su trabajo. */
@media (max-width: 47.99em) {
  .photo__trigger {
    aspect-ratio: auto;
    container-type: normal;
  }

  .photo__frame {
    width: 100%;
    height: auto;
  }
}

.photo__trigger:hover .photo__frame img { opacity: 0.82; }

/* La rejilla no lleva pie: es una hoja de contactos, y ahí lo que se mira son
   las imágenes. Título, lugar y ficha técnica salen al ampliar. */

/* --- Series ------------------------------------------------------------- */

.series {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.serie-tarjeta { display: flex; flex-direction: column; gap: 0.6rem; }

.serie-tarjeta__media {
  display: block;
  aspect-ratio: var(--ratio, 1.5);
  overflow: hidden;
  background: var(--montaje) center / cover;
}

.serie-tarjeta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--transicion);
}

.serie-tarjeta:hover .serie-tarjeta__media img { opacity: 0.82; }

.serie-tarjeta__texto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.75rem;
}

.serie-tarjeta__titulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  flex-basis: 100%;
}

.serie-tarjeta__anio,
.serie-tarjeta__cuenta { color: var(--mudo); font-size: var(--t--2); }

/* --- Prosa y páginas de texto -------------------------------------------
   Aquí sí manda la legibilidad: Inter, medida corta y buen interlineado.
   Es el único sitio de la web donde habla el autor y no el archivo. */

.prosa {
  max-width: var(--ancho-texto);
  font-size: var(--t-1);
  line-height: 1.8;
  color: var(--fg-suave);
}

.prosa p + p { margin-top: 1.15em; }
.prosa strong { color: var(--fg); font-weight: 500; }
.prosa a { border-bottom: 1px solid var(--linea); }
.prosa a:hover { border-color: currentColor; }

/* Encabezados dentro de un texto largo.

   El h2 es la etiqueta de sala del sitio —Archivo, mayúsculas, tracking— pero
   al tamaño del cuerpo y no mayor: en un artículo de mil palabras hay cinco o
   seis, y a tamaño de rótulo competirían con el titular en vez de ordenarlo.
   Lo que separa las secciones es el AIRE de encima, no el cuerpo de letra.

   El h3 baja a la de texto con peso, sin mayúsculas. Dos niveles seguidos en
   la misma familia y el mismo tratamiento se leen como el mismo nivel, y
   entonces la jerarquía que estos encabezados vienen a construir no existe. */
.prosa h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-0);
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--fg);
  margin-top: 2.6em;
  margin-bottom: 0.85em;
}

.prosa h3 {
  font-weight: 500;
  font-size: var(--t-1);
  line-height: 1.35;
  color: var(--fg);
  margin-top: 1.9em;
  margin-bottom: 0.5em;
}

/* Nada de aire de más en el primero: encima ya está la entradilla. */
.prosa > :is(h2, h3):first-child { margin-top: 0; }

.prosa :is(ul, ol) {
  margin: 1.15em 0;
  padding-left: 1.4em;
}

.prosa li + li { margin-top: 0.45em; }
.prosa li::marker { color: var(--fg-suave); }

/* Un descanso, no un adorno: la línea es del papel, del grosor de las demás. */
.prosa hr {
  border: 0;
  border-top: 1px solid var(--linea);
  width: 4rem;
  margin: 2.6em 0;
}

.prosa__entradilla {
  font-size: var(--t-2);
  line-height: 1.45;
  color: var(--fg);
  margin-bottom: 1.4em;
  font-weight: 400;
}

.prosa--intro { margin-bottom: clamp(1.75rem, 3vw, 3rem); }

.pagina-texto--con-foto { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }

@media (min-width: 56em) {
  .pagina-texto--con-foto {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
  }
}

.pagina-texto__media {
  aspect-ratio: var(--ratio, 1.5);
  overflow: hidden;
  background: var(--montaje) center / cover;
}

.pagina-texto__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- Cuaderno -----------------------------------------------------------
   Textos del autor. No es un blog con tarjetas: es un índice de archivo, una
   columna de lectura con la numeración a la izquierda, igual que los pies de
   foto. Lo que se lee es el título; lo demás no estorba. */

.cuaderno {
  display: flex;
  flex-direction: column;
  max-width: 46rem;
}

.nota-item {
  padding: clamp(1.1rem, 2.4vw, 1.7rem) 0;
  border-top: 1px solid var(--linea);
}

.nota-item:last-child { border-bottom: 1px solid var(--linea); }

.nota-item__num {
  font-family: var(--mono);
  font-size: var(--t--2);
  letter-spacing: 0.1em;
  color: var(--mudo);
  margin-bottom: 0.4rem;
}

.nota-item__titulo {
  font-family: var(--display);
  font-size: var(--t-2);
  font-weight: 400;
  line-height: 1.25;
}

.nota-item__titulo a { border-bottom: 1px solid transparent; }
.nota-item__titulo a:hover { border-bottom-color: var(--linea); }

.nota-item__entradilla {
  margin-top: 0.5rem;
  color: var(--fg-suave);
  max-width: var(--ancho-texto);
}

/* --- Una entrada del cuaderno ------------------------------------------- */

.nota__vuelta {
  font-family: var(--mono);
  font-size: var(--t--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mudo);
  margin-bottom: 0.9rem;
}

.nota__vuelta a:hover { color: var(--fg); }

/* La fecha con el mismo tratamiento que las cifras de la ficha técnica: mono,
   en voz baja, y sin competir con el título. */
.nota__fecha {
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: var(--t--2);
  letter-spacing: 0.1em;
  color: var(--mudo);
  font-variant-numeric: tabular-nums;
}

/* La fotografía de cabecera va montada como en el resto del sitio: sobre el
   fondo neutro y sin recortarse, que aquí acompaña al texto y no manda. */
.nota__cabecera-foto {
  margin: 2rem 0;
  background: var(--montaje);
}

.nota__cabecera-foto img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Pie ---------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--linea);
  margin-top: clamp(2.5rem, 6vw, 5rem);
}

.site-footer__inner {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.25rem) var(--margen);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hueco);
  color: var(--mudo);
  font-size: var(--t--2);
}

.site-footer__links { display: flex; align-items: center; gap: 1.25rem; }
.site-footer__links a:hover { color: var(--fg); }

/* Un icono suelto mide veinte píxeles, y veinte píxeles no se aciertan con el
   dedo. El relleno agranda la zona sensible hasta un tamaño usable y el margen
   negativo lo devuelve a su sitio, así que el pie no se mueve ni un píxel. */
.site-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: -0.75rem;
}

/* Hereda el color del enlace, así que se apaga y se enciende con el resto del
   pie sin una sola regla de color propia. */
.icono-social { display: block; }

/* --- Visor a pantalla completa ------------------------------------------ */

.visor {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  background: #0b0b0b;
  color: #fff;
}

.visor[hidden] { display: none; }

.visor__figura {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1rem;
  width: 100%;
  height: 100%;
  place-items: center;
}

.visor__picture { display: contents; }

.visor__img {
  max-width: 100%;
  max-height: calc(100svh - 8rem);
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity 160ms ease;
}

/* Mientras se decodifica la copia nueva. Sin esto la <img> sigue enseñando la
   anterior, y parece que el visor se ha equivocado de fotografía. */
.visor__img.is-cargando { opacity: 0; }

.visor__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.3rem 1.1rem;
  font-family: var(--mono);
  font-size: var(--t--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Ficha técnica reducida: lugar, fecha, velocidad, focal e ISO. En pantalla
   estrecha va en línea bajo la fotografía. */
.visor__tec {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1.1rem;
  color: rgba(255, 255, 255, 0.62);
}

/* En apaisado la ficha se va al lado: el hueco libre de una fotografía
   horizontal está a la derecha, y ahí no le roba altura a la imagen. */
@media (min-width: 64em) and (orientation: landscape) {
  .visor__figura {
    grid-template-columns: minmax(0, 1fr) 15rem;
    grid-template-rows: 1fr;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.75rem);
  }

  .visor__img { max-height: calc(100svh - 5rem); }

  .visor__pie {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    gap: 0.9rem;
    align-self: center;
  }

  .visor__tec {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    /* Línea de archivo: separa los datos del título sin dibujar una caja. */
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    padding-left: 0.9rem;
  }
}

.visor__titulo { color: #fff; }

.visor__cerrar,
.visor__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: #fff;
  opacity: 0.6;
  transition: opacity var(--transicion);
}

.visor__cerrar:hover,
.visor__nav:hover { opacity: 1; }

.visor__cerrar { top: 1rem; right: 1rem; font-size: 2rem; line-height: 1; }
.visor__nav { top: 50%; transform: translateY(-50%); font-size: 3rem; line-height: 1; }
.visor__nav--prev { left: 0.5rem; }
.visor__nav--next { right: 0.5rem; }

body.visor-abierto { overflow: hidden; }

/* --- Página de «próximamente» ------------------------------------------- */

.proximamente {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  overflow: hidden;
  padding: var(--margen);
  background: var(--montaje);
  text-align: center;
}

.proximamente--sin-foto { background: var(--bg); }

.proximamente__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.proximamente__media picture,
.proximamente__img { width: 100%; height: 100%; }
.proximamente__img { object-fit: cover; }

.proximamente__velo {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--overlay, 0.35);
}

.proximamente__centro {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  max-width: 34rem;
  color: var(--sobre-foto);
  text-shadow: 0 1px 40px rgba(0, 0, 0, 0.35);

  /* Velo local bajo el texto. Se prefiere esto a oscurecer la fotografía
     entera: así el contraste se gana donde hace falta y la imagen se sigue
     viendo. El desenfoque hace el trabajo de verdad — separa el texto de lo
     que pasa detrás mucho mejor que bajar la opacidad. */
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 5vw, 3.5rem);
  /* Reserva para quien no entienda color-mix: sin ella se quedaría SIN fondo,
     que es justo el problema que este velo viene a resolver. Aproximada a
     propósito; si se ajusta --velo-fuerza, esta no la sigue. */
  background: rgba(12, 12, 12, 0.42);
  background: color-mix(in srgb, var(--velo-tinta) var(--velo-fuerza), transparent);
  border: 1px solid var(--velo-borde);
  backdrop-filter: var(--velo-desenfoque);
  -webkit-backdrop-filter: var(--velo-desenfoque);
}

/* Sin desenfoque disponible, se compensa con más opacidad: el texto tiene
   que leerse igual en un navegador que no lo soporte. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .proximamente__centro { background: rgba(12, 12, 12, 0.62); }
}

/* Sin fotografía detrás no hay nada de lo que separarse: tinta sobre papel. */
.proximamente--sin-foto .proximamente__centro {
  color: var(--fg);
  text-shadow: none;
  padding: 0;
  background: none;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.proximamente__logo {
  font-size: clamp(1.3rem, 0.85rem + 2.2vw, 2.6rem);
  font-weight: 400;
  line-height: 1;
}
.proximamente__logo .logo { letter-spacing: 0.34em; }
.proximamente__logo .logo__second { margin-right: -0.34em; }
.proximamente__logo .logo__first { color: var(--sobre-foto); }
.proximamente__logo .logo__second { color: rgba(255, 255, 255, 0.72); }
.proximamente--sin-foto .proximamente__logo .logo__first { color: var(--fg); }
.proximamente--sin-foto .proximamente__logo .logo__second { color: var(--mudo); }

.proximamente__rotulo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--mono);
  font-size: var(--t--1);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.9;
}

.proximamente__rotulo::before,
.proximamente__rotulo::after {
  content: "";
  width: clamp(1.25rem, 5vw, 3rem);
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.proximamente__mensaje {
  font-size: var(--t-1);
  line-height: 1.7;
  opacity: 0.9;
  max-width: 30rem;
}

.proximamente__contacto {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.75rem;
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: var(--t--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.proximamente__contacto a {
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.2em;
  opacity: 0.85;
}
.proximamente__contacto a:hover { opacity: 1; }

.proximamente__pie {
  position: relative;
  z-index: 2;
  font-family: var(--mono);
  font-size: var(--t--2);
  letter-spacing: 0.2em;
  color: var(--sobre-foto);
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
  /* El año queda fuera de la caja, así que lleva su propia sombra. */
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}

.proximamente--sin-foto .proximamente__pie { color: var(--mudo); opacity: 1; }

/* --- Protección cosmética de las imágenes -------------------------------
   Frena al usuario casual y nada más. La protección real es que el servidor
   nunca publica el fichero original. */

body[data-block-drag="1"] img {
  -webkit-user-drag: none;
  user-select: none;
}

/* --- Formulario de contacto ---------------------------------------------
   Sin cajas redondeadas ni sombras: campos delimitados por una línea, como
   una ficha de archivo. La etiqueta va siempre visible, nunca dentro del
   campo — un marcador de posición desaparece al escribir y deja al usuario
   sin saber qué estaba rellenando. */

.contacto {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 56em) {
  .contacto { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
}

.formulario { max-width: 42rem; }

.campo { display: block; margin-bottom: 1.35rem; }

.campo__etiqueta {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--mono);
  font-size: var(--t--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-suave);
}

.campo__etiqueta small { text-transform: none; letter-spacing: 0.03em; color: var(--mudo); }

.campo__control {
  width: 100%;
  padding: 0.6rem 0;
  border: 0;
  border-bottom: 1px solid var(--linea);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-0);
  line-height: 1.6;
  transition: border-color var(--transicion);
}

.campo__control:hover { border-bottom-color: var(--mudo); }

.campo__control:focus {
  outline: none;
  border-bottom-color: var(--fg);
}

.campo__control--area { resize: vertical; min-height: 8rem; }

/* El navegador marca en rojo antes de tocar nada si no se acota a :not(:placeholder-shown) */
.campo__control:user-invalid { border-bottom-color: #a3352c; }

.campo-fila { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.campo-fila > .campo { flex: 1 1 14rem; }

/* Trampa de miel: fuera de la vista y fuera del recorrido de teclado.
   No se usa display:none porque algunos robots lo detectan y la saltan. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 1.75rem;
}

.boton-envio {
  padding: 0.7rem 2.25rem;
  border: 1px solid var(--fg);
  background: var(--fg);
  color: var(--bg);
  font-family: var(--mono);
  font-size: var(--t--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: opacity var(--transicion);
}

.boton-envio:hover { opacity: 0.82; }

.formulario__aviso {
  flex: 1 1 16rem;
  font-size: var(--t--2);
  line-height: 1.55;
  color: var(--mudo);
}

.contacto__directo {
  padding-top: 0.4rem;
  font-size: var(--t-0);
  color: var(--fg-suave);
}

.contacto__etiqueta {
  font-family: var(--mono);
  font-size: var(--t--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mudo);
  margin-bottom: 0.5rem;
}

.contacto__directo a { border-bottom: 1px solid var(--linea); padding-bottom: 0.1em; }
.contacto__directo a:hover { border-color: currentColor; }

/* --- Respuesta del formulario ------------------------------------------- */

.respuesta {
  max-width: 34rem;
  margin: clamp(2rem, 8vh, 6rem) auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

.respuesta__marca {
  font-family: var(--display);
  font-size: 3rem;
  line-height: 1;
  color: var(--mudo);
}

.respuesta--error .respuesta__marca { color: #a3352c; }

.respuesta__texto {
  color: var(--fg-suave);
  font-size: var(--t-1);
  line-height: 1.7;
}

/* --- Ficha de una fotografía --------------------------------------------
   La foto manda y ocupa lo que puede; los datos van debajo o al lado, en la
   voz del archivo. Es la página que se abre al compartir un enlace. */

.ficha-foto {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 3rem) var(--margen);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 60em) {
  .ficha-foto {
    grid-template-columns: minmax(0, 1fr) 18rem;
    align-items: start;
  }
}

.ficha-foto__lienzo {
  background: var(--montaje);
  display: grid;
  place-items: center;
}

.ficha-foto__img {
  width: 100%;
  height: auto;
  max-height: calc(100svh - 10rem);
  object-fit: contain;
}

.ficha-foto__datos {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: sticky;
  top: 5rem;
}

@media (max-width: 59.99em) {
  .ficha-foto__datos { position: static; }
}

.ficha-foto__migas {
  font-family: var(--mono);
  font-size: var(--t--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mudo);
}
.ficha-foto__migas a:hover { color: var(--fg); }

.ficha-foto__titulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-2);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ficha-tecnica { display: grid; gap: 0.85rem; margin: 0; }

.ficha-tecnica__par { display: grid; gap: 0.15rem; }

.ficha-tecnica dt {
  font-family: var(--mono);
  font-size: var(--t--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mudo);
}

.ficha-tecnica dd {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t--1);
  color: var(--fg-suave);
  font-variant-numeric: tabular-nums;
}

.ficha-tecnica dd a { border-bottom: 1px solid var(--linea); }
.ficha-tecnica dd a:hover { border-color: currentColor; color: var(--fg); }

.prosa--pie { font-size: var(--t-0); }

.pasos {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linea);
  font-family: var(--mono);
  font-size: var(--t--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.paso {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--mudo);
  max-width: 48%;
}

.paso:hover { color: var(--fg); }
.paso__texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paso--next { text-align: right; margin-left: auto; }

.visor__ficha {
  color: rgba(255, 255, 255, 0.75);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15em;
}
.visor__ficha:hover { color: #fff; }
.visor__ficha[hidden] { display: none; }

/* En la rejilla, el título del pie ahora es un enlace. */

/* --- Comunidad ----------------------------------------------------------

   La única página del sitio que PIDE algo. El resto enseña fotografías; esta
   quiere que entres en un Discord, y eso cambia la retórica: hay un cartel a
   sangre arriba, tres motivos y un cierre.

   Lo que NO cambia es el lenguaje. Aquí no entran degradados, ni brillos, ni
   iconos de colores: el contraste lo dan la tinta, el papel y el mismo velo
   que ya usan la portada y el cartel de «próximamente». Una página de
   captación que pareciera de otra web sería una página que nadie se cree.
   ------------------------------------------------------------------------ */

.comunidad-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(20rem, 52vh, 34rem);
  padding: clamp(2.5rem, 6vw, 5rem) var(--margen);
  overflow: hidden;
  color: var(--sobre-foto);
}

/* Sin fotografía el texto cae sobre papel, así que vuelve la tinta normal. Es
   el caso por defecto: la página nace sin foto elegida. */
.comunidad-hero--sin-foto {
  background: var(--bg-alt);
  color: var(--fg);
  border-bottom: 1px solid var(--linea);
}

.comunidad-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}

.comunidad-hero__media picture,
.comunidad-hero__img { width: 100%; height: 100%; }
.comunidad-hero__img { object-fit: cover; }

.comunidad-hero__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Reserva para quien no entienda color-mix: sin ella el cartel se quedaría
     SIN velo, que es justo lo que da contraste al texto. */
  background: rgba(12, 12, 12, 0.42);
  background: color-mix(in srgb, var(--velo-tinta) var(--velo-fuerza), transparent);
}

.comunidad-hero__centro {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
}

.comunidad-hero__titulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-3);
  line-height: 1.08;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: 18ch;
}

.comunidad-hero__entradilla {
  margin-top: 1rem;
  max-width: var(--ancho-texto);
  font-size: var(--t-1);
  line-height: 1.6;
}

.comunidad-hero--sin-foto .comunidad-hero__entradilla { color: var(--fg-suave); }

/* El botón. En la web pública no había ninguno —solo el de enviar el
   formulario—, así que este hereda su lenguaje: monoespaciada, versales y
   tracking abierto, como una etiqueta de archivo.

   VA MACIZO SIEMPRE, y esto es una corrección: la primera versión lo dejaba
   en contorno cuando el cartel tenía fotografía, con la excusa de no tapar la
   imagen. Un contorno de 1px sobre una fotografía no se lee —basta con que
   detrás pase una zona clara para que desaparezca—, y un rectángulo de 250 px
   no tapa nada. La llamada principal de la página no puede depender de lo que
   haya debajo. */
.comunidad-boton {
  display: inline-block;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: 0.9rem 2.5rem;
  background: var(--fg);
  color: var(--bg);
  border: 1px solid transparent;
  font-family: var(--mono);
  font-size: var(--t-0);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: opacity var(--transicion);
}

.comunidad-boton:hover { opacity: 0.82; }

/* Sobre fotografía, blanco puro y tinta neutra: es lo que más separa del
   velo, y ambos entran en el presupuesto de calor con límite 0 igual que el
   paspartú. La tinta del papel (--fg) es cálida y aquí no puede entrar. */
.comunidad-hero:not(.comunidad-hero--sin-foto) .comunidad-boton {
  background: var(--sobre-foto);
  color: var(--velo-tinta);
}

.comunidad-explica__texto {
  max-width: var(--ancho-texto);
  margin: 1.25rem auto 0;
  font-size: var(--t-1);
  line-height: 1.7;
  color: var(--fg-suave);
}

/* Tres motivos. La rejilla sale del ancho disponible, no de un número fijo:
   cuadra igual con tres, con dos o con uno si algún día cambian. */
.comunidad-motivos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--hueco);
  margin-top: clamp(2rem, 4vw, 3.5rem);
  text-align: left;
}

.comunidad-motivo {
  padding: clamp(1.25rem, 2.5vw, 1.9rem);
  background: var(--bg-alt);
  border: 1px solid var(--linea);
}

.comunidad-motivo__titulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-0);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
}

.comunidad-motivo__texto {
  margin-top: 0.7rem;
  font-size: var(--t-0);
  line-height: 1.65;
  color: var(--fg-suave);
}

/* El cierre va en negativo. Es el único bloque invertido del sitio y por eso
   funciona: después de una página entera de papel, la tinta llena detiene el
   ojo justo donde está la última llamada. */
.comunidad-cierre__caja {
  padding: clamp(2.25rem, 5vw, 4rem) var(--margen);
  background: var(--fg);
  color: var(--bg);
  text-align: center;
}

.comunidad-cierre__lema {
  max-width: 24ch;
  margin: 0 auto;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-2);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* En negativo se invierte: el papel pasa a ser el relleno. El hover lo
   hereda de .comunidad-boton, que ya solo toca la opacidad. */
.comunidad-boton--claro {
  background: var(--bg);
  color: var(--fg);
}