/* style.css */

html, body {
  height: 100%;
  margin: 0;
}

/* Fondo a pantalla completa */
#background {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;

  background-image: url('/assets/images/fondo.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  z-index: -1;
}

/* Slider Swiper */
.swiper {
  width: 95%;
  max-width: 1500px;
  margin: 7vh auto;
  margin-top: 20%;
}
.swiper-slide {
  display: flex; justify-content: center; align-items: center;
}
.swiper-slide img {
  max-width: 100%; max-height: 60vh;
  border-radius: 18px;
  transition: transform .3s;
  cursor: pointer;
}
.swiper-slide img:hover { transform: scale(1.05); }

/* Overlay de vídeo */
#video-overlay {
  position: fixed; inset:0;
  display: flex; justify-content: center; align-items: center;
  background: rgba(0,0,0,.85);
  z-index: 2000;
}
#video-overlay[hidden] {
  display: none !important;   /* oculto hasta clic */
}
#player {
  max-width: 90vw; max-height: 90vh;
  border-radius: 12px;
}
/* --- Botones circulares de navegación --- */
.swiper-button-next,
.swiper-button-prev {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);   /* círculo semitransparente */
  backdrop-filter: blur(4px);        /* efecto de cristal opcional */
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 20px;   /* tamaño de la flecha */
  color: #fff;       /* flecha blanca */
}

/* Opcional: separa los botones del borde del slider */
.swiper-button-next { right: 10px; }
.swiper-button-prev { left: 10px; }

/* --- Modal de vídeo --- */
#video-overlay {
  position: fixed; inset: 0;
  display: flex; justify-content: center; align-items: center;
  background: rgba(0,0,0,.85);
  z-index: 2000;
}
#video-overlay[hidden] { display: none !important; }

#player {
  max-width: 90vw; max-height: 90vh;
  border-radius: 12px;
}

/* --- Botón “Salir” --- */
#close-btn {
  position: absolute;
  top: 20px; right: 20px;

  width: 40px; height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  cursor: pointer;

  display: flex; justify-content: center; align-items: center;
}



/* --- Modal de vídeo ---- */
#video-overlay {
  position: fixed; inset: 0;
  display: flex; justify-content: center; align-items: center;
  background: rgba(0,0,0,.85);
  z-index: 2000;
}
#video-overlay[hidden] { display: none !important; }

#player {
  width: 95vw;          /* 95 % del ancho de la ventana */
  height: 95vh;         /* 95 % del alto  de la ventana */
  object-fit: contain;  /* mantiene proporción sin recortar */
  border-radius: 12px;
}

/* --- Botón “Cerrar” redondo blanco --- */
#close-btn {
  position: absolute;
  top: 20px; right: 20px;

  width: 40px; height: 40px;
  border: none;
  border-radius: 50%;
  background: #fff;         /* fondo blanco */
  cursor: pointer;

  display: flex; justify-content: center; align-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* aspa blanca (Unicode ×) centrada */
#close-btn::before {
  content: "\00d7"; /*  Usa el código unicode para la "x" */
  font-size: 24px;
  color: #000;              /* aspa blanca */
  line-height: 1;
}

#close-btn:hover {
  background: #000;
  content: "\00d7"; /*  Usa el código unicode para la "x" */
  font-size: 20px;
  color: #fff;
  line-height: 1;
}