/* Palmore Regular, convertida del TTF original a WOFF2: 75 KB -> 24 KB.
   swap = el texto se ve desde el primer momento con la serif de
   respaldo y salta a Palmore al cargar; nunca hay texto invisible. */
@font-face{
  font-family:"Palmore";
  /* Archivo oficial de la licencia Webfont comprada a CCS Type.
     Sustituye a una conversión propia del TTF de escritorio, que no
     estaba cubierta por la licencia. No reemplazar por otra versión. */
  src:url("fonts/ccspalmore-webfont.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

/* ============================================================
   1. TOKENS
   Cambiar --ink transforma TODA la web. Ahora sí es una sola
   línea: antes --ink-soft y --ink-hair llevaban el cobalto escrito
   a mano en rgba(), así que cambiar --ink dejaba los filetes y el
   texto secundario del color viejo. Ahora se derivan solos.
   ============================================================ */
:root{
  --paper:  #F6EFE1;   /* crema cálido, el papel */
  --ink:    #6B0B0C;   /* rojo del logo, extraído del PNG: TODO el texto va aquí */
  --ink-soft: color-mix(in srgb, var(--ink) 62%, transparent);
  --ink-hair: color-mix(in srgb, var(--ink) 28%, transparent);
  --shade:  #E9DFCB;   /* crema un punto más oscuro, para bloques */

  --display: "Palmore", Georgia, serif;
  --serif:   "Instrument Serif", Georgia, serif;
  --sans:    "Instrument Sans", system-ui, sans-serif;

  --gut:  clamp(18px, 4vw, 58px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; width:100%; height:100%; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--ink); color:var(--paper); }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* Etiqueta: serif en versales, muy espaciada. El contrapunto al display. */
.label{
  font-family:var(--serif);
  font-size:clamp(10px, 1vw, 12px);
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1.4;
}

/* ============================================================
   2. HERO — a sangre. Antes iba enmarcado dentro del papel con un
   margen que lo hacía parecer una página impresa; ahora arranca
   pegado al borde superior y ocupa todo el ancho de la ventana.
   (Aquí vivía la navegación de Photo/Film, ya retirada. El único
   <nav> que queda es el de redes del pie, que tiene su propio CSS.)
   ============================================================ */
.hero{ padding:0; }

.plate{
  position:relative;
  /* El width:100% es obligatorio, no decorativo. Sin él el ancho es
     'auto', y entonces min-height + aspect-ratio hacen que el navegador
     DEDUZCA el ancho del alto (619 x 1.5 = 928px) y la placa se salga
     de la ventana, arrastrando vídeo, logo y scroll-note. Con el ancho
     explícito, el ratio solo manda sobre el alto. */
  width:100%;
  aspect-ratio:3/2;      /* el formato de los vídeos: 3:2, no 16:9 */
  min-height:62svh;
  overflow:hidden;
  background:var(--shade);
}
/* Grano de película sobre la imagen */
.plate::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.22; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* El reel, ya como vídeo propio. Al ser un <video> y no un iframe,
   object-fit hace el recorte solo: no hacen falta las cuentas de 3:2
   ni las unidades de contenedor que pedía el reproductor de Vimeo.
   Encaja igual aunque min-height estire la placa en móvil. */
.reel{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border:0; pointer-events:none;
}

.plate-copy{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center;
  /* El % en padding se resuelve SIEMPRE contra el ancho, nunca contra
     el alto. Como la placa es 3:2, un 5,3% de ancho equivale a un ~8%
     de alto, que es donde cae el logo en la referencia. Iba en vh, que
     dependía del alto de la ventana y no del vídeo. */
  /* Sin padding lateral a propósito: con él, el 48% del logo se medía
     contra este bloque ya descontado y salía un 45,7% del vídeo. Ahora
     el porcentaje del logo es directamente el del vídeo. */
  padding:clamp(18px, 5.3%, 120px) 0 24px;
}
/* El logotipo. No va como <img> a propósito: lo usamos de MÁSCARA y
   pintamos por debajo con var(--ink). Así el logo hereda el color del
   sitio igual que haría un SVG, y sigue valiendo la promesa de cambiar
   una sola línea. Un <img> traería el rojo quemado dentro del archivo
   y se desincronizaría en cuanto tocaras --ink.
   Archivo: logo HQ recortado al ras, 2600x393 en gris+alfa (de la
   máscara solo se usa el canal alfa, así que el color sobra y se
   ahorra un tercio del peso). */
.wordmark{
  /* Porcentaje del ancho del vídeo, no una medida fija: así el logo
     guarda siempre la misma proporción con el fotograma, sea cual sea
     la pantalla. Un tope en px rompería esa relación en monitores
     grandes. Este PNG viene al ras (0,08% de aire transparente), así
     que el porcentaje es el tamaño real de la tinta, sin compensar.
     Era 48%; bajado a 38% para que pese menos sobre la imagen. */
  width:38%;
  aspect-ratio:2600/393;
  background:var(--ink);
  -webkit-mask:url("img/logo.png") center/contain no-repeat;
          mask:url("img/logo.png") center/contain no-repeat;
}
/* El texto sigue en el HTML para buscadores y lectores de pantalla,
   solo que oculto a la vista. */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ------------------------------------------------------------
   Botón de sonido, abajo a la derecha. Lleva un disco de papel
   translúcido detrás porque la tinta sola no se lee sobre imagen en
   movimiento: el fotograma cambia y el contraste con él.
   (Aquí vivía el "scroll down" manuscrito, ya retirado.)
   ------------------------------------------------------------ */
.sound{
  position:absolute; right:clamp(14px,3vw,40px); bottom:clamp(10px,2.4vw,26px);
  z-index:4;
  width:clamp(40px,4.6vw,54px); aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--ink-hair);
  border-radius:50%;
  background:rgba(246,239,225,.78);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  color:var(--ink);
  cursor:pointer;
  transition:background .35s ease, border-color .35s ease;
}
.sound:hover{ background:var(--paper); border-color:var(--ink-soft); }
.sound svg{ width:52%; height:auto; display:block; }

/* Mudo: sin ondas y con la equis. Con sonido, al revés. */
.sound .wave, .sound .slash{ transition:opacity .3s ease; }
.sound[aria-pressed="false"] .wave{ opacity:0; }
.sound[aria-pressed="true"]  .slash{ opacity:0; }

/* ============================================================
   4. TRABAJO — carrusel horizontal con alturas escalonadas.
   Los títulos son la HISTORIA; el cliente va debajo, pequeño.
   ============================================================ */
.work{ padding:clamp(50px,9vw,110px) 0 clamp(40px,7vw,80px); }

/* Cabecera de sección. Se llamaba .work-head cuando solo la usaba el
   carrusel; ahora la comparten "SELECTED FILMS" y "THE ARTISTS", así
   que lleva un nombre neutro. Cualquier sección nueva que quiera un
   título de este tamaño solo tiene que usar esta clase. */
.section-head{
  padding:0 var(--gut);
  display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 18px;
  margin-bottom:clamp(24px,4vw,48px);
}
/* Los títulos en versales. El tracking pasa de -.025em a +.015em:
   el negativo estaba calculado para minúsculas y en caja alta juntaba
   demasiado las letras. Las versales piden aire, no lo contrario. */
.section-head h2{
  font-family:var(--display);
  font-weight:400;
  /* Calibrado para que el título mida aproximadamente lo mismo que una
     tarjeta del carrusel. La tarjeta es clamp(230px,34vw,440px) y este
     texto ocupa unas 6,2 veces su cuerpo, de ahí estos números: si
     cambias el ancho de .film, recalcula también estos. */
  font-size:clamp(37px, 5.45vw, 71px);
  line-height:1;
  letter-spacing:.015em;
  text-transform:uppercase;
}
.section-head .sub{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(14px,1.8vw,22px);
  color:var(--ink-soft);
}
/* .duo ya trae el gutter en su propio padding; sin esto se sumaría
   dos veces y el título se desalinearía de "SELECTED FILMS". */
.duo .section-head{ padding:0; }

.rail{
  display:flex; gap:clamp(14px,2.4vw,34px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:0 var(--gut) 18px;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }

.film{
  flex:0 0 auto;
  width:clamp(230px, 34vw, 440px);
  scroll-snap-align:center;
}
/* El escalonado: los pares bajan. Es lo que da el ritmo de revista. */
.film:nth-child(even){ margin-top:clamp(20px,4vw,64px); }

.film-plate{
  position:relative;
  /* 4:3 apaisado. Los clips son 3:2 (1.50) y esto es 1.33, así que
     todavía recorta algo por los lados — mucho menos que el 3:4
     vertical anterior, que se comía media imagen. Para encaje exacto
     sería 3/2. */
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--shade);
}
.film-plate img{ transition:transform 1.3s cubic-bezier(.2,.7,.3,1); }
.film:hover .film-plate img{ transform:scale(1.04); }

/* La tarjeta entera es el enlace, no solo el título: el área pulsable
   más grande posible, que es lo que se espera de una rejilla de
   trabajos. Al ser un <a> hay que devolverle el display de bloque. */
a.film{ display:block; }

.still-slot{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg,#E7DBC4 0%,#D3C6AC 100%);
  color:color-mix(in srgb, var(--ink) 45%, transparent);
  text-align:center; padding:16px;
}

.film-caption{
  margin-top:14px;
  text-align:center;
}
.film-caption .story{
  font-family:var(--serif);
  font-size:clamp(12px,1.15vw,15px);
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.45;
  display:block;
}
.film-caption .client{
  display:block;
  margin-top:7px;
  font-size:11px;
  letter-spacing:.08em;
  color:var(--ink-soft);
}

.rail-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding:clamp(14px,2.5vw,26px) var(--gut) 0;
}
.rail-foot a{ border-bottom:1px solid var(--ink-hair); padding-bottom:2px; }

