/* ==========================================================================
   ALEXANDRIA - Fondos en movimiento
   ==========================================================================
   En vez de quedar todo negro, las secciones llevan fondos que se mueven
   despacio: brillos verdes de la Legion y dorados que van y vienen.

   Todo con CSS: no pesa nada y no depende de videos externos.
   ========================================================================== */

/* ------------------------------------------- 1) BRILLOS QUE SE MUEVEN */
/* Cada seccion oscura lleva dos manchas de color que van de un lado a otro
   muy despacio. Da sensacion de que el fondo "respira". */
.seccion-oscura {
  position: relative;
  overflow: hidden;
  background: #070b10;
}
.seccion-oscura::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(620px 420px at 12% 20%, rgba(124,242,58,.13), transparent 65%),
    radial-gradient(560px 380px at 88% 78%, rgba(248,183,0,.11), transparent 65%),
    radial-gradient(420px 320px at 60% 10%, rgba(30,111,179,.10), transparent 70%);
  animation: moverFondo 34s ease-in-out infinite alternate;
}
.seccion-oscura > * { position: relative; z-index: 1; }

@keyframes moverFondo {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(3%, -2%, 0) scale(1.06); }
  66%  { transform: translate3d(-3%, 2%, 0) scale(1.04); }
  100% { transform: translate3d(2%, 1%, 0) scale(1.08); }
}

/* ------------------------------------------- 2) LINEAS QUE PASAN */
/* Una linea dorada muy suave que recorre la parte de arriba de cada
   seccion. Como el filo de un arma. */
.seccion::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(248,183,0,0) 15%,
    rgba(255,224,131,.85) 50%,
    rgba(248,183,0,0) 85%,
    transparent 100%);
  background-size: 45% 100%;
  background-repeat: no-repeat;
  animation: filoDorado 9s linear infinite;
  opacity: .75;
}
.seccion { position: relative; }

@keyframes filoDorado {
  0%   { background-position: -60% 0; }
  100% { background-position: 160% 0; }
}

/* ------------------------------------------- 3) SECCION CON VIDEO */
/* La seccion que lleva video de fondo: el video ocupa todo y encima va
   una capa oscura para que el texto se lea. */
.seccion-video {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
  padding: 5rem 0;
}
.seccion-video-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #05080b;
}
.seccion-video-fondo iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: 177.78vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  filter: brightness(.72) saturate(1.05);
}
.seccion-video-velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(6,9,13,.92) 0%, rgba(6,9,13,.55) 30%, rgba(6,9,13,.55) 70%, rgba(6,9,13,.95) 100%);
}
.seccion-video > .contenedor { position: relative; z-index: 2; }

/* ------------------------------------------- 4) TARJETAS CON LATIDO */
/* Cada tarjeta tiene un brillo interior que respira muy despacio. */
.tarjeta::before {
  animation: respirar 6.5s ease-in-out infinite;
}
@keyframes respirar {
  0%, 100% { opacity: .38; }
  50%      { opacity: .85; }
}

/* ------------------------------------------- 5) EL FONDO DE LA PAGINA */
/* El fondo general tambien se mueve, pero muy poco. */
body::after {
  animation: fondoVivo 48s ease-in-out infinite alternate;
}
@keyframes fondoVivo {
  0%   { background-position: 0 0, 0 0, 50% -8%; }
  100% { background-position: 46px 46px, 46px 46px, 52% -4%; }
}

/* ------------------------------------------- 6) SI EL VISITANTE PIDE MENOS */
/* Si alguien tiene activado "reducir movimiento" en su sistema, se apaga. */
@media (prefers-reduced-motion: reduce) {
  .seccion-oscura::before,
  .seccion::after,
  .tarjeta::before,
  body::after,
  .boton-principal::after { animation: none !important; }
}

@media (max-width: 700px) {
  .seccion-video { min-height: 420px; padding: 3rem 0; }
}

/* ==========================================================================
   VIDEOS MAS BRILLANTES (estilo WoW)
   ==========================================================================
   Antes el velo tapaba casi todo el video. Ahora:
     - El video se ve a plena luz
     - La parte oscura queda SOLO donde esta el texto (a la izquierda)
     - A la derecha el video se ve entero
   ========================================================================== */
