/* 35 · Cine. Se carga después de estilos.css; no lo modifica.
   1) Cabecera fija con mix-blend-mode: exclusion (toda la web).
   2) Portada de 120 svh con entrada por clip-path (solo home).
   3) Apariciones al hacer scroll (solo home; las activa tema.js, y solo si hay JS).
   4) Servicios con render sticky de fondo (solo home).
   5) Hover de tarjetas: escala 1,03 de la imagen dentro del recorte. */

html { scroll-padding-top: calc(var(--cab-h, 77px) + 15px); }

/* ---------- 1 · cabecera ---------- */
.cab {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent; border-bottom: 0; color: #fff;
  mix-blend-mode: exclusion;
}
.cab .marca img { filter: invert(1); } /* el monograma es negro: en blanco para que la mezcla lo invierta */
.cab :focus-visible { outline-color: #fff; }
.cab .menu-btn { border-color: #fff; color: #fff; }
.cab .menu-btn:hover, .cab .menu-btn[aria-expanded="true"] { background: #fff; color: #000; }
.cab .btn-linea { color: #fff; border-color: #fff; }
.cab .btn-linea:hover { background: #fff; color: #000; }
/* el resto de páginas empiezan bajo la cabecera (76 px + filete); la portada de la home no */
main:not(.inicio) { padding-top: var(--cab-h, 77px); }

/* menú móvil abierto: panel oscuro y sin mezcla (con exclusion un fondo negro desaparecería) */
@media (max-width: 1179px) {
  .js .nav { background: #0a0a0a; color: #fff; border-bottom: 1px solid #3a3a3a; }
  .cab:has(.nav.abierto) { mix-blend-mode: normal; background: #0a0a0a; }
}

/* ---------- 2 · portada ---------- */
.portada {
  position: relative; overflow: hidden; background: var(--bg); color: #fff;
  height: min(120vh, 118vw, 1300px);
  height: min(120svh, 118vw, 1300px);
  min-height: 520px;
}
/* showreel (idea de la 39): tres renders apilados que se alternan; la pila entra con clip-path y cada render hace zoom lento */
.pz-pila {
  position: absolute; inset: 0;
  animation: cine-abre 900ms cubic-bezier(0.65, 0, 0.35, 1) both;
}
.pz {
  position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--pos, 50% 62%); transform-origin: var(--org, 50% 55%);
  opacity: 0; transition: opacity 1500ms ease-in-out;
}
.pz.on { opacity: 1; z-index: 1; }
.pz.kb { animation: pz-zoom 8500ms linear both; will-change: transform, opacity; }
/* de 1 a 1,06 en los 7 s que dura cada vista; sigue 1,5 s más mientras se funde */
@keyframes pz-zoom { from { transform: scale(1); } to { transform: scale(calc(1 + 0.06 * 8.5 / 7)); } }
.portada.en-pausa .pz, .pase.en-pausa .pz { animation-play-state: paused; }
/* pase de servicios.html: el mismo showreel (tema.js) dentro de un recuadro 3:2; .banda-img img (estilos.css) fija height:auto y aspect-ratio, por eso el refuerzo */
.pase { position: relative; overflow: hidden; aspect-ratio: 3 / 2; --pos: 50% 50%; }
.banda-img .pase .pz { height: 100%; aspect-ratio: auto; }
@keyframes cine-abre {
  from { clip-path: inset(14% 7% 24% 7%); }
  to { clip-path: inset(0 0 0 0); }
}
/* velo superior: la cabecera con exclusion se lee mal sobre cielos de tono medio; un poco de oscuro lo arregla */
.portada::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 200px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.55) 40%, rgba(0, 0, 0, 0));
}
/* el texto ocupa la primera pantalla; el degradado oscuro va aparte, sobre toda la altura de la portada (en .portada-txt
   acababa de golpe al final de la primera pantalla y dejaba una raya sobre la imagen) */
.portada::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.66) 17%, rgba(0, 0, 0, 0.5) 38%, rgba(0, 0, 0, 0.16) 60%, rgba(0, 0, 0, 0) 75%);
  animation: cine-texto 700ms ease 550ms both;
}
.portada-txt {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  height: min(100vh, 100%); height: min(100svh, 100%);
  display: flex; align-items: flex-end; padding-bottom: var(--s-4);
  animation: cine-texto 700ms ease 550ms both;
}
@keyframes cine-texto { from { opacity: 0; } to { opacity: 1; } }
.portada-grid > * { grid-column: 1 / -1; min-width: 0; }
.portada-grid { position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gut); row-gap: var(--s-2); align-items: end; }
.portada h1 {
  font-size: clamp(2.5rem, 7vw, 7.5rem); line-height: 0.94; letter-spacing: -0.04em; font-weight: 500;
  text-wrap: balance; overflow-wrap: break-word;
}
.portada .lead { color: #fff; font-size: var(--t-small); line-height: 1.45; max-width: min(30ch, calc(100% - 60px)); }
@media (min-width: 900px) {
  .portada h1 { grid-column: 1 / span 8; grid-row: 1; }
  .portada .lead { grid-column: 9 / span 3; grid-row: 1; padding-bottom: 0.6em; max-width: 30ch; }
}
@media (max-width: 639px) {
  /* móvil: 120 svh con tope de 920 px (más alto, el recorte lateral del render sería absurdo) */
  .portada { height: min(120vh, 920px); height: min(120svh, 920px); }
  .portada-txt { padding-bottom: var(--s-3); }
  .portada-grid { row-gap: var(--s-3); }
  .pz { object-position: var(--posm, var(--pos, 50% 62%)); }
}

/* ---------- 3 · apariciones al hacer scroll ---------- */
.cj [data-rv] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 800ms ease, transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--d, 0ms);
}
.cj [data-rv].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cj [data-rv] { opacity: 1; transform: none; }
  .pz-pila, .portada-txt, .portada::after { animation: none !important; }
  .pz { transition: none; }
  .pz.kb { animation: none; }
}

