/* ==========================================================================
   MANU NAVARRO — FILMMAKER
   Un único CSS para la home (pantalla fija, negra) y las galerías (blancas, con scroll).
   Táctil es el caso base; escritorio se activa con (hover: hover) and (pointer: fine).
   Solo se animan transform y opacity (más border-color y letter-spacing en el
   botón, pedidos expresamente). El hover solo afecta al botón y a su feed: el
   fondo y el rótulo no cambian.
   ========================================================================== */

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

:root {
  --tinta: #fff;                         /* texto */
  --fondo: #000;                         /* página */
  --linea: rgba(255, 255, 255, .12);     /* bordes de las tarjetas */
  --tarjeta: #1b1b1b;                    /* fondo de la tarjeta mientras carga la imagen */
  --borde: rgba(255, 255, 255, .45);
  --borde-activo: rgba(255, 255, 255, .9);

  --velo: .26;           /* oscurecimiento de la foto: justo el necesario para el texto */
  --grano: .06;

  --curva: cubic-bezier(.22, 1, .36, 1);
  --dur: 320ms;

  --decker: "Decker", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --micro-size: 10.5px;

  --rotulo-size: clamp(1rem, 1.8vw, 1.6rem); /* llega al tope (1.6rem) a partir de 1422 px; por debajo encoge para no rozar los feeds laterales */
  --rotulo-tracking: .32em;
  --boton-size: 12px;

  /* Ancho de las miniaturas del feed de escritorio. Escala también con la altura
     para que la columna de 3 quepa en un portátil bajo. */
  --thumb-w: clamp(110px, min(12vw, 18vh), 200px);
  --feed-gap: 12px;      /* del botón a la primera miniatura: poco, para poder pasar el ratón */
  --feed-hueco: 8px;     /* entre miniaturas */
  --fondo-foco: center;  /* object-position de las fotos; en móvil puede convenir desplazarlo */
  --fondo-fundido: 100ms; /* fundido entre fotos del pase; 0ms para corte seco */

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* Las páginas interiores (galerías y contacto) invierten la página: blanco con grano, texto negro. */
html[data-pagina="galeria"],
html[data-pagina="contacto"] {
  --tinta: #000;
  --fondo: #fff;
  --linea: rgba(0, 0, 0, .14);
  --tarjeta: #e4e4e4;
  --grano: .14;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: var(--fondo);
  color: var(--tinta);
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  min-height: 100dvh;
  font-family: var(--sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-pagina="home"],
html[data-pagina="home"] body {
  height: 100dvh;
  overflow: hidden;
}

img,
picture,
svg,
iframe {
  display: block;
  max-width: 100%;
}

ul {
  list-style: none;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

a,
button {
  cursor: pointer;
}

:focus-visible {
  outline: 1px solid var(--tinta);
  outline-offset: 4px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Grano de película: se nota más que se ve. Sobre negro se mezcla con overlay,
   sobre el blanco de la galería con multiply (overlay sobre blanco puro no se ve). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  mix-blend-mode: overlay;
  opacity: var(--grano);
}

html[data-pagina="galeria"] body::after,
html[data-pagina="contacto"] body::after {
  mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   Registros tipográficos: micro o grande, nada en medio
   -------------------------------------------------------------------------- */
.micro,
.marco {
  font-family: var(--sans);
  font-size: var(--micro-size);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.marco > * {
  font: inherit;
  white-space: nowrap;
  opacity: .7;
  transition: opacity var(--dur) var(--curva);
}

.marco a:hover,
.marco a:focus-visible {
  opacity: 1;
}

/* "Contacto" en el centro de la cabecera: un punto más grande y, al pasar, se ilumina y crece. */
.marco__contacto {
  display: inline-block;
  font-size: 12px;
  transition: transform var(--dur) var(--curva), opacity var(--dur) var(--curva);
}

.marco > .marco__contacto:hover,
.marco > .marco__contacto:focus-visible {
  transform: scale(1.15);
  opacity: 1;
}

/* Enlaces dentro de una etiqueta (p. ej. "© 2026 · Contacto"): subrayado fino al pasar. */
.marco p a {
  text-underline-offset: .4em;
  text-decoration-thickness: 1px;
}

.marco p a:hover,
.marco p a:focus-visible {
  text-decoration-line: underline;
}

/* --------------------------------------------------------------------------
   Fondo de la home: pase de fotos en B/N + velo. Todas las fotos están apiladas y
   solo la activa (y la que sale, durante el fundido) es visible: cambiar de foto
   es solo un cambio de opacidad.
   -------------------------------------------------------------------------- */
.fondo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #000;
}

.fondo__capa,
.fondo__foto,
.fondo__velo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fondo__foto {
  display: block;
  object-fit: cover;
  object-position: var(--fondo-foco);
  filter: grayscale(1) contrast(1.03) brightness(.93); /* casi neutro: la foto se ve como es */
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--fondo-fundido) linear, visibility 0s linear var(--fondo-fundido);
}

.fondo__foto.is-activa {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.fondo__velo {
  background: #000;
  opacity: var(--velo);
}

/* --------------------------------------------------------------------------
   Marco editorial: fila superior a tres columnas y pie centrado
   -------------------------------------------------------------------------- */
.marco {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  padding-inline: calc(1.5rem + var(--safe-left)) calc(1.5rem + var(--safe-right));
}

.marco--arriba {
  top: 0;
  padding-top: calc(1.4rem + var(--safe-top));
}

.marco--arriba > :nth-child(2) {
  text-align: center;
}

.marco--arriba > :nth-child(3) {
  text-align: right;
}

.marco--abajo {
  bottom: 0;
  grid-template-columns: 1fr;
  text-align: center;
  padding-bottom: calc(1.4rem + var(--safe-bottom));
}

/* En vertical (móvil y tablet) la cabecera de la home se queda solo con "Contacto", centrado. */
@media (max-width: 900px) {
  html[data-pagina="home"] .marco--arriba {
    grid-template-columns: 1fr;
  }

  html[data-pagina="home"] .marco--arriba > :first-child,
  html[data-pagina="home"] .marco--arriba > :nth-child(3) {
    display: none;
  }

  html[data-pagina="home"] .marco--arriba > :nth-child(2) {
    grid-column: 1;
    grid-row: 1;
    text-align: center;
  }
}

/* En vertical, las galerías pierden la etiqueta central "Manu Navarro — Filmmaker". */
@media (max-width: 900px) {
  html[data-pagina="galeria"] .marco--arriba > :nth-child(2) {
    display: none;
  }
}

/* Botón de pausa/play del pase de fotos, encima del pie de la home. */
.pase {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0 auto .2rem;
  color: var(--tinta);
  opacity: .55;
  transition: opacity var(--dur) var(--curva);
}

.marco > .pase:hover,
.marco > .pase:focus-visible {
  opacity: 1;
}

.pase__icono {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.pase__icono--play,
.pase.is-pausado .pase__icono--pausa {
  display: none;
}

.pase.is-pausado .pase__icono--play {
  display: block;
}

/* En pantallas estrechas la fila superior pasa a dos columnas: nombre y rol apilados a la izquierda, lugar a la derecha. */
@media (max-width: 520px) {
  .marco {
    letter-spacing: .14em;
  }

  .marco--arriba {
    grid-template-columns: 1fr auto;
    row-gap: .3rem;
  }

  .marco--arriba > :nth-child(2) {
    grid-column: 1;
    text-align: left;
  }

  .marco--arriba > :nth-child(3) {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* --------------------------------------------------------------------------
   HOME — caso base: táctil o ventana estrecha. Columna centrada, feed en tira
   deslizable. El diseño de escritorio exige ratón Y ancho: en un móvil que diga
   tener ratón (o al estrechar la ventana) se usa esta columna.
   -------------------------------------------------------------------------- */
.escenario {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5dvh, 3rem);
  padding: calc(4.5rem + var(--safe-top)) calc(1.25rem + var(--safe-right)) calc(4rem + var(--safe-bottom)) calc(1.25rem + var(--safe-left));
}

.rotulo {
  flex: none;
  text-align: center;
  color: var(--tinta);
}

.rotulo__titulo {
  font-family: var(--decker);
  font-weight: 400;
  font-size: var(--rotulo-size);
  line-height: 1.5;
  letter-spacing: .22em;
  padding-inline-start: .22em; /* compensa el espaciado tras la última letra */
  text-wrap: balance;
}

.rotulo__sub {
  margin-top: .8rem;
  opacity: .75;
}

.categorias {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.75rem, 2.4dvh, 1.5rem);
  width: 100%;
  min-height: 0;
  overflow-y: auto; /* válvula de seguridad: solo actúa si 9 categorías no caben en un móvil bajo */
  overscroll-behavior: contain;
  scrollbar-width: none;
}

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

.cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: none;
}

.cat__enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 17rem); /* en columna, todos los botones igual de anchos aunque la palabra sea corta */
  min-height: 44px;
  padding: 1em 2.2em; /* asimétrico: más horizontal que vertical */
  border: 1px solid var(--borde);
  font-family: var(--decker);
  font-weight: 400;
  font-size: var(--boton-size);
  line-height: 1;
  letter-spacing: .14em;
  text-indent: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tinta);
  will-change: transform;
  transition:
    transform var(--dur) var(--curva),
    border-color var(--dur) var(--curva),
    letter-spacing var(--dur) var(--curva),
    opacity var(--dur) var(--curva);
}

.cat.is-activa .cat__enlace {
  transform: scale(1.06);
  border-color: var(--borde-activo);
  letter-spacing: .2em;
}

.categorias.is-alguna-activa .cat:not(.is-activa) .cat__enlace {
  opacity: .4;
}

/* Feed táctil: tira horizontal con snap, sin barra visible, y "ver todos" debajo. */
.feed {
  display: none;
  width: 100%;
  padding-top: 1rem;
  text-align: center;
}

.feed.is-visible {
  display: block;
}

.feed__lista {
  display: flex;
  gap: 10px;
  padding: 0 .25rem .25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: .25rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

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

.feed__item {
  flex: 0 0 min(230px, 62%);
  min-width: 0; /* sin esto un título largo ensancha la tarjeta y rompe el 16:9 */
  scroll-snap-align: start;
  transition: opacity var(--dur) var(--curva), transform var(--dur) var(--curva);
}

.feed__enlace {
  display: block;
}

/* Tarjeta 16:9 con la imagen en absoluto (un <img> aún sin src no altera la altura)
   y el título centrado encima, en blanco, sobre un velo ligero. */
.feed__marco,
.pieza__marco {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--tarjeta);
}

.pieza__marco {
  border: 1px solid var(--linea);
}

.feed__thumb,
.pieza__marco img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* las miniaturas van en su color original; solo la foto de fondo de la home es B/N */
}

