/* =========================================================
   RESET
========================================================= */

.site-header,
.site-header *{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.site-header{

    position:relative;

    width:100%;

    z-index:1000;

    background:#ffffff;

    font-family:'Poppins',Arial,Helvetica,sans-serif;

}

.site-header ul{
    list-style:none;
}

.site-header a{
    text-decoration:none;
    color:inherit;
}


/* =========================================================
   TOPBAR
========================================================= */

.topbar{

    width:100%;

    height:36px;

    background:#ffffff;

    border-bottom:1px solid #ececec;

}

.topbar-container{

    width:calc(100% - 48px);
    max-width:1280px;

    height:100%;

    margin:0 auto;

    display:flex;
    align-items:center;
    justify-content:space-between;

}


/* =========================================================
   CONTACTO
========================================================= */

.topbar-left{

    display:flex;
    align-items:center;

    gap:28px;

}

.topbar-left a{

    display:flex;
    align-items:center;

    gap:7px;

    color:#0a3f86;

    font-size:12px;
    font-weight:500;

    transition:.25s;

}

.topbar-left a:hover{

    color:#c6962c;

}

.topbar-icon{

    width:14px;
    height:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:11px;

}


/* =========================================================
   REDES
========================================================= */

.topbar-social{

    display:flex;
    align-items:center;

    gap:14px;

}

.topbar-social a{

    width:16px;
    height:16px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#0a3f86;

    font-size:16px;

    transition:.25s;

}

.topbar-social a:hover{

    color:#c6962c;

}


/* =========================================================
   NAVBAR
========================================================= */

.navbar{

    width:100%;

    height:128px;

    background:#ffffff;

    box-shadow:
        0 10px 28px rgba(0,0,0,.08);

}

.navbar-container{

    width:calc(100% - 24px);
    max-width:1380px;

    height:100%;

    margin:0 auto;

    display:flex;
    align-items:center;

}


/* =========================================================
   LOGO
========================================================= */

.navbar-logo{

    display:flex;
    align-items:center;

    gap:18px;

    flex-shrink:0;

    margin-right:45px;

}

.navbar-logo img{

    width:132px;
    height:132px;

    display:block;

    object-fit:contain;

}

.navbar-logo-info{

    display:flex;
    flex-direction:column;
    justify-content:center;

}

.navbar-logo-title{

    color:#111111;

    font-size:16px;

    font-weight:800;

    line-height:1.05;

}

.navbar-logo-subtitle{

    margin-top:4px;

    color:#245ca8;

    font-size:13px;

    font-weight:600;

}


/* =========================================================
   MENÚ PRINCIPAL
========================================================= */

.navbar-menu{

    display:flex;
    align-items:center;

    gap:30px;

    flex:1;

}

.menu-item{

    position:relative;

}

.menu-link{

    display:flex;
    align-items:center;

    gap:8px;

    padding:52px 0;

    background:none;
    border:none;

    color:#0d4288;

    font-family:inherit;

    font-size:17px;
    font-weight:500;

    line-height:1;

    white-space:nowrap;

    cursor:pointer;

    transition:.25s;

}

.menu-link:hover{

    color:#c8972d;

}


/* =========================================================
   FLECHA
========================================================= */

.menu-arrow{

    width:8px;
    height:8px;

    margin-top:-3px;

    display:inline-block;

    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;

    transform:rotate(45deg);

    transition:.25s;

}

.has-submenu:hover>.submenu-toggle .menu-arrow{

    transform:rotate(225deg);

}
/* =========================================================
   SUBMENÚ
========================================================= */
.submenu{



    position:absolute;



    top:calc(100% - 18px);

    left:50%;



    min-width:200px;



    padding:8px;



    background:#fff;



    border-radius:8px;



    border:1px solid rgba(0,0,0,.08);



    box-shadow:0 18px 35px rgba(0,0,0,.12);



    opacity:0;

    visibility:hidden;



    transform:translateX(-50%) translateY(10px);



    transition:.25s;



    z-index:999;



}



.submenu a{

    display:block;

    padding:12px 15px;

    border-radius:7px;

    color:#0d4288;

    font-size:14px;

    font-weight:500;

}
.has-submenu:hover>.submenu{

    opacity:1;
    visibility:visible;

    transform:translateX(-50%) translateY(0);

}

.submenu li{

    width:100%;

}

.submenu a{

    display:block;

    width:100%;

    padding:12px 15px;

    border-radius:7px;

    color:#0d4288;

    font-size:14px;
    font-weight:500;

    transition:.25s;

}

.submenu a:hover{

    background:#f3f6fb;

    color:#c8972d;

}


/* =========================================================
   BOTÓN PREMIO
========================================================= */

.navbar-award{

    margin-left:16px;

    padding:17px 28px;
margin-right:0px;
    background:#09173d;

    color:#ffffff !important;

    font-size:17px;
    font-weight:700;

    border-radius:10px;

    white-space:nowrap;

    flex-shrink:0;

    transition:
        background .25s,
        transform .25s;

}

.navbar-award:hover{

    background:#12356d;

    transform:translateY(-2px);

}


/* =========================================================
   HAMBURGUESA
========================================================= */

.menu-toggle{

    display:none;

    width:46px;
    height:46px;

    margin-left:18px;

    background:#08183b;

    border:none;

    border-radius:8px;

    cursor:pointer;

    align-items:center;
    justify-content:center;
    flex-direction:column;

    gap:6px;

    transition:.25s;

}

.menu-toggle:hover{

    background:#10306b;

}

.menu-line{

    width:22px;
    height:2px;

    background:#ffffff;

    transition:.3s;

}


/* =========================================================
   ANIMACIÓN HAMBURGUESA
========================================================= */

.menu-toggle.active .menu-line:nth-child(1){

    transform:
        translateY(8px)
        rotate(45deg);

}

.menu-toggle.active .menu-line:nth-child(2){

    opacity:0;

}

.menu-toggle.active .menu-line:nth-child(3){

    transform:
        translateY(-8px)
        rotate(-45deg);

}


/* =========================================================
   EFECTOS GENERALES
========================================================= */

.navbar-logo img{

    transition:
        transform .25s;

}

.navbar-logo:hover img{

    transform:scale(1.03);

}

.menu-link,
.navbar-award,
.submenu a,
.topbar-left a,
.topbar-social a{

    transition:.25s;

}


/* =========================================================
   PREPARACIÓN PARA RESPONSIVE
========================================================= */

.navbar-menu.active{

    display:flex;

}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */
@media (max-width:1400px){

    .navbar-logo{
        margin-right:45px;
    }

    .navbar-menu{
        gap:28px;
    }

    .menu-link{
        font-size:16px;
    }

    .navbar-award{
        margin-left:16px;
        padding:16px 22px;
        font-size:15px;
    }

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

    .topbar-container,
    .navbar-container{

        width:calc(100% - 36px);

    }

    .navbar{

        height:96px;

    }

    .navbar-logo{

        margin-right:35px;

    }

    .navbar-logo img{

        width:90px;
        height:90px;

    }

    .navbar-logo-title{

        font-size:15px;

    }

    .navbar-logo-subtitle{

        font-size:12px;

    }

    .navbar-menu{

        gap:28px;

    }

    .menu-link{

        font-size:15px;

        padding:40px 0;

    }

    .navbar-award{

        padding:14px 22px;

        font-size:15px;

    }

}


/* =========================================================
   RESPONSIVE - CELULAR
========================================================= */

/* =========================================================
   RESPONSIVE - CELULAR
========================================================= */

@media (max-width:768px){

    /* ===========================
       TOPBAR
    =========================== */

    .topbar{
        height:38px;
    }

    .topbar-container{
        width:calc(100% - 24px);
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    .topbar-left{
        display:flex;
        align-items:center;
        gap:14px;
        flex:1;
        min-width:0;
    }

    .topbar-left a{
        display:flex;
        align-items:center;
        gap:5px;
        font-size:10px;
        white-space:nowrap;
    }

    .topbar-left span{
        display:inline-block;
        max-width:110px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .topbar-icon{
        width:12px;
        height:12px;
        font-size:10px;
    }

    .topbar-social{
        display:flex;
        align-items:center;
        gap:10px;
        flex-shrink:0;
    }

    .topbar-social a{
        width:14px;
        height:14px;
        font-size:14px;
    }

    /* ===========================
       NAVBAR
    =========================== */

    .navbar{
        height:88px;
    }

    .navbar-container{
        width:calc(100% - 24px);
        height:88px;
        display:grid;
        grid-template-columns:90px 1fr 48px;
        align-items:center;
        column-gap:14px;
        position:relative;
    }

    /* ===========================
       LOGO
    =========================== */

    .navbar-logo{
        margin:0;
        gap:0;
        align-self:center;
    }

    .navbar-logo img{
        width:88px;
        height:88px;
        object-fit:contain;
    }

    .navbar-logo-info{
        display:none;
    }

    /* ===========================
       BOTÓN
    =========================== */

    .navbar-award{
        width:100%;
        max-width:210px;
        margin:0 auto;
        padding:10px 14px;
        text-align:center;
        font-size:13px;
        line-height:1.2;
    }

    /* ===========================
       HAMBURGUESA
    =========================== */

    .menu-toggle{
        display:flex;
        width:48px;
        height:48px;
        margin:0;
        justify-self:end;
        align-items:center;
    }

    /* ===========================
       MENÚ
    =========================== */

    .navbar-menu{
        position:absolute;
        top:88px;
        left:0;
        width:100%;
        display:none;
        flex-direction:column;
        gap:0;
        background:#fff;
        border-radius:0 0 10px 10px;
        box-shadow:0 12px 30px rgba(0,0,0,.12);
        overflow:hidden;
        z-index:999;
    }

    .navbar-menu.active{
        display:flex;
    }

    .navbar-menu .menu-item{
        width:100%;
    }

    .menu-link{
        width:100%;
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:18px 22px;
        font-size:15px;
        border-bottom:1px solid #ececec;
    }

    /* ===========================
       DESACTIVAR HOVER EN MÓVIL
    =========================== */

    .has-submenu:hover > .submenu{

    opacity:1;
    visibility:visible;
    transform:none;

}

    /* ===========================
       SUBMENÚ
    =========================== */

    .submenu{
        position:static;
        display:none;
        width:100%;
        margin:0;
        padding:0;
        background:#f7f8fb;
        border:none;
        border-radius:0;
        box-shadow:none;
        min-width:100%;
        opacity:1;
        visibility:visible;
        transform:none;
    }

   .submenu.open{

    display:block;

    opacity:1;

    visibility:visible;

}

    .submenu li{
        width:100%;
    }

    .submenu li a{
        display:block;
        width:100%;
        padding:15px 22px;
        background:#f7f8fb;
        color:#0d4288;
        font-size:14px;
        font-weight:500;
        border-bottom:1px solid #ececec;
        border-radius:0;
    }

    .submenu li:last-child a{
        border-bottom:none;
    }

    .submenu li a:hover{
        background:#eef3fb;
        color:#c8972d;
    }

}
/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media (max-width:480px){

    .topbar{

        height:42px;

    }

    .topbar-container{

        width:calc(100% - 18px);
        align-items:center;

    }

    .topbar-left{

        gap:8px;

    }

    .topbar-left a{

        font-size:8px;

        gap:4px;

    }

    .topbar-social{

        gap:5px;

    }

    .topbar-social a{

        width:15px;
        height:15px;

        font-size:13px;

    }


    .navbar{

        height:92px;

    }
.navbar-container{

    height:92px;

    display:grid;

    align-items:center;

}
    .navbar-container{

        width:calc(100% - 18px);

       grid-template-columns:95px 1fr 52px;
    }

    .navbar-logo img{

    width:90px;
    height:90px;

}

   .navbar-award{

    max-width:185px;

    padding:10px 14px;

    font-size:12px;

    margin-top:6px;

}

   .menu-toggle{

    width:48px;
    height:48px;

    justify-self:end;

    align-self:center;

    margin-top:0;

    transform:translateY(6px);

}

    .navbar-menu{

        top:78px;

    }

    .menu-link{

        font-size:14px;

        padding:16px 18px;

    }

}