/* ARCHIVO: css/cabecera.css
   FUNCIÓN: barra superior, logo, navegación de escritorio, redes y menú móvil.
   Los tamaños y colores de la cabecera se modifican solamente en este archivo. */
/* 03. CABECERA: menú independiente, redes y navegación móvil. */
.barra-superior {
    color: #d9f0f6;
    background: var(--azul-profundo);
}

.barra-superior .container, .barra-superior .container > div, .barra-superior .container > span {
    display: flex;
    align-items: center;
    gap: 12px;
}

.barra-superior .container {
    justify-content: space-between;
    min-height: 38px;
    font-size: 13px;
}

.barra-superior .icono {
    width: 17px;
    height: 17px;
}

.barra-superior b {
    color: #76c9b3;
}

.barra-superior .red-social {
    width: 25px;
    height: 25px;
    border: none;
    border-radius: 50%;
}

.texto-comparte {
    font-size: 9px;
    color: #b8d4de;
    margin-right: 5px;
}

.cabecera {
    position: sticky;
    top: 0;
    z-index: 100;
}

nav {
    background: #fffffff5;
    height: 92px;
    line-height: normal;
    box-shadow: 0 2px 12px #003d4510;
    backdrop-filter: blur(15px);
}

nav .nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.marca {
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--tinta);
    flex-shrink: 0;
}

.marca img {
    width: 74px;
    height: 74px;
    object-fit: contain;
}

.marca small {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.2px;
    color: #245965;
    margin-bottom: 4px;
}

.marca strong {
    font-size: 24px;
    font-weight: 750;
    letter-spacing: -.7px;
}

.punto-marca {
    color: var(--verde);
}

nav ul {
    display: flex;
    align-items: center;
    gap: 3px;
    margin: 0;
}

nav ul a {
    color: #163d47;
    font-size: 14px;
    padding: 14px 15px;
    border-radius: 8px;
}

nav ul a.actual {
    color: #00513f;
    font-weight: 700;
    background: #e0f0e9;
    box-shadow: 0 5px 14px #003d450a;
}

nav ul a:hover {
    background: #edf6f6;
}

nav ul a.btn {
    margin-left: 18px;
    color: white;
    font-size: 15px;
    min-height: 44px;
    background: linear-gradient(135deg, #009777, #00624f);
    box-shadow: 0 3px 0 #004a3c, 0 8px 15px #003e4920;
}

.boton-menu {
    display: none;
    border: 0;
    border-radius: 8px;
    background: #e9f4f5;
    padding: 8px;
    margin: 0 !important;
    color: var(--azul);
}

nav .boton-menu .icono {
    display: block;
    height: 26px;
}

.cabecera-menu {
    padding: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 700;
    color: var(--azul-profundo);
}

.cerrar-menu {
    border: 0;
    background: #edf4f4;
    padding: 6px;
    border-radius: 50%;
}

.sidenav .enlace-menu.actual {
    background: #e8f5f3;
    color: var(--verde);
}

.red-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border: 1px solid #d6e4e8;
    border-radius: 50%;
    transition: transform .2s,background .2s;
}

.red-social .icono {
    width: 17px;
    height: 17px;
}

.red-social:hover {
    transform: translateY(-3px);
    background: #ffffff20;
}

.red-social.facebook {
    color: #1877f2;
}

.red-social.whatsapp {
    color: #168454;
}

.red-social.youtube {
    color: #d43d3d;
}

.barra-superior .red-social {
    color: white;
}

/* 05. CELULAR: ajustar la navegación y el espaciado. */
@media (max-width: 1100px) {

    nav ul a {
        padding: 12px 9px;
        font-size: 11px;
    }

    .marca strong {
        font-size: 16px;
    }
}

@media (max-width: 992px) {

    nav .boton-menu {
        display: block;
    }
}

@media (max-width: 600px) {

    .container {
        width: 89%;
    }

    .barra-superior .container {
        font-size: 8px;
        gap: 5px;
    }

    .barra-superior .container > span {
        gap: 6px;
    }

    .barra-superior .container > div {
        gap: 2px;
    }

    .texto-comparte {
        display: none;
    }

    nav {
        height: 72px;
    }

    .marca img {
        width: 44px;
        height: 44px;
    }

    .marca strong {
        font-size: 15px;
    }

    .seccion {
        padding: 48px 0;
    }

    .titulo-seccion {
        align-items: start;
        flex-direction: column;
    }

    .titulo-seccion .btn {
        font-size: 12px;
    }









    .red-social {
        width: 30px;
        height: 30px;
    }
}


/* 06. AJUSTES DEL DISEÑO ESMERALDA EN PANTALLAS PEQUEÑAS. */
.marca > span {
    border-left: 1px solid #a2b8bd;
    padding-left: 22px;
}
@media (max-width: 1200px) {
    .marca strong {
        font-size: 20px;
    }
    nav ul a {
        padding: 13px 10px;
        font-size: 13px;
    }
    nav ul a.btn {
        margin-left: 8px;
        padding: 0 18px;
        font-size: 13px;
    }



}
@media (max-width: 992px) {



}
@media (max-width: 600px) {
    .marca {
        gap: 10px;
    }
    .marca > span {
        padding-left: 10px;
    }
    .marca small {
        font-size: 8px;
        letter-spacing: 1.5px;
    }
    .marca strong {
        font-size: 16px;
    }
    .marca img {
        width: 49px;
        height: 49px;
    }
    .barra-superior .container {
        font-size: 9px;
        min-height: 32px;
    }
    .barra-superior .icono {
        width: 13px;
        height: 13px;
    }











}