/* ============================
   Estilos del Header GTO
   ============================ */

.gto-header {
    background-color: #C8D8EB;
    padding: 10px 0;
    border-bottom: 1px solid #b9c8e6;
}

    .gto-header a {
        color: #004b87;
        font-weight: 600;
        text-decoration: none;
    }

        .gto-header a:hover {
            text-decoration: underline;
            color: #004b87;
        }

    /* Sección superior (llámanos, escríbenos, banderas, directorio) */
    .gto-header .homepage_section {
        font-size: 0.9rem;
        margin-bottom: 10px;
    }

    .gto-header ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: inline-block;
    }

        .gto-header ul li {
            display: inline-block;
            margin-right: 15px;
        }

    .gto-header .contact-options-veda li a {
        font-size: 0.85rem;
        text-transform: uppercase;
        font-weight: 700;
        margin-right: 10px;
    }

    /* Columna derecha con banderas */
    .gto-header .social img {
        margin-left: 5px;
        border-radius: 3px;
    }

    /* Logo */
    .gto-header .img-responsive {
        max-height: 60px;
        height: auto;
        width: auto;
    }

    .gto-header .col-md-6.hidden-xs {
        display: flex;
        align-items: center;
        gap: 20px; /* espacio entre bloques */
    }

        .gto-header .col-md-6.hidden-xs ul {
            display: flex;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .gto-header .col-md-6.hidden-xs li {
            margin-right: 15px;
        }

/* Tablets */
@media (max-width: 992px) {

    .gto-header {
        padding: 8px 0;
    }

        .gto-header .homepage_section {
            font-size: 0.8rem;
            text-align: center;
            margin-bottom: 5px;
            width: 100%;
            display: block;
        }

        .gto-header .img-responsive {
            max-height: 45px;
        }

        .gto-header ul li {
            margin-right: 10px;
        }

        .gto-header .social {
            display: flex !important;
            justify-content: center !important;
            align-items: center;
            width: 100%;
            margin-top: 10px;
        }

            .gto-header .social img {
                margin: 0 5px;
            }
}

/* Móviles */
@media (max-width: 768px) {

    /* Convertir el header en columna */
    .gto-header {
        text-align: center;
    }

        /* Sección superior */
        .gto-header .homepage_section {
            width: 100%;
            display: block;
            margin-bottom: 10px;
            font-size: 0.75rem;
        }

        /* Listas en columna */
        .gto-header ul {
            display: block;
            width: 100%;
        }

            .gto-header ul li {
                display: block;
                margin: 5px 0;
            }

        /* Ajuste logo */
        .gto-header .img-responsive {
            max-height: 40px;
            margin-bottom: 10px;
        }

        /* Contenedores 6-6 cambian a columna */
        .gto-header .col-md-6.hidden-xs {
            display: block !important;
            width: 100%;
            text-align: center;
            margin-bottom: 10px;
        }

            .gto-header .col-md-6.hidden-xs ul {
                flex-direction: column;
                align-items: center;
            }

        .gto-header .contact-options-veda li a {
            font-size: 0.75rem;
        }

       .gto-header .social {
            display: flex !important;
            justify-content: center !important;
            align-items: center;
            width: 100%;
            margin-top: 10px;
        }

            .gto-header .social img {
                margin: 0 5px;
            }

}

/* ===== MOBILE: HEADER FULL WIDTH ===== */
@media (max-width: 576px) {

    header.gto-header {
        width: 100%;
        margin: 0;
    }

        header.gto-header .container {
            max-width: 100%;
            padding-left: 10px;
            padding-right: 10px;
        }
}