/* =========================================================
   LGP HEADER – AGENCIA MISTERIO
   CSS LIMPIO Y CONSOLIDADO
========================================================= */

/* =========================================================
   VARIABLES
========================================================= */

:root{
    --lgp-blue:#48579E;
    --lgp-yellow:#F2E62C;
    --lgp-header-height:104px;
    --lgp-sticky-height:70px;
    --lgp-logo-width:180px;
}


/* =========================================================
   BASE
========================================================= */

html{
    scroll-behavior:smooth;
    scroll-padding-top:var(--lgp-sticky-height);
}

body.lgp-menu-open{
    overflow:hidden;
}

[id]{
    scroll-margin-top:var(--lgp-sticky-height);
}

/* Oculta el header nativo de GeneratePress. */
#masthead,
.site-header{
    display:none !important;
}

.lgp-header-shell{
    position:relative;
    z-index:99990;
    width:100%;
    height:var(--lgp-header-height);
}

.lgp-header,
.lgp-header *{
    box-sizing:border-box;
}


/* =========================================================
   HEADER
========================================================= */

.lgp-header{
    position:relative;
    top:auto;
    z-index:99990;
    width:100%;
    height:var(--lgp-header-height);

    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);

    border-top:1px solid rgba(0,0,0,.7);

    transition:
        height .28s ease,
        box-shadow .28s ease,
        background-color .28s ease;
}

.lgp-header__inner{
    position:relative;

    width:100%;
    height:100%;

    display:grid;
    grid-template-columns:var(--lgp-logo-width) minmax(0,1fr) auto;
    align-items:center;

    column-gap:48px;
    padding-right:27px;

    transition:
        grid-template-columns .28s ease,
        column-gap .28s ease;
}


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

.lgp-header__brand{
    position:relative;
    z-index:2;

    align-self:start;

    width:var(--lgp-logo-width);

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

    text-decoration:none;

    transition:
        width .28s ease,
        align-items .28s ease;
}

.lgp-header__logo{
    display:block !important;

    max-width:none !important;
    height:auto !important;

    object-fit:contain;
    object-position:left top;

    transition:
        opacity .2s ease,
        transform .28s ease,
        width .28s ease;
}

.lgp-header__logo--normal{
    width:180px !important;
}

.lgp-header__logo--sticky{
    display:none !important;
}


/* =========================================================
   NAVEGACIÓN DESKTOP
========================================================= */

.lgp-header__nav{
    min-width:0;
    height:100%;

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

    gap:0;
}

.lgp-header__nav a{
    position:relative;

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

    min-height:28px;
    padding:0 clamp(34px,2.35vw,48px);

    color:var(--lgp-blue);

    font-family:"Felbridge Std",sans-serif;
    font-size:15px;
    line-height:1;
    font-weight:700;
    letter-spacing:0;

    text-decoration:none;
    white-space:nowrap;

    transition:
        color .22s ease,
        opacity .22s ease,
        font-size .28s ease,
        padding .28s ease;
}

.lgp-header__nav a:first-child{
    padding-left:0;
}

.lgp-header__nav a:not(:last-child)::after{
    content:"";

    position:absolute;
    top:50%;
    right:0;

    width:1px;
    height:27px;

    background:var(--lgp-blue);
    opacity:.9;

    transform:translateY(-50%);
}

.lgp-header__nav a:hover,
.lgp-header__nav a:focus-visible{
    color:#34427f;
}

.lgp-header__nav a.is-disabled{
    cursor:default;
}


/* =========================================================
   CTA DESKTOP
========================================================= */

.lgp-header__cta{
    position:relative;
    isolation:isolate;

    width:230px;
    max-width:230px;
    height:52px;

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

    overflow:hidden;

    clip-path:polygon(
        7% 0,
        100% 0,
        100% 69%,
        93% 100%,
        0 100%,
        0 31%
    );

    background:var(--lgp-blue);
    color:var(--lgp-yellow);

    font-family:"Felbridge Std",sans-serif;
    font-size:18px;
    line-height:1;
    font-weight:700;

    text-decoration:none;
    white-space:nowrap;

    transform:translateZ(0);

    transition:
        transform .25s ease,
        filter .25s ease,
        box-shadow .25s ease,
        width .28s ease,
        height .28s ease,
        font-size .28s ease;
}

