/* HXR Custom overrides */

/* Logo "PRODUCCIONES AUDIOVISUALES" en header */
a.logo {
    filter: hue-rotate(220deg) saturate(6) brightness(1.0);
    background-color: transparent !important;
}

/* Email imagen en footer */
.caja-footer address img {
    filter: hue-rotate(189deg) saturate(1.4) brightness(1.1);
}

/* Fix dropdown: z-index alto para que no quede tapado por el slider */
header {
    overflow: visible !important;
    position: relative !important;
    z-index: 100 !important;
}
header li ul {
    z-index: 200 !important;
    overflow: visible !important;
}
.hxr-slider {
    z-index: 1 !important;
}

/* Centrar nav interno de servicios: 5 items arriba + 4 abajo */
.secciones nav ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 1000px !important;
}
.secciones nav ul li {
    flex: 0 0 18% !important;
    text-align: center !important;
}


/* Dropdown altura insuficiente — aumentar de 400px a 500px para 9 items */
header li:hover ul {
    height: 450px !important;
    overflow: visible !important;
}
/* Anular el override de 250px que cortaba el desplegable */
header li:hover:nth-child(3) ul {
    height: 450px !important;
}

/* Evitar que "3D & Motion Graphics" rompa línea */
.secciones nav ul li:last-child {
    white-space: nowrap !important;
}

/* ══════════════════════════════════
   RESPONSIVE GENERAL
══════════════════════════════════ */

/* Tablet (≤768px) */
@media (max-width: 768px) {

    /* Header: logo y nav apilados */
    header {
        text-align: center !important;
    }
    a.logo {
        display: block !important;
        margin: 0 auto !important;
    }
    header nav {
        width: 100% !important;
    }
    header li, header li a {
        height: auto !important;
        width: 33.33% !important;
    }
    header li:hover ul {
        width: 100% !important;
        left: 0 !important;
        height: auto !important;
    }
    header li:hover:nth-child(3) ul {
        height: auto !important;
    }
    header li ul li {
        height: auto !important;
    }

    /* Secciones nav: wrap libre */
    .secciones nav ul {
        max-width: 100% !important;
    }
    .secciones nav ul li {
        flex: 0 0 30% !important;
    }

    /* Fila negra y blanca: columna */
    .fila-negra article,
    .fila-blanca article {
        width: 90% !important;
        display: block !important;
        margin: 0 auto 20px auto !important;
    }

    /* Footer columnas apiladas */
    .caja-footer {
        width: 90% !important;
        display: block !important;
        margin: 0 auto 20px auto !important;
    }

    /* Slogan */
    .slogan h1 {
        font-size: 28px !important;
    }
}

/* Móvil (≤480px) */
@media (max-width: 480px) {

    header li, header li a {
        width: 50% !important;
    }

    .secciones nav ul li {
        flex: 0 0 45% !important;
    }

    .slogan h1 {
        font-size: 22px !important;
    }

    /* Ocultar decoración en móvil */
    .cont-social-icon.app {
        display: none !important;
    }
}