/* ---- Selected Stills ------------------------------------------------
   Las tarjetas son iguales que las de Films: mismo 4:3 y mismo ancho,
   heredados de .film y .film-plate sin sobrescribir nada. Lo que
   distingue a las dos secciones es el contenido y el título, no la
   geometría. Se probó vertical (2:3 y 3:4) y se descartó.
   El padding superior sí es propio: .work ya aporta el suyo por abajo
   y, sumados, dejaban un hueco del doble que el resto de la página. */
.work--stills{ padding-top:clamp(12px,2vw,26px); }
.arrows{ display:flex; gap:16px; font-size:20px; }
.arrows button{
  background:none; border:0; cursor:pointer;
  color:var(--ink); font-size:22px; line-height:1;
  transition:opacity .3s ease;
}
.arrows button:hover{ opacity:.5; }

/* ============================================================
   5. CLIENTES
   ============================================================ */
.clients{
  padding:clamp(48px,8vw,100px) var(--gut);
  border-top:1px solid var(--ink-hair);
  border-bottom:1px solid var(--ink-hair);
}
/* Mismo ancho que el texto de la bio, y centrado. El space-between es
   lo que hace que coincidan de verdad: con los logos centrados, su
   extensión visible cambiaba con cada pantalla (1011px en una de 1430,
   887px en una de 1167) y nunca cuadraba con un texto de ancho fijo.
   Así el primero y el último tocan los bordes, de modo que lo que se ve
   mide exactamente lo mismo que el párrafo. */