.lgp-header__cta span{
    position:relative;
    z-index:2;
}

.lgp-header__cta::before{
    content:"";

    position:absolute;
    z-index:1;
    top:-45%;
    left:-42%;

    width:31%;
    height:190%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.52),
        transparent
    );

    transform:skewX(-22deg);
    transition:left .55s cubic-bezier(.22,.61,.36,1);
}

.lgp-header__cta:hover,
.lgp-header__cta:focus-visible{
    color:var(--lgp-yellow);

    transform:translateY(-2px);
    filter:brightness(1.05);

    box-shadow:0 8px 18px rgba(72,87,158,.2);
}

.lgp-header__cta:hover::before,
.lgp-header__cta:focus-visible::before{
    left:116%;
}

.lgp-header__cta.is-disabled,
.lgp-mobile-menu__cta.is-disabled{
    cursor:default;
    pointer-events:none;
}

/* ==========================================
   CTA - Mantener color del texto
========================================== */

.lgp-header__cta,
.lgp-header__cta:link,
.lgp-header__cta:visited,
.lgp-header__cta:hover,
.lgp-header__cta:focus,
.lgp-header__cta:active{
    color:#F2E62C !important;
    text-decoration:none;
}

.lgp-header__cta span{
    color:inherit;
}

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

.lgp-header__toggle{
    display:none;
    appearance:none;

    width:48px;
    height:48px;
    padding:9px 4px;

    border:0;
    background:transparent;
    box-shadow:none;

    cursor:pointer;
}

.lgp-header__toggle span{
    display:block;

    width:31px;
    height:2px;
    margin:7px auto;

    background:var(--lgp-blue);

    transform-origin:center;

    transition:
        transform .3s ease,
        opacity .2s ease;
}

.lgp-header.is-open .lgp-header__toggle span:nth-child(1){
    transform:translateY(9px) rotate(45deg);
}

.lgp-header.is-open .lgp-header__toggle span:nth-child(2){
    opacity:0;
}

.lgp-header.is-open .lgp-header__toggle span:nth-child(3){
    transform:translateY(-9px) rotate(-45deg);
}


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

