/* Intro a pantalla completa con video */
.intro {
  position: fixed; inset: 0; z-index: 2000;
  background: #000;
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease;
}
.intro.is-open { opacity: 1; visibility: visible; }

.intro__dialog { position: absolute; inset: 0; width: 100%; height: 100%; }

/* El video cubre toda la pantalla en cualquier orientación (recorta lo que sobre) */
.intro__video {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center; background: #000;
}

.intro__bar {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.25rem; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.6), transparent);
}
.intro__bar > * { pointer-events: auto; }

.intro__btn {
  border: 0; cursor: pointer; color: #fff; font: 500 .95rem "Josefin Sans", "Play", sans-serif;
  background: rgba(255,255,255,.2); border-radius: 999px; padding: .55rem 1.1rem;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .2s ease;
}
.intro__btn:hover, .intro__btn:focus-visible { background: rgba(255,255,255,.36); outline: none; }
.intro__btn--primary { background: #00bfe7; }
.intro__btn--primary:hover, .intro__btn--primary:focus-visible { background: #009cbb; }

.intro__cta {
  position: absolute; right: 1.25rem; bottom: 1.75rem;
  padding: .7rem 1.4rem; font-size: 1rem;
  opacity: 0; transition: opacity .4s ease;
}
.intro__cta.is-visible { opacity: 1; }

.intro__progress { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: #00bfe7; }

.intro__play {
  position: absolute; inset: 0; margin: auto; width: 90px; height: 90px;
  border-radius: 50%; border: 0; cursor: pointer; color: #fff; font-size: 2.2rem;
  background: rgba(0,191,231,.92); display: none;
}
.intro__play.is-visible { display: block; }

body.intro-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .intro { transition: none; }
}