/* ===== FIX PARA HERO MOBILE ===== */

/* ===== DISTINCIÓN ENTRE SECCIONES ===== */
/* Colores sutiles para distinguir secciones */

/* Hero Section - Fondo gris */
.hero-section {
    background: #EAEAEA;
}

/* Nosotros Section - Fondo gris ligeramente diferente */
.nosotros-section {
    background: #EFF2F5 !important;
}

/* Products Section - Fondo gris claro */
.products-section {
    background: #EAEAEA !important;
}

/* Podcast Section - Fondo gris ligeramente diferente */
.podcast-section {
    background: #EFF2F5 !important;
}

/* Newsletter Section - Fondo gris ligeramente diferente */
.newsletter-section {
    background: #EFF2F5 !important;
}

/* Footer - Mantiene su color azul oscuro */
footer {
    background: linear-gradient(135deg, #222F58 0%, #1a237e 100%) !important;
}

/* ===== ANIMACIONES ===== */
@keyframes particleFloat {
    0% {
        transform: translateY(0px) translateX(0px);
    }
    100% {
        transform: translateY(-100px) translateX(20px);
    }
}

/* Clases para texto responsivo */
.desktop-text {
    display: inline;
}

.mobile-text {
    display: none;
}

/* Imagen de header oculta por defecto */
.hero-content .header-image {
    display: none;
}

/* Ocultar imagen de fallback por defecto */
.hero-content .fallback-image {
    display: none;
}

/* ===== AJUSTE PARA TABLETS Y PANTALLAS MEDIANAS ===== */
/* Mostrar imagen de header en tablets y pantallas medianas */
@media screen and (min-width: 891px) and (max-width: 1279px) {
    .hero-content .titulo .desktop-text {
        display: none !important;
    }
    
    .hero-content .titulo-descripcion .desktop-text {
        display: none !important;
    }
    
    /* Mostrar imagen de header en tablets */
    .hero-content .header-image {
        display: block !important;
        width: 100vw !important;
        height: 80vh !important;
        object-fit: cover !important;
        position: absolute !important;
        left: 0 !important;
        top: 60px !important;
        z-index: 1 !important;
    }
    
    /* Ocultar imagen de fallback en tablets */
    .hero-content .fallback-image {
        display: none !important;
    }
    
    /* Ajustar hero section para tablets */
    .hero-section {
        width: 100vw !important;
        height: 85vh !important;
        overflow: hidden !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Ocultar imágenes originales en tablets */
    .hero-content picture img:not(.header-image):not(.logo) {
        display: none !important;
    }
}

/* ===== AJUSTE PARA TABLETS PEQUEÑAS ===== */
@media screen and (min-width: 891px) and (max-width: 1024px) {
    .hero-content .header-image {
        height: 75vh !important;
        top: 70px !important;
    }
    
    .hero-section {
        height: 80vh !important;
    }
}

/* ===== AJUSTE PARA TABLETS GRANDES ===== */
@media screen and (min-width: 1025px) and (max-width: 1279px) {
    .hero-content .header-image {
        height: 82vh !important;
        top: 50px !important;
    }
    
    .hero-section {
        height: 87vh !important;
    }
}

/* ===== AJUSTE PARA DESKTOP ===== */
/* Mostrar solo imagen en escritorio, ocultar textos */
@media screen and (min-width: 1280px) {
    .hero-content .titulo .desktop-text {
        display: none !important;
    }
    
    .hero-content .titulo-descripcion .desktop-text {
        display: none !important;
    }
    
    /* Mostrar imagen de header en escritorio */
    .hero-content .header-image {
        display: block !important;
        width: 100vw !important; /* Usar viewport width completo */
        height: 85vh !important; /* Hacer la imagen más alta verticalmente */
        object-fit: cover !important;
        position: absolute !important;
        left: 0 !important;
        top: 40px !important; /* Bajar la imagen 60px desde arriba */
        z-index: 1 !important;
    }
    
    /* Ocultar imagen de fallback en desktop */
    .hero-content .fallback-image {
        display: none !important;
    }
    
    /* Asegurar que el hero section ocupe todo el ancho */
    .hero-section {
        width: 100vw !important;
        height: 90vh !important; /* Hacer el contenedor del mismo tamaño que la imagen */
        overflow: hidden !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Ocultar imágenes originales en escritorio */
    .hero-content picture img:not(.header-image):not(.logo) {
        display: none !important;
    }
}

/* ===== AJUSTE PARA PANTALLAS MUY GRANDES ===== */
@media screen and (min-width: 1440px) {
    .hero-content .header-image {
        height: 88vh !important;
        top: 35px !important;
    }
    
    .hero-section {
        height: 92vh !important;
    }
}

/* ===== AJUSTE PARA PANTALLAS ULTRA WIDE ===== */
@media screen and (min-width: 1920px) {
    .hero-content .header-image {
        height: 90vh !important;
        top: 30px !important;
    }
    
    .hero-section {
        height: 94vh !important;
    }
}

/* Media query para móvil */
@media screen and (max-width: 890px) {
    /* Hero Section Mobile - COMPACTO */
    .hero-section {
        height: 87vh !important;
        margin-top: 60px !important;
        background: linear-gradient(135deg, #222F58 0%, #1a237e 50%, #0d47a1 100%) !important;
        position: relative !important;
        overflow: hidden !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Partículas flotantes */
    .hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: 
            radial-gradient(3px 3px at 20px 30px, rgba(255,255,255,0.3), transparent),
            radial-gradient(3px 3px at 40px 70px, rgba(255,255,255,0.25), transparent),
            radial-gradient(2px 2px at 90px 40px, rgba(255,255,255,0.4), transparent),
            radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.25), transparent),
            radial-gradient(3px 3px at 160px 30px, rgba(255,255,255,0.3), transparent),
            radial-gradient(2px 2px at 200px 60px, rgba(255,255,255,0.25), transparent),
            radial-gradient(3px 3px at 240px 20px, rgba(255,255,255,0.4), transparent),
            radial-gradient(2px 2px at 280px 70px, rgba(255,255,255,0.3), transparent),
            radial-gradient(3px 3px at 320px 40px, rgba(255,255,255,0.25), transparent),
            radial-gradient(2px 2px at 360px 80px, rgba(255,255,255,0.4), transparent);
        background-repeat: repeat;
        background-size: 400px 100px;
        animation: particleFloat 20s linear infinite;
        z-index: 0;
        pointer-events: none;
    }
    
    .hero-section::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: 
            radial-gradient(2px 2px at 50px 20px, rgba(255,255,255,0.25), transparent),
            radial-gradient(3px 3px at 100px 50px, rgba(255,255,255,0.3), transparent),
            radial-gradient(2px 2px at 150px 90px, rgba(255,255,255,0.4), transparent),
            radial-gradient(3px 3px at 200px 10px, rgba(255,255,255,0.25), transparent),
            radial-gradient(2px 2px at 250px 60px, rgba(255,255,255,0.3), transparent),
            radial-gradient(3px 3px at 300px 30px, rgba(255,255,255,0.25), transparent),
            radial-gradient(2px 2px at 350px 70px, rgba(255,255,255,0.4), transparent),
            radial-gradient(2px 2px at 380px 40px, rgba(255,255,255,0.25), transparent);
        background-repeat: repeat;
        background-size: 400px 100px;
        animation: particleFloat 25s linear infinite reverse;
        z-index: 0;
        pointer-events: none;
    }
    
    /* Contenido del Hero más compacto */
    .hero-content {
        justify-content: center !important;
        align-items: center !important;
        padding-top: 4rem !important;
        padding-bottom: 8rem !important;
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }
    
    /* Ocultar texto desktop, mostrar texto mobile */
    .desktop-text {
        display: none !important;
    }
    
    .mobile-text {
        display: inline !important;
        word-wrap: normal !important;
        hyphens: none !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }
    
    /* Logo más pequeño y arriba */
    .hero-content .logo {
        width: 100px !important;
        margin-bottom: 2rem !important;
        order: 1 !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        align-self: center !important;
    }
    
    /* Título móvil elegante y minimalista */
    .hero-content .titulo {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        color: white !important;
        font-size: 3.2rem !important;
        font-weight: 800 !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 600px !important;
        line-height: 1.1 !important;
        margin-bottom: 3.5rem !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
        z-index: 3 !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        order: 2 !important;
        padding: 0 1rem !important;
    }
    
    /* Descripción móvil - VISIBLE en iPad vertical */
    .hero-content .titulo-descripcion {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        color: white !important;
        font-size: 1.1rem !important;
        font-weight: 400 !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 500px !important;
        line-height: 1 !important;
        margin-bottom: 2rem !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
        z-index: 3 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        order: 3 !important;
        padding: 0 1rem !important;
        opacity: 0.9 !important;
    }
    
    /* Botón más arriba */
    .hero-content .hero-text {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        padding: 0 !important;
        text-align: center !important;
        z-index: 3 !important;
        margin-top: 0 !important;
        order: 4 !important;
        margin-bottom: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    .header-button {
        padding: 20px 40px !important;
        font-size: 1.3rem !important;
        font-weight: 600 !important;
        border: none !important;
        border-radius: 50px !important;
        background: linear-gradient(135deg, #222F58 0%, #1a237e 100%) !important;
        color: white !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 8px 25px rgba(34, 47, 88, 0.4) !important;
        position: relative !important;
        overflow: hidden !important;
        z-index: 3 !important;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        min-height: 50px !important;
        min-width: 50px !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    .header-button:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 12px 35px rgba(34, 47, 88, 0.6) !important;
        background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%) !important;
    }
    
    .header-button:active {
        transform: translateY(0) !important;
    }
    
    /* Ocultar imágenes de fondo en móvil */
    .hero-content img:not(.logo) {
        display: none !important;
    }
    
    /* Ocultar elementos del hero desktop en móvil */
    .oswaldo-img {
        display: none !important;
    }
    
    /* Asegurar que el contenido del hero esté visible */
    .hero-content > * {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Forzar el layout del hero móvil */
    .hero-section {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Asegurar que las imágenes de fondo no interfieran */
    .hero-content picture img:not(.logo) {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* Mejorar el centrado del contenido */
    .hero-content picture {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Asegurar que todos los elementos estén centrados */
    .hero-content .logo,
    .hero-content .titulo,
    .hero-content .titulo-descripcion,
    .hero-content .hero-text {
        align-self: center !important;
        justify-self: center !important;
        text-align: center !important;
    }
    
    .hero-content .hero-text {
        width: 100% !important;
    }
}

/* Ajustes para pantallas medianas */
@media screen and (min-width: 481px) and (max-width: 600px) {
    .hero-section {
        height: 100vh !important;
    }
    
    .titulo {
        font-size: 2.8rem !important;
        max-width: 500px !important;
        line-height: 1.1 !important;
        margin-bottom: 2.5rem !important;
    }
    
    .titulo-descripcion {
        display: block !important;
        font-size: 1.1rem !important;
        max-width: 500px !important;
        line-height: 1.2 !important;
        margin-bottom: 2rem !important;
        color: white !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 1rem !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
        opacity: 0.9 !important;
    }
    
    .header-button {
        padding: 20px 40px !important;
        font-size: 1.2rem !important;
    }
    
    .hero-content .logo {
        width: 140px !important;
        margin-bottom: 2rem !important;
    }
}

/* Ajustes específicos para iPad vertical */
@media screen and (min-width: 601px) and (max-width: 890px) {
    .hero-content .titulo {
        font-size: 3.8rem !important;
        max-width: 700px !important;
        line-height: 1.05 !important;
        margin-bottom: 3rem !important;
    }
    
    .hero-content .titulo-descripcion {
        font-size: 1.3rem !important;
        max-width: 600px !important;
        line-height: 1 !important;
        margin-bottom: 2.5rem !important;
        opacity: 0.95 !important;
    }
    
    .hero-content .logo {
        width: 120px !important;
        margin-bottom: 2.5rem !important;
    }
    
    .header-button {
        padding: 22px 44px !important;
        font-size: 1.4rem !important;
        min-height: 55px !important;
    }
    
    .hero-content {
        padding-top: 5rem !important;
        padding-bottom: 6rem !important;
    }
}