/* Banner hero */
.video-panel {
    transform-origin: center center;
    will-change: transform, opacity;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Estilos responsivos para mobile - video panels verticales */
@media (max-width: 768px) {
    .video-panels-container {
        padding: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .video-panels-container > div {
        flex-direction: column !important;
        height: 70vh; /* Los tres panels ocupan 70% del alto */
        width: 80vw; /* Ocupan 80% del ancho del celular */
        gap: 2rem !important;
        align-items: center;
        justify-content: flex-start;
    }
    
    .video-panel {
        width: 100% !important;
        height: calc((50vh - 1.5rem) / 3) !important; /* Dividir 70vh entre 3 panels menos gaps */
        flex-shrink: 0;
        border-radius: 11px !important;
    }
    
    .video-panel h2 {
        font-size: 1.5rem !important; /* text-2xl */
        line-height: 0rem !important;
        margin: 0px !important;
    }
}

.video-overlay {
    backdrop-filter: blur(1px);
}

.scroll-arrow {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 0.7; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
    100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
}

.banner-background {
    will-change: opacity, filter;
}


/* Estilos adicionales específicos para esta sección */
#about-passion .rounded-2xl {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

/* Ajuste específico para pantallas medianas */
@media (min-width: 768px) and (max-width: 991px) {
    #about-passion .md\:mt-12 {
        margin-top: 3rem;
    }
}

/* Altura mínima para las tarjetas de imagen para mantener proporción */
@media (min-width: 768px) {
    #about-passion .md\:col-span-4 {
        min-height: 320px;
    }
}

/* Estilos adicionales específicos para esta sección */
#features-section .rounded-2xl {
    min-height: 180px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Asegurar que las tarjetas tengan la misma altura */
@media (min-width: 768px) {
    #features-section .rounded-2xl {
        height: 100%;
    }
}

/* Estilos para los sliders de las habitaciones */
.room-slider-container {
    position: relative;
}

.room-slider-container .swiper {
    width: 100%;
    height: 224px; /* h-56 equivalent */
}

.room-slider-container .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Flechas de navegación minimalistas para room sliders */
.room-slider-container .swiper-button-prev,
.room-slider-container .swiper-button-next {
    width: 32px;
    height: 32px;
    margin-top: -16px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    color: white;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    opacity: 0;
    transform: scale(0.8);
}

.room-slider-container:hover .swiper-button-prev,
.room-slider-container:hover .swiper-button-next {
    opacity: 1;
    transform: scale(1);
}

.room-slider-container .swiper-button-prev:hover,
.room-slider-container .swiper-button-next:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
}

.room-slider-container .swiper-button-prev {
    left: 10px;
}

.room-slider-container .swiper-button-next {
    right: 10px;
}

.room-slider-container .swiper-button-prev:after,
.room-slider-container .swiper-button-next:after {
    content: none;
}

/* Puntos de paginación minimalistas */
.room-slider-container .swiper-pagination {
    bottom: 10px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.room-slider-container .swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    transition: all 0.3s ease;
}

.room-slider-container .swiper-pagination .swiper-pagination-bullet-active {
    background: white;
    transform: scale(1.2);
}

/* Responsive ajustes para móvil */
@media (max-width: 768px) {
    .room-slider-container .swiper-button-prev,
    .room-slider-container .swiper-button-next {
        width: 28px;
        height: 28px;
        margin-top: -14px;
        font-size: 14px;
    }
    
    .room-slider-container .swiper-button-prev {
        left: 8px;
    }
    
    .room-slider-container .swiper-button-next {
        right: 8px;
    }
}