/* ===============================================
   CORRECCIONES MÓVILES COMPLETAS
   Soluciona todos los problemas de responsive design
   =============================================== */

/* ===== CORRECCIONES GENERALES MÓVILES ===== */

/* Asegurar viewport correcto */
@media only screen and (max-width: 767px) {
    .holder960 {
        width: 100% !important;
        min-width: auto !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }
    
    /* Corregir overflow horizontal */
    body, #wrapper {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* Ajustar padding de secciones */
    .section {
        padding: 40px 0 !important;
    }
}

/* ===== CORRECCIONES PARA NAVBAR MÓVIL ===== */

@media only screen and (max-width: 768px) {
    /* Ocultar navbar original y usar el nuevo */
    nav#mainNav {
        display: none !important;
    }
    
    .mobileBtn {
        display: none !important;
    }
    
    /* Asegurar que el nuevo navbar funcione */
    .navbar {
        padding: 0.5rem 0 !important;
    }
    
    .nav-container {
        padding: 0 1rem !important;
    }
    
    .nav-logo-img {
        height: 35px !important;
    }
}

/* ===== CORRECCIONES PARA HERO MÓVIL ===== */

@media only screen and (max-width: 768px) {
    .hero {
        min-height: 60vh !important;
        padding: 80px 0 40px !important;
    }
    
    .hero-content {
        padding: 0 1rem !important;
    }
    
    .hero-logo-main {
        height: 60px !important;
        margin-bottom: 20px !important;
    }
    
    .hero h1 {
        font-size: 28px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }
    
    .hero p {
        font-size: 18px !important;
        line-height: 1.5 !important;
        margin-bottom: 25px !important;
    }
    
    .hero-cta {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: center !important;
    }
    
    .btn {
        width: 100% !important;
        max-width: 280px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
    }
}

@media only screen and (max-width: 480px) {
    .hero {
        min-height: 50vh !important;
        padding: 70px 0 30px !important;
    }
    
    .hero-logo-main {
        height: 50px !important;
    }
    
    .hero h1 {
        font-size: 24px !important;
    }
    
    .hero p {
        font-size: 16px !important;
    }
    
    .btn {
        max-width: 250px !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
    }
}

/* ===== CORRECCIONES PARA SECCIONES DE CONTENIDO ===== */

@media only screen and (max-width: 768px) {
    /* Títulos de sección */
    .aboutIntro h1,
    .galleryIntro h1,
    .pricingIntro h1,
    .touchIntro h1,
    .mapIntro h1 {
        font-size: 28px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }
    
    .aboutIntro h1 .subtitle,
    .galleryIntro h1 .subtitle {
        font-size: 16px !important;
        margin-top: 8px !important;
    }
    
    /* Párrafos */
    .aboutIntro p,
    .galleryIntro p,
    .pricingIntro p,
    .touchIntro p,
    .mapIntro p {
        font-size: 18px !important;
        line-height: 1.6 !important;
        text-align: center !important;
        max-width: 100% !important;
    }
    
    /* Flechas de sección */
    .secArrow {
        margin-bottom: 30px !important;
    }
    
    .arrowHolder {
        display: none !important;
    }
    
    .secArrow i {
        font-size: 24px !important;
        color: #6C1739 !important;
    }
}

@media only screen and (max-width: 480px) {
    .aboutIntro h1,
    .galleryIntro h1,
    .pricingIntro h1,
    .touchIntro h1,
    .mapIntro h1 {
        font-size: 24px !important;
    }
    
    .aboutIntro h1 .subtitle,
    .galleryIntro h1 .subtitle {
        font-size: 14px !important;
    }
    
    .aboutIntro p,
    .galleryIntro p,
    .pricingIntro p,
    .touchIntro p,
    .mapIntro p {
        font-size: 16px !important;
    }
}

/* ===== CORRECCIONES PARA CAROUSEL MÓVIL ===== */