.seccion-video-fondo iframe {
  filter: brightness(1.22) saturate(1.15) contrast(1.04);
}
.seccion-video-velo {
  background:
    linear-gradient(90deg,
      rgba(6,9,13,.90) 0%,
      rgba(6,9,13,.72) 28%,
      rgba(6,9,13,.28) 52%,
      rgba(6,9,13,.06) 72%,
      rgba(6,9,13,.30) 100%),
    linear-gradient(180deg, rgba(6,9,13,.55) 0%, transparent 18%, transparent 82%, rgba(6,9,13,.60) 100%);
}
/* El texto, con sombra fuerte para que se lea aunque el video sea claro */
.seccion-video h2,
.seccion-video p,
.seccion-video .titulo-seccion {
  text-shadow: 0 2px 14px rgba(0,0,0,.95), 0 0 34px rgba(0,0,0,.75);
}
/* Un borde dorado arriba y abajo, como los marcos del juego */
.seccion-video {
  border-top: 1px solid rgba(248,183,0,.35);
  border-bottom: 1px solid rgba(248,183,0,.35);
}

/* En pantallas pequeñas, el velo vuelve a ser mas parejo */
@media (max-width: 760px) {
  .seccion-video-velo {
    background: linear-gradient(180deg,
      rgba(6,9,13,.80) 0%, rgba(6,9,13,.55) 40%, rgba(6,9,13,.80) 100%);
  }
}
/* ==========================================================================
   QUE NO SE VEAN LOS BOTONES DE YOUTUBE
   ==========================================================================
   YouTube ya no hace caso al parametro "controls=0", asi que saca el boton
   de play y los controles igualmente.

   El truco: se hace el video MAS GRANDE que su marco. Asi los controles
   (que van pegados a los bordes) quedan FUERA del recorte y no se ven.

   Ademas:
     - pointer-events: none   -> no se puede pinchar nada del video
     - se tapa con una capa invisible por encima
   ========================================================================== */

/* El marco recorta lo que sobresale */
.portada-video,
.seccion-video-fondo {
  overflow: hidden;
}

/* El video, mas grande que su marco: los controles quedan fuera */
.portada-video iframe,
.seccion-video-fondo iframe {
  transform: translate(-50%, -50%) scale(1.45) !important;
  pointer-events: none !important;
}

/* Y una capa por encima que se come cualquier clic */
.portada-video::after,
.seccion-video-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: transparent;
  cursor: default;
}

/* La portada de arriba: el mismo arreglo */
.portada-video iframe {
  transform: translate(-50%, -50%) scale(1.45) !important;
}

/* En pantallas pequeñas, menos aumento (para no perder el video) */
@media (max-width: 760px) {
  .portada-video iframe,
  .seccion-video-fondo iframe {
    transform: translate(-50%, -50%) scale(1.28) !important;
  }
}
/* ==========================================================================
   LA CABECERA CON VIDEO
   El video va arriba del todo y hace de titulo de la pagina.
   ========================================================================== */
.seccion-video-cabecera {
  min-height: 62vh;
  padding: 6rem 0 5rem;
  border-top: 0;
  border-bottom: 1px solid rgba(248,183,0,.4);
}
.seccion-video-cabecera h1 {
  font-family: Georgia, serif;
  font-weight: 700;
  color: #fff;
  line-height: 1.05;
  text-shadow: 0 4px 22px rgba(0,0,0,.98), 0 0 50px rgba(0,0,0,.85);
}
.seccion-video-cabecera p {
  text-shadow: 0 2px 16px rgba(0,0,0,.98), 0 0 40px rgba(0,0,0,.8);
}
/* Un degradado de arriba a abajo para que la cabecera no se corte de golpe */
.seccion-video-cabecera .seccion-video-velo {
  background:
    linear-gradient(90deg,
      rgba(6,9,13,.92) 0%,
      rgba(6,9,13,.74) 30%,
      rgba(6,9,13,.30) 54%,
      rgba(6,9,13,.08) 74%,
      rgba(6,9,13,.32) 100%),
    linear-gradient(180deg, rgba(6,9,13,.70) 0%, transparent 22%, transparent 74%, rgba(6,9,13,.92) 100%);
}