.logo-row{
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
  gap:clamp(22px,3.4vw,46px) clamp(26px,4vw,58px);
  margin:clamp(24px,4vw,44px) auto 0;
  max-width:1000px;
}

/* Cada logo va como MÁSCARA pintada con var(--ink), igual que el
   logotipo del hero. Así los 11 se leen como una sola familia en vez
   de meter siete colores de marca dentro de una paleta de dos tintas.
   Además resuelve de paso los que venían con fondo opaco.

   --r = proporción real del logo, ya recortado al ras
   --f = factor de peso óptico. NO todos pueden ir a la misma altura:
         las proporciones van de 0.92 (Badrutt's, casi cuadrado) a 12
         (Shebara, un wordmark finísimo). A altura fija, los anchos
         aplastan a los cuadrados. El factor iguala el área percibida,
         con una corrección suave por densidad de tinta. */
.logo{
  --base:clamp(20px, 2.4vw, 30px);
  /* Techo de ancho. Sin él, Shebara y Desert Rock —proporción 12:1—
     se estiraban hasta 242px frente a los ~75px del resto: el criterio
     igualaba el ÁREA, y en una fila horizontal lo que domina la vista
     es el ancho. Ojo: aquí mandamos sobre el ancho y no sobre el alto
     a propósito, porque con aspect-ratio es el ancho el que debe ser
     explícito para que el techo arrastre también a la altura. */
  --cap:calc(4.2 * var(--base));
  flex:0 0 auto;
  width:min(calc(var(--f) * var(--base) * var(--r)), var(--cap));
  aspect-ratio:var(--r);
  background:var(--ink);
  -webkit-mask:var(--src) center/contain no-repeat;
          mask:var(--src) center/contain no-repeat;
  opacity:.8;
  transition:opacity .35s ease;
}
.logo:hover{ opacity:1; }