.lgp-menu-overlay{
    position:fixed;
    inset:0;
    z-index:99970;

    background:rgba(31,38,75,.3);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.lgp-menu-overlay.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.lgp-mobile-menu{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    z-index:99980;

    width:min(390px,88vw);
    padding-top:70px;

    background:#fff;

    transform:translateX(102%);
    visibility:hidden;

    overflow-y:auto;

    transition:
        transform .38s cubic-bezier(.22,.61,.36,1),
        visibility .38s ease;
}

.lgp-mobile-menu.is-open{
    transform:translateX(0);
    visibility:visible;
}

.lgp-mobile-menu__inner{
    min-height:100%;
    padding:54px 34px 40px;
}

.lgp-mobile-menu__nav{
    display:flex;
    flex-direction:column;
}

.lgp-mobile-menu__nav a{
    padding:16px 0;

    border-bottom:1px solid rgba(72,87,158,.2);

    color:var(--lgp-blue);

    font-family:"Felbridge Std",sans-serif;
    font-size:22px;
    line-height:1.15;
    font-weight:700;

    text-decoration:none;
}

.lgp-mobile-menu__nav a.is-disabled{
    opacity:.45;
    pointer-events:none;
}

.lgp-mobile-menu__cta{
    position:relative;

    width:100%;
    min-height:54px;
    margin-top:34px;
    padding:15px 24px;

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

    clip-path:polygon(
        7% 0,
        100% 0,
        100% 70%,
        93% 100%,
        0 100%,
        0 30%
    );

    background:var(--lgp-blue);
    color:var(--lgp-yellow);

    font-family:"Felbridge Std",sans-serif;
    font-size:17px;
    line-height:1;
    font-weight:700;

    text-decoration:none;
}


/* =========================================================
   SENTINELA STICKY
========================================================= */

.lgp-sticky-sentinel{
    display:block;

    width:1px;
    height:1px;
    margin-bottom:-1px;

    pointer-events:none;
    visibility:hidden;
}


/* =========================================================
   ESTADO STICKY GENERAL
========================================================= */

.lgp-header.is-sticky,
html.lgp-header-is-sticky .lgp-header,
body.lgp-header-is-sticky .lgp-header{
    position:fixed;
    top:0;
    left:0;
    right:0;

    height:var(--lgp-sticky-height);

    background:#ffffff;

    -webkit-backdrop-filter:none;
    backdrop-filter:none;

    box-shadow:0 5px 18px rgba(28,36,78,.12);
}

.lgp-header.is-sticky .lgp-header__logo--normal,
html.lgp-header-is-sticky .lgp-header__logo--normal,
body.lgp-header-is-sticky .lgp-header__logo--normal{
    display:none !important;
}

.lgp-header.is-sticky .lgp-header__logo--sticky,
html.lgp-header-is-sticky .lgp-header__logo--sticky,
body.lgp-header-is-sticky .lgp-header__logo--sticky{
    display:block !important;
}


/* =========================================================
   DESKTOP — 1101 PX EN ADELANTE
========================================================= */

@media (min-width:1101px){

    /* Header normal */
    .lgp-header:not(.is-sticky) .lgp-header__inner{
        align-items:start;
    }

    .lgp-header:not(.is-sticky) .lgp-header__brand{
        width:180px;
        height:119px;
        overflow:visible;
    }

    .lgp-header:not(.is-sticky) .lgp-header__logo--normal{
        display:block !important;

        width:180px !important;
        height:119px !important;
        max-height:none !important;
    }

    .lgp-header:not(.is-sticky) .lgp-header__nav{
        height:auto;
        align-items:flex-start;
        padding-top:63px;
    }

    .lgp-header:not(.is-sticky) .lgp-header__nav a{
        min-height:22px;
        line-height:22px;
    }

    .lgp-header:not(.is-sticky) .lgp-header__cta{
        align-self:start;
        margin-top:35px;
    }

    /* Sticky desktop */
    .lgp-header.is-sticky .lgp-header__inner,
    html.lgp-header-is-sticky .lgp-header__inner,
    body.lgp-header-is-sticky .lgp-header__inner{
        grid-template-columns:122px minmax(0,1fr) auto;
        align-items:center;

        column-gap:43px;
    }

    /*
     * El contenedor mide 40px para no alterar la alineación vertical
     * del menú y del CTA. El SVG conserva 81px y sobresale con
     * overflow visible.
     */
    .lgp-header.is-sticky .lgp-header__brand,
    html.lgp-header-is-sticky .lgp-header__brand,
    body.lgp-header-is-sticky .lgp-header__brand{
        width:122px;
        min-width:122px;
        height:40px;

        padding:0;

        align-items:flex-start;
        overflow:visible;
    }

    .lgp-header.is-sticky .lgp-header__logo--sticky,
    html.lgp-header-is-sticky .lgp-header__logo--sticky,
    body.lgp-header-is-sticky .lgp-header__logo--sticky{
        width:122px !important;
        height:81px !important;
        max-height:none !important;
    }

    .lgp-header.is-sticky .lgp-header__nav,
    html.lgp-header-is-sticky .lgp-header__nav,
    body.lgp-header-is-sticky .lgp-header__nav{
        height:100%;
        padding-top:0;
        align-items:center;
    }

    .lgp-header.is-sticky .lgp-header__nav a,
    html.lgp-header-is-sticky .lgp-header__nav a,
    body.lgp-header-is-sticky .lgp-header__nav a{
        padding-left:30px;
        padding-right:30px;
        font-size:14px;
    }

    .lgp-header.is-sticky .lgp-header__cta,
    html.lgp-header-is-sticky .lgp-header__cta,
    body.lgp-header-is-sticky .lgp-header__cta{
        width:172px;
        max-width:172px;
        height:46px;

        align-self:center;

        margin:0;

        font-size:16px;
    }
}


/* =========================================================
   TABLET — 768 PX A 1100 PX
========================================================= */

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

    :root{
        --lgp-header-height:80px;
        --lgp-sticky-height:68px;
        --lgp-logo-width:140px;
    }

    .lgp-header-shell,
    .lgp-header{
        height:var(--lgp-header-height);
    }

    .lgp-header{
        background:rgba(255,255,255,.94);

        -webkit-backdrop-filter:blur(10px);
        backdrop-filter:blur(10px);

        border-top:0;
        box-shadow:0 2px 10px rgba(0,0,0,.07);
    }

    .lgp-header.is-sticky,
    html.lgp-header-is-sticky .lgp-header,
    body.lgp-header-is-sticky .lgp-header{
        height:var(--lgp-sticky-height);
        background:#ffffff;
    }

    .lgp-header__inner,
    .lgp-header.is-sticky .lgp-header__inner,
    html.lgp-header-is-sticky .lgp-header__inner,
    body.lgp-header-is-sticky .lgp-header__inner{
        grid-template-columns:140px minmax(0,1fr) 52px;
        column-gap:0;
        padding-right:20px;
    }

    .lgp-header__nav,
    .lgp-header__cta{
        display:none;
    }

    .lgp-header__toggle{
        position:relative;
        z-index:99995;

        grid-column:3;
        justify-self:end;
        align-self:center;

        display:block;

        width:52px;
        height:52px;
    }

    /* Logo normal tablet */
    .lgp-header__brand{
        width:140px;
        height:92px;

        padding:0;

        align-items:flex-start;
        overflow:visible;
    }

    .lgp-header:not(.is-sticky) .lgp-header__logo--normal{
        display:block !important;

        width:auto !important;
        height:92px !important;
        max-height:none !important;
    }

    .lgp-header:not(.is-sticky) .lgp-header__logo--sticky{
        display:none !important;
    }

    /* Logo sticky tablet */
    .lgp-header.is-sticky .lgp-header__inner,
    html.lgp-header-is-sticky .lgp-header__inner,
    body.lgp-header-is-sticky .lgp-header__inner{
        grid-template-columns:118px minmax(0,1fr) 52px;
    }

    .lgp-header.is-sticky .lgp-header__brand,
    html.lgp-header-is-sticky .lgp-header__brand,
    body.lgp-header-is-sticky .lgp-header__brand{
        width:118px;
        min-width:118px;
        height:78px;

        padding:0;

        align-items:flex-start;
        overflow:visible;
    }

    .lgp-header.is-sticky .lgp-header__logo--sticky,
    html.lgp-header-is-sticky .lgp-header__logo--sticky,
    body.lgp-header-is-sticky .lgp-header__logo--sticky{
        width:118px !important;
        height:78px !important;
        max-height:none !important;
    }

    .lgp-mobile-menu{
        width:min(390px,82vw);
        padding-top:var(--lgp-header-height);
    }
}