/* ---------- 4 · servicios: render sticky de fondo, textos deslizando encima ---------- */
.serv-cine { position: relative; background: #0a0a0a; color: #fff; border-top: 1px solid var(--line-strong); }
.serv-fondo { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.serv-fondo img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.serv-fondo::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.serv-lista { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100svh; padding-block: var(--sec) var(--s-5); }
.serv-lista h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.serv-items { margin-top: var(--s-4); }
.serv-item {
  display: grid; gap: var(--s-2) var(--gut); align-content: center;
  min-height: 52vh; min-height: 52svh; padding-block: var(--s-4);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}
.serv-item h3 { font-size: clamp(2rem, 4.6vw, 4.5rem); line-height: 1; letter-spacing: -0.035em; font-weight: 500; }
.serv-item h3 a { text-decoration: none; }
.serv-item h3 a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.serv-item h3 a:focus-visible { outline-color: #fff; }
.serv-item > p { max-width: 34ch; }
.serv-item ul { margin-top: var(--s-1); }
.serv-item ul li { padding: 3px 0; font-size: var(--t-small); }
@media (min-width: 900px) {
  .serv-item { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .serv-item h3 { grid-column: 1 / span 7; grid-row: 1 / span 2; align-self: center; }
  .serv-item > p { grid-column: 9 / -1; grid-row: 1; align-self: end; }
  .serv-item ul { grid-column: 9 / -1; grid-row: 2; }
}

/* ---------- 5 · tarjetas ---------- */
.tile img { transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.tile:hover img, .tile:focus-visible img { transform: scale(1.03); }
.pr a { position: relative; display: block; overflow: hidden; text-decoration: none; }
.pr img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--grid);
  transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pr a:hover img, .pr a:focus-visible img { transform: scale(1.03); }
.pr a:focus-visible { outline: 3px solid var(--fg); outline-offset: -3px; box-shadow: inset 0 0 0 6px #fff; }

/* ---------- 6 · proyectos: el desfile (idea de la 38) ----------
   Tira horizontal de renders 3:4 de 70 vh ligada al scroll vertical. La sección mide ~3 pantallas (la altura la fija tema.js);
   dentro, .desfile-fijo es sticky y la tira se mueve con translate3d. Sin JS, en móvil (< 768 px) o con reduced-motion
   es un scroll horizontal normal con scroll-snap. */
:root { --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; }
.desfile { --alto: min(70vh, 105vw); --alto: min(70svh, 105vw); border-top: 1px solid var(--line-strong); }
.desfile-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); padding-block: var(--sec) var(--s-3); }
.desfile-cab .lead { color: var(--muted); }
.desfile-tira {
  display: flex; gap: var(--gut); align-items: flex-start;
  padding-inline: var(--m); padding-bottom: var(--sec);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m);
  overscroll-behavior-x: contain;
}
.desfile-item { flex: none; width: calc(var(--alto) * 0.75); scroll-snap-align: start; }
.desfile-item > a { display: block; color: inherit; text-decoration: none; }
.desfile-item img {
  display: block; width: 100%; height: var(--alto); max-width: none;
  object-fit: cover; object-position: var(--pos, 50% 50%); background: var(--grid);
}
.desfile-cap {
  display: block; margin-top: 12px;
  font-family: var(--mono); font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase;
}
.desfile-item > a:hover .desfile-cap { text-decoration: underline; text-underline-offset: 0.3em; }
.desfile-item > a:focus-visible { outline: 3px solid var(--fg); outline-offset: 4px; }
.desfile-fin { display: flex; align-items: flex-end; width: calc(var(--alto) * 0.5); height: var(--alto); }
.desfile-todos { font-size: var(--t-1); font-weight: 500; line-height: 1.15; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.desfile-todos:focus-visible { outline: 3px solid var(--fg); outline-offset: 4px; }
.desfile-barra { display: none; }

/* modo scroll vertical -> desplazamiento horizontal (lo activa tema.js en >= 768 px y sin reduced-motion) */
.desfile-pista.activa { position: relative; }
.desfile-pista.activa .desfile-fijo {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip;
  display: flex; flex-direction: column; justify-content: center;
}
/* la cabecera es fija y ocupa los 77 px de arriba: el titular de la sección queda debajo */
.desfile-pista.activa .desfile-cab { padding-block: calc(var(--cab-h, 77px) + var(--s-2)) var(--s-3); }
.desfile-pista.activa .desfile-tira {
  overflow: visible; scroll-snap-type: none; width: max-content; padding-bottom: 0;
  position: relative; will-change: transform;
}
.desfile-pista.activa .desfile-barra {
  display: block; position: absolute; left: var(--m); right: var(--m); bottom: var(--s-3); height: 2px; background: var(--line);
}
.desfile-pista.activa .desfile-barra i { display: block; height: 100%; background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; }
.desfile-pista.activa .desfile-fin { width: calc(var(--alto) * 0.5); }