/* Separador invisible que parte la fila de logos en dos grupos.
   Ancho completo y altura cero: no se ve ni ocupa, solo fuerza el
   salto. El margin negativo cancela el gap vertical que el flex le
   añadiría por ser un elemento más de la fila. */
.row-break{
  flex-basis:100%;
  height:0;
  margin:calc(-1 * clamp(22px,3.4vw,46px) / 2) 0;
}

/* ============================================================
   6. EL DÚO
   ============================================================ */
/* Arriba va mucho menos que abajo a propósito: .work ya aporta su
   propio padding inferior, y sumando los dos el hueco salía de 163px
   —casi el doble del que hay entre el hero y "SELECTED FILMS"—.
   Con esto los dos saltos de sección miden lo mismo. */
.duo{ padding:clamp(12px,2vw,26px) var(--gut) clamp(56px,9vw,120px); }

/* Ancho completo de la sección, que ya trae el gutter en su padding:
   así la foto arranca y termina justo donde lo hace "THE ARTISTS" y
   donde acaba el margen derecho. Sin max-width ni márgenes negativos
   — se probó a sangre como el hero y se descartó: el hero manda sobre
   toda la ventana, pero esta sección vive dentro del margen. */
.duo-top{
  max-width:none;
  margin:0 0 clamp(34px,5vw,60px);
}
.portrait{
  /* 2:1, el formato nativo del archivo (1920x960). OJO: el original se
     llama "21x9" pero su proporción real es 1.9979, no 2.3333. Se usa
     la de verdad para que el navegador no recorte nada. */
  position:relative; aspect-ratio:2/1; overflow:hidden;
  background:var(--shade);
}
/* Título de la bio. En versales como el resto de títulos; la jerarquía
   la marca el cuerpo, bastante menor que el "THE ARTISTS" de la
   sección. El tracking va en positivo por lo mismo que en
   .section-head h2: en caja alta el negativo junta demasiado. */
.duo-copy h3{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(26px, 4.2vw, 48px);
  line-height:1.05;
  letter-spacing:.015em;
  text-transform:uppercase;
  margin-bottom:.5em;
}

