/* =========================================================
   FONDO DE VIDEO
   =========================================================
   Mismo tratamiento que la página de Argentina: el clip es
   una TEXTURA, no una imagen. Por eso opacidad baja y escala de
   grises. El tipo tiene que ganar siempre.
   ========================================================= */

.video-layer{
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  contain: strict;
  background: #000;
}

.video-frame{
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fondo-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* 0,26 es el techo: por arriba, el clip deja de leerse como
     textura y empieza a competir con la tipografía. */
  opacity: .24;
  filter: grayscale(1) contrast(1.06) brightness(1.15);
  pointer-events: none;
  transition: opacity var(--t-slow) var(--ease);
}

.video-layer.is-fading .fondo-video{ opacity: .04; }

/* Sin clips, o con movimiento reducido: fondo fijo, sin descarga. */
.video-layer.is-fixed,
.video-layer.is-empty{ background: var(--bg); }
.video-layer.is-fixed .video-frame,
.video-layer.is-empty .video-frame{ display: none; }

/* Velo para que el contenido tenga siempre contraste garantizado,
   que el del color de la marca. */
/* El velo va AL REVÉS de lo intuitivo: denso en el centro y
   transparente en los márgenes. El centro es donde está el
   texto que hay que leer, así que ahí el video casi no se ve; en
   los bordes, donde no hay nada que leer, el video se ve y hace
   de textura. Al revés —claro en el centro— los carteles de los
  films viejos se leían por encima del párrafo. */
.video-layer::after{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(115% 88% at 50% 34%, rgba(12,11,9,.94), rgba(12,11,9,.5) 82%),
    linear-gradient(180deg, rgba(12,11,9,.92), transparent 18%, transparent 82%, rgba(12,11,9,.94));
}

/* =========================================================
   CRÉDITO Y CONTROL
   ========================================================= */

.video-nota{
  position: fixed;
  left: clamp(12px, 3vw, 28px);
  bottom: calc(var(--s1) + var(--safe-bottom));
  z-index: var(--z-raise);
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  max-width: min(720px, 74vw);
  pointer-events: auto;
  /* Velo propio: el crédito tiene que poder leerse aunque pase
     por encima del contenido, y además es una atribución que no
     puede quedar escondida detrás de un texto. */
  padding: 2px var(--s2) 2px 0;
}

.video-nota__credito{
  margin: 0;
  color: var(--muted);
  font-size: var(--type-3xs);
  line-height: 1.4;
  letter-spacing: .04em;
  text-shadow: 0 1px 3px rgb(0 0 0 / .95);
}

.video-nota__anio{
  font-family: var(--font-num);
  font-weight: 800;
  color: var(--text);
  letter-spacing: .04em;
}

.video-nota__control{
  background: rgb(12 11 9 / .82);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  color: var(--muted);
  font-size: var(--type-3xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  min-height: var(--tap);
  padding: 0 var(--s3);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  white-space: nowrap;
}
.video-nota__control:hover{ color: var(--text); border-color: var(--muted); background: rgb(12 11 9 / .92); }
.video-nota__control[aria-pressed="true"]{ color: var(--grass); border-color: rgba(79,191,127,.5); }

@media (max-width: 760px){
  /* En el teléfono el crédito largo estorba más de lo que informa:
     queda el botón, que es lo que el usuario necesita. El crédito
     completo se sigue leyendo en el title del pie de escritorio. */
  .video-nota__credito{ display: none; }
  .video-nota{ left: auto; right: clamp(12px, 3vw, 28px); }
}