/* ============================================================================
   Ángela Palacios. Nació como hoja de la página puente; el sitio definitivo
   la amplía al final (secciones «Sitio definitivo» y «Rediseño»).
   Un programa de mano, no una landing: papel, tinta y fichas de creditos.
   El unico color de la pagina lo ponen sus fotografias y sus carteles.
   ========================================================================= */

/* --- Fuentes --------------------------------------------------------------
   Autoalojadas. No hay una sola peticion a un dominio de terceros en toda la
   pagina: por eso no lleva banner de cookies.

   Bodoni Moda para display y Archivo para metadatos. La didone es la voz del
   cartel de teatro, y su eje `opsz` da contraste alto a 96 px en el titular y
   trazo mas robusto a 17 px en los pies de cartel con un solo fichero.

   Las cursivas son ficheros reales, no oblicuas fabricadas por el navegador
   (ver `font-synthesis: none` mas abajo).

   El `unicode-range` es el subconjunto latino, que cubre todo el castellano;
   cualquier caracter fuera de el cae en la pila de respaldo en lugar de
   mostrar un hueco. */

@font-face {
  font-family: 'Bodoni Moda';
  src: url('../fonts/bodoni-moda-var.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bodoni Moda';
  src: url('../fonts/bodoni-moda-var-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var-italic.woff2') format('woff2');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Sistema -------------------------------------------------------------- */

:root {
  --papel: #FAFAF8;
  --tinta: #111111;
  --tinta-fuerte: #3A3833;  /* 11,2:1 sobre papel */
  --tinta-media: #4A4741;   /*  8,9:1 */
  --tinta-suave: #5C5952;   /*  6,7:1 - suelo de la paleta, nunca por debajo */
  --linea: rgba(17, 17, 17, 0.16);
  --linea-firme: rgba(17, 17, 17, 0.34);

  --display: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --texto: 'Archivo', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --ancho: 74rem;             /* 1184 px */
  --margen: clamp(1.25rem, 5vw, 3.5rem);
  --hueco-bloque: clamp(4.5rem, 10vw, 8.5rem);
  --masthead-alto: 5rem;

  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  /* Las cuatro variantes (redonda y cursiva de cada familia) estan
     autoalojadas, asi que no hay ningun caso legitimo en que el navegador
     tenga que fabricar una. */
  font-synthesis: none;
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.6;
  /* Sin `-webkit-font-smoothing: antialiased`. Adelgaza el trazo, y con una
     didone eso no es un matiz: los finos de la Bodoni se rompen y palabras
     como «Actriz» salen medio borradas. El suavizado por defecto del sistema
     es el que la fuente espera. */
}

/* Superficies del navegador: seleccion, foco y barras de scroll tambien son
   parte del diseno, y por defecto no son de nadie. */
::selection {
  background: var(--tinta);
  color: var(--papel);
}

:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 1px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

figure { margin: 0; }

/* Sin esto la imagen se queda en su ancho intrinseco (el del fichero servido
   en `src`) y no llena la figura, que es mas ancha en las pantallas grandes. */
.apertura__lamina img,
.banda img,
.contacto__retrato img { width: 100%; }

cite { font-style: italic; }

/* Enlaces sin subrayado; se subrayan al pasar o con el foco (petición de la
   clienta del 2026-10-06). El subrayado aparece por color, sin saltos. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.2s var(--curva);
}

a:hover, a:focus-visible { text-decoration-color: currentColor; }

.salto {
  position: absolute;
  left: var(--margen);
  top: 0;
  z-index: 2;
  padding: 0.75rem 1rem;
  background: var(--tinta);
  color: var(--papel);
  font-size: 0.875rem;
  text-decoration: none;
  transform: translateY(-120%);
}

.salto:focus { transform: translateY(0); }

/* Credito de fotografia: el marcado ya esta puesto en cada <figure>. En cuanto
   se rellene el atributo, la linea aparece sola; vacio no pinta nada. */
figure[data-credito]:not([data-credito=''])::after {
  content: 'Fotografía: ' attr(data-credito);
  display: block;
  margin-top: 0.6rem;
  color: var(--tinta-suave);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

/* --- Bloques -------------------------------------------------------------- */

.bloque {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 0 var(--margen) var(--hueco-bloque);
}

/* Mas aire encima del encabezado que debajo: el titulo pertenece a lo que
   viene despues, no a lo que queda arriba. */
.bloque__titulo {
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
  font-variation-settings: 'opsz' 28;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--linea);
  font-family: var(--display);
  font-size: clamp(1.625rem, 3.4vw, 2.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

/* --- 2 · Quien es --------------------------------------------------------- */

.biografia {
  margin: 0;
  font-variation-settings: 'opsz' 14;
  max-width: 62ch;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.3vw, 1.625rem);
  line-height: 1.5;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

/* La bio son cuatro parrafos dentro de un solo contenedor: asi entra como un
   bloque unico con la animacion de `.entra`, en vez de aparecer parrafo a
   parrafo. El hueco entre ellos queda por debajo de la interlinea para que se
   lea como un texto seguido y no como cuatro fichas sueltas. */
.biografia > p { margin: 0; }
.biografia > p + p { margin-top: 0.9em; }

.nombre-propio { font-style: italic; }

.banda {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  max-width: 68.75rem; /* 1100 px: el original solo mide 1142, no se amplia */
}

/* --- 3 · Los oficios ------------------------------------------------------ */

.oficios {
  margin: 0;
  border-top: 1px solid var(--linea);
}

.oficios__linea {
  display: grid;
  gap: 0.25rem 2.5rem;
  padding: clamp(1rem, 2vw, 1.4rem) 0;
  border-bottom: 1px solid var(--linea);
}

.oficios__nombre {
  font-variation-settings: 'opsz' 20;
  /* «Directora de cine y guionista» no cabe en una linea: equilibrando el
     corte, la conjuncion baja con «guionista» en vez de quedarse huerfana. */
  text-wrap: balance;
  font-family: var(--display);
  font-size: clamp(1.375rem, 2.8vw, 1.9375rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
}

.oficios__dato {
  margin: 0;
  color: var(--tinta-media);
  font-size: 0.9375rem;
  line-height: 1.55;
  text-wrap: pretty;
}

@media (min-width: 48rem) {
  .oficios__linea {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    align-items: baseline;
  }
}

/* Tira de laminas. Alto comun y ancho segun la proporcion real de cada foto:
   ninguna se recorta para encajar en una retícula. */
.laminas {
  display: flex;
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  /* En pantallas estrechas la tira sale del margen y llega al borde: asi se ve
     que continua, en vez de parecer una foto cortada. */
  margin: clamp(2.5rem, 6vw, 4rem) calc(-1 * var(--margen)) 0;
  padding: 0 var(--margen) 0.5rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--linea-firme) transparent;
}

.laminas__pieza { flex: 0 0 auto; }

/* Movil: altura comun y ancho segun la proporcion de cada foto, en una fila
   que se desplaza. */
.laminas__pieza img {
  height: clamp(11.25rem, 22vw, 17.8125rem);
  width: auto;
  max-width: none;
}

/* Escritorio: la tira deja de desplazarse y pasa a rejilla, con una columna
   por foto y el ancho de cada una proporcional a su propia proporcion (440/423
   las tres cuadradas, 440/642 la vertical). Asi las cuatro salen a la misma
   altura y el conjunto encaja EXACTO en el contenedor, sea cual sea el ancho.

   Antes tambien aqui mandaba la altura fija de arriba y el ancho salia de ella.
   El calculo no restaba el relleno del contenedor, asi que a 1440 px la tira
   media 1154 px dentro de 1072: se salia 82 px y cortaba la cuarta foto, con
   barra de scroll en una pagina donde nada mas se desplaza en horizontal.
   Va DESPUES de la regla base a proposito: misma especificidad, gana la
   ultima. */
@media (min-width: 60rem) {
  .laminas {
    display: grid;
    grid-template-columns: 1.0402fr 0.6854fr 1.0402fr 1.0402fr;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .laminas__pieza img {
    width: 100%;
    height: auto;
  }
}

/* --- 4 · Palmares --------------------------------------------------------- */

.palmares {
  margin: 0;
  /* Medida ancha a proposito: es un bloque denso de honores, no un parrafo
     de lectura. Encajonarlo en la medida del texto lo dejaba en una columna
     estrecha de ocho lineas, con media pagina vacia al lado. */
  max-width: 58rem;
  color: var(--tinta-media);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.95;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.palmares__item:not(:last-child)::after {
  content: ' · ';
  margin: 0 0.35em;
  color: var(--tinta-suave);
}

/* --- 5 · Piezas ----------------------------------------------------------- */

.carteles {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62vw;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-inline: calc(-1 * var(--margen));
  margin-block: 0;
  padding: 0 var(--margen) 0.5rem;
  scroll-padding-inline-start: var(--margen);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--linea-firme) transparent;
}

.carteles__pieza { scroll-snap-align: start; }

.carteles__pieza figure {
  display: flex;
  flex-direction: column;
  /* Los carteles se apoyan en una linea comun, como puestos de pie: diez de
     los doce son formato A, «Mirta en espera» es mas corto y «Solo creo en el
     fuego» mas alto. Alinearlos arriba dejaria esos dos pies descolgados del
     resto de la fila. */
  justify-content: flex-end;
  height: 100%;
}

.carteles__pieza img {
  width: 100%;
  /* Los carteles llevan tipografia y creditos incrustados: se sirven en su
     proporcion original. Recortarlos a cuadrado los destroza. */
}

.carteles figcaption {
  margin-top: 0.9rem;
  font-variation-settings: 'opsz' 11;
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.25;
  text-wrap: pretty;
}

.carteles__ano {
  display: block;
  margin-top: 0.3rem;
  color: var(--tinta-suave);
  font-family: var(--texto);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}

@media (min-width: 64rem) {
  .carteles {
    margin-inline: 0;
    padding-inline: 0;
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    scroll-snap-type: none;
    row-gap: clamp(2rem, 4vw, 3.25rem);
  }

  /* Reserva de dos lineas de titulo para que los pies de los doce carteles
     caigan a la misma altura aunque el titulo ocupe una linea o dos. */
  .carteles figcaption { min-height: 0; }
}

/* --- 6 · Contacto --------------------------------------------------------- */

.contacto {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
}

.contacto__ficha {
  margin: 0;
  border-top: 1px solid var(--linea);
}

.contacto__linea {
  display: grid;
  gap: 0.15rem 2rem;
  padding: clamp(0.9rem, 1.8vw, 1.25rem) 0;
  border-bottom: 1px solid var(--linea);
}

.contacto__linea dt {
  color: var(--tinta-suave);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.contacto__linea dd {
  margin: 0;
  font-variation-settings: 'opsz' 16;
  font-family: var(--display);
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  line-height: 1.35;
}

/* El usuario de Instagram va en la misma Bodoni que el resto de la ficha
   (clienta, 2026-10-06). Antes iba en Archivo porque el subrayado permanente se
   comia los guiones bajos; sin subrayado en reposo ese motivo desaparece. */
.contacto__usuario { text-underline-offset: 0.26em; }

.contacto__alterno {
  margin-left: 0.85em;
  color: var(--tinta-suave);
  font-family: var(--texto);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.contacto__retrato { max-width: 23.75rem; }

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

@media (min-width: 40rem) {
  .contacto__linea { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
  .contacto__linea dt { padding-top: 0.4em; }
}

/* --- Movimiento ----------------------------------------------------------- */

/* Una sola entrada, la misma para todo: aparecer. La regla vive dentro de
   `no-preference`, de modo que con `prefers-reduced-motion` los elementos
   nacen visibles y no hay animacion que acortar. Sin JavaScript tampoco se
   aplica la clase `js` y la pagina se ve entera. */
@media (prefers-reduced-motion: no-preference) {
  .js .entra {
    opacity: 0;
    transform: translateY(8px);
  }

  .js .entra--visible {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.36s var(--curva),
      transform 0.36s var(--curva);
  }
}

/* --- Paginas secundarias: 404 y textos legales ---------------------------- */

/* Mismo papel, misma tinta y la misma cabecera que la portada. Una pagina de
   error o un aviso legal que se ven como otro sitio distinto son un fallo de
   confianza, no un detalle. */

.documento {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: clamp(3rem, 9vw, 6.5rem) var(--margen) var(--hueco-bloque);
}

.documento__titulo {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-variation-settings: 'opsz' 48;
  max-width: 22ch;
  font-family: var(--display);
  font-size: clamp(2.25rem, 6vw, 4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.documento__cuerpo {
  max-width: 64ch;
  color: var(--tinta-fuerte);
  font-size: 1rem;
  line-height: 1.7;
}

.documento__cuerpo p { margin: 0 0 1.15rem; }

.documento__cuerpo h2 {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0.85rem;
  font-variation-settings: 'opsz' 20;
  font-family: var(--display);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--tinta);
}

.documento__cuerpo ul {
  margin: 0 0 1.15rem;
  padding-left: 1.15rem;
}

.documento__cuerpo li { margin-bottom: 0.4rem; }

.documento__cuerpo a { color: var(--tinta); }

/* Hueco pendiente de rellenar. Se ve, y se tiene que ver: un dato legal que
   falta es un dato que falta, no un texto que se pueda maquillar. */
.pendiente {
  display: inline-block;
  padding: 0.1em 0.45em;
  border: 1px dashed var(--linea-firme);
  color: var(--tinta-suave);
  font-family: var(--texto);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.volver {
  display: inline-block;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
  color: var(--tinta);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}


/* ============================================================================
   Sitio definitivo: lo que la puente no tenía. Mismo sistema, mismas variables.
   ========================================================================== */

.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.enlace-mas { font-family: var(--texto); font-size: 0.9375rem; color: var(--tinta); }

/* --- Ficha de pieza ------------------------------------------------------- */
.ficha { display: grid; gap: clamp(1.5rem, 4vw, 3rem); max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.ficha__cabecera { display: grid; gap: 0.5rem; }
.ficha__titulo { font-family: var(--display); font-variation-settings: 'opsz' 48; font-size: clamp(2.25rem, 6vw, 4rem); line-height: 1; letter-spacing: -0.02em; margin: 0; }
.ficha__ano { font-family: var(--texto); font-size: 0.875rem; letter-spacing: 0.1em; color: var(--tinta-suave); }
.ficha__cartel img { width: 100%; height: auto; max-width: 34rem; }
.ficha__creditos { margin: 0; display: grid; gap: 0.6rem; font-family: var(--texto); font-size: 0.9375rem; }
.ficha__linea { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--linea); }
.ficha__linea dt { color: var(--tinta-suave); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.6875rem; }
.ficha__linea dd { margin: 0; }
.ficha__texto { font-family: var(--display); font-variation-settings: 'opsz' 14; font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.5; max-width: 40rem; }
.ficha__enlaces { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-family: var(--texto); font-size: 0.9375rem; }
/* Enlace con imagen (Tucuvi en Locuciones): la imagen a lo ancho de la columna y el texto debajo. */
.ficha__enlace-imagen { flex-basis: 100%; max-width: 36rem; }
.ficha__enlace-imagen a { display: grid; gap: 0.75rem; }
.ficha__enlace-imagen img { width: 100%; height: auto; }
.ficha__galeria { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.ficha__galeria img { width: 100%; height: auto; }
@media (min-width: 60rem) {
  .ficha { grid-template-columns: minmax(0, 22rem) 1fr; align-items: start; }
  .ficha__cabecera, .ficha__texto, .ficha__videos, .ficha__galeria, .ficha__enlaces, .ficha__premios { grid-column: 2; }
  .ficha__cartel { grid-column: 1; grid-row: 1 / span 6; position: sticky; top: 1.5rem; }
}

/* --- Vídeo con fachada ---------------------------------------------------- */
.ficha__videos { display: grid; gap: 1.5rem; }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--tinta); overflow: hidden; }
.video img, .video iframe, .video__vacio { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video__boton { position: absolute; inset: 0; width: 100%; background: rgba(17,17,17,0.25); border: 0; color: var(--papel); cursor: pointer; display: grid; place-items: center; font: inherit; }
.video__boton:focus-visible { outline: 3px solid var(--papel); outline-offset: -6px; }
.video__icono { width: 4.5rem; height: 4.5rem; border: 2px solid var(--papel); border-radius: 50%; display: grid; place-items: center; }
.video__icono::after { content: ''; border-style: solid; border-width: 0.8rem 0 0.8rem 1.3rem; border-color: transparent transparent transparent var(--papel); margin-left: 0.3rem; }
.video__texto { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; font-family: var(--texto); font-size: 0.875rem; text-align: left; }
.video__aviso { position: absolute; inset: auto 0 0 0; margin: 0; padding: 1rem; background: var(--papel); color: var(--tinta); font-family: var(--texto); font-size: 0.875rem; line-height: 1.5; }
.video__aceptar { font: inherit; background: var(--tinta); color: var(--papel); border: 0; padding: 0.5rem 0.9rem; margin-left: 0.5rem; cursor: pointer; }

/* --- Listados por disciplina y palmarés por pieza ------------------------- */
.listado { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
/* Listados y fichas no llevan el aire inferior de .bloque; cuando cierran la página,
   el papel no puede acabar pegado al último cartel o botón. */
.listado:last-child,
.ficha:last-child { padding-bottom: var(--hueco-bloque); }
.listado__intro { font-family: var(--display); font-size: clamp(1.25rem, 2.3vw, 1.625rem); max-width: 40rem; }
.carteles--rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 2rem; overflow: visible; }
.carteles__enlace { display: block; color: inherit; text-decoration: none; }
.carteles__enlace:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; }
.palmares-pieza { display: grid; grid-template-columns: 6rem 1fr; gap: 1.5rem; align-items: start; padding: 1.5rem 0; border-top: 1px solid var(--linea); }
.palmares-pieza__titulo { font-family: var(--display); margin: 0 0 0.5rem; }
.palmares-pieza ul { list-style: none; margin: 0; padding: 0; font-family: var(--texto); font-size: 0.9375rem; display: grid; gap: 0.35rem; }

/* --- Formulario ----------------------------------------------------------- */
.formulario { max-width: 36rem; }
.formulario label, .formulario .jet-form-builder__label { display: block; font-family: var(--texto); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 0.4rem; }
.formulario input:not([type=checkbox]), .formulario textarea { width: 100%; font: inherit; font-size: 1rem; padding: 0.75rem; border: 1px solid var(--linea-firme); background: var(--papel); color: var(--tinta); border-radius: 0; }
.formulario input:focus-visible, .formulario textarea:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.formulario button[type=submit], .formulario .jet-form-builder__action-button { font: inherit; font-family: var(--texto); font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--tinta); color: var(--papel); border: 0; padding: 0.9rem 1.5rem; cursor: pointer; }
.formulario .jet-form-builder-message--error, .formulario .jet-form-builder__field-error { color: #8a1c1c; font-family: var(--texto); font-size: 0.875rem; }

/* --- Banner de cookies (Complianz): papel y tinta, sin colores propios ------ */
/* Complianz pinta el banner con variables CSS; aquí se fijan a la paleta del
   sitio para no configurarlas a mano en su panel y tenerlas versionadas. */
body .cmplz-cookiebanner {
  --cmplz_banner_width: 26rem;
  --cmplz_banner_background_color: var(--papel);
  --cmplz_banner_border_color: var(--linea-firme);
  --cmplz_banner_border_width: 1px 1px 1px 1px;
  --cmplz_banner_border_radius: 0;
  --cmplz_banner_margin: 1rem;
  --cmplz_text_color: var(--tinta);
  --cmplz_hyperlink_color: var(--tinta);
  --cmplz_button_accept_background_color: var(--tinta);
  --cmplz_button_accept_border_color: var(--tinta);
  --cmplz_button_accept_text_color: var(--papel);
  --cmplz_button_deny_background_color: var(--papel);
  --cmplz_button_deny_border_color: var(--tinta);
  --cmplz_button_deny_text_color: var(--tinta);
  --cmplz_button_settings_background_color: transparent;
  --cmplz_button_settings_border_color: transparent;
  --cmplz_button_settings_text_color: var(--tinta-suave);
  --cmplz_button_border_radius: 0;
  --cmplz_categories_background_color: transparent;
  --cmplz_categories_text_color: var(--tinta);
  --cmplz_slider_active_color: var(--tinta);
  --cmplz_slider_bullet_color: var(--papel);
  --cmplz_slider_inactive_color: var(--linea-firme);
  --cmplz_text_font_size: 0.9375rem;
  --cmplz_title_font_size: 1.125rem;
  --cmplz_link_font_size: 0.8125rem;
  --cmplz_button_font_size: 0.875rem;
  font-family: var(--texto);
  box-shadow: none;
}
.cmplz-cookiebanner .cmplz-title { font-family: var(--display); font-weight: 400; }
.cmplz-cookiebanner .cmplz-btn { letter-spacing: 0.06em; text-transform: uppercase; }
.cmplz-cookiebanner .cmplz-links a { text-decoration: underline; text-underline-offset: 0.15em; }


/* ============================================================================
   Crítica del 2026-09-24 (impeccable critique + detector) y movimiento.
   Principio del movimiento: el papel no vibra; se abre, se pasa de página y
   se coge. Todo dentro de prefers-reduced-motion: no-preference, sin librerías.
   ========================================================================== */

:root {
  /* Único color fuera de papel/tinta: el aviso de error del formulario. Documentado en DESIGN.md. */
  --aviso: #8a1c1c;
}

/* --- Ficha: aire en la cabecera, sinopsis propia, salida ------------------- */
.ficha__cabecera { gap: 1.25rem; }
.ficha__creditos { margin-top: 0.25rem; }
.ficha__sinopsis { font-family: var(--texto); font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); line-height: 1.45; margin: 0; max-width: 40rem; }
.ficha__ano { font-size: 0.75rem; }
.ficha__volver { grid-column: 2; margin: 0; }
@media (max-width: 59.99rem) { .ficha__volver { grid-column: auto; } }

/* --- Listados y palmarés: cuerpos de la rampa con su eje óptico ------------ */
.listado__intro { font-variation-settings: 'opsz' 14; }
.palmares-pieza__titulo { font-size: clamp(1.375rem, 2.6vw, 1.75rem); font-variation-settings: 'opsz' 20; line-height: 1.15; }

/* --- Contacto: WhatsApp es un canal, no una nota al pie -------------------- */
.contacto__linea dd .contacto__alterno { display: none; }

/* --- Vídeo: sin círculo ni sombra; el rótulo va sobre papel ---------------- */
.video__icono { border-radius: 0; width: 4.5rem; height: 3.25rem; }
.video__texto { left: 0; right: auto; bottom: 0; text-shadow: none; background: var(--papel); color: var(--tinta); padding: 0.5rem 0.75rem; display: inline-block; max-width: 80%; }

/* --- Formulario: la casilla de consentimiento es una frase, no un rótulo ----- */
.formulario .checkradio-wrap label, .formulario .jet-form-builder__field-wrap.checkradio-wrap label, .formulario label.jet-form-builder__field-label {
  text-transform: none; letter-spacing: 0; font-size: 0.9375rem; color: var(--tinta); line-height: 1.5;
}
.formulario .jet-form-builder-message--error, .formulario .jet-form-builder__field-error { color: var(--aviso); }
.formulario .jet-form-builder-message--success { font-family: var(--display); font-variation-settings: 'opsz' 14; font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--tinta); padding: 1rem 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }

/* --- Banner de cookies: abajo a la izquierda, lejos del retrato ------------ */
body .cmplz-cookiebanner.cmplz-bottom-right, body .cmplz-cookiebanner { right: auto; left: 1rem; }
body .cmplz-cookiebanner .cmplz-title { font-variation-settings: 'opsz' 11; }

/* --- Movimiento ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  /* 1. Coger el cartel: transición de vista entre páginas. El cartel viaja del
        listado a la ficha; el resto cruza en fundido. Progresivo. */
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: 0.4s; animation-timing-function: var(--curva); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }

  /* 3. Escalonado sobre la entrada que ya existe: tope 8 × 45 ms. */
  .oficios__linea:nth-child(2), .carteles__pieza:nth-child(2), .ficha__linea:nth-child(2) { transition-delay: 45ms; }
  .oficios__linea:nth-child(3), .carteles__pieza:nth-child(3), .ficha__linea:nth-child(3) { transition-delay: 90ms; }
  .oficios__linea:nth-child(4), .carteles__pieza:nth-child(4), .ficha__linea:nth-child(4) { transition-delay: 135ms; }
  .oficios__linea:nth-child(5), .carteles__pieza:nth-child(5), .ficha__linea:nth-child(5) { transition-delay: 180ms; }
  .oficios__linea:nth-child(6), .carteles__pieza:nth-child(6), .ficha__linea:nth-child(6) { transition-delay: 225ms; }
  .carteles__pieza:nth-child(7), .ficha__linea:nth-child(7) { transition-delay: 270ms; }
  .carteles__pieza:nth-child(8), .ficha__linea:nth-child(8) { transition-delay: 315ms; }
  .carteles__pieza:nth-child(n+9) { transition-delay: 360ms; }
  .js .carteles__pieza, .js .ficha__linea { opacity: 0; transform: translateY(10px); transition: opacity 0.36s var(--curva), transform 0.36s var(--curva); }
  .js .entra--visible .carteles__pieza, .js .entra--visible .ficha__linea, .js .carteles__pieza.entra--visible { opacity: 1; transform: none; }

  /* 4. Carteles como enlaces: elevación de 3 px, sin escala ni sombra. */
  .carteles__enlace img { transition: transform 0.28s var(--curva); }
  .carteles__enlace:hover img, .carteles__enlace:focus-visible img { transform: translateY(-3px); }
  .carteles__pieza figcaption cite { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: text-decoration-color 0.2s var(--curva); }
  .carteles__pieza:hover figcaption cite, .carteles__pieza:focus-within figcaption cite { text-decoration-color: var(--tinta); }

  /* 6. Fachada de vídeo: respuesta al clic, no adorno. */
  .video__boton { transition: background-color 0.2s var(--curva); }
  .video__boton:hover, .video__boton:focus-visible { background: rgba(17, 17, 17, 0.4); }
  .video--cargado iframe { animation: ap-aparecer 0.3s var(--curva) both; }
  @keyframes ap-aparecer { from { opacity: 0; } to { opacity: 1; } }

  /* 7. Enlaces: el CTA (.enlace-mas, solo en su línea) dibuja el subrayado al pasar. */
  .enlace-mas { background-image: linear-gradient(var(--tinta), var(--tinta)); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%; text-decoration: none; transition: background-size 0.2s var(--curva); padding-bottom: 1px; }
  .enlace-mas:hover, .enlace-mas:focus-visible { background-size: 100% 1px; }
}


/* ============================================================================
   Rediseño del 2026-09-25: «la sala y el programa».
   La sala está a oscuras (portada, cabeceras, pie, menú desplegado) y en ella
   están las fotografías; el programa de mano es de papel y lleva el texto. El
   papel termina rasgado y, al final de cada página, se levanta y deja ver la
   ficha de contacto en el escenario. Desde el 2026-10-06 el corte es recto (la
   clienta descartó el rasgado). Criterio en docs/rediseno-2026-09-25.md.
   ========================================================================== */

:root {
  --cab-pad: clamp(1.5rem, 3vw, 2.5rem);   /* aire de la cabecera arriba del todo */
  --cab-alto: 7rem;                        /* alto actual: entrada.js lo mide (cambia al compactarse) */
  --cab-reposo: calc(var(--cab-pad) * 2 + 2.75rem); /* alto arriba del todo: para maquetar, no cambia al bajar */
  --rasgado: clamp(14px, 2vw, 26px);        /* aire sobre el pie (era el alto del rasgado) */
  --papel-sobre-negro: rgba(250, 250, 248, 0.86);
  --linea-clara: rgba(250, 250, 248, 0.18);
}

html { scroll-padding-top: calc(var(--cab-alto) + 1rem); }
html, body { overflow-x: clip; }
body:not(.con-escena) main { padding-top: calc(var(--cab-reposo) + clamp(1.5rem, 4vw, 3rem)); }

/* --- Cabecera fija a lo ancho de la pantalla ------------------------------- */

.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: none;
  height: auto;
  margin: 0;
  padding: var(--cab-pad) var(--margen);
  color: var(--tinta);
  view-transition-name: cabecera;
}

/* Fondo de papel que aparece al bajar; sobre la sala, una penumbra que protege el texto. */
.masthead::before,
.masthead::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}
.masthead::before {
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.masthead::after { background: linear-gradient(rgba(10, 10, 10, 0.62), rgba(10, 10, 10, 0)); inset: 0 0 -40% 0; }
.desplazado .masthead:not(.masthead--claro)::before { opacity: 1; }
.desplazado .masthead--claro::after { opacity: 1; }
/* Al bajar, la cabecera se compacta subiendo (transform, sin tocar el layout): el
   aire de arriba pasa de --cab-pad a 1rem y el papel termina 1rem bajo el menú. */
:root { --cab-sube: calc(var(--cab-pad) - 1rem); }
.desplazado { --cab-hueco: calc(2 * var(--cab-sube)); }
/* Se mueve lo de dentro, nunca la cabecera: un transform en ella convertiría en su
   caja de referencia al menú móvil (position: fixed dentro) y lo dejaría cortado. */
.desplazado .menu__boton { transform: translate3d(0, calc(-1 * var(--cab-sube)), 0); }
.masthead::before { bottom: var(--cab-hueco, 0px); }

.masthead--claro,
.menu-abierto .masthead { color: var(--papel); }
.menu-abierto .masthead::before,
.menu-abierto .masthead::after { opacity: 0; }

/* El logotipo es la portada en pequeño: el nombre en dos líneas de Bodoni. */
.masthead__nombre {
  position: relative;
  z-index: 2;
  display: inline-grid;
  color: inherit;
  font-family: var(--display);
  font-variation-settings: 'opsz' 36;
  font-size: clamp(1.3125rem, 1.7vw, 1.6875rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.018em;
  text-decoration: none;
  transform-origin: 0 50%;
}
.desplazado .masthead__nombre { transform: translate3d(0, calc(-1 * var(--cab-sube)), 0) scale(0.88); }
@media (min-width: 64rem) {
  .desplazado .menu__lista > li > a,
  .desplazado .idiomas { transform: translate3d(0, calc(-1 * var(--cab-sube)), 0); }
}
.masthead__linea { display: block; }

/* --- Menú: rótulos en versalitas que se vuelven cursiva de Bodoni ----------- */

.menu__lista { list-style: none; margin: 0; padding: 0; }
.menu__lista a { color: inherit; text-decoration: none; }

.idiomas ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.9rem; }
.idiomas a,
.idiomas [aria-current] {
  color: inherit;
  border: 0;
  font-family: var(--texto);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-decoration: none;
}
.idiomas a { opacity: 0.62; }
.idiomas a:hover, .idiomas a:focus-visible { opacity: 1; }
.idiomas [aria-current] { box-shadow: 0 1px 0 currentColor; }

.menu__boton {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: 500 0.75rem/1 var(--texto);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.menu__boton-icono { position: relative; width: 1.75rem; height: 0.625rem; }
.menu__boton-icono::before,
.menu__boton-icono::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
}
.menu__boton-icono::before { top: 0; }
.menu__boton-icono::after { bottom: 0; }
.menu__boton[aria-expanded='true'] .menu__boton-icono::before { top: 50%; transform: translateY(-50%) rotate(35deg); }
.menu__boton[aria-expanded='true'] .menu__boton-icono::after { bottom: 50%; transform: translateY(50%) rotate(-35deg); }

@media (min-width: 64rem) {
  .menu__boton { display: none; }
  .menu { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); }
  .menu__lista { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.75rem); }
  .menu__lista > li { position: relative; }

  .menu__lista > li > a {
    position: relative;
    display: block;
    overflow: hidden;
    height: 1.75rem;
    font-family: var(--texto);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .menu__texto { display: block; }
  .menu__lista > li > a::after {
    content: attr(data-texto);
    position: absolute;
    inset: 100% -1em auto;
    font-family: var(--display);
    font-variation-settings: 'opsz' 18;
    font-size: 1.1875rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.75rem;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
  }
  .menu__lista > li:hover > a .menu__texto,
  .menu__lista > li > a:focus-visible .menu__texto,
  .menu__lista > .current-menu-item > a .menu__texto,
  .menu__lista > .current-menu-ancestor > a .menu__texto,
  .menu__lista > li:hover > a::after,
  .menu__lista > li > a:focus-visible::after,
  .menu__lista > .current-menu-item > a::after,
  .menu__lista > .current-menu-ancestor > a::after { transform: translateY(-100%); }

  .idiomas { padding-left: clamp(1.25rem, 2vw, 1.75rem); border-left: 1px solid currentColor; border-left-color: color-mix(in srgb, currentColor 32%, transparent); }

  /* Submenú de «Lo que hago»: un telón oscuro a todo lo ancho que baja desde la
     cabecera. El puente invisible (li::after) cubre el hueco entre el rótulo y el
     telón, y el cierre espera un instante: bajar el ratón ya no lo cierra. */
  .menu__lista > .menu-item-has-children::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -100vw;   /* a todo el ancho: se puede bajar en diagonal hacia cualquier subbotón */
    right: -100vw;
    height: calc(var(--cab-pad) + 1.25rem);
  }
  /* El puente solo existe con el telón abierto: pasar por debajo de la cabecera no lo abre. */
  .menu__lista > .menu-item-has-children:not(:hover):not(:focus-within)::after { pointer-events: none; }
  .menu__lista .sub-menu {
    position: fixed;
    top: calc(var(--cab-alto) - var(--cab-hueco, 0px));
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem clamp(1.75rem, 4vw, 4rem);
    margin: 0;
    padding: clamp(2rem, 4vw, 3.25rem) var(--margen) clamp(2.25rem, 4.5vw, 3.75rem);
    list-style: none;
    background: var(--tinta);
    border-top: 1px solid var(--linea-clara);
    color: var(--papel);
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
  }
  /* Sin pointer-events: mientras el telón espera para subir sigue recibiendo el ratón,
     y volver a él a tiempo lo mantiene abierto. */
  .menu__lista li:hover > .sub-menu,
  .menu__lista li:focus-within > .sub-menu {
    visibility: visible;
    clip-path: inset(0);
  }
  .menu__lista .sub-menu a {
    display: block;
    color: var(--papel);
    font-family: var(--display);
    font-variation-settings: 'opsz' 48;
    font-size: clamp(1.875rem, 3.4vw, 3.25rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
  }
  .menu__lista .sub-menu:hover a { opacity: 0.4; }
  .menu__lista .sub-menu a:hover,
  .menu__lista .sub-menu a:focus-visible,
  .menu__lista .sub-menu .current-menu-item a { opacity: 1; font-style: italic; }
}

/* Móvil y tableta: el menú es la sala entera. */
@media (max-width: 63.99rem) {
  .con-js .menu {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    padding: calc(var(--cab-reposo) + 1.5rem) var(--margen) 2rem;
    overflow-y: auto;
    background: var(--tinta);
    color: var(--papel);
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
  }
  .con-js .menu--abierto { visibility: visible; clip-path: inset(0); }
  .menu-abierto,
  .menu-abierto body { overflow: hidden; }

  .menu__lista { display: flex; flex-direction: column; gap: 0.35rem; }
  .menu__lista > li > a {
    display: block;
    font-family: var(--display);
    font-variation-settings: 'opsz' 48;
    font-size: clamp(2.25rem, 9vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .menu__lista > .current-menu-item > a { font-style: italic; }
  .menu__lista .sub-menu { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin: 0.5rem 0 1.25rem; padding: 0; list-style: none; }
  .menu__lista .sub-menu a { font-family: var(--texto); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.78; }
  .idiomas { padding-top: 1.25rem; border-top: 1px solid var(--linea-clara); }

  /* Sin JavaScript no hay botón: la lista se ve entera, en su sitio. */
  html:not(.con-js) .masthead { position: absolute; flex-wrap: wrap; }
  html:not(.con-js) .menu { width: 100%; }
  html:not(.con-js) .menu__lista { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
  html:not(.con-js) .menu__lista > li > a { font-size: 1.25rem; }
}

/* --- La sala: portada y cabeceras de página -------------------------------- */

.escena {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(20rem, 54svh, 34rem);
  padding: calc(var(--cab-reposo) + 2rem) var(--margen) clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
  background: #080808;   /* el negro de las fotos de la serie, para que no se vea la costura */
  color: var(--papel);
}
.escena--foto { min-height: clamp(28rem, 78svh, 56rem); }
.escena__foto { position: absolute; inset: 0; z-index: -2; }
.escena__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
/* Penumbra solo donde va el texto: abajo. */
.escena--foto::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.72), rgba(10, 10, 10, 0) 58%);
  pointer-events: none;
}

.escena__texto { width: 100%; max-width: 50rem; }
.escena--foto .escena__texto { justify-self: end; }

.escena__rotulo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.5rem;
  font-family: var(--texto);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.escena__rotulo::before { content: ''; width: 2.5rem; height: 1px; background: currentColor; }

.escena__titular {
  max-width: 17ch;
  margin: 0;
  font-family: var(--display);
  font-variation-settings: 'opsz' 72;
  font-size: clamp(2.5rem, 6.2vw, 6rem);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.026em;
  text-wrap: balance;
}
.escena__intro {
  max-width: 40ch;
  margin: 1.5rem 0 0;
  color: var(--papel-sobre-negro);
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Portada: la foto a toda la pantalla y el nombre abajo a la derecha, donde la
   foto es negra. */
.escena--portada { min-height: 100vh; min-height: 100svh; }
.escena--portada .escena__foto img { object-position: 42% 38%; }
/* Portada vertical en pantalla ancha: se ve una franja; que sea la de la cabeza. */
.escena--portada.escena--vertical .escena__foto img { object-position: 50% 26%; }
.escena--portada::after { background: linear-gradient(to top left, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0) 45%); }
.portada__texto { max-width: none; width: auto; text-align: right; }
.portada__titulo {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: 'opsz' 96;
  font-size: clamp(3.75rem, 11.5vw, 11rem);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -0.034em;
}
.portada__linea { display: block; }
.portada__claim {
  max-width: 34ch;
  margin: clamp(1.25rem, 2.5vw, 2rem) 0 0 auto;
  color: var(--papel-sobre-negro);
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  line-height: 1.45;
}

/* Escritorio: en las cabeceras de página la foto ocupa la derecha y se funde con el
   negro de la sala; el titular queda a la izquierda, sin pisar a Ángela. Las fotos
   de la serie tienen fondo negro, así que la costura no se ve. */
@media (min-width: 64rem) {
  .escena--foto:not(.escena--portada) .escena__foto {
    left: 30%;
    -webkit-mask-image: linear-gradient(to right, transparent, var(--tinta) 36%);
    mask-image: linear-gradient(to right, transparent, var(--tinta) 36%);
  }
  /* Foto vertical: entera a la derecha, a todo el alto de la cabecera, con el borde
     izquierdo fundido. Recortada a lo ancho se quedaría en una franja del torso. */
  .escena--vertical:not(.escena--portada) .escena__foto {
    left: auto;
    right: 0;            /* pegada al borde derecho de la pantalla */
    width: auto;
    aspect-ratio: 3 / 4;
    -webkit-mask-image: linear-gradient(to right, transparent, var(--tinta) 30%);
    mask-image: linear-gradient(to right, transparent, var(--tinta) 30%);
  }
  .escena--foto:not(.escena--portada) .escena__texto { justify-self: start; max-width: 40rem; }
  .escena--foto:not(.escena--portada)::after { background: linear-gradient(to top, rgba(10, 10, 10, 0.5), rgba(10, 10, 10, 0) 40%); }
}

@media (max-width: 59.99rem) {
  .pie__retrato { display: none; }
}

@media (max-width: 47.99rem) {
  .escena--foto .escena__texto { justify-self: stretch; }
  .escena--portada .escena__foto img { object-position: 44% 30%; }
}

/* --- Bloques de papel ------------------------------------------------------- */

.escena + .bloque,
.escena + .documento { padding-top: var(--hueco-bloque); }

.titular-seccion {
  margin: 0 0 clamp(2rem, 4.5vw, 3.75rem);
  font-family: var(--display);
  font-variation-settings: 'opsz' 96;
  font-size: clamp(3rem, 9.5vw, 8.75rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.035em;
}
.bloque__accion { margin: clamp(2rem, 4vw, 3rem) 0 0; }

@media (min-width: 64rem) {
  .bloque--quien { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .bloque--quien .titular-seccion { position: sticky; top: calc(var(--cab-alto) + 2rem); }
}

.bloque--texto .biografia,
.bloque--texto .bloque__accion { max-width: 42rem; margin-inline: auto; } /* el botón, alineado con el texto, no con la foto */
.bloque--collage { max-width: 92rem; }

/* --- Botones ---------------------------------------------------------------- */
/* Uno solo para todo el sitio: línea de 2 px, fondo transparente y, al pasar,
   se llena desde abajo con el color de la línea (se invierte respecto al fondo). */

.boton,
.formulario .jet-form-builder__action-button,
.formulario button[type='submit'] {
  --b-tinta: var(--tinta);
  --b-fondo: var(--papel);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.95rem 1.75rem;
  overflow: hidden;
  border: 2px solid var(--b-tinta);
  border-radius: 0;
  background: transparent;
  color: var(--b-tinta);
  cursor: pointer;
  font-family: var(--texto);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
.boton::before,
.formulario .jet-form-builder__action-button::before,
.formulario button[type='submit']::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--b-tinta);
  transform: scaleY(0);
  transform-origin: 50% 100%;
}
.boton:hover,
.boton:focus-visible,
.formulario .jet-form-builder__action-button:hover,
.formulario .jet-form-builder__action-button:focus-visible { color: var(--b-fondo); }
.boton:hover::before,
.boton:focus-visible::before,
.formulario .jet-form-builder__action-button:hover::before,
.formulario .jet-form-builder__action-button:focus-visible::before { transform: scaleY(1); }
.boton:focus-visible { outline: 2px solid var(--b-tinta); outline-offset: 3px; }
.oscuro .boton { --b-tinta: var(--papel); --b-fondo: var(--tinta); }

.video__aceptar { border: 2px solid var(--tinta); background: var(--tinta); color: var(--papel); font-family: var(--texto); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* --- Carteles: todos con la misma proporción, alineados por arriba ---------- */

.carteles { align-items: start; }
.carteles__pieza figure { display: block; height: auto; }
.carteles__pieza img,
.palmares-pieza__cartel img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.414;   /* formato A, el de diez de los doce carteles */
  object-fit: cover;
  object-position: 50% 50%;
  background: #E8E7E3;
}
.carteles figcaption { min-height: 0; }

.carteles--tres {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(1rem, 2.5vw, 2rem);
  margin: 0;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}
@media (min-width: 48rem) {
  .carteles--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Lo que hago -------------------------------------------------------------- */

.oficio-bloque {
  display: grid;
  gap: 1.75rem;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  border-top: 1px solid var(--linea);
}
.oficio-bloque:first-of-type { border-top: 0; padding-top: 0; }
.oficio-bloque__nombre {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: 'opsz' 72;
  font-size: clamp(2.125rem, 4.2vw, 3.75rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.026em;
  text-wrap: balance;
}
@media (min-width: 64rem) {
  .oficio-bloque { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .oficio-bloque__nombre { position: sticky; top: calc(var(--cab-alto) + 1.5rem); }
}

.palmares-pieza { grid-template-columns: 6.5rem 1fr; }
.palmares-pieza__ano { color: var(--tinta-suave); font-family: var(--texto); font-size: 0.8125rem; letter-spacing: 0.1em; }

/* --- Collage (Quién soy) -------------------------------------------------------
   Masonry sin JavaScript: una columna son 20 unidades y el hueco 1, así que la
   rejilla de tres columnas mide 62 unidades. Las filas miden una unidad y cada
   foto abarca las que pide su proporción (--filas, calculado en PHP). En móvil,
   dos columnas (41 unidades): las mismas cuentas valen. */

.collage { container-type: inline-size; }
.collage__rejilla {
  --u: calc(100cqi / 62);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: var(--u);
  grid-auto-flow: row dense;
  column-gap: var(--u);
  margin: 0;
  padding: 0;
  list-style: none;
}
@container (max-width: 40rem) {
  .collage__rejilla { --u: calc(100cqi / 41); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.collage__foto { grid-row: span var(--filas); min-width: 0; }
.collage__foto--ancha { grid-column: span 2; }
.collage__foto figure { height: calc((var(--filas) - 1) * var(--u)); overflow: hidden; }
.collage__foto img { width: 100%; height: 100%; object-fit: cover; }

/* --- Contacto (página) ------------------------------------------------------- */

.formulario { max-width: 40rem; margin-top: var(--hueco-bloque); }
.formulario .titular-seccion { font-size: clamp(2.5rem, 6vw, 5rem); }

/* --- Pie: el escenario --------------------------------------------------------- */

main { position: relative; z-index: 1; background: var(--papel); }
.pie {
  position: relative;
  z-index: 0;
  display: block;
  max-width: none;
  margin: 0;
  padding: calc(var(--rasgado) + clamp(4rem, 9vw, 8rem)) var(--margen) 0;
  border: 0;
  background: var(--tinta);
  color: var(--papel);
  font-size: 1rem;
  overflow: hidden;
}
.pie--breve { padding-top: calc(var(--rasgado) + 2.5rem); }
/* La luz de sala: se enciende a medida que el papel se levanta (--revelado, entrada.js). */
.pie::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 60% at 74% 42%, rgba(255, 236, 212, 0.1), rgba(255, 236, 212, 0) 72%);
  pointer-events: none;
}
@media (min-width: 64rem) and (min-height: 46rem) {
  .pie { position: sticky; bottom: 0; }
}

.pie__escenario {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  max-width: var(--ancho);
  margin-inline: auto;
  padding-bottom: clamp(3rem, 7vw, 6rem);
}
@media (min-width: 60rem) {
  .pie__escenario { grid-template-columns: minmax(0, 1.25fr) minmax(0, 24rem); align-items: end; }
}
.pie__titulo {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--display);
  font-variation-settings: 'opsz' 96;
  font-size: clamp(3.5rem, 10.5vw, 9.5rem);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.035em;
}
.pie .contacto__ficha { border-top-color: var(--linea-clara); }
.pie .contacto__linea { border-bottom-color: var(--linea-clara); }
.pie .contacto__linea dt { color: rgba(250, 250, 248, 0.64); }
.pie .contacto__linea a { color: var(--papel); }
.pie__accion { margin: clamp(2rem, 4vw, 2.75rem) 0 0; }
.pie__retrato img { width: 100%; }

.pie__base {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 1.5rem 0 2rem;
  border-top: 1px solid var(--linea-clara);
  color: rgba(250, 250, 248, 0.66);
  font-size: 0.75rem;
}
.pie__base p { margin: 0; }
.pie__base a { color: inherit; }
.pie__legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }

/* --- Movimiento del rediseño ------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .masthead { transition: color 0.3s var(--curva); }
  .menu__boton, .idiomas { transition: transform 0.45s var(--curva); }
  .masthead::before { transition: opacity 0.35s var(--curva), bottom 0s; }
  .masthead::before, .masthead::after { transition: opacity 0.35s var(--curva); }
  .masthead__nombre { transition: transform 0.45s var(--curva); }
  .menu__texto, .menu__lista > li > a::after { transition: transform 0.55s var(--curva); }
  @media (min-width: 64rem) { .menu__lista > li > a { transition: transform 0.45s var(--curva); } }
  .idiomas a { transition: opacity 0.2s var(--curva); }
  .menu__boton-icono::before, .menu__boton-icono::after { transition: transform 0.35s var(--curva), top 0.35s var(--curva), bottom 0.35s var(--curva); }

  /* El telón del submenú: baja al entrar y espera un instante antes de subir. */
  @media (min-width: 64rem) {
    .menu__lista .sub-menu { transition: clip-path 0.5s var(--curva) 0.18s, visibility 0s linear 0.68s; }
    .menu__lista li:hover > .sub-menu,
    .menu__lista li:focus-within > .sub-menu { transition: clip-path 0.6s var(--curva) 0s, visibility 0s linear 0s; }
    .menu__lista .sub-menu li { opacity: 0; transform: translateY(-0.75rem); transition: opacity 0.2s var(--curva), transform 0.2s var(--curva); }
    .menu__lista li:hover > .sub-menu li,
    .menu__lista li:focus-within > .sub-menu li { opacity: 1; transform: none; transition: opacity 0.45s var(--curva), transform 0.6s var(--curva); }
    .menu__lista li:hover > .sub-menu li:nth-child(1), .menu__lista li:focus-within > .sub-menu li:nth-child(1) { transition-delay: 0.12s; }
    .menu__lista li:hover > .sub-menu li:nth-child(2), .menu__lista li:focus-within > .sub-menu li:nth-child(2) { transition-delay: 0.17s; }
    .menu__lista li:hover > .sub-menu li:nth-child(3), .menu__lista li:focus-within > .sub-menu li:nth-child(3) { transition-delay: 0.22s; }
    .menu__lista li:hover > .sub-menu li:nth-child(4), .menu__lista li:focus-within > .sub-menu li:nth-child(4) { transition-delay: 0.27s; }
    .menu__lista li:hover > .sub-menu li:nth-child(n+5), .menu__lista li:focus-within > .sub-menu li:nth-child(n+5) { transition-delay: 0.32s; }
    .menu__lista .sub-menu a { transition: opacity 0.3s var(--curva); }
  }
  @media (max-width: 63.99rem) {
    .con-js .menu { transition: clip-path 0.6s var(--curva), visibility 0s linear 0.6s; }
    .con-js .menu--abierto { transition: clip-path 0.7s var(--curva), visibility 0s linear 0s; }
  }

  .boton::before,
  .formulario .jet-form-builder__action-button::before { transition: transform 0.5s var(--curva); }
  .boton,
  .formulario .jet-form-builder__action-button { transition: color 0.35s var(--curva); }

  /* Entrada de la sala, una vez por carga: la foto se asienta y el texto sube tras un telón. */
  .escena__foto img { animation: ap-foto-entra 1.8s var(--curva) both; }
  .portada__linea,
  .escena__titular { animation: ap-linea 1s var(--curva) both; animation-delay: 0.25s; }
  .portada__linea + .portada__linea { animation-delay: 0.38s; }
  .escena__rotulo, .portada__claim, .escena__intro { animation: ap-aparece 0.9s var(--curva) both; animation-delay: 0.6s; }
  @keyframes ap-foto-entra { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: none; } }
  @keyframes ap-linea { from { clip-path: inset(0 0 100% 0); transform: translateY(0.3em); } to { clip-path: inset(-0.2em 0 -0.2em 0); transform: none; } }
  @keyframes ap-aparece { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }

  /* El escenario: el título y el retrato suben con la luz (--revelado de 0 a 1). */
  .pie::before { opacity: var(--revelado, 1); }
  .pie__titulo { transform: translateY(calc((1 - var(--revelado, 1)) * 3.5rem)); opacity: calc(0.25 + 0.75 * var(--revelado, 1)); }
  .pie__retrato img { transform: scale(calc(1.06 - 0.06 * var(--revelado, 1))); transform-origin: 50% 100%; }
}

/* Movimiento atado al scroll: los titulares aparecen, se desplazan y se van según
   se baja o se sube. Solo donde el navegador sabe hacerlo; en los demás queda la
   entrada de siempre (.entra). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .titular-seccion,
    .js .oficios__linea,
    .js .carteles__pieza,
    .js .oficio-bloque__nombre,
    .js .biografia.entra { opacity: 1; transform: none; transition: none; }

    /* La sala se va más despacio que el papel: la foto baja y el texto sube y se apaga. */
    .escena__foto { animation: ap-foto-sale linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .escena__texto { animation: ap-texto-sale linear both; animation-timeline: scroll(root); animation-range: 0 75vh; }
    @keyframes ap-foto-sale { to { transform: translate3d(0, 22%, 0); } }
    @keyframes ap-texto-sale { to { transform: translate3d(0, -16vh, 0); opacity: 0; } }

    .titular-seccion { animation: ap-titular linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes ap-titular {
      0%   { opacity: 0; transform: translate3d(7vw, 0, 0); }
      28%  { opacity: 1; transform: translate3d(0, 0, 0); }
      78%  { opacity: 1; transform: translate3d(-2.5vw, 0, 0); }
      100% { opacity: 0; transform: translate3d(-5vw, 0, 0); }
    }
    .bloque--quien .titular-seccion { animation-name: ap-titular-entra; animation-range: entry 0% cover 45%; }
    @keyframes ap-titular-entra { from { opacity: 0; transform: translate3d(7vw, 0, 0); } to { opacity: 1; transform: none; } }

    .oficio-bloque { view-timeline-name: --oficio; }
    .oficio-bloque__nombre { animation: ap-nombre linear both; animation-timeline: --oficio; animation-range: entry 5% exit 100%; }
    @keyframes ap-nombre {
      0%   { opacity: 0; transform: translate3d(-2rem, 0, 0); }
      18%  { opacity: 1; transform: none; }
      88%  { opacity: 1; }
      100% { opacity: 0; }
    }

    /* Mínimo 0.72 (tinta al 72 % sobre papel = 9:1): aun a medio asentar, la bio cumple
       4,5:1 en móvil, donde su cuerpo (20 px) cuenta como texto normal. */
    .biografia > p { animation: ap-tinta linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    @keyframes ap-tinta { from { opacity: 0.72; transform: translate3d(0, 0.6rem, 0); } to { opacity: 1; transform: none; } }

    .oficios__linea { animation: ap-fila linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    @keyframes ap-fila { from { opacity: 0; transform: translate3d(-2.5rem, 0, 0); } to { opacity: 1; transform: none; } }

    /* Cada cartel sube tras su telón al entrar en pantalla. */
    .carteles--tres .carteles__pieza,
    .bloque--piezas .carteles__pieza { animation: ap-telon linear both; animation-timeline: view(); animation-range: entry 0% entry 85%; }
    @keyframes ap-telon { from { clip-path: inset(100% 0 0 0); transform: translate3d(0, 2rem, 0); } to { clip-path: inset(0 0 -2rem 0); transform: none; } }

    /* El collage se revela y cada foto se acerca despacio mientras cruza la pantalla. */
    .collage__foto figure { animation: ap-revela linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .collage__foto img { animation: ap-acerca linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes ap-revela { from { clip-path: inset(18% 8% 18% 8%); opacity: 0.2; } to { clip-path: inset(0); opacity: 1; } }
    @keyframes ap-acerca { from { transform: scale(1.16); } to { transform: scale(1); } }
  }
}