@media (max-width: 760px) {
  .seccion-video-cabecera { min-height: 48vh; padding: 4rem 0 3rem; }
}
/* ==========================================================================
   LA CAJA DEL REPRODUCTOR (API de YouTube)
   ========================================================================== */
.yt-caja,
.yt-caja iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: 177.78vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%) scale(1.45);
  border: 0;
  pointer-events: none !important;
}
@media (max-width: 760px) {
  .yt-caja, .yt-caja iframe { transform: translate(-50%, -50%) scale(1.28); }
}
/* ==========================================================================
   LOS VIDEOS, MUCHO MAS CLAROS  (esto gana a todo lo anterior)
   ==========================================================================
   Estaban tapados por varias capas oscuras y no se veian. Ahora:
     - El video con mas luz todavia
     - La capa oscura, solo lo justo para que el texto se lea
   ========================================================================== */
.portada-video iframe,
.seccion-video-fondo iframe,
.yt-caja iframe {
  filter: brightness(1.45) saturate(1.2) contrast(1.06) !important;
}

/* El velo de la portada: casi transparente */
.portada-velo,
.portada-velo.portada-velo {
  background:
    radial-gradient(ellipse at center,
      rgba(6,9,13,.10) 0%,
      rgba(6,9,13,.30) 62%,
      rgba(6,9,13,.72) 100%) !important;
}

/* El velo de las secciones: oscuro solo a la izquierda (donde va el texto) */
.seccion-video-velo,
.seccion-video-cabecera .seccion-video-velo {
  background:
    linear-gradient(90deg,
      rgba(6,9,13,.86) 0%,
      rgba(6,9,13,.55) 26%,
      rgba(6,9,13,.12) 48%,
      rgba(6,9,13,.02) 68%,
      rgba(6,9,13,.22) 100%) !important;
}

/* Y el fondo general de la pagina, mas claro donde hay video */
.portada, .seccion-video { background: transparent !important; }

/* Las letras, con sombra muy fuerte para que se lean sobre el video claro */
.portada-logo,
.portada-sub,
.portada-lema,
.seccion-video h1,
.seccion-video h2,
.seccion-video p {
  text-shadow:
    0 3px 18px rgba(0,0,0,1),
    0 0 60px rgba(0,0,0,.95),
    0 0 100px rgba(0,0,0,.8) !important;
}/* ==========================================================================
   EL VIDEO DE LA PORTADA: CALIDAD MAXIMA
   ==========================================================================
   EL PROBLEMA: al video de la portada se le puso una ampliacion de x1.45
                -> se estiraba y se veia borroso  ✗

   LA SOLUCION: la proporcion exacta del video (16:9) y su tamaño real.
                Asi no hay que estirar nada y se ve nitido  ✓
   ========================================================================== */

.portada-video iframe,
.portada-video .yt-caja iframe,
.portada-video video {
  width: 177.78vh !important;
  height: 56.25vw !important;
  min-width: 100% !important;
  min-height: 100% !important;
  transform: translate(-50%, -50%) scale(1.01) !important;   /* casi nada */
  filter: none !important;                                    /* sin filtros */
  -webkit-filter: none !important;
  object-fit: cover !important;
}

@media (min-aspect-ratio: 16/9) {
  .portada-video iframe,
  .portada-video .yt-caja iframe,
  .portada-video video {
    width: 100vw !important;
    height: 56.25vw !important;
  }
}
@media (max-aspect-ratio: 16/9) {
  .portada-video iframe,
  .portada-video .yt-caja iframe,
  .portada-video video {
    width: 177.78vh !important;
    height: 100vh !important;
  }
}

/* La capa oscura, la minima para que se lea el titulo */
.portada-velo,
.portada-velo.portada-velo {
  background: radial-gradient(ellipse at center,
    rgba(6,9,13,.10) 0%,
    rgba(6,9,13,.28) 62%,
    rgba(6,9,13,.70) 100%) !important;
}