/* ========================================
   SOLUCIÓN RESPONSIVE DEFINITIVA
   Corrige TODOS los problemas móviles
======================================== */

/* Reset y base responsive */
* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ========================================
   1. HEADER MÓVIL - SOLUCIONADO
======================================== */
@media screen and (max-width: 768px) {
    #header {
        min-height: 100vh !important;
        padding: 50px 0 20px 0 !important; /* Reducido el padding-top */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #header .inner {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px !important;
        text-align: center !important;
    }
    
    #header .inner header {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        text-align: center !important;
    }
    
    /* Logos responsive */
    .logo-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        margin-bottom: 20px !important;
    }
    
    .logo {
        width: 100px !important;
        height: auto !important;
        max-width: 100px !important;
    }
    
    /* Título responsive */
    #header .inner header h1 {
        font-size: 1.8em !important;
        line-height: 1.2 !important;
        margin: 20px 0 !important;
        padding: 0 15px !important;
        word-wrap: break-word !important;
        text-align: center !important;
        color: #000 !important;
        font-weight: bold !important;
    }
    
    /* Descripción responsive */
    #header .inner header p {
        font-size: 1em !important;
        line-height: 1.4 !important;
        margin: 20px 0 !important;
        padding: 0 20px !important;
        text-align: center !important;
        color: #111 !important;
        font-weight: 500 !important;
    }
    
    /* Botón principal responsive */
    #header footer {
        margin-top: 30px !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    .boton-principal {
        font-size: 1em !important;
        padding: 15px 25px !important;
        border-radius: 30px !important;
        display: inline-block !important;
        margin: 0 auto !important;
        text-align: center !important;
        max-width: 280px !important;
        width: auto !important;
    }
}

/* ========================================
   2. NAVEGACIÓN RESPONSIVE - MENÚ MÓVIL NATIVO
======================================== */

/* Ocultar navegación desktop en móvil */
@media screen and (max-width: 960px) {
    #nav {
        display: none !important;
    }
}

/* ========================================
   2.1. MEJORAS AL MENÚ MÓVIL NATIVO
======================================== */
@media screen and (max-width: 960px) {
    /* Estilo para el botón hamburguesa generado por JS */
    #navButton {
        height: 44px !important;
        z-index: 10001 !important;
    }
    
    #navButton .toggle {
        height: 44px !important;
        width: 100% !important;
    }
    
    #navButton .toggle:before {
        font-size: 14px !important;
        height: 30px !important;
        line-height: 30px !important;
        width: 80px !important;
        background: rgba(26, 79, 255, 0.95) !important;
        border-radius: 0 0 0.35em 0.35em !important;
        color: white !important;
    }
    
    /* Panel de navegación móvil mejorado */
    #navPanel {
        background: linear-gradient(135deg, rgba(26, 79, 255, 0.98) 0%, rgba(74, 144, 226, 0.98) 100%) !important;
        backdrop-filter: blur(20px) !important;
    }
    
    #navPanel:before {
        background: none !important;
        background-image: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.1) 0%, transparent 50%) !important;
        background-size: 100px 100px !important;
    }
    
    /* Enlaces del menú móvil mejorados */
    #navPanel .link {
        padding: 18px 25px !important;
        margin: 5px 15px !important;
        border-radius: 12px !important;
        border: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        transition: all 0.3s ease !important;
        font-size: 1.1em !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }
    
    #navPanel .link:hover {
        background: rgba(255, 255, 255, 0.15) !important;
        transform: translateX(10px) !important;
        color: #fff !important;
    }
    
    /* Enlaces principales (depth-0) */
    #navPanel .link.depth-0 {
        color: #fff !important;
        font-weight: 600 !important;
        font-size: 1.2em !important;
        margin: 8px 15px !important;
        padding: 20px 25px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-left: 4px solid rgba(255, 255, 255, 0.8) !important;
    }
    
    #navPanel .link.depth-0:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        border-left-color: #fff !important;
    }
    
    /* Scrollbar personalizado */
    #navPanel::-webkit-scrollbar {
        width: 6px;
    }
    
    #navPanel::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
    }
    
    #navPanel::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 3px;
    }
}