/* Pie de foto al estilo editorial, alineado al borde DERECHO de la
   imagen. Va en cursiva serif, la misma voz que el "places that stay
   with you" del carrusel.
   Sin max-width: se quiere en una sola línea, así que no se le pone
   tope de ancho. No lleva white-space:nowrap a propósito — en móvil
   el texto no cabe de ninguna manera, y forzarlo desbordaría la
   pantalla. Allí se parte en dos renglones, que es el mal menor. */
.portrait-credit{
  margin-top:11px;
  /* Sin padding propio: la foto ya respeta el gutter de la sección, así
     que el pie cierra exactamente contra su borde derecho. */
  text-align:right;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(12px, 1.15vw, 15px);
  line-height:1.45;
  color:var(--ink-soft);
}

/* 1000px: el ancho hasta donde se extienden los logos del muro, para
   que el bloque de texto rime con ellos. Queda por debajo de la foto,
   que va de margen a margen (1316px), así que la jerarquía se mantiene:
   imagen > texto > nada llega al borde salvo el hero. */
.duo-copy{ max-width:1000px; margin:0 auto; }
.duo-copy p{ font-size:clamp(14px,1.5vw,17px); }
/* Solo separación, sin aclarar el color: antes los párrafos siguientes
   iban al 62%, lo que funcionaba con una bio de dos párrafos pero deja
   ilegible una de seis. La jerarquía ahora la marca el plegado. */
.duo-copy p + p{ margin-top:1.1em; }

/* ---- "Continue the story" ------------------------------------------
   El <summary> se estiliza como los enlaces pequeños de la web (el
   "VIEW ALL FILMS" del carrusel): versalita serif con filete debajo.
   Hay que matar el triangulito que los navegadores ponen por defecto,
   y hace falta la regla -webkit- aparte porque Safari usa su propio
   pseudoelemento para ese marcador. */
/* El <summary> está obligado por el HTML a ser el primer hijo, pero
   visualmente no tiene por qué: cerrado va arriba (es el "continuar"),
   y abierto baja al final, detrás del vídeo, porque cerrar solo tiene
   sentido cuando ya has terminado de leer. Flexbox lo reordena sin
   tocar el orden del documento, así que el teclado y los lectores de
   pantalla siguen encontrándolo donde esperan. */
.story-more{
  /* Cerrado, este margen separa el gancho del rótulo "continue". */
  margin-top:1.4em;
  display:flex;
  flex-direction:column;
}
/* Abierto, el primer párrafo de la bio debe quedar a la misma distancia
   del gancho que cualquier otro par de párrafos. El margen NO puede ir
   aquí: un 1.1em sobre el <details> se calcula con SU tamaño de fuente
   (16px heredados del body) y daba 18px, mientras que entre párrafos
   salían 15px porque allí 1em son los 15.3px del propio párrafo.
   Por eso el margen se lo damos al párrafo, abajo. */
.story-more[open]{ margin-top:0; }
.story-more > .story-body{ order:1; }
.story-more[open] > summary{
  order:2;
  margin-top:2em;
}
.story-more > summary{
  display:inline-block;
  /* Obligado por el flex del padre: un elemento flex se convierte en
     bloque y el inline-block deja de encogerse, así que el filete se
     estiraba a los 640px de la columna en vez de ceñirse al texto. */
  align-self:flex-start;
  list-style:none;
  cursor:pointer;
  font-family:var(--serif);
  font-size:clamp(10px, 1vw, 12px);
  letter-spacing:.2em;
  text-transform:uppercase;
  border-bottom:1px solid var(--ink-hair);
  padding-bottom:3px;
  transition:border-color .3s ease;
}
.story-more > summary::-webkit-details-marker{ display:none; }
.story-more > summary:hover{ border-color:var(--ink); }

/* El rótulo cambia según esté abierto o cerrado. Son dos <span> reales
   y no un ::after con content, porque el texto generado por CSS no
   todos los lectores de pantalla lo anuncian. */