.feed__thumb {
  opacity: 0;
  transition: opacity var(--dur) var(--curva);
}

.feed__thumb.is-cargada {
  opacity: 1;
}

.feed__titulo,
.pieza__titulo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: .5rem;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, .38); /* velo suficiente para que el título se lea sobre fotogramas claros */
  text-wrap: balance;
}

.feed__todos {
  display: inline-block;
  margin-top: .85rem;
  padding-bottom: .2em;
  border-bottom: 1px solid var(--borde);
  opacity: .7;
  transition: opacity var(--dur) var(--curva), transform var(--dur) var(--curva);
}

.feed__todos:hover,
.feed__todos:focus-visible {
  opacity: 1;
}

/* Entrada en táctil: @starting-style anima desde display:none sin JS. */
.feed.is-visible .feed__item {
  opacity: 1;
  transform: none;

  @starting-style {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* --------------------------------------------------------------------------
   HOME — escritorio: fila de botones centrada justo encima del rótulo; el feed
   de cada botón sube en columna desde el propio botón (hacia abajo taparía el
   título).
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .escenario {
    gap: 2rem;
    /* El bloque va un poco por debajo del centro para dejar sitio a las columnas
       de miniaturas, que crecen hacia arriba. */
    padding: 12vh 0 0;
  }

  .rotulo {
    order: 2;
    white-space: nowrap;
  }

  .rotulo__titulo {
    line-height: 1.2;
    letter-spacing: var(--rotulo-tracking);
    padding-inline-start: var(--rotulo-tracking);
    white-space: nowrap; /* text-wrap: balance del caso base reactiva el ajuste de línea; aquí va en una sola */
  }

  .categorias {
    order: 1;
    flex-direction: row;
    justify-content: center;
    gap: clamp(1rem, 2.5vw, 2.5rem);
    width: auto;
    overflow: visible;
  }

  .cat {
    position: relative; /* referencia para el feed, que se ancla al botón */
    display: block;
    width: auto;
  }

  .cat__enlace {
    width: auto;
    min-height: 0;
    font-size: 11px;
    padding: 1.1em 2.4em;
  }

  .cat.is-activa .cat__enlace,
  .cat__enlace:hover,
  .cat__enlace:focus-visible {
    transform: scale(1.06);
    border-color: var(--borde-activo);
    letter-spacing: .2em;
  }

  .categorias.is-alguna-activa .cat:not(.is-activa) .cat__enlace {
    opacity: 1;
  }

  /* Columna sobre el botón: la primera miniatura es la más cercana al botón y
     "ver todos" queda arriba del todo. */
  .feed {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--feed-hueco);
    position: absolute;
    left: 50%;
    bottom: 100%;
    translate: -50% 0;
    margin-bottom: var(--feed-gap);
    width: var(--thumb-w);
    padding: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--dur) var(--curva), visibility 0s linear var(--dur);
  }

  .feed.is-visible {
    display: flex; /* la regla táctil lo pone en block al abrirse; aquí sigue siendo columna flex */
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }

  .feed__lista {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--feed-hueco);
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .feed__lista > li:nth-child(n + 4) {
    display: none; /* el mini-feed enseña 3 (MAX_FEED_ESCRITORIO); el resto vive en la galería */
  }

  .feed__item {
    flex: none;
    opacity: 0;
    transform: translateY(-10px);
  }

  .feed__todos {
    margin: 0;
    opacity: 0;
    transform: translateY(-10px);
  }

  .feed.is-visible .feed__item {
    opacity: 1;
    transform: none;
  }

  .feed.is-visible .feed__todos {
    opacity: .7;
    transform: none;
  }

  .feed.is-visible .feed__todos:hover,
  .feed.is-visible .feed__todos:focus-visible {
    opacity: 1;
  }

  /* Escalonado de 40 ms desde el botón hacia arriba, solo al entrar. */
  .feed.is-visible .feed__lista > li:nth-child(2) { transition-delay: 40ms; }
  .feed.is-visible .feed__lista > li:nth-child(3) { transition-delay: 80ms; }
  .feed.is-visible .feed__todos { transition-delay: 120ms; }
}

