#main-content {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s 0.2s ease-in; /* Aparece con un suave fade-in */
}

/* Estilos de la pantalla de intro */
#intro-splash {
  transition: opacity 0.5s ease-out; /* Desaparece con un fade-out */
}

/* Clase que usará JavaScript para ocultar la intro */
#intro-splash.hidden {
  opacity: 0;
  pointer-events: none; /* Evita que se pueda hacer clic en la intro cuando es invisible */
}

/* Oculta la barra de scroll por defecto */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Habilita el scroll suave en toda la página */
html {
  scroll-behavior: smooth;
}

/* Evita el scroll del body cuando un modal está abierto */
body.modal-open {
  overflow: hidden;
}

/* --- ESTILOS NUEVOS Y MEJORADOS --- */
/* Evita el "parpadeo" al cargar la página (para ambos) */
.swiper {
  visibility: hidden;
}
.swiper-initialized {
  visibility: visible;
}

/* --- Estilos para el Carrusel de la Galería --- */
.swiper-gallery {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 40px;
}

.swiper-gallery .swiper-slide {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-gallery .swiper-slide img,
.swiper-gallery .swiper-slide iframe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

/* --- Estilos para el Carrusel de Artistas --- */
.swiper-artists {
  width: 100%;
  padding-bottom: 40px;
}

.swiper-artists .swiper-wrapper {
  align-items: flex-start; /* Alinea las tarjetas arriba */
}

.swiper-artists .swiper-slide {
  height: auto;
  aspect-ratio: 4 / 5;
}

/* --- Estilos para la Paginación y Navegación (para ambos) --- */

/* Centrado de puntos */
.swiper-pagination,
.swiper-pagination-artists {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
  bottom: 0px !important;
  left: 0;
  right: 0;
}

/* Colores de Paginación y Flechas */
:root {
  --swiper-theme-color: #a855f7; /* Violeta para los puntos activos */
  --swiper-navigation-color: #ffffff; /* Blanco para las flechas */
  --swiper-pagination-bullet-inactive-color: #ffffff;
  --swiper-pagination-bullet-inactive-opacity: 0.5;
}

/* Puedes agregar esto en styles.css */
.swiper-about {
  background: transparent;
  min-height: 320px;
  max-width: 320px;
  margin: 0 auto;
}
.swiper-about .swiper-slide img {
  display: block;
  width: 100%;
  height: 288px;
  object-fit: cover;
  border-radius: 1rem;
}