/* ============================================================
   DATCER · portafolio de servicios
   ------------------------------------------------------------
   Una presentación que se recorre de lado. El lienzo se queda pegado y la pista
   se desplaza en horizontal con el scroll: cada lámina es un servicio.

   Las láminas van CLARAS sobre un escenario NAVY, como diapositivas sobre una
   mesa oscura. Dos razones: las fotos de servicio son de estudio sobre fondo
   claro —sobre navy tendrían un halo blanco recortado alrededor— y el contraste
   entre lámina y escenario es lo que hace que se lean como piezas sueltas que
   pasan, en vez de como una franja continua.
   ============================================================ */

/* ---------- hero ---------- */
/* ---------- portada ----------
   La seccion es el perla (el mismo del inicio y de shelters, con el reflejo
   que mueve --hs) y dentro va el marco: navy, la foto y el texto. El marco se
   recorta con clip-path y --hx, que el JS lleva de 1 a 0 al bajar: el perla
   asoma por los bordes y se cierra. Con clip-path y no con inset porque asi no
   se recalcula el layout del texto en cada fotograma. */
#br-hero{position:relative;height:100svh;min-height:640px;overflow:hidden;--hx:1;
  background:
    linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 60%) var(--hs,120%) 0/260% 100% no-repeat,
    radial-gradient(60% 55% at 14% 6%,rgba(255,236,242,.2),rgba(255,236,242,0) 62%),
    radial-gradient(55% 60% at 88% 96%,rgba(210,228,255,.62),rgba(210,228,255,0) 64%),
    linear-gradient(115deg,#E7E8EB 0%,#F8F8F6 20%,#DFE3E9 42%,#F4F3F0 60%,#E2E6EC 80%,#F1F1EF 100%)}
.br-fr{position:absolute;inset:0;display:flex;align-items:flex-end;
  --bg:var(--dark);--fg:var(--light);background:var(--bg);color:var(--fg);
  clip-path:inset(
    calc(var(--hx) * clamp(84px,10.5vh,124px))
    calc(var(--hx) * clamp(12px,1.6vw,30px))
    calc(var(--hx) * clamp(12px,1.6vw,30px))
    round calc(var(--hx) * clamp(12px,1.5vw,26px)))}
/* la foto: 114 % de alto y -7 % arriba, el sobrante del parallax */
.br-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.br-bg img,.br-bg video{position:absolute;left:0;top:-7%;width:100%;height:114%;
  object-fit:cover;object-position:62% 45%;will-change:transform}
/* el texto sobre la foto: sombra en capas y una sombra local solo detras del
   bloque de texto, abajo a la izquierda */
#br-hero .tag,#br-hero h1,#br-hero .ft p{
  text-shadow:0 1px 2px rgba(2,13,31,.55),0 3px 14px rgba(2,13,31,.55),0 10px 44px rgba(2,13,31,.6)}
#br-hero .in::before{content:'';position:absolute;z-index:-1;pointer-events:none;
  left:-14%;bottom:-16%;width:84%;height:150%;
  background:radial-gradient(closest-side,rgba(2,13,31,.8),rgba(2,13,31,.55) 55%,rgba(2,13,31,0))}
/* «veintiocho oficios» es texto metalico: degradado recortado a la letra con
   color transparente. Una text-shadow se ve A TRAVES de la letra y la
   ensucia; aqui la sombra va con drop-shadow, que sigue el contorno. */
#br-hero h1 .ln>i em{text-shadow:none;
  filter:drop-shadow(0 2px 3px rgba(2,13,31,.55)) drop-shadow(0 8px 26px rgba(2,13,31,.6))}
/* lo que va sobre la foto clara necesita su propio fondo: el boton de
   contorno, las pastillas de descarga y sus rotulos */
#br-hero .cta .btn:not(.fill),#br-hero .dl-b{background:rgba(2,13,31,.62);
  border-color:rgba(227,230,235,.26);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#br-hero .dl .lbl,#br-hero .br-sc{color:rgba(255,255,255,.82);text-shadow:0 2px 12px rgba(2,13,31,.8)}