/* En portátiles bajos la columna enseña 2 miniaturas para no chocar con la cabecera. */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) and (max-height: 700px) {
  .feed__lista > li:nth-child(3) {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Movimiento reducido: sin zoom, sin blur, sin escalonado. Solo fundidos.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cat__enlace,
  .cat.is-activa .cat__enlace,
  .cat__enlace:hover,
  .cat__enlace:focus-visible {
    transform: none;
    letter-spacing: .14em;
  }

  .feed__item,
  .feed__todos {
    transform: none;
  }

  .feed.is-visible .feed__lista > li:nth-child(n),
  .feed.is-visible .feed__todos {
    transition-delay: 0s;
  }

  .feed.is-visible .feed__item {
    @starting-style {
      transform: none;
    }
  }
}

/* --------------------------------------------------------------------------
   GALERÍA: página blanca con grano, rejilla justificada con anchos variables
   -------------------------------------------------------------------------- */
html[data-pagina="galeria"] .marco,
html[data-pagina="contacto"] .marco {
  position: static;
}

html[data-pagina="galeria"] .marco--abajo,
html[data-pagina="contacto"] .marco--abajo {
  padding-top: clamp(3rem, 8vw, 6rem);
}

.galeria {
  --rejilla-hueco: 6px;
  width: calc(100% - 2 * clamp(1rem, 2vw, 2rem)); /* a todo el ancho, sin tope */
  margin-inline: auto;
  padding-block: clamp(1.5rem, 4vw, 3.5rem) 0;
}

.titulo {
  font-family: var(--decker);
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.35rem); /* mismo registro que el rótulo de la home: discreto, no un titular */
  line-height: 1.2;
  letter-spacing: .32em;
  padding-inline-start: .32em;
  text-transform: uppercase;
  text-align: center;
  opacity: .8;
  margin-bottom: clamp(1.5rem, 3.5vw, 3rem);
}

