/* ==================================================
   PLAZA24 | CABECERA PRINCIPAL
   Archivo: assets/css/layout/header.css

   Fondo crema claro: #F6F4F0
================================================== */


/* ==================================================
   01. CABECERA | CONTENEDOR PRINCIPAL
================================================== */

.site-header {
    position: relative;
    z-index: 20;
    width: 100%;
    padding: 12px 0;
    background-color: #F6F4F0;
    border-bottom: 1px solid #E5DED4;
    box-sizing: border-box;
}


/* ==================================================
   02. CABECERA | DISTRIBUCIÓN
================================================== */

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-sizing: border-box;
}



/* ==================================================
   03. LOGO | PC Y ESCRITORIO
================================================== */

.site-header .site-logo {
    display: inline-flex;
    align-items: center;
    flex: 0 1 620px;
    width: 620px;
    max-width: 620px;
    min-width: 0;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.site-header .site-logo-image {
    display: block;
    width: 600px !important;
    height: 170px !important;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}


/* ==================================================
   04. MENÚ | DISTRIBUCIÓN
================================================== */

.site-header .main-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0;
    padding: 0;
    font-size: 14px;
}

.site-header .main-navigation a {
    font-size: 14px !important;
}


/* ==================================================
   05. MENÚ | ENLACES
================================================== */

.site-header .main-navigation a {
    display: inline-block;
    color: #2D4632;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    padding: 0;
    transition: color 0.2s ease;
}

.site-header .main-navigation a:hover {
    color: #A68C71;
}


/* ==================================================
   06. TABLET | AJUSTES RESPONSIVE
================================================== */

@media (min-width: 601px) and (max-width: 1100px) {

    .site-header {
        padding: 10px 0;
    }

    .site-header .container {
        gap: 16px;
    }

    .site-header .site-logo {
        max-width: 380px;
        flex-shrink: 1;
    }

    .site-header .site-logo-image {
        width: 360px;
        height: 110px;
    }

    .site-header .main-navigation {
        flex: 0 0 auto;
        gap: 14px;
    }

    .site-header .main-navigation a {
        font-size: 13px;
    }
}


/* ==================================================
   07. CELULAR | CABECERA RESPONSIVE
================================================== */

@media (max-width: 600px) {

    .site-header {
        padding: 10px 0;
        background-color: #F6F4F0;
    }

    .site-header .container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 8px;
        width: 92%;
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
    }

    .site-header .site-logo {
        display: inline-flex;
        flex: 0 1 auto;
        width: auto;
        max-width: 100%;
        min-width: 0;
    }

    .site-header .site-logo-image {
        display: block;
        width: 290px;
        height: 90px;
        max-width: 100%;
        object-fit: contain;
        object-position: left center;
    }

    .site-header .main-navigation {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex: 0 1 auto;
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
        gap: 10px 20px;
        margin: 0;
        padding: 0;
        font-size: 13px;
    }

    .site-header .main-navigation a {
        color: #2D4632;
        font-size: 13px;
        line-height: 1.5;
    }

    .site-header .main-navigation a:hover {
        color: #A68C71;
    }
}


/* ==================================================
   08. CELULAR PEQUEÑO | AJUSTES FINALES
================================================== */

@media (max-width: 380px) {

    .site-header .container {
        width: 92%;
        gap: 6px;
    }

    .site-header .site-logo-image {
        width: 250px;
        height: 78px;
    }

    .site-header .main-navigation {
        gap: 8px 14px;
    }

    .site-header .main-navigation a {
        font-size: 12px;
    }
}