#br-hero .ft p{color:rgba(255,255,255,.9)!important}
@media (max-width:860px){
  #br-hero .in::before{left:-20%;width:140%;bottom:-6%;height:118%;
    background:linear-gradient(to top,rgba(2,13,31,.82) 0,rgba(2,13,31,.62) 55%,rgba(2,13,31,.3) 80%,rgba(2,13,31,0))}
}
#br-hero .in{position:relative;z-index:2;width:100%;padding-bottom:calc(clamp(12px,1.6vw,30px) + clamp(30px,5vh,64px))}
#br-hero .tag{display:inline-block;margin-bottom:clamp(18px,2.6vw,34px);color:rgba(227,230,235,.72)}
#br-hero h1{max-width:15ch;margin-bottom:clamp(34px,5vw,66px)}
#br-hero .ft{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,70px);align-items:end}
#br-hero .ft p{max-width:48ch;color:var(--fg-60);font-size:clamp(.98rem,1.08vw,1.16rem);line-height:1.62}
#br-hero .cta{display:flex;gap:14px;flex-wrap:wrap}

/* (el resplandor azul de la portada se retiro: se pintaba sobre la foto) */
/* la marca de «esto va de lado»: una flecha que insiste hacia la derecha */
.br-sc{position:absolute;right:var(--pad);bottom:clamp(30px,4.6vw,58px);z-index:3;
  display:flex;align-items:center;gap:14px;color:rgba(227,230,235,.5)}
.br-sc i{position:relative;display:block;width:64px;height:1px;
  background:rgba(227,230,235,.22);overflow:hidden}
.br-sc i::after{content:'';position:absolute;inset:0;background:var(--light);
  transform:translateX(-100%);animation:brsc 2.4s var(--e) infinite}
