/* Tailwind is handling most of the styling */

html {
    scroll-behavior: smooth;
}

/* Swiper overrides for better visualization */
.swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 80px; /* Space for pagination */
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 320px;
    height: 500px;
    /* Optional: glassmorphism or slight transparency to make it look techy */
}

.swiper-slide-active {
    border: 2px solid #0087CA;
    box-shadow: 0 25px 50px -12px rgba(0, 135, 202, 0.25);
}

.swiper-pagination-bullet-active {
    background-color: #0087CA !important;
}

.swiper-button-next, .swiper-button-prev {
    color: #343a40 !important;
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    color: #0087CA !important;
}

/* Ensure font family works well */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Efecto de Movimiento Dinámico en el Hover de la Tarjeta */
.swiper-slide img {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease;
}

.swiper-slide:hover img {
    transform: scale(1.15) translateY(-10px) rotate(-1deg);
    filter: drop-shadow(0 20px 20px rgba(0,0,0,0.15));
}

.swiper-slide {
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.swiper-slide:hover {
    border-color: #0087CA;
    box-shadow: 0 30px 60px -12px rgba(0, 135, 202, 0.3);
}