/* =========================================================
   MÓVIL — HASTA 767 PX
========================================================= */

@media (max-width:767px){

    :root{
        --lgp-header-height:80px;
        --lgp-sticky-height:68px;
        --lgp-logo-width:140px;
    }

    html{
        scroll-padding-top:var(--lgp-sticky-height);
    }

    .lgp-header-shell,
    .lgp-header{
        height:var(--lgp-header-height);
    }

    .lgp-header{
        border-top:0;
        box-shadow:0 2px 10px rgba(0,0,0,.08);
    }

    .lgp-header.is-sticky,
    html.lgp-header-is-sticky .lgp-header,
    body.lgp-header-is-sticky .lgp-header{
        height:var(--lgp-sticky-height);
        background:#ffffff;
    }

    .lgp-header__inner{
        grid-template-columns:140px minmax(0,1fr) 52px;
        column-gap:0;
        padding-right:12px;
    }

    .lgp-header__nav,
    .lgp-header__cta{
        display:none;
    }

    .lgp-header__toggle{
        position:relative;
        z-index:99995;

        grid-column:3;
        align-self:center;
        justify-self:end;

        display:block;

        width:52px;
        height:52px;
        padding:7px 4px;
    }

    .lgp-header__toggle span{
        width:31px;
        height:2px;
        margin:7px auto;
    }

    /* Logo normal móvil */
    .lgp-header__brand{
        width:140px;
        height:92px;

        padding:0;

        align-items:flex-start;
        overflow:visible;
    }

    .lgp-header:not(.is-sticky) .lgp-header__logo--normal{
        display:block !important;

        width:auto !important;
        height:92px !important;
        max-height:none !important;
    }

    .lgp-header:not(.is-sticky) .lgp-header__logo--sticky{
        display:none !important;
    }

    /* Logo sticky móvil */
    .lgp-header.is-sticky .lgp-header__inner,
    html.lgp-header-is-sticky .lgp-header__inner,
    body.lgp-header-is-sticky .lgp-header__inner{
        grid-template-columns:118px minmax(0,1fr) 52px;
    }

    .lgp-header.is-sticky .lgp-header__brand,
    html.lgp-header-is-sticky .lgp-header__brand,
    body.lgp-header-is-sticky .lgp-header__brand{
        width:118px;
        min-width:118px;
        height:78px;

        padding:0;

        align-items:flex-start;
        overflow:visible;
    }

    .lgp-header.is-sticky .lgp-header__logo--sticky,
    html.lgp-header-is-sticky .lgp-header__logo--sticky,
    body.lgp-header-is-sticky .lgp-header__logo--sticky{
        width:118px !important;
        height:78px !important;
        max-height:none !important;
    }

    .lgp-mobile-menu{
        padding-top:var(--lgp-header-height);
    }
}