.story-more .txt-close{ display:none; }
.story-more[open] .txt-open{ display:none; }
.story-more[open] .txt-close{ display:inline; }

.story-body{ margin-top:0; }
/* El mismo 1.1em que separa a los demás párrafos, pero aplicado al
   párrafo: así el em se calcula sobre su propio cuerpo y el hueco
   coincide exactamente, no "casi". */
.story-body > p:first-child{ margin-top:1.1em; }
/* El cierre de la bio, como una coda: serif en cursiva, igual que el
   "places that stay with you" del carrusel. */
.duo-copy .story-close{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(15px,1.7vw,20px);
  color:var(--ink-soft);
  margin-top:1.4em;
}

/* ---- Vídeo de presentación ---- */
.tube{
  /* El mismo ancho que el texto. Va dentro de .duo-copy, así que de
     todos modos no podría pasar de ahí: para hacerlo más ancho que el
     párrafo habría que sacarlo de ese contenedor. */
  max-width:1000px;
  margin:clamp(34px,5vw,60px) auto 0;
  /* 3:2, NO 16:9: el vídeo está rodado en el mismo formato que el reel
     del hero y que vuestras películas. En un marco 16:9 Vimeo habría
     metido bandas negras a los lados. */
  aspect-ratio:3/2;
  overflow:hidden;
  background:var(--shade);
}
.tube iframe{ width:100%; height:100%; border:0; display:block; }

@media (max-width:560px){
  .duo-top{ grid-template-columns:1fr; }
  .portrait + .portrait{ margin-top:0; }
}

/* ============================================================
   7. CONTACTO
   ============================================================ */
.contact{
  padding:clamp(60px,10vw,130px) var(--gut) clamp(30px,5vw,60px);
  text-align:center;
  background:var(--shade);
}
/* El email en minúsculas: en versales se lee peor y rompe la
   convención de cómo se escribe una dirección. */
.mail{
  font-family:var(--display);
  font-size:clamp(22px,5.6vw,80px);
  line-height:1;
  letter-spacing:-.01em;
  display:inline-block;
  margin-top:.4em;
  /* El filete tiene que caer POR DEBAJO de los rasgos descendentes.
     Con line-height:1 la caja es más baja que las letras y el borde
     cruzaba la @ y la p como si fuera un tachado. El padding va en em
     para que la separación se mantenga a cualquier cuerpo. */
  padding-bottom:.42em;
  border-bottom:2px solid var(--ink-hair);
  transition:border-color .4s ease;
}
.mail:hover{ border-color:var(--ink); }

/* Botón del formulario. Hereda la voz de la web —serif en versales muy
   espaciada, como el resto de etiquetas— en vez de usar el estilo de
   Tally, que traería su propia tipografía a una página con una
   disciplina tipográfica cerrada. Al pulsar, el formulario se abre
   encima en una ventana; el botón solo es la invitación. */
/* Se encoge a su contenido, y su contenido más ancho es el email: ese
   es el ancho que hereda el botón. */
.contact-block{ display:inline-block; }

.cta-form{
  display:block;
  width:100%;          /* = el ancho del email, vía .contact-block */
  margin:0;
  padding:16px 34px;
  /* Relleno sólido, no contorno: con el borde en --ink-hair (la tinta
     al 28%) no se leía como pulsable. Una mancha de color llena es lo
     único que en esta paleta tan contenida dice "esto se toca". */
  background:var(--ink);
  border:1px solid var(--ink);
  color:var(--paper);
  font-family:var(--serif);
  /* Mismo cuerpo y tracking que los títulos de las fichas (.story),
     para que el botón hable con la misma voz que el resto de la web. */
  font-size:clamp(12px, 1.15vw, 15px);
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.45;
  cursor:pointer;
  transition:background .35s ease, color .35s ease;
}
/* Al pasar por encima se vacía, en vez de oscurecerse: el cambio es
   mucho más perceptible que una variación de tono. */
