/* ================================================== */
/* CSS RESPONSIVE PARA PÁGINAS DE SERVICIOS         */
/* Mantiene el diseño PC original + 100% responsive  */
/* ================================================== */

/* Base - Mantener diseño PC existente */
.pricing-box,
.feature-box.feature-box-style-3,
.testimonial,
.contact-form {
    /* Heredar estilos existentes */
}

/* ================================================== */
/* TABLETS - 992px hacia abajo                       */
/* ================================================== */
@media (max-width: 991.98px) {
    
    /* Feature boxes - De 2 columnas a 1 columna centrada */
    #section-main .row.g-4.mb-5.justify-content-center {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    #section-main .row.g-4.mb-5.justify-content-center .col-md-5 {
        width: 80% !important;
        max-width: 600px !important;
        min-width: auto !important;
        flex: none !important;
        margin-bottom: 20px !important;
    }
    
    /* Pricing boxes - Mantener 3 columnas pero más compactas */
    #section-main .row.g-4.mb-5:not(.justify-content-center) .col-md-4 {
        width: calc(33.333% - 10px) !important;
        max-width: calc(33.333% - 10px) !important;
        min-width: 280px !important;
        flex: 0 0 calc(33.333% - 10px) !important;
    }
    
    .pricing-box {
        min-height: 380px !important;
        padding: 25px 20px !important;
    }
    
    .pricing-box .price .amount {
        font-size: 42px !important;
    }
    
    /* Formularios - Mantener 2 columnas pero más espaciados */
    .contact-form .row .col-md-6 {
        margin-bottom: 20px !important;
    }
    
    /* Testimonial más compacto */
    .testimonial {
        padding: 30px 25px !important;
        font-size: 16px !important;
    }
}

/* ================================================== */
/* TABLETS PEQUEÑAS - 768px hacia abajo              */
/* ================================================== */
@media (max-width: 767.98px) {
    
    /* Pricing boxes - De 3 columnas a 2 columnas */
    #section-main .row.g-4.mb-5:not(.justify-content-center) {
        justify-content: center !important;
        gap: 15px !important;
    }
    
    #section-main .row.g-4.mb-5:not(.justify-content-center) .col-md-4 {
        width: calc(48% - 8px) !important;
        max-width: calc(48% - 8px) !important;
        min-width: 250px !important;
        flex: 0 0 calc(48% - 8px) !important;
        margin-bottom: 20px !important;
    }
    
    /* Feature boxes - Más estrechas pero centradas */
    #section-main .row.g-4.mb-5.justify-content-center .col-md-5 {
        width: 90% !important;
        max-width: 500px !important;
    }
    
    .feature-box.feature-box-style-3 {
        padding: 25px 20px !important;
    }
    
    .feature-box-icon i {
        font-size: 42px !important;
    }
    
    .feature-box-info h4 {
        font-size: 18px !important;
    }
    
    /* Formularios - Preparar para móvil */
    .contact-form {
        padding: 25px 20px !important;
    }
    
    /* Textos introductorios más compactos */
    .lead {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
    
    /* Subheader */
    #subheader h1 {
        font-size: 32px !important;
    }
    
    #subheader h4 {
        font-size: 16px !important;
    }
}

