/* ===== FORZAR LAYOUT HORIZONTAL DEL HEADER EN MÓVILES ===== */

/* RESET COMPLETO PARA MÓVILES */
@media (max-width: 768px) {
    /* RESET DEL HEADER */
    header {
        all: unset !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.8rem !important;
        padding: 0.8rem 0.6rem !important;
        background: rgba(255, 255, 255, 0.85) !important;
        position: sticky !important;
        top: 0 !important;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15) !important;
        z-index: 100 !important;
        backdrop-filter: blur(8px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-height: auto !important;
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
    
    /* RESET DEL TÍTULO */
    header h1 {
        all: unset !important;
        display: block !important;
        font-family: 'Designer', sans-serif !important;
        font-size: clamp(1.2rem, 4vw, 1.8rem) !important;
        font-weight: 600 !important;
        color: #2c3e50 !important;
        text-align: center !important;
        flex: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        order: 1 !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
        max-width: none !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
    
    /* RESET DE LOS LOGOS */
    header .logo {
        all: unset !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        width: clamp(3rem, 10vw, 4rem) !important;
        height: clamp(3rem, 10vw, 4rem) !important;
        margin: 0 !important;
        padding: 0 !important;
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
    
    header .logo:first-child {
        order: 0 !important;
    }
    
    header .logo:last-child {
        order: 2 !important;
    }
    
    /* RESET DE LOS ESCUDOS */
    header .escudo {
        all: unset !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* OPTIMIZACIONES ESPECÍFICAS PARA MÓVILES PEQUEÑOS */
@media (max-width: 480px) {
    header {
        gap: 0.5rem !important;
        padding: 0.7rem 0.4rem !important;
    }
    
    header h1 {
        font-size: clamp(1.1rem, 3.5vw, 1.5rem) !important;
    }
    
    header .logo {
        width: clamp(2.5rem, 8vw, 3.5rem) !important;
        height: clamp(2.5rem, 8vw, 3.5rem) !important;
    }
}

/* OPTIMIZACIONES PARA MÓVILES MUY PEQUEÑOS */
@media (max-width: 360px) {
    header {
        gap: 0.4rem !important;
        padding: 0.6rem 0.3rem !important;
    }
    
    header h1 {
        font-size: clamp(1rem, 3vw, 1.3rem) !important;
    }
    
    header .logo {
        width: clamp(2.2rem, 7vw, 3rem) !important;
        height: clamp(2.2rem, 7vw, 3rem) !important;
    }
}

/* FORZAR LAYOUT HORIZONTAL EN TODOS LOS CASOS */
@media (max-width: 768px) {
    header {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
    
    header h1 {
        order: 1 !important;
        flex: 1 !important;
    }
    
    header .logo:first-child {
        order: 0 !important;
        flex-shrink: 0 !important;
    }
    
    header .logo:last-child {
        order: 2 !important;
        flex-shrink: 0 !important;
    }
}

/* INVALIDAR CUALQUIER ESTILO QUE PUEDA INTERFERIR */
@media (max-width: 768px) {
    header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    header h1 {
        display: block !important;
        flex: 1 !important;
        order: 1 !important;
    }
    
    header .logo {
        display: flex !important;
        flex-shrink: 0 !important;
    }
    
    header .escudo {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* ELIMINAR TODAS LAS TRANSICIONES Y ANIMACIONES */
@media (max-width: 768px) {
    header,
    header h1,
    header .logo,
    header .escudo {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        will-change: auto !important;
    }
}