.cta-form:hover{
  background:transparent;
  color:var(--ink);
}
/* Mientras se descarga Tally tras la primera pulsación. */
.cta-form[aria-busy="true"]{ opacity:.5; cursor:progress; }

.socials{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:10px 34px;
  margin-top:clamp(28px,5vw,56px);
}
.socials a{ border-bottom:1px solid transparent; padding-bottom:3px; transition:border-color .3s ease; }
.socials a:hover{ border-bottom-color:var(--ink); }


@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ============================================================
   9. SUBPÁGINAS (films.html, stills.html)
   Reutilizan todo lo anterior: tipografía, colores, .film,
   .film-plate y .film-caption son los mismos. Lo único propio es
   la cabecera con el logo y la rejilla que sustituye al carrusel.
   ============================================================ */
.page-head{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px 20px;
  padding:clamp(20px,3vw,34px) var(--gut);
  border-bottom:1px solid var(--ink-hair);
}
/* El logotipo, en pequeño, haciendo de vuelta a la home. Misma
   máscara que el del hero, así que hereda --ink igual que él. */
.page-logo{
  display:block;
  width:clamp(120px, 15vw, 190px);
  aspect-ratio:2600/393;
  background:var(--ink);
  -webkit-mask:url("img/logo.png") center/contain no-repeat;
          mask:url("img/logo.png") center/contain no-repeat;
  transition:opacity .3s ease;
}
.page-logo:hover{ opacity:.6; }
.page-head .back{ border-bottom:1px solid var(--ink-hair); padding-bottom:2px; }

/* Rejilla en lugar de carrusel: aquí se ve TODO el trabajo, no una
   selección, así que no tiene sentido obligar a desplazar en
   horizontal. auto-fill reparte las columnas según quepa. */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap:clamp(28px,4vw,56px) clamp(18px,2.6vw,34px);
  padding:0 var(--gut);
}
/* .film viene del carrusel con ancho fijo y escalonado: aquí manda
   la rejilla, así que se anulan los dos. */
.grid .film{ width:auto; }
.grid .film:nth-child(even){ margin-top:0; }

/* ============================================================
   10. GALERÍA DE STILLS (lightbox)
   Se abre al pulsar una tarjeta de Stills y muestra todas las fotos
   de ese trabajo. Vive en la misma página: no hace falta cargar nada
   nuevo ni perder el sitio donde estabas.
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:100;
  display:none;
  background:var(--paper);
  flex-direction:column;
}
.lightbox[open], .lightbox.abierta{ display:flex; }

/* El atributo hidden aplica display:none, pero cualquier regla propia
   con display:flex lo pisa. Sin esto, las flechas y el contenedor de
   vídeo seguían viéndose al ocultarlos desde el script. */
.lightbox [hidden]{ display:none !important; }

/* Barra superior: de dónde son las fotos y por cuál vas. */
.lb-bar{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px;
  padding:clamp(16px,2.4vw,26px) var(--gut);
  border-bottom:1px solid var(--ink-hair);
}
.lb-titulo{
  font-family:var(--serif);
  font-size:clamp(11px,1.1vw,13px);
  letter-spacing:.18em; text-transform:uppercase;
}
.lb-contador{ font-family:var(--serif); font-size:12px; color:var(--ink-soft); }

/* El escenario de la foto. min-height:0 es obligatorio: sin él, un
   hijo flex no se deja encoger por debajo de su contenido y la imagen
   desborda la pantalla en vez de ajustarse. */