/* ========================================
   2.2. AJUSTES ESPECÍFICOS PARA PANTALLAS MUY PEQUEÑAS
======================================== */
@media screen and (max-width: 480px) {
    #navPanel .link {
        padding: 16px 20px !important;
        margin: 4px 10px !important;
        font-size: 1em !important;
    }
    
    #navPanel .link.depth-0 {
        padding: 18px 20px !important;
        margin: 6px 10px !important;
        font-size: 1.1em !important;
    }
}

/* ========================================
   3. CAROUSEL MÓVIL - HORIZONTAL CON CONTROLES
======================================== */
@media screen and (max-width: 768px) {
    .carousel {
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    /* Carousel horizontal en móvil con scroll */
    .carousel .reel {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 20px 15px !important;
        gap: 15px !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* Internet Explorer 10+ */
    }
    
    /* Ocultar scrollbar en webkit */
    .carousel .reel::-webkit-scrollbar {
        display: none !important;
    }
    
    .carousel .reel article {
        flex: 0 0 280px !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        scroll-snap-align: start !important;
        background: white !important;
        border-radius: 15px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Controles de navegación móvil restaurados */
    /* Controles de navegación móvil - ESTILO ORIGINAL DESKTOP */
    .carousel .forward, 
    .carousel .backward {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        width: 6em !important;
        height: 12em !important;
        margin-top: -6em !important;
        z-index: 10 !important;
        cursor: pointer !important;
    }
    
    /* Botón siguiente (forward) - IGUAL QUE DESKTOP */
    .carousel .forward {
        right: 0 !important;
    }
    
    .carousel .forward:before {
        content: '' !important;
        display: block !important;
        width: 6em !important;
        height: 6em !important;
        border-radius: 100% !important;
        background-color: rgba(72, 57, 73, 0.5) !important;
        position: absolute !important;
        top: 50% !important;
        right: -3em !important;
        margin-top: -3em !important;
        transition: background-color 0.35s ease-in-out !important;
        backface-visibility: hidden !important;
    }
    
    .carousel .forward:after {
        content: '' !important;
        width: 3em !important;
        height: 3em !important;
        position: absolute !important;
        top: 50% !important;
        right: -0.25em !important;
        margin: -1.5em 0 0 0 !important;
        background: url("images/arrow.svg") no-repeat center center !important;
    }
    
    .carousel .forward:hover:before {
        background-color: rgba(239, 131, 118, 0.75) !important;
    }
    
    /* Botón anterior (backward) - IGUAL QUE DESKTOP */
    .carousel .backward {
        left: 0 !important;
    }
    
    .carousel .backward:before {
        content: '' !important;
        display: block !important;
        width: 6em !important;
        height: 6em !important;
        border-radius: 100% !important;
        background-color: rgba(72, 57, 73, 0.5) !important;
        position: absolute !important;
        top: 50% !important;
        left: -3em !important;
        margin-top: -3em !important;
        transition: background-color 0.35s ease-in-out !important;
        backface-visibility: hidden !important;
    }
    
    .carousel .backward:after {
        content: '' !important;
        width: 3em !important;
        height: 3em !important;
        position: absolute !important;
        top: 50% !important;
        left: -0.25em !important;
        margin: -1.5em 0 0 0 !important;
        background: url("images/arrow.svg") no-repeat center center !important;
        transform: scaleX(-1) !important;
    }
    
    .carousel .backward:hover:before {
        background-color: rgba(239, 131, 118, 0.75) !important;
    }
    
    /* Artículos del carousel */
    .carousel .reel article img {
        width: 100% !important;
        height: 180px !important;
        object-fit: contain !important;
        background: white !important;
        padding: 10px !important;
        border-radius: 15px 15px 0 0 !important;
    }
    
    .carousel .reel article header h3 {
        font-size: 1.1em !important;
        padding: 0 15px !important;
        margin: 15px 0 10px 0 !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }
    
    .carousel .reel article p {
        font-size: 0.9em !important;
        padding: 0 15px !important;
        margin: 10px 0 !important;
        text-align: center !important;
        line-height: 1.4 !important;
    }
    
    .carousel .reel article .button {
        margin: 15px !important;
        padding: 10px 20px !important;
        font-size: 0.9em !important;
        border-radius: 20px !important;
        display: block !important;
        text-align: center !important;
        width: calc(100% - 30px) !important;
    }
    
    /* Indicador de deslizamiento */
    .carousel::before {
        content: "👈 Desliza para ver más cursos" !important;
        position: absolute !important;
        top: -5px !important;
        right: 50px !important;
        font-size: 11px !important;
        color: rgba(26, 79, 255, 0.8) !important;
        background: rgba(255,255,255,0.95) !important;
        padding: 4px 8px !important;
        border-radius: 12px !important;
        z-index: 5 !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    }
}

/* ========================================
   4. FOOTER MÓVIL - BOTONES ARREGLADOS
======================================== */
@media screen and (max-width: 768px) {
    .copyright {
        position: relative !important;
        padding: 20px !important;
    }
    
    /* Ocultar botones desktop en móvil */
    #btn-consultar-ahora,
    #btn-volver-inicio {
        display: none !important;
    }
    
    /* Mostrar botones móviles */
    .mobile-buttons-container {
        display: block !important;
        text-align: center !important;
        margin: 20px 0 !important;
        padding: 0 20px !important;
    }
    
    #btn-consultar-ahora-mobile,
    #btn-volver-inicio-mobile {
        display: block !important;
        width: 90% !important;
        max-width: 280px !important;
        margin: 10px auto !important;
        padding: 12px 20px !important;
        border-radius: 25px !important;
        font-size: 1em !important;
        text-align: center !important;
    }
    
    /* Botón de admin (tuerca) reposicionado */
    .btn-login-footer.icono-tuerca {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        display: inline-block !important;
        margin: 10px auto !important;
        text-align: center !important;
    }
    
    /* Iconos de redes sociales responsive */
    .icons {
        text-align: center !important;
        margin: 20px 0 !important;
    }
    
    .icons li {
        display: inline-block !important;
        margin: 0 10px !important;
    }
    
    /* WhatsApp button responsive */
    .botton {
        display: block !important;
        text-align: center !important;
        margin: 20px auto !important;
        width: fit-content !important;
    }
    
    /* PDF logos responsive */
    .logo-pdf-container {
        display: block !important;
        margin: 20px auto !important;
        text-align: center !important;
    }
}

