/* Miniatura + play. El iframe de YouTube solo se crea al pulsar (ui/video-facade.js). */
.video-facade {
  position: relative;
  width: 100%;
  height: 100%;
  background: #050102;
}

.video-facade__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.62);
  transition: filter 0.8s var(--ease-out), transform 1.4s var(--ease-out);
}
.video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 90% at 50% 50%, transparent 40%, rgb(5 1 2 / 0.7));
  pointer-events: none;
}

/* Rótulo "Tráiler" sobre el fotograma (misma píldora de cristal que "Activar sonido"). Por encima del iframe mientras
   el video corre en silencio; se retira cuando la persona toma el reproductor (sus controles ocupan las esquinas). En
   táctil desaparece con la miniatura: el iframe la reemplaza entera (ui/video-facade.js).
   Abajo y no arriba: ya abierto, el marco es más alto que la pantalla y su borde superior queda fuera de vista o bajo
   la cabecera; la franja de abajo es la que se ve al seguir bajando */
.video-facade__tag {
  position: absolute;
  right: clamp(14px, 2.4vw, 40px);
  bottom: clamp(14px, 2.4vw, 40px);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  height: 40px;                            /* la misma altura que "Activar sonido", para que ambas compartan línea */
  padding: 0 16px 0 calc(16px + 0.2em);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgb(238 227 211 / 0.3);
  background: rgb(10 2 3 / 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font: var(--w-semibold) 11px/1 var(--font-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}
.video-facade.is-engaged .video-facade__tag { opacity: 0; visibility: hidden; }
/* En automático, enfrente de "Activar sonido" y a su misma altura: por encima de la barra de controles de YouTube */
.video-facade.is-auto .video-facade__tag {
  right: clamp(16px, 2.4vw, 40px);
  bottom: clamp(72px, 7vw, 96px);
}

.video-facade__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
}
.video-facade__ring {
  position: absolute;
  width: clamp(72px, 9vw, 112px);
  aspect-ratio: 1;
  border: 1px solid rgb(238 227 211 / 0.55);
  border-radius: 50%;
  background: rgb(10 2 3 / 0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform 0.7s var(--ease-out), background 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}
.video-facade__icon {
  position: relative;
  margin-left: 4px;
  transition: color 0.5s var(--ease-out), transform 0.7s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .video-facade:hover .video-facade__thumb { filter: saturate(1) brightness(0.8); transform: scale(1.025); }
  .video-facade__play:hover .video-facade__ring {
    transform: scale(1.18);
    background: var(--cream);
    border-color: var(--cream);
  }
  .video-facade__play:hover .video-facade__icon {
    color: var(--ink-dark);
    transform: scale(1.1);
  }
}

.video-facade__play:focus-visible { outline-offset: -10px; }
.video-facade__play:focus-visible .video-facade__ring {
  transform: scale(1.18);
  background: var(--cream);
  border-color: var(--cream);
}
.video-facade__play:focus-visible .video-facade__icon { color: var(--ink-dark); }

.video-facade iframe {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Pantallas grandes: el video corre solo y en silencio (ui/video-facade.js).
   Hasta que el reproductor avisa, la miniatura tapa el negro de carga; el iframe no recibe puntero
   hasta el primer clic, para que el scroll suave siga funcionando encima del video. */
.video-facade__hint { display: none; }
.video-facade.is-auto iframe {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s var(--ease-out);
}
.video-facade.is-auto.is-playing iframe { opacity: 1; }
.video-facade.is-auto.is-engaged iframe { pointer-events: auto; }

.video-facade.is-auto .video-facade__play { z-index: 4; }
.video-facade.is-auto.is-playing .video-facade__ring,
.video-facade.is-auto.is-playing .video-facade__icon { opacity: 0; visibility: hidden; }

.video-facade.is-auto.is-playing .video-facade__hint {
  position: absolute;
  left: clamp(16px, 2.4vw, 40px);
  bottom: clamp(72px, 7vw, 96px);        /* por encima de la barra de controles de YouTube */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 16px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgb(238 227 211 / 0.3);
  background: rgb(10 2 3 / 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font: var(--w-semibold) 11px/1 var(--font-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  transition: background 0.5s var(--ease-out), color 0.5s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .video-facade.is-auto .video-facade__play:hover .video-facade__hint {
    background: var(--cream);
    color: var(--ink-dark);
  }
}
.video-facade.is-auto .video-facade__play:focus-visible .video-facade__hint {
  background: var(--cream);
  color: var(--ink-dark);
}