/* =================================================================
   dEUSeXmACHINA films

   Direccion tipografica: geometrica tipo Futura.
   Jost es una revision libre de Futura (Google Fonts). El idioma
   correcto de esta familia NO es negrita apretada, sino pesos
   ligeros + MAYUSCULAS con tracking amplio + mucho aire.
   Referencias: steve-won.com (TT Norms), a24films.com
   (NB International / Akzidenz Extended), nowness.com.

   Paleta: monocromo. Sin color de acento — el color lo pone
   la obra, no la interfaz.
   ================================================================= */

:root{
  /* ---- NOCHE (por defecto) ---- */
  --bg:#000;
  --bg-2:#0a0a0a;
  --line:#1c1c1c;
  --line-2:#2e2e2e;
  --text:#fff;
  --dim:#8f8f8f;
  --dim-2:#5e5e5e;
  --cuerpo:#d5d5d5;          /* texto de lectura: sinopsis y creditos */
  --acento:#3ddbcb;          /* turquesa: destaca letras y lineas */

  --font:"Jost",-apple-system,BlinkMacSystemFont,"Futura","Century Gothic",sans-serif;
  --max:1240px;
}

/* ---- DIA ---- */
:root[data-tema="dia"]{
  --bg:#fff;
  --bg-2:#f6f6f6;
  --line:#e5e5e5;
  --line-2:#cfcfcf;
  --text:#000;
  --dim:#000;
  --dim-2:#3d3d3d;
  --cuerpo:#141414;
  --acento:#0d9488;          /* turquesa mas profundo: contrasta sobre blanco */
}

/* transicion suave al cambiar de tema */
body,header,footer{transition:background-color .35s,color .35s,border-color .35s;}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:16px; font-weight:300; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit;}

