/*
═══════════════════════════════════════════════════════════════════════════════
    HEADER CUSTOM - Dispositivo de Header Personalizado de Stewie
    
    Header con fondo azul oscuro, logo centrado y menú distribuido
═══════════════════════════════════════════════════════════════════════════════
*/

/* ============================================================================
   FONDO Y ESTRUCTURA DEL HEADER
   ============================================================================ */

.th-header.header-layout3 .menu-area {
    background-color: #2B4A6F !important;
    padding: 15px 0 !important;
}

.th-header.header-layout3 .sticky-wrapper {
    background-color: #2B4A6F !important;
}

/* Remover fondo transparente */
.th-header.header-absolute {
    position: relative !important;
    background-color: #2B4A6F !important;
}

/* ============================================================================
   DISTRIBUCIÓN DEL MENÚ (Logo centrado)
   ============================================================================ */

.th-header.header-layout3 .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Menú izquierdo */
.th-header.header-layout3 .row>.col-auto:nth-child(1) {
    flex: 1;
    max-width: 30%;
    display: flex;
    justify-content: flex-start;
}

/* Logo central */
.th-header.header-layout3 .row>.col-auto:nth-child(2) {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
}

/* Menú derecho */
.th-header.header-layout3 .row>.col-auto:nth-child(3) {
    flex: 1;
    max-width: 30%;
    display: flex;
    justify-content: flex-end;
}

/* Botón derecho */
.th-header.header-layout3 .row>.col-auto:nth-child(4) {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* ============================================================================
   ESTILOS DEL MENÚ
   ============================================================================ */

.th-header.header-layout3 .main-menu>ul {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0;
}

.th-header.header-layout3 .main-menu>ul>li {
    margin: 0;
    padding: 0;
}

.th-header.header-layout3 .main-menu>ul>li>a {
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 10px 12px !important;
    white-space: nowrap;
}

.th-header.header-layout3 .main-menu>ul>li>a:hover {
    color: #FFD700 !important;
}

/* Flechas de dropdown */
.th-header.header-layout3 .main-menu>ul>li.menu-item-has-children>a::after {
    content: "▼" !important;
    margin-left: 5px;
    font-size: 9px;
}

/* ============================================================================
   BOTÓN CONTÁCTANOS
   ============================================================================ */

.header-contact-btn {
    background-color: transparent !important;
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important;
    padding: 8px 20px !important;
    border-radius: 25px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap;
    text-decoration: none !important;
}

.header-contact-btn:hover {
    background-color: #FFFFFF !important;
    color: #2B4A6F !important;
}

.header-contact-btn i {
    font-size: 13px;
}

/* ============================================================================
   OCULTAR ELEMENTOS NO NECESARIOS
   ============================================================================ */

.th-header.header-layout3 .header-button {
    display: none !important;
}

/* Ocultar el botón del menú hamburguesa en desktop */
.th-header.header-layout3 .simple-icon.sideMenuToggler {
    display: none !important;
}

/* Ajustar el contenedor del botón de contacto */
.th-header.header-layout3 .header-right-button {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ============================================================================
   RESPONSIVE - MÓVIL Y TABLET
   ============================================================================ */

@media (max-width: 1199px) {

    /* Ocultar menús de navegación en móvil/tablet */
    .th-header.header-layout3 .row>.col-auto:nth-child(1),
    .th-header.header-layout3 .row>.col-auto:nth-child(3) {
        display: none !important;
    }

    /* Reorganizar elementos del header en móvil */
    .th-header.header-layout3 .container .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 15px !important;
    }

    /* Logo - centrado */
    .th-header.header-layout3 .row>.col-auto:nth-child(2) {
        flex: 0 0 auto !important;
        text-align: center !important;
    }

    .th-header.header-layout3 .header-logo {
        text-align: center !important;
    }

    .th-header.header-layout3 .header-logo img {
        max-width: 140px !important;
        height: auto !important;
    }

    /* Ocultar COMPLETAMENTE el contenedor del botón hamburguesa y botón contáctanos */
    .th-header.header-layout3 .row>.col-auto:nth-child(4) {
        display: none !important;
    }

    /* Ocultar botón hamburguesa */
    .th-header.header-layout3 .th-menu-toggle,
    .th-header.header-layout3 .th-menu-toggle.d-block {
        display: none !important;
    }

    /* Ocultar botón "Contáctanos" en móvil */
    .th-header.header-layout3 .header-contact-btn {
        display: none !important;
    }

    /* Ocultar header-right-button completamente */
    .th-header.header-layout3 .header-right-button {
        display: none !important;
    }

    /* Ocultar sideMenuToggler en móvil */
    .th-header.header-layout3 .simple-icon.sideMenuToggler {
        display: none !important;
    }

    /* OCULTAR COMPLETAMENTE EL MENÚ MÓVIL */
    .th-menu-wrapper {
        display: none !important;
        visibility: hidden !important;
    }
}

/* ============================================================================
   TABLETS PEQUEÑAS Y MÓVILES GRANDES (768px - 991px)
   ============================================================================ */

@media (max-width: 991px) {
    .th-header.header-layout3 .menu-area {
        padding: 12px 0 !important;
    }

    .th-header.header-layout3 .header-logo img {
        max-width: 130px !important;
    }
}

/* ============================================================================
   MÓVILES (< 768px)
   ============================================================================ */

@media (max-width: 767px) {
    .th-header.header-layout3 .menu-area {
        padding: 10px 0 !important;
    }

    .th-header.header-layout3 .container .row {
        padding: 0 10px !important;
    }

    .th-header.header-layout3 .header-logo img {
        max-width: 120px !important;
    }
}

/* ============================================================================
   MÓVILES PEQUEÑOS (< 480px)
   ============================================================================ */

@media (max-width: 480px) {
    .th-header.header-layout3 .menu-area {
        padding: 8px 0 !important;
    }

    .th-header.header-layout3 .header-logo img {
        max-width: 110px !important;
    }
}