@media only screen and (max-width: 768px) {
    .experience-carousel {
        padding: 30px 10px !important;
        margin: 0 !important;
    }
    
    .carousel-container {
        margin-left: 0 !important;
        padding: 15px !important;
        overflow: hidden !important;
    }
    
    .carousel-container::before {
        content: '← Desliza →' !important;
        font-size: 11px !important;
        top: -25px !important;
    }
    
    .carousel-track {
        gap: 20px !important;
        padding: 10px 0 !important;
    }
    
    .experience-card {
        flex: 0 0 280px !important;
        padding: 20px !important;
        min-height: auto !important;
    }
    
    .card-icon {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 15px !important;
    }
    
    .card-icon i {
        font-size: 20px !important;
    }
    
    .card-content h3 {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }
    
    .card-content p {
        font-size: 15px !important;
        line-height: 1.5 !important;
        margin-bottom: 15px !important;
    }
    
    .card-highlights {
        gap: 6px !important;
    }
    
    .card-highlights span {
        font-size: 11px !important;
    }
    
    .carousel-controls {
        margin-top: 15px !important;
        gap: 20px !important;
    }
    
    .control-btn {
        width: 40px !important;
        height: 40px !important;
    }
    
    .control-btn i {
        font-size: 14px !important;
    }
    
    .indicator {
        width: 8px !important;
        height: 8px !important;
    }
}

@media only screen and (max-width: 480px) {
    .experience-carousel {
        padding: 20px 5px !important;
    }
    
    .carousel-container {
        padding: 10px !important;
    }
    
    .carousel-container::before {
        font-size: 10px !important;
        top: -20px !important;
    }
    
    .carousel-track {
        gap: 15px !important;
    }
    
    .experience-card {
        flex: 0 0 260px !important;
        padding: 15px !important;
    }
    
    .card-icon {
        width: 45px !important;
        height: 45px !important;
        margin-bottom: 12px !important;
    }
    
    .card-icon i {
        font-size: 18px !important;
    }
    
    .card-content h3 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
    
    .card-content p {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }
    
    .card-highlights span {
        font-size: 10px !important;
    }
    
    .control-btn {
        width: 35px !important;
        height: 35px !important;
    }
    
    .control-btn i {
        font-size: 12px !important;
    }
    
    .indicator {
        width: 6px !important;
        height: 6px !important;
    }
}

/* ===== CORRECCIONES PARA SLIDER/GALERÍA MÓVIL ===== */