.lb-escena{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,2.5vw,32px) var(--gut);
}
.lb-video{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
/* El iframe ocupa el escenario y es Vimeo quien ajusta el encuadre
   dentro: así da igual que una pieza sea 3:2 y otra 16:9. */
.lb-video iframe{ width:100%; height:100%; border:0; display:block; }

.lb-escena img{
  width:auto; height:auto;
  max-width:100%; max-height:100%;
  object-fit:contain;          /* la foto entera, nunca recortada */
}

/* Controles. El de cerrar va arriba a la derecha; las flechas abajo,
   juntas, para poder pasar fotos sin mover la mano. */
.lb-cerrar, .lb-prev, .lb-next{
  background:none; border:0; cursor:pointer;
  color:var(--ink); font-family:var(--serif);
  transition:opacity .3s ease;
}
.lb-cerrar:hover, .lb-prev:hover, .lb-next:hover{ opacity:.5; }
.lb-cerrar{ font-size:clamp(11px,1.1vw,13px); letter-spacing:.18em; text-transform:uppercase; }
.lb-pie{
  display:flex; align-items:center; justify-content:center; gap:34px;
  padding:0 var(--gut) clamp(18px,3vw,30px);
}
.lb-prev, .lb-next{ font-size:22px; line-height:1; padding:6px 10px; }

/* Mientras la galería está abierta, la página de debajo no debe
   desplazarse: si no, al cerrar apareces en otro sitio. */
body.lb-abierta{ overflow:hidden; }

/* Las tarjetas de stills son <button>: hay que quitarles el aspecto
   de botón del navegador y devolverles el de tarjeta. */
button.film{
  /* Sin width: el ancho lo fija .film (clamp 230–440px en el carrusel,
     auto en la rejilla). Un width:100% aquí lo pisaba y las tarjetas
     se estiraban a todo el ancho del carril. */
  display:block;
  background:none; border:0; padding:0;
  font:inherit; color:inherit; text-align:inherit;
  cursor:pointer;
}

/* Tarjeta sin vídeo ni fotos todavía: no debe insinuar que se puede
   pulsar. El cursor de mano sobre algo que no responde es una promesa
   incumplida. */
button.film:disabled{ cursor:default; }

/* Sin animación de hover en las tarjetas, a propósito. Se probó un
   filete bajo el título y se descartó: el movimiento irá en la propia
   imagen, no en el texto, cuando haya fotos y vídeos que animar. */

/* Miniatura en vídeo dentro de la tarjeta. Mismo encaje que una imagen. */
.film-plate video{
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform 1.3s cubic-bezier(.2,.7,.3,1);
}
.film:hover .film-plate video{ transform:scale(1.04); }

/* Velo negro al pasar el cursor. Va en un ::after sobre la placa y no
   sobre el vídeo, para que no se escale con él al hacer zoom.
   pointer-events:none para que no intercepte el clic de la tarjeta. */
.film-plate::after{
  content:"";
  position:absolute; inset:0;
  background:#000;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}
.film:hover .film-plate::after{ opacity:.5; }

/* Acompaña a las trabas del script: evita que la imagen se pueda
   seleccionar o arrastrar fuera. No impide descargarla (eso no es
   posible), solo quita los gestos a mano. */
img, video{
  -webkit-user-select:none; user-select:none;
  -webkit-user-drag:none;
}

/* ---- Paso de una subpágina a la otra --------------------------------
   Al final del catálogo, un enlace a la otra sección: así quien termina
   de ver las películas sigue hacia las fotos sin volver a la home.
   -------------------------------------------------------------------- */
.siguiente{
  display:block;
  margin-top:clamp(50px,8vw,100px);
  padding:clamp(34px,5vw,60px) var(--gut);
  border-top:1px solid var(--ink-hair);
  text-align:center;
}
.siguiente .label{ display:block; color:var(--ink-soft); margin-bottom:.9em; }
.siguiente .titulo{
  font-family:var(--display);
  font-size:clamp(30px, 4.6vw, 60px);
  line-height:1;
  letter-spacing:.015em;
  text-transform:uppercase;
  border-bottom:1px solid transparent;
  transition:border-color .35s ease;
}
.siguiente:hover .titulo{ border-bottom-color:var(--ink); }