/* ========================================
   5. SECCIONES GENERALES RESPONSIVE
======================================== */
@media screen and (max-width: 768px) {
    .wrapper {
        padding: 20px 0 !important;
    }
    
    .container {
        padding: 0 20px !important;
        max-width: 100% !important;
    }
    
    /* Formaciones responsive */
    .formacion-section {
        padding: 20px 0 !important;
    }
    
    .formacion-header img {
        height: 250px !important;
        margin-bottom: 20px !important;
    }
    
    .formacion-header h2 {
        font-size: 1.8em !important;
        padding: 0 20px !important;
        text-align: center !important;
    }
    
    .formacion-header p {
        font-size: 1em !important;
        padding: 0 20px !important;
        text-align: center !important;
    }
    
    /* Features section responsive */
    #features .row {
        flex-direction: column !important;
    }
    
    #features article {
        width: 100% !important;
        margin-bottom: 30px !important;
        padding: 0 20px !important;
    }
    
    #img_features {
        height: 200px !important;
        width: 100% !important;
        object-fit: cover !important;
    }
    
    /* Formulario de consulta responsive */
    #formConsulta {
        padding: 25px 20px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 20px !important;
        margin: 20px 10px !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    }
    
    #formConsulta .row {
        gap: 20px !important;
        margin-bottom: 0 !important;
    }
    
    #formConsulta input,
    #formConsulta textarea {
        width: 100% !important;
        padding: 15px !important;
        font-size: 16px !important; /* Evita zoom en iOS */
        border: 2px solid #e1e5e9 !important;
        border-radius: 12px !important;
        transition: border-color 0.3s ease !important;
        background: #fff !important;
    }
    
    #formConsulta input:focus,
    #formConsulta textarea:focus {
        border-color: #25d366 !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1) !important;
    }
    
    #formConsulta button {
        width: auto !important;
        max-width: 280px !important;
        min-width: 200px !important;
        margin: 20px auto !important;
        padding: 15px 25px !important;
        font-size: 1.1em !important;
        border-radius: 30px !important;
        display: block !important;
        background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
        color: white !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3) !important;
        transition: all 0.3s ease !important;
        text-align: center !important;
        font-weight: 600 !important;
    }
    
    #formConsulta button:hover {
        background: linear-gradient(135deg, #128c7e 0%, #075e54 100%) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4) !important;
    }
    
    /* Imagen WhatsApp en el botón del formulario */
    #formConsulta button img {
        height: 24px !important;
        width: 24px !important;
        margin-right: 10px !important;
        vertical-align: middle !important;
        filter: brightness(1.1) !important;
    }
    
    /* Texto del botón más espaciado */
    #formConsulta button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }
}