/* Flex en vez de grid para que la última fila, si queda incompleta, se centre. */
.rejilla {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rejilla-hueco);
}

/* Cada vídeo ocupa las columnas (de 12) que le asigna repartoRejilla() en el JS:
   las filas siempre suman 12 y nunca queda un vídeo solo al final. flex-grow 1
   absorbe los huecos cuando una fila tiene menos de 4 piezas. */
.pieza {
  --span: 3;
  flex: 1 1 calc((100% - 3 * var(--rejilla-hueco)) * var(--span) / 12);
  height: clamp(150px, 15.5vw, 340px);
}

.pieza[data-span="2"] { --span: 2; }
.pieza[data-span="3"] { --span: 3; }
.pieza[data-span="4"] { --span: 4; }
.pieza[data-span="5"] { --span: 5; }
.pieza[data-span="6"] { --span: 6; }
.pieza[data-span="7"] { --span: 7; }
.pieza[data-span="12"] { --span: 12; max-width: 60%; } /* categoría con un solo vídeo: centrado, no a todo el ancho */

.pieza__boton {
  display: block;
  width: 100%;
  height: 100%;
}

.pieza__marco {
  height: 100%;
  aspect-ratio: auto; /* la altura la fija la fila; la imagen se recorta con object-fit */
}