@media only screen and (max-width: 768px) {
    .slider {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .flexslider {
        margin: 0 !important;
    }
    
    .flexslider .slides img {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }
    
    .slide-caption {
        padding: 15px !important;
        background: rgba(0, 0, 0, 0.8) !important;
    }
    
    .slide-caption h3 {
        font-size: 18px !important;
        margin-bottom: 8px !important;
    }
    
    .slide-caption p {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
    
    .moreBtn {
        margin-top: 30px !important;
        text-align: center !important;
    }
    
    .moreBtn a {
        display: inline-block !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
    }
}

@media only screen and (max-width: 480px) {
    .slide-caption {
        padding: 10px !important;
    }
    
    .slide-caption h3 {
        font-size: 16px !important;
    }
    
    .slide-caption p {
        font-size: 15px !important;
    }
    
    .moreBtn a {
        padding: 10px 16px !important;
        font-size: 14px !important;
    }
}

/* ===== CORRECCIONES PARA TABLAS DE PRECIOS MÓVIL ===== */

@media only screen and (max-width: 768px) {
    #pricingContainer {
        margin: 30px 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }
    
    .pricingtbl {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }
    
    .pricingtbl ul {
        width: 100% !important;
        max-width: 350px !important;
        float: none !important;
        margin: 0 !important;
        margin-bottom: 20px !important;
    }
    
    .pricingtbl ul:last-child {
        margin-bottom: 0 !important;
    }
    
    .pricingtbl ul li {
        padding: 12px 15px !important;
        font-size: 14px !important;
    }
    
    .pricingtbl ul li:first-child {
        font-size: 18px !important;
        font-weight: 600 !important;
    }
    
    .pricingtbl .pricing li {
        font-size: 16px !important;
    }
    
    .pricingtbl .price {
        font-size: 24px !important;
    }
    
    .pricingtbl .dollar {
        font-size: 18px !important;
    }
    
    .pricingtbl small {
        font-size: 12px !important;
    }
    
    .signupBtn a {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
}

@media only screen and (max-width: 480px) {
    #pricingContainer {
        margin: 20px 0 !important;
        gap: 15px !important;
    }
    
    .pricingtbl ul {
        max-width: 300px !important;
        margin-bottom: 15px !important;
    }
    
    .pricingtbl ul li {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
    
    .pricingtbl ul li:first-child {
        font-size: 16px !important;
    }
    
    .pricingtbl .pricing li {
        font-size: 15px !important;
    }
    
    .pricingtbl .price {
        font-size: 22px !important;
    }
    
    .pricingtbl .dollar {
        font-size: 16px !important;
    }
    
    .pricingtbl small {
        font-size: 11px !important;
    }
    
    .signupBtn a {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
}

/* ===== CORRECCIONES PARA REDES SOCIALES MÓVIL ===== */

@media only screen and (max-width: 768px) {
    .clientContent {
        padding: 40px 20px !important;
        text-align: center !important;
    }
    
    .clientContent h1 {
        font-size: 28px !important;
        margin-bottom: 15px !important;
    }
    
    .clientContent p {
        font-size: 18px !important;
        line-height: 1.6 !important;
        margin-bottom: 25px !important;
        padding: 0 20px !important;
    }
    
    .clientList {
        gap: 20px !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    
    .clientList li {
        margin: 0 !important;
    }
    
    .clientList a {
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
    }
    
    .clientList i {
        font-size: 20px !important;
    }
}

@media only screen and (max-width: 480px) {
    .clientContent {
        padding: 30px 15px !important;
    }
    
    .clientContent h1 {
        font-size: 24px !important;
    }
    
    .clientContent p {
        font-size: 16px !important;
        padding: 0 10px !important;
    }
    
    .clientList {
        gap: 15px !important;
    }
    
    .clientList a {
        width: 45px !important;
        height: 45px !important;
        font-size: 18px !important;
    }
    
    .clientList i {
        font-size: 18px !important;
    }
}

/* ===== CORRECCIONES PARA FORMULARIO MÓVIL ===== */

@media only screen and (max-width: 768px) {
    .touchHolder {
        padding: 0 !important;
    }
    
    .getinTouch {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }
    
    .contactForm {
        width: 100% !important;
        float: none !important;
    }
    
    .contactForm input[type="text"],
    .contactForm input[type="email"],
    .contactForm input[type="tel"],
    .contactForm select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 15px !important;
        font-size: 16px !important;
    }
    
    .contactForm textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 15px !important;
        font-size: 16px !important;
        min-height: 120px !important;
    }
    
    .contactForm input[type="submit"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px 20px !important;
        font-size: 16px !important;
        margin-top: 20px !important;
    }
    
    #reservationDetails {
        margin: 20px 0 !important;
    }
    
    #reservationDetails label {
        display: block !important;
        margin-bottom: 8px !important;
        font-weight: 500 !important;
    }
    
    #priceCalculation {
        margin-top: 20px !important;
        padding: 15px !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
    }
    
    #success,
    #error {
        padding: 15px !important;
        margin-top: 20px !important;
        text-align: center !important;
    }
    
    #success h2,
    #error h2 {
        font-size: 16px !important;
        margin: 0 !important;
    }
}

@media only screen and (max-width: 480px) {
    .contactForm input[type="text"],
    .contactForm input[type="email"],
    .contactForm input[type="tel"],
    .contactForm select {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
    
    .contactForm textarea {
        padding: 10px 12px !important;
        font-size: 14px !important;
        min-height: 100px !important;
    }
    
    .contactForm input[type="submit"] {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }
    
    #reservationDetails label {
        font-size: 14px !important;
    }
    
    #success h2,
    #error h2 {
        font-size: 14px !important;
    }
}

/* ===== CORRECCIONES PARA MAPA MÓVIL ===== */

