/* ==================================================
🎨 ESTILOS GLOBALES Y CONFIGURACIÓN BÁSICA
================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
   background: linear-gradient(145deg, #000000, #1a1a1a);
  color: white;
  overflow-x: hidden;
  text-align: center;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}



/* ==================================================
🧭 ENCABEZADO Y NAVEGACIÓN
================================================== */
header {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  flex-wrap: wrap;
}

nav {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}

nav a:hover {
  transform: scale(1.05);
  background-color: #ff0033;
}

.logo {
  max-width: 120px;
  margin: 20px auto;
  display: block;
}

/* Movimiento horizontal continuo */
.mensaje-motivacional {
  overflow: hidden;
  white-space: nowrap;
  flex: 1;
  max-width: 100%;
  display: flex;
  align-items: center;
  height: 24px;
}

.scroll-wrapper {
  display: inline-block;
  white-space: nowrap;
  animation: moverTexto 25s linear infinite;
}

@keyframes moverTexto {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}


.top-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.live-indicator {
  background-color: red;
  color: white;
  padding: 5px 12px;
  border-radius: 20px;
  font-weight: bold;
  animation: parpadeo 1s infinite alternate;
}

.mensaje-motivacional span {
  display: inline-block;
  font-weight: bold;
  color: #00ffd5;
  animation: mensaje-resalte 1s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.scroll-lento {
  display: inline-block;
  padding-left: 100%;
  animation: scrollMensaje 30s linear infinite;
  font-weight: bold;
  color: #00ffd5;
  white-space: nowrap;
}


/* ==================================================
💡 FRASE MOTIVACIONAL
================================================== */
.frase-motivacional {
  font-style: italic;
  font-size: 18px;
  margin-bottom: 20px;
  animation: fraseAnimada 1s ease-in-out;
  transition: all 0.5s ease-in-out;
}




/* ==================================================
🎥 TRANSMISIÓN EN VIVO Y VIDEO
================================================== */
.transmision-container video,
.transmision-container iframe {
  width: 100%;
  max-width: 720px;
  height: 405px;
  border-radius: 12px;
  margin: 0 auto;
  display: block;
}

.live-indicator {
  background-color: red;
  color: white;
  padding: 5px 12px;
  border-radius: 20px;
  font-weight: bold;
  animation: parpadeo 1s infinite alternate;
}


/* ==================================================
🎧 BOTONES DESTACADOS Y VIP
================================================== */
.botones {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin: 30px 0;
}

.botones a {
  background-color: #d40000;
  color: white;
  padding: 10px 15px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vip-button, .boton-llamativo {
  display: inline-block;
  margin-top: 15px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  background: linear-gradient(45deg, #8000ff, #ff00ff);
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}

.vip-button:hover, .boton-llamativo:hover {
  transform: scale(1.05);
}


/* ==================================================
🔁 CARRUSEL DE VIDEOS & CÁPSULAS
================================================== */
.video-carrusel, .carrusel {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding: 10px 20px;
  scroll-behavior: smooth;
}

.video-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 250px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  background-color: #111;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.video-card:hover {
  transform: scale(1.03);
}

.video-thumb {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-card:hover .video-thumb img {
  filter: brightness(1.1);
  transform: scale(1.02);
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  color: white;
  text-shadow: 0 0 8px black;
}

.video-title {
  background: #d40000;
  color: white;
  font-weight: bold;
  padding: 8px;
  text-align: center;
}


/* ==================================================
📰 NOTICIAS DESTACADAS
================================================== */
.noticias-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 10px;
}

.noticia-card {
  background-color: #111;
  border: 3px solid #7e2ce4;
  border-radius: 12px;
  overflow: hidden;
  width: 240px;
  box-shadow: 0 0 10px rgba(126, 44, 228, 0.7);
  transition: transform 0.3s ease;
}

.noticia-card:hover {
  transform: scale(1.03);
}

.noticia-img {
  width: 100%;
  height: 140px;
  object-fit: contain;
  object-position: center; /*top o center */
  background-color: #000; /* para rellenar fondo si queda espacio */
}



.noticia-info {
  background: #000;
  padding: 10px;
  text-align: center;
}

.noticia-titulo {
  color: #a05bff;
  font-size: 14px;
  margin-bottom: 5px;
}


/* ==================================================
🖼️ GALERÍA DE POSTALES
================================================== */
.gallery-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  gap: 10px;
  padding: 20px;
  justify-content: flex-start;
}

.gallery-item {
  scroll-snap-align: start;
}

.gallery-item img {
  max-width: 240px;
  border-radius: 12px;
  cursor: pointer;
}


/* ==================================================
🔆 MODO DÍA / NOCHE
================================================== */
body.modo-dia {
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  color: #111;
}

.modo-dia .video-title,
.modo-dia .noticia-title {
  background: #d40000;
  color: white;
}

body.modo-dia .concurso-card {
  background: rgba(255, 255, 255, 0.9);
  color: black;
  border-left: 5px solid #d40000;
  border: none;
  border-radius: 5px;
  box-shadow: none;
}
/* 🎮 Modo noche (por defecto) */
.concurso-card {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid #d40000;
  color: white;
  border-radius: 10px;
  padding: 15px;
  margin: 10px auto;
  max-width: 600px;
  text-align: left;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.4);
}

