/*
    Hoja de Estilos Personalizada para DJ Cristiano Arcangel
    -------------------------------------------------------
    Aquí se definen estilos específicos que complementan a Tailwind CSS.
*/

/* Estilo global para la fuente del cuerpo del documento */
body {
    font-family: 'Poppins', sans-serif;
}

/* Define el comportamiento de desplazamiento suave para toda la página. */
html {
    scroll-behavior: smooth;
}

/* Estilo para el enlace de navegación de la sección actualmente visible. */
.nav-active {
    color: #3b82f6; /* Un azul brillante */
    font-weight: 600;
}

/* ====== ESTILOS PARA EL CARRUSEL SWIPER ====== */
.mySwiper .swiper-slide {
    height: 350px; /* Altura fija para los slides, puedes ajustarla */
    border-radius: 0.75rem; /* Bordes redondeados */
    overflow: hidden; /* Asegura que la imagen no se salga de los bordes */
}

.mySwiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* La imagen cubre todo el espacio sin deformarse */
    transition: transform 0.4s ease;
}

/* Efecto de zoom suave al pasar el cursor */
.mySwiper .swiper-slide:hover img {
    transform: scale(1.05);
}

/* Personaliza el color de los botones de navegación de Swiper */
/* Usamos variables CSS de Swiper para mayor compatibilidad */
:root {
  --swiper-navigation-color: #ffffff;
  --swiper-navigation-size: 30px; /* Un poco más pequeño y sutil */
}

/* Estilo para los botones de navegación */
.swiper-button-next, .swiper-button-prev {
    background-color: rgba(0,0,0,0.3);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    background-color: rgba(0,0,0,0.6);
}