.skip{position:absolute; left:-9999px;}
.skip:focus{left:12px; top:12px; z-index:999; background:#fff; color:#000; padding:8px 14px;}

/* etiqueta pequena en versales, el gesto que se repite en todo el sitio */
.rotulo,nav a,.sec-head .count,.sec-head .ver,.page-head .sub,.ficha span,
.creditos dt,.festivales h3,.work .meta,.ficha-link,.socials a,footer,.tag,.about .cargo{
  font-weight:400; text-transform:uppercase; letter-spacing:.19em;
}

/* ---------------- CABECERA ---------------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 40px; background:rgba(0,0,0,.8); backdrop-filter:blur(14px);
  transition:padding .3s;
}
header.scrolled{padding:16px 40px;}
.logo img{height:21px; width:auto;}
nav ul{display:flex; gap:34px; list-style:none;}
nav a{font-size:.66rem; text-decoration:none; color:var(--dim); transition:color .25s; white-space:nowrap;}
nav a:hover,nav a:focus-visible,nav a.actual{color:var(--acento);}
.burger{display:none; background:none; border:0; cursor:pointer; padding:6px;}
.burger span{display:block; width:24px; height:1px; background:var(--text); margin:6px 0;}

/* ---------------- VIDEO ---------------- */
.ratio{position:relative; width:100%; padding-top:56.25%; background:#050505; overflow:hidden;}
.ratio iframe,.ratio > img{position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover;}
.ratio[data-video]{cursor:pointer;}
.play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; color:rgba(255,255,255,.8);}
/* solo el circulo recibe el cursor, no el fotograma entero */
.play svg{
  width:58px; height:58px; pointer-events:auto; cursor:pointer;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}

/* El aro de luz recorre la circunferencia hasta cerrarla: 2·pi·24 = 151.
   Parte oculto (dashoffset 151); al poner el cursor SOBRE EL PLAY se
   dibuja entero, y al quitarlo se deshace por el mismo camino. */
.play .luz{
  stroke:var(--acento);
  stroke-dasharray:151; stroke-dashoffset:151;
  transition:stroke-dashoffset .75s cubic-bezier(.3,.8,.3,1);
}
.play .punta{transition:fill .3s;}          /* sin retardo al salir */
.play svg:hover .luz{stroke-dashoffset:0;}
.play svg:hover .punta{fill:var(--acento); transition-delay:.28s;}
.play svg:hover{transform:scale(1.05);}

/* reel de portada: fondo sin interfaz de YouTube (ver script.js) */
.ratio.reel{background:#000;}
.ratio.reel iframe{
  pointer-events:none; inset:auto; top:50%; left:50%;
  width:134%; height:134%; transform:translate(-50%,-50%);
}

/* ---------------- ENCABEZADO DE PAGINA ---------------- */
.page-head{max-width:var(--max); margin:0 auto; padding:170px 40px 0;}
.page-head h1{
  font-weight:200; font-size:clamp(2.4rem,6.4vw,5.2rem);
  text-transform:uppercase; letter-spacing:.06em; line-height:1.04;
}
.page-head .sub{font-size:.64rem; color:var(--dim-2); margin-top:20px;}

main{max-width:var(--max); margin:0 auto; padding:0 40px 60px;}
section{padding:96px 0; scroll-margin-top:80px;}

.sec-head{
  display:flex; align-items:baseline; gap:16px;
  margin-bottom:44px; padding-bottom:18px; border-bottom:1px solid var(--line);
}
.sec-head h2{
  font-weight:300; font-size:.92rem; text-transform:uppercase; letter-spacing:.24em;
}
.sec-head .count{font-size:.62rem; color:var(--dim-2);}
.sec-head .ver{margin-left:auto; font-size:.62rem; color:var(--dim-2); text-decoration:none; transition:color .25s;}
.sec-head .ver:hover{color:var(--acento);}

/* ---------------- FICHA DE OBRA ---------------- */
.obra{padding:88px 0; border-bottom:1px solid var(--line);}
.obra:last-child{border-bottom:0;}
.obra h2{
  font-weight:200; font-size:clamp(1.9rem,4.6vw,3.6rem);
  text-transform:uppercase; letter-spacing:.045em; line-height:1.06; margin-bottom:14px;
}
.obra .alt{font-weight:300; font-style:italic; color:var(--dim-2); font-size:1rem; margin-bottom:36px;}
.obra .ratio{margin-bottom:40px;}
.obra .sinopsis{
  font-weight:300; font-size:1.14rem; line-height:1.8; color:var(--cuerpo);
  max-width:62ch; margin-bottom:24px;
}
.obra .sinopsis strong{
  display:block; font-weight:400; font-size:.62rem; text-transform:uppercase;
  letter-spacing:.19em; color:var(--dim-2); margin-bottom:8px;
}

.ficha{display:flex; flex-wrap:wrap; gap:34px; margin:36px 0 44px; padding-bottom:2px;}
.ficha span{font-size:.62rem; color:var(--dim);}

.creditos{
  display:grid; grid-template-columns:250px 1fr; gap:16px 40px;
  max-width:96ch; padding-top:34px; border-top:1px solid var(--line);
}
.creditos dt{font-size:.6rem; color:var(--dim-2); padding-top:5px;}
.creditos dd{margin:0; font-weight:300; font-size:1rem; color:var(--cuerpo); line-height:1.6;}

.festivales{margin-top:52px; padding-top:34px; border-top:1px solid var(--line);}
.festivales h3{font-size:.62rem; color:var(--dim-2); margin-bottom:22px; font-weight:400;}
.festivales ul{list-style:none; columns:2; column-gap:48px;}
.festivales li{font-weight:300; font-size:.95rem; color:var(--dim); padding:6px 0; break-inside:avoid;}
.festivales li.premio{color:var(--acento);}
.festivales li.premio::before{content:"—"; margin-right:12px; color:var(--dim-2);}

/* ---------------- GRILLA ---------------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:64px 34px;}
.work-item{display:flex; flex-direction:column;}
.work{
  background:none; border:0; padding:0; text-align:left; color:inherit;
  font:inherit; cursor:pointer; width:100%; display:block; text-decoration:none;
}
.thumb{position:relative; overflow:hidden; background:#050505; display:block;}
.thumb img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.3,1),opacity .4s;
}
.work:hover .thumb img,.work:focus-visible .thumb img{transform:scale(1.04); opacity:.6;}
.work .play svg{opacity:0; transition:opacity .35s;}
.work:hover .play svg,.work:focus-visible .play svg{opacity:.9;}
.work h3{
  margin-top:22px; font-weight:500; font-size:1.06rem;
  text-transform:none; letter-spacing:-.008em; line-height:1.3; transition:opacity .25s;
}
.work:hover h3{opacity:.6;}
.work .meta{font-size:.6rem; color:var(--dim-2); margin-top:10px;}
.ficha-link{
  margin-top:auto; padding-top:18px; align-self:flex-start;
  font-size:.6rem; color:var(--dim-2); text-decoration:none; transition:color .25s;
}
.work-item:hover .ficha-link,.ficha-link:focus-visible{color:var(--dim);}

/* ---------------- DESTACADO ---------------- */
.featured{border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.featured .body{padding:48px 0 8px;}
.tag{
  display:inline-block; font-size:.6rem; color:var(--dim-2);
  border-bottom:1px solid var(--line-2); padding-bottom:6px; margin-bottom:26px;
}
.featured h2{
  font-weight:200; font-size:clamp(2rem,5vw,4rem);
  text-transform:uppercase; letter-spacing:.05em; line-height:1.04; margin-bottom:28px;
}
.featured .sinopsis{
  font-weight:300; font-size:1.14rem; line-height:1.8; color:var(--cuerpo);
  max-width:62ch; margin-bottom:40px;
}

/* ---------------- ABOUT ---------------- */
.about{display:grid; grid-template-columns:230px 1fr; gap:64px; align-items:start;}
.about .cargo{font-size:.6rem; color:var(--dim-2); margin-top:20px; line-height:2.1;}
.about p{margin-bottom:22px; font-weight:300; color:var(--dim); max-width:64ch; font-size:1rem; line-height:1.85;}
.about p.lead{
  color:var(--text); font-weight:200; font-size:clamp(1.3rem,2.6vw,1.9rem);
  line-height:1.45; letter-spacing:.005em; margin-bottom:44px; max-width:24ch;
}
.about strong{color:var(--text); font-weight:400;}

/* ---------------- CONTACTO ---------------- */
.contacto{text-align:center; padding:30px 0 50px;}
.contacto p{color:var(--dim); font-weight:300; max-width:56ch; margin:0 auto 44px; font-size:1rem;}
.mail{
  display:inline-block; font-weight:200; font-size:clamp(1.3rem,3.4vw,2.2rem);
  text-transform:uppercase; letter-spacing:.05em; text-decoration:none;
  border-bottom:1px solid var(--line-2); padding-bottom:12px;
  word-break:break-word; transition:border-color .25s;
}
.mail:hover{color:var(--acento); border-bottom-color:var(--acento);}
.socials{display:flex; justify-content:center; flex-wrap:wrap; gap:40px; margin-top:56px;}
.socials a{font-size:.62rem; color:var(--dim-2); text-decoration:none; transition:color .25s;}
.socials a:hover{color:var(--acento);}

footer{
  border-top:1px solid var(--line); text-align:center;
  padding:48px; font-size:.6rem; color:var(--dim-2);
}

.obra:target{box-shadow:-24px 0 0 var(--line-2);}

/* ---------------- MOVIL ---------------- */
@media (max-width:860px){
  header{padding:18px 22px;}
  header.scrolled{padding:14px 22px;}
  .burger{display:block;}
  nav{position:fixed; inset:60px 0 auto 0; background:rgba(0,0,0,.98); border-bottom:1px solid var(--line); display:none;}
  nav.open{display:block;}
  nav ul{flex-direction:column; gap:0; padding:10px 22px 24px;}
  nav a{display:block; padding:16px 0; font-size:.72rem;}
  .page-head{padding:120px 22px 0;}
  main{padding:0 22px 40px;}
  section{padding:64px 0;}
  .obra{padding:60px 0;}
  .grid{grid-template-columns:1fr; gap:52px;}
  .ficha{gap:18px 26px;}
  .creditos{grid-template-columns:1fr; gap:2px; padding-top:26px;}
  .creditos dt{margin-top:22px;}
  .festivales ul{columns:1;}
  .about{grid-template-columns:1fr; gap:34px;}
  .about img{max-width:180px;}
  .about p.lead{max-width:none;}
  .featured .body{padding:34px 0 4px;}
  .work .play svg{opacity:.85;}   /* en tactil no hay hover */
  .ficha-link{color:var(--dim-2);}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none !important; animation:none !important;}
}

/* ---------------- TITULOS BILINGUES ---------------- */
/* Ingles arriba, espanol debajo en tono mas bajo. */
.page-head h1 .es{
  display:block; margin-top:12px;
  font-weight:200; font-size:.44em; letter-spacing:.09em; color:var(--dim-2);
}
.sec-head h2 .es{
  margin-left:14px; padding-left:14px; border-left:1px solid var(--line-2);
  font-weight:300; letter-spacing:.24em; color:var(--dim-2);
}
@media (max-width:860px){
  .page-head h1 .es{font-size:.5em; margin-top:8px;}
  .sec-head h2 .es{display:block; margin:8px 0 0; padding:0; border-left:0;}
}

/* ---------------- LAURELES DE FESTIVAL ---------------- */
/* Cada exhibicion es una corona: rama izquierda + texto + rama
   derecha (la misma rama reflejada). Vectorial y monocroma; los
   premios se distinguen en blanco, no por color. */
.laureles{
  display:flex; flex-wrap:wrap; gap:34px 30px; align-items:flex-start;
}
.laurel{
  display:inline-grid; grid-template-columns:auto minmax(94px,155px) auto;
  align-items:center; gap:2px; color:var(--dim-2);
  transition:color .3s;
}
.laurel:hover{color:var(--dim);}
.laurel svg{width:50px; height:50px; display:block;}
.laurel .der svg{transform:scaleX(-1);}
.laurel .txt{
  text-align:center; font-size:.58rem; line-height:1.45;
  text-transform:uppercase; letter-spacing:.12em; font-weight:400;
}
.laurel.premio{color:var(--acento);}
.laurel.premio strong{
  display:block; font-weight:400; font-size:.54rem;
  letter-spacing:.2em; margin-bottom:5px; opacity:.75;
}

/* ---------------- PORTADA A SANGRE (estilo A24) ---------------- */
/* La imagen/video de cada obra rompe la columna y cruza la pantalla
   entera. 100vw + margen negativo centrado; body ya lleva
   overflow-x:hidden para que la barra de scroll no desborde. */
.obra .ratio,
.featured .ratio{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.obra .ratio{padding-top:48%;}          /* mas panoramico a pantalla completa */
@media (max-width:860px){
  .obra .ratio{padding-top:56.25%;}
  .laureles{gap:26px 20px;}
  .laurel{grid-template-columns:auto minmax(84px,132px) auto;}
  .laurel svg{width:42px; height:42px;}
}

/* ---------------- TITULO DENTRO DEL FOTOGRAMA ---------------- */
/* Como A24: caja mixta (NO versales), anchura normal (NO estirada),
   peso alto, apoyado abajo a la izquierda sobre un degradado que
   garantiza la lectura encima de cualquier imagen. */
.marco{
  position:absolute; inset:auto 0 0 0; z-index:2;
  display:block; padding:0 0 46px;
  background:linear-gradient(to top,
    rgba(0,0,0,.88) 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.16) 72%, transparent 100%);
  pointer-events:none;
}
.marco > *{
  max-width:var(--max); margin-left:auto; margin-right:auto;
  padding-left:40px; padding-right:40px;
}
.marco-tipo{
  display:block; font-size:.6rem; font-weight:400; text-transform:uppercase;
  letter-spacing:.24em; color:rgba(255,255,255,.72); margin-bottom:14px;
}
.marco h2{
  font-weight:600;                 /* grueso */
  text-transform:none;             /* caja mixta */
  font-stretch:normal;             /* sin estirar */
  letter-spacing:-.018em;
  font-size:clamp(1.9rem,5vw,4.2rem);
  line-height:1.02;
  margin:0;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.marco .alt{
  margin:12px 0 0; font-size:.9rem; font-weight:300; font-style:italic;
  color:rgba(255,255,255,.6);
}
/* el play se aparta del titulo: sube al centro-alto del fotograma */
.obra .ratio .play,.featured .ratio .play{align-items:center; padding-bottom:70px;}

@media (max-width:860px){
  .marco{padding-bottom:26px;}
  .marco > *{padding-left:22px; padding-right:22px;}
  .marco-tipo{font-size:.56rem; margin-bottom:9px;}
  .marco h2{font-size:clamp(1.4rem,6.4vw,2.2rem); letter-spacing:-.012em;}
  .marco .alt{font-size:.78rem; margin-top:8px;}
  .obra .ratio .play,.featured .ratio .play{padding-bottom:40px;}
}

/* ---------------- TITULO DENTRO DEL FOTOGRAMA ---------------- */
/* Como A24: caja mixta (NO versales), anchura normal (NO estirada),
   peso alto. Apoyado abajo a la izquierda sobre un degradado que
   asegura la lectura encima de cualquier imagen. */
.marco{
  position:absolute; inset:auto 0 0 0; z-index:2;
  display:block; padding:0 0 46px; pointer-events:none;
  background:linear-gradient(to top,
    rgba(0,0,0,.88) 0%, rgba(0,0,0,.6) 38%, rgba(0,0,0,.15) 72%, transparent 100%);
}
.marco > *{max-width:var(--max); margin:0 auto; padding:0 40px;}
.marco-tipo{
  display:block; font-size:.6rem; font-weight:400; text-transform:uppercase;
  letter-spacing:.24em; color:rgba(255,255,255,.72); margin-bottom:14px;
}
.marco h2{
  font-weight:600;          /* grueso */
  text-transform:none;      /* caja mixta, con minusculas */
  font-stretch:normal;      /* sin estirar */
  letter-spacing:-.018em;
  font-size:clamp(1.9rem,5vw,4.2rem);
  line-height:1.02; margin:0;
  text-shadow:0 2px 30px rgba(0,0,0,.55);
}
.marco .alt{
  margin:12px auto 0; font-size:.9rem; font-weight:300; font-style:italic;
  color:rgba(255,255,255,.6);
}
/* el play sube para no chocar con el titulo */
.obra .ratio .play,.featured .ratio .play{align-items:center; padding-bottom:80px;}

@media (max-width:860px){
  .marco{padding-bottom:24px;}
  .marco > *{padding:0 22px;}
  .marco-tipo{font-size:.55rem; margin-bottom:9px; letter-spacing:.2em;}
  .marco h2{font-size:clamp(1.35rem,6.6vw,2.1rem); letter-spacing:-.01em;}
  .marco .alt{font-size:.76rem; margin-top:7px;}
  .obra .ratio .play,.featured .ratio .play{padding-bottom:44px;}
}

/* ---------------- TARJETAS DE PORTADA (estilo A24) ---------------- */
/* Sin play: foto, titulo y etiqueta. La tarjeta entera es un enlace
   a la ficha, donde estan la informacion y el video. */
.grid > .work{
  display:flex; flex-direction:column; height:100%;
}
.grid > .work .thumb{margin-bottom:0;}
.grid > .work h3{margin-top:22px;}
.marca{
  margin-top:auto; padding-top:14px;      /* pegada abajo: las filas alinean */
  font-size:.6rem; font-weight:400; text-transform:uppercase;
  letter-spacing:.19em; color:var(--dim-2); transition:color .3s;
}
.grid > .work:hover .marca,
.grid > .work:focus-visible .marca{color:var(--acento);}

/* ---------------- CABECERA QUE SE ESCONDE ---------------- */
/* Al bajar desaparece para dejar la imagen limpia; al devolver el
   scroll vuelve con logo y secciones. */
header{transition:transform .4s cubic-bezier(.2,.7,.3,1),background-color .35s,padding .3s;}
header.oculta{transform:translateY(-100%);}

/* el titulo sobre el fotograma va siempre en blanco: esta sobre imagen */
.marco{color:#fff;}
.marco h2{color:#fff;}

/* ---------------- CONMUTADOR DIA / NOCHE ---------------- */
.tema{
  background:none; border:0; cursor:pointer; padding:6px 0; margin-left:30px;
  font-family:inherit; font-size:.62rem; font-weight:400; text-transform:uppercase;
  letter-spacing:.19em; color:var(--dim-2); transition:color .25s; white-space:nowrap;
}
.tema:hover,.tema:focus-visible{color:var(--acento);}
@media (max-width:860px){
  .tema{margin:0; padding:16px 0; display:block; width:100%; text-align:left; font-size:.72rem;}
}

/* ---------------- GRANO DE PELICULA ---------------- */
/* Textura de emulsion sobre todo el sitio. Ruido generado por SVG
   (feTurbulence): sin imagenes, pesa unos bytes. La capa se desplaza
   a saltos para que respire como una cinta proyectada, muy sutil. */
body::after{
  content:""; position:fixed; inset:-120px; z-index:900; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
  opacity:.055;
  mix-blend-mode:overlay;
  animation:grano 800ms steps(1) infinite;
  will-change:transform;
}
@keyframes grano{
  0%  {transform:translate(0,0);}
  20% {transform:translate(-9px,5px);}
  40% {transform:translate(7px,-8px);}
  60% {transform:translate(-5px,-4px);}
  80% {transform:translate(8px,6px);}
  100%{transform:translate(0,0);}
}
/* en dia el grano necesita menos fuerza para no ensuciar el blanco */
:root[data-tema="dia"] body::after{opacity:.035; mix-blend-mode:multiply;}

@media (prefers-reduced-motion:reduce){
  body::after{animation:none;}
}

/* ---------------- PORTADA: OBRAS A LO ANCHO ---------------- */
/* Nada de rejilla de rectangulos. Cada obra cruza la pantalla de
   lado a lado, con el titulo sobre la imagen y su etiqueta. */
.portadas{display:block;}
.portada{display:block; text-decoration:none; color:inherit;}
.portada + .portada{margin-top:18px;}
.portada .ratio{
  display:block; padding-top:44%;
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
.portada .ratio img{transition:transform .9s cubic-bezier(.2,.7,.3,1),opacity .45s;}
.portada:hover .ratio img,.portada:focus-visible .ratio img{transform:scale(1.03); opacity:.72;}
.portada .marco h3{
  color:#fff; font-weight:600; text-transform:none; font-stretch:normal;
  letter-spacing:-.018em; font-size:clamp(1.7rem,4.4vw,3.6rem); line-height:1.03;
  margin:0; text-shadow:0 2px 30px rgba(0,0,0,.55);
}
.portada:hover .marco-tipo{color:var(--acento);}
@media (max-width:860px){
  .portada .ratio{padding-top:60%;}
  .portada + .portada{margin-top:12px;}
  .portada .marco h3{font-size:clamp(1.3rem,6vw,2rem);}
}

/* ---------------- ENTRADA DEL REEL ---------------- */
/* Negro pleno mientras el video arranca: asi tapa por completo el
   play/pausa de YouTube (la transparencia no servia sobre el video).
   La marca va al centro y una luz turquesa la recorre UNA vez, en
   5 s, terminando justo cuando el negro se abre a las imagenes. */
.reel-tapa{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  background:#000;
  opacity:1; transition:opacity .9s ease 5s;
}
.ratio.reel.reproduciendo .reel-tapa{opacity:0;}

.sello{display:block; width:min(620px,64vw);}
.marca-svg{width:100%; height:auto; display:block;}

/* La luz recorre la palabra una sola vez, en 5 s, y termina justo
   cuando el negro se abre a las imagenes.
   OJO: NO se puede animar 'transform' de CSS sobre un <linearGradient>
   —los navegadores no lo aplican ahi—. Por eso la luz es un <rect>
   normal que viaja bajo una mascara con la forma de las letras:
   eso si se anima, y ademas es medible. */
.luz{transform:translateX(0);}
.ratio.reel.reproduciendo .luz{
  animation:barrido 5s cubic-bezier(.35,0,.25,1) forwards;
}
@keyframes barrido{
  from{transform:translateX(0);}      /* la banda empieza fuera, a la izquierda */
  to  {transform:translateX(966px);}  /* 666 del logo + 300 de banda */
}

@media (max-width:860px){ .sello{width:80vw;} }
@media (prefers-reduced-motion:reduce){
  .ratio.reel.reproduciendo #energia{animation:none;}
}