/* ==================================================
🔐 MODALES Y LOGIN VIP
================================================== */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
}

.modal.fade-in .modal-content {
  opacity: 1;
}

.modal-content {
  max-width: 90%;
  max-height: 80%;
  border-radius: 12px;
  transition: opacity 0.5s ease;
}

.close, .prev, .next {
  font-size: 32px;
  color: white;
  position: absolute;
  cursor: pointer;
  user-select: none;
}

.prev {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.next {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.close {
  top: 20px;
  right: 30px;
}

#fondoLogin {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

#loginVIP {
  background: #111;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.5);
  color: white;
  text-align: center;
}

#loginVIP input {
  margin: 10px;
  padding: 8px;
  border-radius: 8px;
  border: none;
  width: 80%;
}

#loginVIP button {
  padding: 10px 20px;
  border-radius: 10px;
  background: linear-gradient(45deg, #8000ff, #ff00ff);
  color: white;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

/* ==================================================
🔝 BOTÓN FLOTANTE PARA SUBIR
================================================== */
#btnTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  width: 60px;
  height: 60px;
  cursor: pointer;
  display: none;
  transition: transform 0.4s ease;
}

#btnTop:hover {
  transform: scale(1.1) rotate(5deg);
}


/* ==================================================
🎬 SECCIÓN REBOBINANDO
================================================== */
.rebobinando-section {
  text-align: center;
  background-color: #000;
  border-radius: 10px;
  padding: 20px 10px;
}

.video-card.vertical {
  width: 250px;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  overflow: hidden;
  background-color: #111;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  scroll-snap-align: start;
  transition: transform 0.3s ease;
  text-decoration: none;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.video-card.vertical iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.shorts-frame {
  width: 100%;
  height: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  border: none;
}



/* ==================================================
✨ ANIMACIONES Y KEYFRAMES
================================================== */
@keyframes scrollMensaje {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

@keyframes fraseAnimada {
  0% { opacity: 0; transform: translateY(-10px); }
  50% { opacity: 1; transform: translateY(0px); }
  100% { opacity: 1; }
}

@keyframes mensaje-resalte {
  0% { transform: translateY(-10px); opacity: 0; }
  50% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes parpadeo {
  0% { opacity: 1; }
  100% { opacity: 0.5; }
}

@keyframes destello {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}



/* ==================================================
📱 ESTILOS RESPONSIVE FINAL
================================================== */
@media screen and (max-width: 768px) {
  nav {
    flex-wrap: wrap;
    justify-content: center;
  }

  nav a {
    font-size: 14px;
  }

  .video-card, .noticia-card {
    width: 90vw;
  }

  .noticia-img, .video-thumb img {
    height: 180px;
  }

  .gallery-item img {
    max-width: 90vw;
  }

  .carrusel iframe {
    height: 200px;
  }
}


/* ==================================================
🎥 REPRODUCTOR Y AUDIOBOX
================================================== */
.video-container {
  margin: 40px auto 10px;
  max-width: 720px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.1);
  position: relative;
}

.video-container video {
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 1;
}

.zeno-box {
  margin: 0 auto;
  margin-top: 20px;
  width: 95%;
  max-width: 640px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,255,204,0.3);
  height: 280px; /* Alto base */
}

.zeno-box iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.abrir-btn {
  margin-top: 15px;
  background: #1DB954;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 0 10px #1DB954aa;
}

iframe::-webkit-scrollbar {
  display: none;
}


/* ==================================================
📱 ESTILOS RESPONSIVE PARA REPRODUCTOR
================================================== */
@media (max-width: 600px) {
  .zeno-box {
    height: 200px; /* Más alto en pantallas pequeñas */
  }

  .frase-motivacional {
    font-size: 16px;
  }

  nav {
    justify-content: center;
  }

  .logo {
    width: 120px;
  }
}


/* ==================================================
✨ ANIMACIONES Y KEYFRAMES REPRODUCTOR
================================================== */
@keyframes fraseAnimada {
  0% { opacity: 0; transform: translateY(-10px); }
  50% { opacity: 1; transform: translateY(0px); }
  100% { opacity: 1; }
}

@keyframes scrollMensaje {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@keyframes destello {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.mensaje-resalte {
  animation: destello 1s ease-in-out 2;
}

.noticiero-flex {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  margin-top: 10px;
}

/* ==================================================
 FOOTER ESTILO RED
================================================== */
.footer-red {
  background: linear-gradient(45deg, #ff0000, #b80000);
  color: white;
  text-align: center;
  padding: 20px;
  font-size: 14px;
  font-weight: bold;
  border-top: 3px solid #ff4d4d;
  box-shadow: 0 -4px 10px rgba(255, 0, 0, 0.2);
}

.footer-red p {
  margin: 0;
  line-height: 1.5;
}


.aviso-cambio {
  background-color: #d40000;
  color: white;
  padding: 12px 25px;
  margin: 10px auto 20px;
  text-align: center;
  border-radius: 10px;
  font-weight: bold;
  width: fit-content;
  animation: aparecerDesaparecer 3s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

@keyframes aparecerDesaparecer {
  0% { opacity: 0; transform: scale(0.9); }
  10% { opacity: 1; transform: scale(1); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.05); }
}


/* ==================================================
 Botón cerrar de las Noticias
================================================== */
.boton-cerrar-tooltip {
  position: relative;
  display: inline-block;
  margin: 0 10px;
  color: #ff4d4d;
  text-decoration: none;
}

.boton-cerrar-tooltip i {
  transition: transform 0.2s ease;
}

.boton-cerrar-tooltip:hover i {
  transform: scale(1.2);
}

.tooltip-text {
  visibility: hidden;
  width: 160px;
  background-color: #444;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* aparece arriba del botón */
  left: 50%;
  margin-left: -80px;
  opacity: 0;
  transition: opacity 0.4s;
  font-size: 0.85em;
  pointer-events: none;
}
.boton-cerrar-tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}
/* =================================
Asistente Virtual Inacapin 
====================================*/
#asistenteInacapin {
  display: flex;
  position: fixed;
  bottom: 20px;
  right: 20px;
  flex-direction: column;
  align-items: center;
  width: 220px;
  background: none;
  padding: 0;
  z-index: 9999;
  animation: fadeIn 1s ease;
}

  
#asistenteInacapin img {
  width: 100px;
  display: block;
  margin: 0 auto;
  height: 80px;
}

.mensajeInacapin {
  background-color: #ffffff;
  color: #000;
  border-radius: 15px;
  padding: 15px;
   max-width: 280px;
  font-size: 0.9em;
  margin-top: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  text-align: center;
}

.mensajeInacapin button {
  margin-top: 10px;
  padding: 5px 12px;
  background-color: #d40000;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* ============================
🎨 Banner Pop-Up Actividades
============================ */
#popupTalleres {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #d40000;
  color: white;
  padding: 15px 20px 20px;
  border-radius: 0 0 15px 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.4);
  width: 100%;
  max-width: 400px;
  z-index: 9999;
  text-align: center;
  animation: deslizarDesdeArriba 0.6s ease-out;
}

