/* Responsive Styles */

@media (max-width: 991.98px) {
    .hero-slider {
        height: 60vh;
    }

    .slide-content h1 {
        font-size: 2rem !important;
    }

    .slide-content p {
        font-size: 0.95rem !important;
    }

    .slide-content .btn {
        padding: 8px 20px !important;
        font-size: 0.8rem !important;
    }

    .section-padding {
        padding: 60px 0;
    }

    .header-icons {
        justify-content: flex-end;
    }

    /* Ajuste para que el contenido no se pegue al header sticky */
    body {
        padding-top: 0; /* Bootstrap sticky-top handles this if not fixed */
    }

    /* Footer layout on tablets and mobile */
    .footer-col:first-child,
    .footer-col:last-child {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 30px;
    }

    .schedule-row { 
        gap: 10px; 
    } 

    .schedule-row .day, 
    .schedule-row .time { 
        font-size: 15px; 
    } 

    /* Mejora visual para el horario en responsive */
    .footer-col:last-child .footer-schedule {
        max-width: 400px;
        margin-left: 0;
    }
}

@media (max-width: 767.98px) {
    .hero-slider {
        height: 50vh;
    }

    .slide-content h1 {
        font-size: 1.8rem;
    }

    .slide-content p {
        font-size: 0.9rem;
    }

    .top-bar p {
        font-size: 0.75rem;
    }

    .stat-box {
        margin-bottom: 0px;
    }

    .stat-number {
        font-size: 1.5rem !important;
    }

    .stat-box p {
        font-size: 0.7rem !important;
    }

    /* Top bar simpler on mobile */
    .top-bar {
        font-size: 0.8rem;
    }

    .top-bar p {
        padding: 5px 0;
    }

    /* Product cards on mobile (2 columns) */
    .product-info {
        padding: 12px !important;
    }

    .product-info h5 {
        font-size: 0.85rem !important;
        height: 2.8em; /* Mantener 2 líneas */
        overflow: hidden;
    }

    .product-info .fs-5 {
        font-size: 0.9rem !important;
    }

    /* Swiper buttons smaller on mobile */
    .swiper-button-prev,
    .swiper-button-next {
        width: 30px !important;
        height: 30px !important;
    }

    .swiper-button-prev::after,
    .swiper-button-next::after {
        font-size: 1rem !important;
    }

    /* Marcas section padding */
    .marcas-section {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .marcas-section .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .marcasSwiper .swiper-slide img {
        max-height: 35px !important;
    }

    .footer-brands-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        align-items: center !important;
        justify-items: center !important;
    }

    .footer-brand-img {
        max-width: 120px !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

@media (max-width: 575.98px) {
    .hero-slider {
        height: 45vh;
    }

    .hero-text-content h1 {
        font-size: 1.5rem;
    }

    .marcas-section {
        border-top: none !important;
        padding-top: 0 !important;
        margin-top: -50px !important; /* Subir la sección aún más según lo solicitado */
        position: relative;
        z-index: 5;
    }

    .navbar-brand img {
        max-height: 40px;
    }

    .whatsapp-float {
        width: 50px;
        height: 50px;
        font-size: 25px;
        bottom: 20px;
        left: 20px;
    }

    /* Asegurar que los botones del slider no se monten sobre el texto si hubiera */
    .swiper-button-prev,
    .swiper-button-next {
        display: none !important; /* Ocultar flechas en móviles muy pequeños para limpiar la vista */
    }

    .swiper-pagination {
        bottom: 10px !important;
    }

    /* Footer en dos columnas en móviles */
    .footer-main-content {
        display: flex;
        flex-wrap: wrap;
    }

    .footer-col {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 30px;
    }

    .footer-col h5 {
        font-size: 0.85rem;
        margin-bottom: 15px !important;
    }

    .footer-links li {
        font-size: 0.8rem;
    }

    /* Ajuste de badge de experiencia en móviles */
    .experience-badge {
        padding: 1rem !important;
        margin: 1rem !important;
    }

    .experience-badge h3 {
        font-size: 1.5rem !important;
    }

    .experience-badge p {
        font-size: 0.7rem !important;
    }

    .description-text {
        font-size: 0.8rem !important;
        text-align: justify !important;
    }

    .payment-logo-box {
        height: 35px !important;
        padding: 5px !important;
    }
}