@media only screen and (max-width: 768px) {
    .mapContent {
        margin-top: 30px !important;
    }
    
    .mapContainer {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    .mapContainer iframe {
        height: 350px !important;
        width: 100% !important;
    }
    
    .mobileAppButton {
        margin-top: 20px !important;
    }
    
    .appButton {
        padding: 12px 20px !important;
        font-size: 16px !important;
    }
}

@media only screen and (max-width: 480px) {
    .mapContainer iframe {
        height: 300px !important;
    }
    
    .appButton {
        padding: 10px 16px !important;
        font-size: 14px !important;
    }
}

/* ===== CORRECCIONES PARA FOOTER MÓVIL ===== */

@media only screen and (max-width: 768px) {
    .footer {
        padding: 40px 0 20px !important;
    }
    
    .footer-content {
        flex-direction: column !important;
        text-align: center !important;
        gap: 20px !important;
        padding: 0 20px !important;
    }
    
    .footer-logo-img {
        height: 50px !important;
    }
    
    .footer-social {
        justify-content: center !important;
        gap: 15px !important;
    }
    
    .footer-social a {
        width: 45px !important;
        height: 45px !important;
    }
    
    .footer-social svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    .footer-bottom {
        padding-top: 20px !important;
        margin-top: 20px !important;
    }
    
    .footer-bottom p {
        font-size: 14px !important;
        padding: 0 20px !important;
    }
}

@media only screen and (max-width: 480px) {
    .footer {
        padding: 30px 0 15px !important;
    }
    
    .footer-content {
        padding: 0 15px !important;
        gap: 15px !important;
    }
    
    .footer-logo-img {
        height: 45px !important;
    }
    
    .footer-social a {
        width: 40px !important;
        height: 40px !important;
    }
    
    .footer-social svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    .footer-bottom p {
        font-size: 12px !important;
        padding: 0 15px !important;
    }
}

/* ===== CORRECCIONES ESPECÍFICAS PARA ELEMENTOS ===== */

/* Ocultar elementos problemáticos en móvil */
@media only screen and (max-width: 768px) {
    /* Ocultar flechas problemáticas */
    .arrowHolder img {
        display: none !important;
    }
    
    /* Corregir botones problemáticos */
    .mobileBtn {
        display: none !important;
    }
    
    /* Corregir navegación original */
    nav#mainNav {
        display: none !important;
    }
    
    /* Asegurar que no haya scroll horizontal */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* Corregir contenedores problemáticos */
    .holder960 {
        overflow: hidden !important;
    }
}

/* ===== CORRECCIONES PARA TIPOGRAFÍA MÓVIL ===== */

@media only screen and (max-width: 768px) {
    /* Asegurar legibilidad en móvil */
    body {
        font-size: 18px !important;
        line-height: 1.6 !important;
    }
    
    h1 {
        font-size: 30px !important;
        line-height: 1.3 !important;
    }
    
    h2 {
        font-size: 26px !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }
    
    p {
        font-size: 18px !important;
        line-height: 1.6 !important;
    }
    
    /* Párrafos específicos de secciones */
    .aboutIntro p,
    .galleryIntro p,
    .pricingIntro p,
    .touchIntro p,
    .mapIntro p {
        font-size: 18px !important;
        line-height: 1.6 !important;
    }
    
    /* Párrafos del carousel */
    .card-content p {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }
    
    /* Párrafos del slider */
    .slide-caption p {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
    
    /* Párrafos de redes sociales */
    .clientContent p {
        font-size: 18px !important;
        line-height: 1.6 !important;
    }
    
    /* Párrafos del hero */
    .hero p {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }
}

@media only screen and (max-width: 480px) {
    body {
        font-size: 16px !important;
    }
    
    h1 {
        font-size: 26px !important;
    }
    
    h2 {
        font-size: 22px !important;
    }
    
    h3 {
        font-size: 20px !important;
    }
    
    p {
        font-size: 16px !important;
    }
    
    /* Párrafos específicos de secciones */
    .aboutIntro p,
    .galleryIntro p,
    .pricingIntro p,
    .touchIntro p,
    .mapIntro p {
        font-size: 16px !important;
    }
    
    /* Párrafos del carousel */
    .card-content p {
        font-size: 14px !important;
    }
    
    /* Párrafos del slider */
    .slide-caption p {
        font-size: 15px !important;
    }
    
    /* Párrafos de redes sociales */
    .clientContent p {
        font-size: 16px !important;
    }
    
    /* Párrafos del hero */
    .hero p {
        font-size: 16px !important;
    }
}

/* ===== CORRECCIONES PARA ESPACIADO MÓVIL ===== */

@media only screen and (max-width: 768px) {
    /* Reducir espaciado general */
    .section {
        padding: 40px 0 !important;
    }
    
    /* Ajustar márgenes */
    .aboutIntro,
    .galleryIntro,
    .pricingIntro,
    .touchIntro,
    .mapIntro {
        margin: 30px auto !important;
    }
    
    /* Ajustar padding de contenedores */
    .holder960 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media only screen and (max-width: 480px) {
    .section {
        padding: 30px 0 !important;
    }
    
    .aboutIntro,
    .galleryIntro,
    .pricingIntro,
    .touchIntro,
    .mapIntro {
        margin: 20px auto !important;
    }
    
    .holder960 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}