#popupTalleres img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
}

#popupTalleres .texto-popup {
  font-size: 1em;
  font-weight: bold;
}

#popupTalleres .texto-popup a {
  color: #fff;
  text-decoration: underline;
  display: block;
  margin-top: 5px;
}

#popupTalleres .cerrar-popup {
  position: absolute;
  top: 8px;
  right: 15px;
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

@keyframes deslizarDesdeArriba {
  from {
    transform: translate(-50%, -100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

/* ============================
🎨 Pop-Up Formulario de Talleres
============================ */
.modal-inscripcion {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
}

.contenido-inscripcion {
  background-color: #111;
  padding: 30px;
  border-radius: 12px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 0 20px #ff00ff60;
}

.contenido-inscripcion input,
.contenido-inscripcion select {
  width: 90%;
  padding: 10px;
  margin: 10px 0;
  border-radius: 8px;
  border: none;
  background-color: #222;
  color: white;
}

.contenido-inscripcion h2 {
  color: #fff;
  margin-bottom: 15px;
}

.modal-inscripcion .cerrar {
  position: absolute;
  top: 20px;
  right: 35px;
  font-size: 30px;
  color: white;
  cursor: pointer;
}
/* ============================
Menú desplegable
============================ */
nav.menu-principal {
  background-color: #000;
  padding: 10px;
  text-align: center;
}

nav.menu-principal a, .dropbtn {
  color: white;
  padding: 10px 16px;
  text-decoration: none;
  display: inline-block;
  font-weight: bold;
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

nav.menu-principal a:hover, .dropbtn:hover {
  background-color: #6e2cf1;
  border-radius: 5px;
}

.dropdown {
  display: inline-block;
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #222;
  min-width: 180px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  z-index: 999;
  text-align: left;
  border-radius: 5px;
}

.dropdown-content a {
  color: white;
  padding: 10px 15px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #6e2cf1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
/*modal de los botones de mejor momento */
.modal-img {
  display: none;
  position: fixed;
  z-index: 999;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.85);
  text-align: center;
}

.modal-img.show {
  display: block;
}

.contenido-modal {
  width: 100%;
  max-width: 900px;
  max-height: 80vh;
  margin: auto;
  border-radius: 12px;
  object-fit: contain;
  height: auto;
  box-shadow: 0 0 20px rgba(255,255,255,0.3);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#imagenActiva {
  width: 100%;
  max-width: 600px; /* o el valor que quieras como límite visual */
  max-height: 400px;
  object-fit: contain; /* ajusta sin deformar */
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(255,255,255,0.2);
  cursor: pointer;
}