/* ========================================
   6. PANTALLAS MUY PEQUEÑAS (320px)
======================================== */
@media screen and (max-width: 480px) {
    #header .inner header h1 {
        font-size: 1.5em !important;
        padding: 0 10px !important;
    }
    
    #header .inner header p {
        font-size: 0.9em !important;
        padding: 0 15px !important;
    }
    
    .logo {
        width: 80px !important;
    }
    
    .carousel .reel article {
        flex: 0 0 250px !important;
        width: 250px !important;
        min-width: 250px !important;
    }
    
    .formacion-header img {
        height: 200px !important;
    }
    
    .container {
        padding: 0 15px !important;
    }
}

/* ========================================
   7. MEJORAS ADICIONALES DE UX
======================================== */
@media screen and (max-width: 768px) {
    /* Espaciado mejorado */
    hr {
        margin: 30px 0 !important;
    }
    
    /* Texto más legible */
    p {
        line-height: 1.6 !important;
    }
    
    /* Botones más accesibles */
    .button, .boton-principal {
        min-height: 44px !important; /* Mínimo recomendado para touch */
        cursor: pointer !important;
    }
    
    /* Imágenes responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Enlaces más fáciles de tocar */
    a {
        min-height: 44px !important;
        display: inline-block !important;
    }
}

/* ========================================
   8. MODO LANDSCAPE EN MÓVIL
======================================== */
@media screen and (max-width: 900px) and (orientation: landscape) {
    #header {
        min-height: 80vh !important;
    }
    
    #header .inner header h1 {
        font-size: 1.6em !important;
    }
    
    #header .inner header p {
        font-size: 0.95em !important;
    }
}

/* ========================================
   9. CORRECCIONES ESPECÍFICAS FOOTER MÓVIL
======================================== */
@media screen and (max-width: 768px) {
    /* Footer principal responsive */
    #footer {
        padding: 20px 0 !important;
    }
    
    #footer .container {
        padding: 0 15px !important;
    }
    
    /* Sección de contacto reorganizada */
    .contact {
        text-align: center !important;
        padding: 20px 0 !important;
    }
    
    .contact h2 {
        font-size: 1.5em !important;
        margin-bottom: 15px !important;
    }
    
    .contact p {
        font-size: 1em !important;
        margin-bottom: 20px !important;
    }
    
    /* WhatsApp animado del footer */
    .whatsapp-animado {
        height: 45px !important;
        width: auto !important;
    }
    
    /* WhatsApp del formulario de contacto */
    .whatsapp-logo {
        height: 36px !important;
    }
    
    /* Botón de WhatsApp del formulario más pequeño en móvil */
    #formConsulta button.button.primary.large {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.95em !important;
    }
    
    #formConsulta button img {
        height: 38px !important;
        margin-right: 8px !important;
    }
    
    /* Copyright y elementos finales */
    .copyright {
        text-align: center !important;
        padding: 20px 15px !important;
        position: relative !important;
    }
    
    /* Reorganizar elementos del copyright */
    .copyright > * {
        position: relative !important;
        margin: 10px auto !important;
    }
    
    /* Botón admin (tuerca) centrado */
    .btn-login-footer.icono-tuerca {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        display: block !important;
        margin: 15px auto !important;
        text-align: center !important;
        width: 40px !important;
        height: 40px !important;
    }
    
    /* PDF logos contenedor responsive */
    .logo-pdf-container {
        display: block !important;
        margin: 20px auto !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .logo-pdf-container img {
        max-height: 60px !important;
        width: auto !important;
    }
    
    /* Footer final responsive */
    #footer footer {
        padding: 15px !important;
        font-size: 0.9em !important;
        line-height: 1.4 !important;
    }
}