/* Estilos responsive para index */

/* ==========================================
   DESKTOP: Asegurar que los slides funcionen
   ========================================== */
@media (min-width: 1025px) {
    .slide {
        display: none !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        width: 100% !important;
        opacity: 0 !important;
        transform: translateY(20px) !important;
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 1 !important;
    }
    
    .slide.active {
        display: flex !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        z-index: 10 !important;
    }
}

/* ==========================================
   MÓVIL Y TABLET (≤1024px)
   ========================================== */
@media (max-width: 1024px) {
    /* Ocultar logo en móvil/tablet */
    .logo-container {
        display: none !important;
    }
    
    /* Ocultar dots de navegación */
    .nav-dot,
    nav[role="tablist"] {
        display: none !important;
    }
    
    /* Ocultar controles de navegación inferior */
    .fixed.bottom-8 {
        display: none !important;
    }
    
    /* Permitir scroll en el body */
    body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
    }
    
    /* Cambiar main a layout de bloque */
    main {
        height: auto !important;
        display: block !important;
    }
    
    /* Mostrar todos los slides en columna */
    .slide {
        display: flex !important;
        position: relative !important;
        height: auto !important;
        min-height: 100vh !important;
        opacity: 1 !important;
        transform: none !important;
        padding: 80px 16px 40px !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* Ajustar contenido de slides */
    .slide > div {
        max-width: 100% !important;
    }
    
    /* Reducir tamaños de texto en móvil */
    .slide h1 {
        font-size: 2.5rem !important;
    }
    .slide h2 {
        font-size: 2rem !important;
    }
    
    /* Ocultar progress bar en móvil */
    #progressBar {
        display: none !important;
    }
    
    /* Ajustar selector de idioma */
    .language-selector {
        top: 16px !important;
        left: 16px !important;
    }
    
    /* WhatsApp button más pequeño */
    .fixed.bottom-24 {
        bottom: 20px !important;
        right: 20px !important;
    }
    .fixed.bottom-24 > div:last-child {
        width: 50px !important;
        height: 50px !important;
    }
}

/* ==========================================
   SOCIAL MEDIA ICONS - RESPONSIVE
   ========================================== */
@media (max-width: 640px) {
    footer .flex.items-center.justify-center.gap-4 {
        gap: 0.75rem !important;
    }
    
    footer a[href*="instagram"],
    footer a[href*="facebook"],
    footer a[href*="youtube"] {
        width: 44px !important;
        height: 44px !important;
    }
    
    footer a svg {
        width: 22px !important;
        height: 22px !important;
    }
}

@media (max-width: 1024px) {
    footer .flex.items-center.justify-center.gap-4 {
        margin-top: 1rem;
    }
}

/* ==========================================
   SOCIAL MEDIA ICONS - SLIDE 1 (COVER)
   ========================================== */
@media (max-width: 1024px) {
    #slide-0 .flex.items-center.justify-center.gap-4 {
        margin-top: 1.5rem;
    }
}

@media (max-width: 640px) {
    #slide-0 footer {
        bottom: 1.5rem !important;
        font-size: 0.75rem !important;
    }
    
    #slide-0 .flex.items-center.justify-center.gap-4 a {
        width: 44px !important;
        height: 44px !important;
    }
    
    #slide-0 .flex.items-center.justify-center.gap-4 a svg {
        width: 22px !important;
        height: 22px !important;
    }
    
    #slide-0 .flex.items-center.justify-center.gap-4 {
        margin-top: 1rem !important;
        gap: 0.75rem !important;
    }
}

@media (max-width: 375px) {
    #slide-0 footer {
        bottom: 1rem !important;
    }
}