.pieza__marco img {
  transition: transform var(--dur) var(--curva);
}

.pieza__boton:hover img,
.pieza__boton:focus-visible img {
  transform: scale(1.03);
}

.pieza__titulo {
  transition: opacity var(--dur) var(--curva);
}

.pieza.is-previa .pieza__titulo {
  opacity: 0;
}

/* Previsualización: clip local que cubre el marco y aparece en cuanto empieza a
   reproducirse. No recibe el ratón, así que el click sigue abriendo el lightbox. */
.pieza__previa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur) var(--curva);
}

.pieza.is-previa .pieza__previa {
  opacity: 1;
}

@media (max-width: 760px) {
  .pieza {
    flex-basis: 100%;
    max-width: 100%;
    height: auto;
  }

  .pieza__marco {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* --------------------------------------------------------------------------
   CONTACTO: la foto ocupa toda la mitad derecha; el texto, en columna, se alinea
   contra el borde de la foto desde la izquierda, centrado en vertical.
   -------------------------------------------------------------------------- */
html[data-pagina="contacto"] {
  --grano: .2; /* más grano que en las galerías: aquí es parte de la foto */
}

html[data-pagina="contacto"] .marco {
  position: fixed; /* la cabecera flota sobre la página, también sobre la foto */
  color: #fff;
  mix-blend-mode: difference; /* negro sobre el blanco, blanco sobre las zonas oscuras de la foto */
}

/* La página mide exactamente la ventana y no hace scroll; la foto se recorta sola. */
html[data-pagina="contacto"],
html[data-pagina="contacto"] body {
  height: 100dvh;
  overflow: hidden;
}

.contacto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100%;
  height: 100dvh;
}

.contacto > * {
  min-width: 0;
  min-height: 0; /* sin esto la foto impone su alto natural (1200 px) y la página crece */
}

.contacto__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 1.4rem;
  padding: 4rem clamp(1.5rem, 4vw, 4rem) 3rem clamp(1.25rem, 4vw, 3rem);
  text-align: right;
}

/* Alineado a la derecha, el espaciado tras la última letra se compensa por el otro lado. */
.contacto .titulo {
  margin: 0 -.32em 0 0;
  padding-inline-start: 0;
}

.contacto__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1) contrast(1.05); /* la página de contacto va en B/N; el grano de body::after cae también sobre la foto */
}

.contacto__lista {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  row-gap: .9rem;
  margin-inline-end: -.18em;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .8;
}