@keyframes brsc{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* ---------- descargas ----------
   Los dos archivos NO se generan en el navegador. Se exportan una vez con
   `scripts/export-brochure.js` y aqui solo se enlazan: un PDF hecho por el
   motor de impresion de Chrome sobre la hoja de impresion de esta misma pagina
   —texto vectorial, seleccionable, no una foto de la pantalla— y un PPTX con
   una lamina por diapositiva. Hacerlo en cliente obligaria a cargar una libreria
   de medio mega para producir algo peor. */
.dl{display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  margin-top:clamp(22px,2.8vw,36px)}
.dl > .lbl{color:rgba(227,230,235,.38);margin-right:6px}
.dl-b{display:inline-flex;align-items:center;gap:11px;padding:11px 16px 11px 11px;
  border:1px solid rgba(227,230,235,.20);border-radius:100px;
  background:rgba(227,230,235,.06);color:var(--fg);
  transition:background .45s var(--e),border-color .45s var(--e)}
.dl-b:hover{background:rgba(227,230,235,.15);border-color:rgba(227,230,235,.44)}
.dl-b .ic{font-style:normal;font-size:9px;font-weight:500;letter-spacing:.1em;
  padding:5px 7px;border-radius:4px;background:var(--acc);color:#fff}
.dl-b span{font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase}
.dl-b em{font-style:normal;font-size:10.5px;color:var(--fg-38);
  font-variant-numeric:tabular-nums}
/* el par que va dentro de la lamina de cierre: sin etiqueta y mas compacto */
.dl-sl{margin-top:clamp(20px,2.4vw,30px)}

/* ============================================================
   EL ESCENARIO
   ============================================================ */
#deck{--bg:var(--dark);--fg:var(--light);background:var(--bg);color:var(--fg)}
.dk{height:100svh;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(16px,2.2vw,30px);overflow:hidden}
.dk-hd{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  color:rgba(227,230,235,.40)}
.dk-ct b{color:var(--light);font-variant-numeric:tabular-nums}
.dk-tr{display:flex;gap:clamp(16px,2vw,38px);padding-inline:var(--pad);will-change:transform}
.dk-bar{height:1px;background:rgba(227,230,235,.14);position:relative}
.dk-bar>i{position:absolute;inset:0;background:var(--light);transform:scaleX(0);transform-origin:left}

/* ---------- una lámina ----------
   Los tokens de color se redefinen aquí, no se hereda el navy: dentro de la
   lámina todo es claro, y así los mismos `.bd`, `.lbl` o `.tg` del sistema
   funcionan sin escribir un color a mano en cada uno. */
.sl{
  flex:0 0 min(86vw,1180px);height:min(74svh,820px);
  position:relative;display:grid;grid-template-columns:1.04fr .96fr;
  border-radius:clamp(12px,1.2vw,22px);overflow:hidden;
  background:var(--light);color:var(--dark);
  --fg:#020D1F;
  --fg-60:rgba(2,13,31,.62);--fg-38:rgba(2,13,31,.40);
  --fg-18:rgba(2,13,31,.20);--fg-10:rgba(2,13,31,.11);
  --gl1:#020D1F;--gl2:#2C3D57;--gl3:#5D7292;
  box-shadow:0 2px 10px rgba(0,0,0,.30), 0 46px 100px -46px rgba(0,0,0,.72);
}
.sl-im{position:relative;overflow:hidden;background:#E8EAED;
  transform-style:preserve-3d;will-change:transform}
.sl-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:transform}
.sl-bd{position:relative;z-index:2;display:flex;flex-direction:column;
  justify-content:center;padding:clamp(26px,3.2vw,54px)}
.sl-bd .cap{margin-bottom:clamp(14px,1.8vw,24px)}
.sl-bd h2{margin-bottom:clamp(12px,1.6vw,20px)}
.sl-bd .bd{max-width:40ch;margin-bottom:clamp(18px,2.4vw,30px)}

.sl-li{list-style:none;border-top:1px solid var(--fg-18);margin-bottom:clamp(18px,2.2vw,28px)}
.sl-li li{position:relative;padding:11px 0 11px 22px;border-bottom:1px solid var(--fg-10);
  font-size:.88rem;line-height:1.5;color:var(--fg-60)}
.sl-li li::before{content:'';position:absolute;left:0;top:20px;width:10px;height:1px;
  background:var(--fg-38)}

/* La palabra acentuada del titular. Las laminas no llevan sus titulares partidos
   en lineas — no hace falta, no hay revelado por mascara aqui — asi que la regla
   del brillo de `style.css`, que cuelga de `.ln > i`, no las alcanza y el <em>
   se quedaba en cursiva. Toma el tono medio del metal, que ya esta definido en
   los tokens de cada lamina y funciona igual sobre claro que sobre oscuro. */
.sl h2 em{font-style:normal;color:var(--gl2)}

/* Las etiquetas. Viven aqui y no se heredan de `servicios.css`: esa hoja no se
   carga en esta pagina, y sin estas reglas los tres terminos salen pegados uno
   detras de otro como una sola palabra. */
.sl .tg{display:flex;flex-wrap:wrap;gap:8px}
.sl .tg span{
  font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 13px;border:1px solid var(--fg-18);border-radius:100px;color:var(--fg-60);
  transition:border-color .5s var(--e),color .5s var(--e);
}
.sl:hover .tg span{border-color:var(--fg-38);color:var(--fg)}

/* el número de la lámina, al fondo y casi invisible */
.sl-n{position:absolute;right:-.06em;bottom:-.22em;z-index:0;pointer-events:none;
  user-select:none;font-size:clamp(7rem,15vw,15rem);font-weight:200;line-height:.8;
  letter-spacing:-.06em;color:var(--fg);opacity:.055;font-variant-numeric:tabular-nums}

/* ---------- la lámina ancha ----------
   El plano de seguimiento es 2,34:1 contra el 1,79:1 de las fotos de estudio.
   Metido en media lámina no se leería un solo número, así que va arriba a todo
   lo ancho y el texto debajo. */
.sl-wide{flex-basis:min(92vw,1420px);grid-template-columns:1fr;grid-template-rows:1.12fr .88fr}
.sl-wide .sl-im img{object-fit:contain;background:#fff}
.sl-wide .sl-bd{padding-top:clamp(20px,2.2vw,34px)}
.sl-wide .sl-bd .bd{max-width:70ch}
.sl-wide .sl-li{columns:2;column-gap:clamp(24px,3vw,54px)}
.sl-wide .sl-li li{break-inside:avoid}

/* ---------- lamina a sangre ----------
   Para una captura panoramica (el mapa termico es 2.03:1) no hay forma de
   apilarla sobre el texto: la lamina entera mide 2.04:1, asi que la imagen
   apilada quedaria en una franja de 160px flotando en el centro. Aqui la
   imagen ES la lamina y el texto va encima, sobre un velo que se abre hacia
   la derecha para dejar ver la parte util de la captura. */
.sl-full{flex-basis:min(90vw,1360px);grid-template-columns:1fr;
  background:#0C1116;color:var(--light);
  --fg:#E3E6EB;--fg-60:rgba(227,230,235,.66);--fg-38:rgba(227,230,235,.42);
  --fg-18:rgba(227,230,235,.20);--fg-10:rgba(227,230,235,.12);
  --gl1:#8FA3BE;--gl2:#DDE5EF;--gl3:#FFFFFF;
  box-shadow:inset 0 0 0 1px rgba(227,230,235,.14), 0 46px 100px -46px rgba(0,0,0,.72)}
.sl-full .sl-im{position:absolute;inset:0;z-index:0;background:#0C1116}
.sl-full .sl-im img{object-fit:cover;object-position:62% 50%}
.sl-full::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#0C1116 0 30%,rgba(12,17,22,.90) 46%,
    rgba(12,17,22,.58) 62%,rgba(12,17,22,.16) 80%,rgba(12,17,22,0) 96%)}
.sl-full .sl-bd{grid-column:1;grid-row:1;max-width:min(52%,660px);
  padding-block:clamp(20px,2.4vw,38px)}
.sl-full .sl-li li{padding:9px 0 9px 22px}
.sl-full .sl-li li::before{top:18px}
.sl-full .sl-n{z-index:1;opacity:.10}

/* ---------- portada, proceso y cierre ---------- */
.sl-proc,.sl-end{grid-template-columns:1fr}
/* La portada va a dos columnas: el titular a la izquierda y el indice de los
   dieciocho servicios a la derecha. A una sola columna el titular ocupaba 44ch
   y la mitad derecha de la lamina quedaba vacia — muy visible en el PDF, donde
   la hoja es mas ancha que la lamina en pantalla. */
.sl-cover{grid-template-columns:1.02fr .98fr}
.sl-cover{flex-basis:min(90vw,1320px);background:var(--dark);color:var(--light);
  --fg:#E3E6EB;--fg-60:rgba(227,230,235,.62);--fg-38:rgba(227,230,235,.40);
  --fg-18:rgba(227,230,235,.18);--fg-10:rgba(227,230,235,.10);
  --gl1:#8FA3BE;--gl2:#DDE5EF;--gl3:#FFFFFF;
  box-shadow:inset 0 0 0 1px rgba(227,230,235,.14), 0 46px 100px -46px rgba(0,0,0,.72)}
/* La marca en la portada. Va `logo-dark.png`, que es el original tal cual para
   fondo oscuro: naranja y gris claro. Sin filtros ni recolorear — el logo de un
   portafolio se entrega como es. */
.sl-lg{display:block;width:clamp(172px,15.5vw,248px);height:auto;
  margin-bottom:clamp(24px,3vw,40px)}
.sl-cover .lbl{color:var(--fg-38);margin-bottom:clamp(20px,2.6vw,34px);display:block}
/* 4,4vw eran 70px: con el indice al lado, la columna del titular mide 564px y
   la primera linea se partia en dos. A 3,2rem entra en los dos renglones que
   pide el marcado. */
.sl-cover h2{margin-bottom:clamp(20px,2.6vw,32px);font-size:clamp(1.9rem,3.3vw,3.2rem)}
.sl-cover .bd{max-width:38ch;margin-bottom:clamp(28px,3.6vw,50px)}
.sl-meta{display:flex;gap:clamp(28px,4vw,70px);border-top:1px solid var(--fg-18);padding-top:24px}
.sl-meta b{display:block;font-size:clamp(1.8rem,3.4vw,3rem);font-weight:200;
  letter-spacing:-.04em;line-height:1;margin-bottom:8px}
.sl-meta .lbl{color:var(--fg-38);margin:0}

/* ---------- el indice de la portada ---------- */
.sl-ix{position:relative;z-index:2;display:flex;flex-direction:column;
  justify-content:center;padding:clamp(26px,3.2vw,54px);
  border-left:1px solid var(--fg-18)}
.sl-ix > .lbl{color:var(--fg-38);display:block;
  margin-bottom:clamp(14px,1.8vw,22px)}
.sl-ix ol{list-style:none;columns:2;column-gap:clamp(22px,2.6vw,40px)}
.sl-ix li{display:flex;gap:10px;align-items:baseline;break-inside:avoid;
  padding:clamp(5px,.7vw,8px) 0;border-bottom:1px solid var(--fg-10)}
.sl-ix li b{font-size:.6rem;font-weight:500;letter-spacing:.14em;
  color:var(--fg-38);font-variant-numeric:tabular-nums}
.sl-ix li span{font-size:clamp(.74rem,.92vw,.86rem);line-height:1.3;
  color:var(--fg-60);letter-spacing:-.01em}
/* el numerote de fondo choca con el indice: en la portada se va a la izquierda */
.sl-cover .sl-n{right:auto;left:-.04em;opacity:.045}

.sl-proc{flex-basis:min(88vw,1240px)}
.sl-st{list-style:none;margin-top:clamp(20px,2.6vw,34px);border-top:1px solid var(--fg-18)}
.sl-st li{display:flex;gap:clamp(18px,2.4vw,40px);align-items:baseline;
  padding:clamp(12px,1.5vw,20px) 0;border-bottom:1px solid var(--fg-10)}
.sl-st li b{font-size:.78rem;font-weight:500;letter-spacing:.16em;color:var(--fg-38);
  min-width:2.4em;font-variant-numeric:tabular-nums}
.sl-st li span{display:block;font-size:.9rem;line-height:1.55;color:var(--fg-60)}
.sl-st li i{display:block;font-style:normal;font-size:1.02rem;font-weight:400;
  color:var(--fg);margin-bottom:4px;letter-spacing:-.01em}

.sl-end{flex-basis:min(72vw,900px);background:var(--dark);color:var(--light);
  --fg:#E3E6EB;--fg-60:rgba(227,230,235,.62);--fg-38:rgba(227,230,235,.40);
  --fg-18:rgba(227,230,235,.18);--fg-10:rgba(227,230,235,.10);
  --gl1:#8FA3BE;--gl2:#DDE5EF;--gl3:#FFFFFF;
  box-shadow:inset 0 0 0 1px rgba(227,230,235,.14), 0 46px 100px -46px rgba(0,0,0,.72)}
.sl-end .lbl{color:var(--fg-38);display:block;margin-bottom:clamp(16px,2.2vw,28px)}
.sl-end h2{margin-bottom:clamp(18px,2.4vw,30px)}
.sl-end .bd{max-width:40ch;margin-bottom:clamp(26px,3.2vw,42px)}
.sl-cta{display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  margin-bottom:clamp(28px,3.6vw,48px)}
.sl-ct{display:flex;gap:clamp(26px,4vw,64px);border-top:1px solid var(--fg-18);padding-top:22px}
.sl-ct .lbl{color:var(--fg-38);margin-bottom:6px}
.sl-ct a{font-size:.95rem;font-weight:300}

/* ============================================================
   ADAPTATIVO
   ------------------------------------------------------------
   Por debajo de 900 px el recorrido horizontal se abandona: en un móvil el
   scroll lateral pelea con el gesto de volver atrás del navegador y con el
   propio scroll de la página. Las láminas pasan a apilarse en vertical, que es
   el gesto que ahí se espera. El JS mira el mismo ancho y no monta el pin.
   ============================================================ */
@media (max-width:900px){
  .dk{height:auto;padding-block:clamp(60px,9vw,110px)}
  .dk-tr{flex-direction:column;padding-inline:var(--pad);gap:clamp(22px,4vw,40px)}
  .sl,.sl-cover,.sl-proc,.sl-end,.sl-wide,.sl-full{
    flex-basis:auto;width:100%;height:auto;grid-template-columns:1fr;grid-template-rows:auto auto}
  .sl-im{aspect-ratio:16/10}
  .sl-wide .sl-li{columns:1}
  .sl-ix{border-left:0;border-top:1px solid var(--fg-18);
    padding-top:clamp(18px,3vw,26px)}
  .sl-ix ol{columns:1}
  .dk-bar{display:none}
  #br-hero .ft{grid-template-columns:1fr}
  .br-sc{display:none}
  /* La lamina a sangre (sensores): en escritorio la imagen es el fondo y el
     texto ocupa la mitad izquierda sobre un velo. Apilada, esa mitad eran 170
     px de ancho y cuatro palabras por linea. Aqui la imagen va arriba como en
     las demas laminas y el texto debajo, a todo el ancho. */
  .sl-full .sl-im{position:relative;inset:auto;grid-row:1;aspect-ratio:2.03/1}
  .sl-full::before{display:none}
  .sl-full .sl-bd{grid-row:2;max-width:none}
}
/* ============================================================
   IMPRESION
   ------------------------------------------------------------
   De aqui sale el PDF. El recorrido horizontal no existe al imprimir: la pista
   se deshace y cada lamina ocupa su propia pagina apaisada. Nada de esto lo ve
   el visitante — solo el motor de impresion de Chrome cuando corre el script
   de exportacion.
   ============================================================ */
@page{size:297mm 167mm;margin:0}   /* 16:9 sobre el ancho de un A4 apaisado */

@media print{
  html,body{background:#fff}
  #pre,#hd,#mn,#ch,#cr,#cx,#sc,#wa,.br-sc,#br-hero,footer,.dk-hd,.dk-bar,.dl{
    display:none!important}

  /* ScrollTrigger envuelve el deck en un `.pin-spacer` cuyo relleno es el
     recorrido del scroll: veinte mil pixeles, o doce hojas en blanco. */
  .pin-spacer{padding:0!important;margin:0!important;height:auto!important;
    min-height:0!important;max-height:none!important;display:block!important;
    position:static!important;inset:auto!important}

  /* la pista se deshace y deja de estar desplazada */
  #deck,.dk{height:auto!important;display:block!important;overflow:visible!important;
    position:static!important;inset:auto!important;transform:none!important;
    background:#fff!important}
  /* Columna flexible, NO bloque. Como bloque, los saltos de linea del HTML
     entre un <article> y el siguiente crean cajas de linea anonimas de ~24px;
     con la lamina midiendo exactamente el alto de la pagina eso la empuja a una
     segunda hoja y el PDF sale con el doble de paginas, la mitad en blanco.
     Un contenedor flexible ignora ese espacio en blanco. */
  .dk-tr{display:flex!important;flex-direction:column!important;
    transform:none!important;padding:0!important;width:auto!important;gap:0!important}

  /* una lamina, una pagina */
  .sl{
    display:grid!important;grid-template-columns:1.04fr .96fr!important;
    width:297mm!important;height:167mm!important;
    flex:0 0 auto!important;margin:0!important;border-radius:0!important;
    overflow:hidden!important;
    box-shadow:none!important;break-after:page;break-inside:avoid;
    transform:none!important;opacity:1!important}
  .sl:last-child{break-after:auto}
  .sl-wide{grid-template-columns:1fr!important;grid-template-rows:1.12fr .88fr!important}
  .sl-proc,.sl-end,.sl-full{grid-template-columns:1fr!important}
  .sl-cover{grid-template-columns:1.02fr .98fr!important}
  .sl-im img{transform:none!important}
  /* La hoja es 1,78:1 y la captura 2,03:1: recortada se le va el panel de la
     derecha, que es justo lo que hay que leer. Entera, las bandas que quedan
     arriba y abajo son del mismo tono que la esquina de la imagen (13,21,26). */
  .sl-full .sl-im img{object-fit:contain!important;object-position:50% 50%!important}
  .sl-bd{transform:none!important}
  .sl-n{transform:none!important}

  /* el navegador desactiva los fondos por defecto al imprimir, y estas laminas
     SON su fondo: sin esto la portada y el cierre salen en blanco */
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
}

/* ---------- la pelicula ----------
   Por encima del grano de la pagina (z 9): la pelicula se ve limpia. */
#br-film{--bg:var(--dark);--fg:var(--light);background:var(--bg);color:var(--fg);
  padding-block:clamp(48px,6vw,110px)}
#br-film .film-hd{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:clamp(16px,1.8vw,26px)}
#br-film .film-hd .lbl{color:var(--fg-60)}
.film{position:relative;z-index:10;max-width:1440px;margin-inline:auto;aspect-ratio:16/9;
  overflow:hidden;border-radius:clamp(10px,1vw,18px);background:#000;
  box-shadow:0 0 0 1px rgba(227,230,235,.12),0 40px 90px -40px rgba(0,0,0,.85)}
.film video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
/* la perspectiva para que el marco llegue inclinado; el giro nace de su canto
   inferior, como una pantalla que se levanta */
#br-film .pad{perspective:1600px}
.film{transform-origin:50% 100%;will-change:transform}
@media print{ #br-film{display:none!important} }