/* ================================================== */
/* MÓVILES - 576px hacia abajo                       */
/* ================================================== */
@media (max-width: 575.98px) {
    
    /* Pricing boxes - 1 columna completa */
    #section-main .row.g-4.mb-5:not(.justify-content-center) {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }
    
    #section-main .row.g-4.mb-5:not(.justify-content-center) .col-md-4 {
        width: 95% !important;
        max-width: 400px !important;
        min-width: auto !important;
        flex: none !important;
        margin-bottom: 15px !important;
    }
    
    .pricing-box {
        min-height: 350px !important;
        padding: 20px 15px !important;
    }
    
    .pricing-box-header h5 {
        font-size: 18px !important;
    }
    
    .pricing-box .price .amount {
        font-size: 36px !important;
    }
    
    .pricing-box .duration {
        font-size: 11px !important;
        padding: 4px 12px !important;
    }
    
    .pricing-box-content ul li {
        font-size: 13px !important;
        padding: 6px 0 !important;
    }
    
    /* Feature boxes - 1 columna completa */
    #section-main .row.g-4.mb-5.justify-content-center .col-md-5 {
        width: 95% !important;
        max-width: 400px !important;
    }
    
    .feature-box.feature-box-style-3 {
        padding: 20px 15px !important;
    }
    
    .feature-box-icon i {
        font-size: 36px !important;
    }
    
    .feature-box-info h4 {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }
    
    .feature-box-info p {
        font-size: 13px !important;
    }
    
    /* Formularios - 1 columna completa */
    .contact-form .row .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 15px !important;
    }
    
    .contact-form {
        padding: 20px 15px !important;
    }
    
    .contact-form .form-control {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
    
    /* Testimonial móvil */
    .testimonial {
        padding: 20px 15px !important;
        font-size: 14px !important;
    }
    
    .testimonial::before {
        font-size: 40px !important;
        top: 5px !important;
        left: 15px !important;
    }
    
    /* Botones más pequeños */
    .btn-main,
    .btn-line {
        padding: 10px 25px !important;
        font-size: 13px !important;
    }
    
    .btn-lg {
        padding: 12px 30px !important;
        font-size: 14px !important;
    }
    
    /* Textos principales */
    .lead {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }
    
    /* Subheader móvil */
    #subheader {
        padding: 100px 0 60px 0 !important;
        overflow: visible !important;
        min-height: 250px !important;
    }

    #subheader h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    #subheader h4 {
        font-size: 60px !important;
        line-height: 1.3 !important;
        overflow: visible !important;
        white-space: normal !important;
        opacity: 1 !important;
        visibility: visible !important;
        animation-iteration-count: 1 !important;
        animation-fill-mode: forwards !important;
        -webkit-animation-iteration-count: 1 !important;
        -webkit-animation-fill-mode: forwards !important;
        display: block !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Espaciado general reducido */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .row.mb-5 {
        margin-bottom: 30px !important;
    }
    
    /* Popular tag responsive */
    .popular-tag {
        top: -8px !important;
        right: 15px !important;
        padding: 4px 12px !important;
        font-size: 10px !important;
    }
}

/* ================================================== */
/* MÓVILES EXTRA PEQUEÑOS - 400px hacia abajo        */
/* ================================================== */
@media (max-width: 399.98px) {
    
    /* Ajustes adicionales para pantallas muy pequeñas */
    .pricing-box {
        min-height: 320px !important;
        padding: 15px 10px !important;
    }
    
    .pricing-box .price .amount {
        font-size: 32px !important;
    }
    
    .pricing-box-content ul li {
        font-size: 12px !important;
    }
    
    .feature-box.feature-box-style-3 {
        padding: 15px 10px !important;
    }
    
    .contact-form {
        padding: 15px 10px !important;
    }
    
    .testimonial {
        padding: 15px 10px !important;
        font-size: 13px !important;
    }
    
    #subheader h1 {
        font-size: 24px !important;
    }
    
    .btn-main,
    .btn-line,
    .btn-lg {
        padding: 8px 20px !important;
        font-size: 12px !important;
    }
}

/* ================================================== */
/* MEJORAS ADICIONALES PARA TODAS LAS PANTALLAS      */
/* ================================================== */

/* Asegurar que las imágenes no se desborden - EXCEPTO galería y habitaciones */
img:not(.cover-image):not(.de-room .d-image img):not(.de-room .d-details img) {
    max-width: 100% !important;
    height: auto !important;
}

/* Mejorar legibilidad en móviles */
@media (max-width: 767.98px) {
    body {
        font-size: 13px !important;
    }
    
    p {
        line-height: 1.6 !important;
    }
    
    h3 {
        font-size: 20px !important;
    }
    
    h4 {
        font-size: 16px !important;
    }
    
    h5 {
        font-size: 14px !important;
    }
}

/* Scrolling suave en móviles */
html {
    -webkit-overflow-scrolling: touch;
}

/* Touch targets más grandes para móviles */
@media (max-width: 575.98px) {
    button,
    .btn,
    a.btn,
    input[type="submit"] {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}