.contacto__lista a {
  text-underline-offset: .4em;
  text-decoration-thickness: 1px;
}

.contacto__lista a:hover,
.contacto__lista a:focus-visible {
  text-decoration-line: underline;
}

/* En vertical: la foto arriba a todo el ancho y el texto debajo, centrado. */
@media (max-width: 760px) {
  html[data-pagina="contacto"],
  html[data-pagina="contacto"] body {
    height: auto;
    overflow: visible; /* en vertical la página sí hace scroll */
  }

  .contacto {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }

  .contacto__foto {
    order: -1;
    height: 62vh;
  }

  .contacto__texto {
    align-items: center;
    padding: 2.5rem clamp(1.25rem, 4vw, 3rem) 3rem;
    text-align: center;
  }

  .contacto .titulo {
    margin: 0;
    padding-inline-start: .32em;
  }

  .contacto__lista {
    align-items: center;
    margin-inline-end: 0;
  }
}

/* --------------------------------------------------------------------------
   Contraseña de un vídeo protegido: la página se desenfoca detrás
   -------------------------------------------------------------------------- */
.clave {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--tinta);
  place-items: center;
}

.clave[open] {
  display: grid;
}

.clave::backdrop {
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.clave__forma {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  width: min(100% - 2.5rem, 26rem);
  text-align: center;
  transition: opacity var(--dur) var(--curva);
}

.clave__forma.is-ocupado {
  opacity: .5;
  pointer-events: none;
}

.clave__etiqueta {
  opacity: .55;
}

.clave__titulo {
  font-family: var(--decker);
  font-weight: 400;
  font-size: clamp(.95rem, 1.4vw, 1.2rem);
  letter-spacing: .24em;
  padding-inline-start: .24em;
  text-transform: uppercase;
  text-wrap: balance;
}

.clave__campo {
  width: 100%;
  padding: .7em 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .45);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  letter-spacing: .25em;
  text-align: center;
  color: inherit;
}

.clave__campo:focus {
  outline: none;
  border-bottom-color: var(--tinta);
}

.clave__error {
  opacity: 1;
  border-left: 2px solid var(--tinta);
  padding-left: .8em;
}

.clave__botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin-top: .4rem;
}

.clave__boton {
  padding: 1em 2.2em;
  border: 1px solid rgba(0, 0, 0, .45);
  font-family: var(--decker);
  font-size: 11px;
  letter-spacing: .14em;
  text-indent: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform var(--dur) var(--curva), border-color var(--dur) var(--curva), opacity var(--dur) var(--curva);
}

.clave__boton:hover,
.clave__boton:focus-visible {
  transform: scale(1.04);
  border-color: var(--tinta);
}

.clave__boton--principal {
  background: var(--tinta);
  color: var(--fondo);
  border-color: var(--tinta);
}

.clave__nota {
  margin-top: 1.2rem;
  max-width: 34ch;
  line-height: 1.7;
  text-transform: none;
  letter-spacing: .06em;
  opacity: .55;
}

/* --------------------------------------------------------------------------
   Lightbox: <dialog> nativo (Esc, foco atrapado, capa superior)
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  place-items: center;
}

.lightbox[open] {
  display: grid;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, .92);
}

html:has(dialog[open]) {
  overflow: hidden;
}

.lightbox__marco {
  width: min(100% - 2.5rem, (100dvh - 9rem) * 16 / 9);
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid rgba(255, 255, 255, .12); /* delimita el vídeo mientras el iframe carga sobre el fondo negro */
}

.lightbox__marco iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.lightbox__cerrar {
  position: fixed;
  top: calc(1rem + var(--safe-top));
  right: calc(1rem + var(--safe-right));
  width: 44px;
  height: 44px;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1;
  opacity: .7;
  transition: opacity var(--dur) var(--curva);
}

.lightbox__cerrar:focus-visible {
  outline-color: #fff;
}

.lightbox__cerrar:hover,
.lightbox__cerrar:focus-visible {
  opacity: 1;
}

.lightbox__titulo {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(1.6rem + var(--safe-bottom));
  text-align: center;
  opacity: .55;
}