/* =========================================================
   WORDPRESS ADMIN BAR
========================================================= */

body.admin-bar .lgp-header.is-sticky,
body.admin-bar.lgp-header-is-sticky .lgp-header{
    top:var(--wp-admin--admin-bar--height,32px);
}

body.admin-bar .lgp-mobile-menu{
    top:var(--wp-admin--admin-bar--height,32px);
}

@media (max-width:782px){

    body.admin-bar .lgp-header.is-sticky,
    body.admin-bar.lgp-header-is-sticky .lgp-header,
    body.admin-bar .lgp-mobile-menu{
        top:var(--wp-admin--admin-bar--height,46px);
    }
}


/* =========================================================
   PROTECCIÓN CONTRA ESTILOS DE GENERATEPRESS / ELEMENTOR
========================================================= */

.lgp-header__toggle,
.lgp-header__toggle:hover,
.lgp-header__toggle:focus,
.lgp-header__toggle:focus-visible{
    background:transparent !important;
    color:var(--lgp-blue) !important;

    border:0 !important;
    outline:none;

    box-shadow:none !important;
}


/* =========================================================
   ACCESIBILIDAD
========================================================= */

@media (prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    .lgp-header__cta,
    .lgp-header__cta::before,
    .lgp-header__toggle span,
    .lgp-menu-overlay,
    .lgp-mobile-menu{
        transition:none !important;
    }
}
/* =========================================================
   V2.2.0 — ENTRADA Y SALIDA VERTICAL DEL HEADER STICKY
========================================================= */

.lgp-header.is-sticky.is-sticky-entering{
    animation:lgpStickyEnter .36s cubic-bezier(.22,.61,.36,1) both;
    will-change:transform;
}

.lgp-header.is-sticky.is-sticky-leaving{
    animation:lgpStickyLeave .36s cubic-bezier(.22,.61,.36,1) both;
    pointer-events:none;
    will-change:transform;
}

@keyframes lgpStickyEnter{
    from{
        transform:translate3d(0,-100%,0);
    }
    to{
        transform:translate3d(0,0,0);
    }
}

@keyframes lgpStickyLeave{
    from{
        transform:translate3d(0,0,0);
    }
    to{
        transform:translate3d(0,-100%,0);
    }
}

@media (prefers-reduced-motion:reduce){
    .lgp-header.is-sticky.is-sticky-entering,
    .lgp-header.is-sticky.is-sticky-leaving{
        animation:none;
    }
}


/* =========================================================
   V2.2.1 — ENTRADA VERTICAL DEL HEADER NORMAL
========================================================= */

.lgp-header.is-normal-entering{
    animation:lgpNormalEnter .36s cubic-bezier(.22,.61,.36,1) both;
    will-change:transform;
}

@keyframes lgpNormalEnter{
    from{
        transform:translate3d(0,-100%,0);
    }
    to{
        transform:translate3d(0,0,0);
    }
}

@media (prefers-reduced-motion:reduce){
    .lgp-header.is-normal-entering{
        animation:none;
    }
}


/* =========================================================
   V2.2.2 — TRANSICIONES SUPERPUESTAS NORMAL / STICKY
========================================================= */

.lgp-header--transition-clone{
    z-index:99989 !important;
    pointer-events:none !important;
}

.lgp-header.is-normal-entering{
    position:relative;
    z-index:99991;
}