/* =========================================================
   NOPAL HEADER – AGENCIA MISTERIO
========================================================= */

:root{
    --nopal-header-height:60px;
    --nopal-header-text:#4C4B4B;
    --nopal-header-hover:#2F2F2F;
    --nopal-header-bg:#FFFFFF;
    --nopal-sidebar-width:420px;
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:var(--nopal-header-height);
}

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

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

.nopal-header{
    position:sticky;
    top:0;
    width:100%;
    height:var(--nopal-header-height);
    background:var(--nopal-header-bg);
    border-bottom:1px solid rgba(0,0,0,.05);
    box-shadow:0 3px 10px rgba(0,0,0,.035);
    z-index:99990;
}

.nopal-header__inner{
    width:calc(100% - 96px);
    max-width:1800px;
    height:100%;
    margin-inline:auto;
    display:grid;
    align-items:center;
    gap:32px;
}

/* Home: logo + frase / menú / hamburguesa */
.nopal-header--home .nopal-header__inner{
    grid-template-columns:max-content minmax(0,1fr) 44px;
}

/* Internas: logo / menú */
.nopal-header--internal .nopal-header__inner{
    grid-template-columns:max-content minmax(0,1fr);
}

.nopal-header__brand{
    min-width:0;
    display:flex;
    align-items:center;
    gap:20px;
    color:var(--nopal-header-text);
    text-decoration:none;
}

.nopal-header__logo{
    width:113.77px !important;
    min-width:113.77px;
    max-width:113.77px !important;
    height:auto !important;
    max-height:44px;
    display:block !important;
    object-fit:contain;
}

.nopal-header__logo-fallback{
    font:800 42px/1 "Public Sans",sans-serif;
    letter-spacing:-3px;
    color:var(--nopal-header-text);
}

.nopal-header__tagline{
    position:relative;
    top:6px;
    font:400 14px/1.1 "Libre Baskerville",serif;
    color:var(--nopal-header-text);
    white-space:nowrap;
}

.nopal-header__nav{
    min-width:0;
    height:100%;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:clamp(32px,3.1vw,64px);
}

.nopal-header__nav a{
    position:relative;
    height:100%;
    display:inline-flex;
    align-items:center;
    color:var(--nopal-header-text);
    text-decoration:none;
    transition:color .25s ease;
}

.nopal-header__nav--home a{
    font:600 17px/1 "Public Sans",sans-serif;
}

.nopal-header__nav--internal a{
    font:400 16px/1 "Public Sans",sans-serif;
}

.nopal-header__nav a:hover,
.nopal-header__nav a:focus-visible{
    color:var(--nopal-header-hover);
}

.nopal-header__nav a::after{
    content:"";
    position:absolute;
    left:0;
    right:100%;
    bottom:12px;
    height:1px;
    background:currentColor;
    transition:right .28s ease;
}

.nopal-header__nav a:hover::after,
.nopal-header__nav a:focus-visible::after{
    right:0;
}

.nopal-header__toggle{
    appearance:none !important;
    width:44px !important;
    height:44px !important;
    padding:8px 2px !important;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:var(--nopal-header-text) !important;
    cursor:pointer;
}

.nopal-header--internal .nopal-header__toggle{
    display:none;
}

.nopal-header__toggle:hover,
.nopal-header__toggle:focus,
.nopal-header__toggle:active{
    background:transparent !important;
    color:var(--nopal-header-hover) !important;
}

.nopal-header__toggle svg{
    width:32px;
    height:23px;
    fill:currentColor;
    overflow:visible;
}

.nopal-header__toggle .nopal-line{
    transform-box:fill-box;
    transform-origin:center;
    transition:transform .32s ease,opacity .2s ease;
}

.nopal-header.is-open .nopal-line--top{
    transform:translateY(12.75px) rotate(45deg);
}

.nopal-header.is-open .nopal-line--middle{
    opacity:0;
}

.nopal-header.is-open .nopal-line--bottom{
    transform:translateY(-12.75px) rotate(-45deg);
}

/* Panel */
.nopal-sidebar-overlay{
    position:fixed;
    inset:var(--nopal-header-height) 0 0;
    background:rgba(0,0,0,.28);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .35s ease,visibility .35s ease;
    z-index:99970;
}

.nopal-sidebar-overlay.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.nopal-sidebar{
    position:fixed;
    top:var(--nopal-header-height);
    right:0;
    bottom:0;
    width:min(var(--nopal-sidebar-width),92vw);
    background:#fff;
    transform:translateX(101%);
    visibility:hidden;
    transition:transform .4s cubic-bezier(.22,.61,.36,1),visibility .4s ease;
    z-index:99980;
    overflow-y:auto;
}

.nopal-sidebar.is-open{
    transform:translateX(0);
    visibility:visible;
}

.nopal-sidebar__inner{
    min-height:100%;
    padding:64px 48px 48px;
}

.nopal-sidebar__main{
    display:none;
}

.nopal-sidebar__main-links{
    display:flex;
    flex-direction:column;
    margin-bottom:44px;
}

.nopal-sidebar__main-links a{
    padding:12px 0;
    font:700 25px/1.2 "Public Sans",sans-serif;
    color:var(--nopal-header-text);
    text-decoration:none;
}

.nopal-sidebar--internal .nopal-sidebar__main-links a{
    font-weight:400;
}

.nopal-sidebar__title{
    margin:0 0 36px;
    font:400 32px/1.2 "Libre Baskerville",serif;
    color:var(--nopal-header-text);
}

.nopal-sidebar__projects{
    display:flex;
    flex-direction:column;
}

.nopal-sidebar__projects a{
    min-height:62px;
    padding:17px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-bottom:1px solid rgba(76,75,75,.26);
    font:600 18px/1.2 "Public Sans",sans-serif;
    color:var(--nopal-header-text);
    text-decoration:none;
}

[id]{
    scroll-margin-top:var(--nopal-header-height);
}

/* Desktop medio */
@media(max-width:1399px){
    .nopal-header__inner{
        width:calc(100% - 64px);
        gap:26px;
    }

    .nopal-header__brand{
        gap:20px;
    }

    .nopal-header__nav{
        gap:34px;
    }

    .nopal-header__nav--home a{
        font-size:17px;
    }

    .nopal-header__nav--internal a{
        font-size:15px;
    }
}

/* Tablet */
@media(max-width:1024px){
    .nopal-header__inner{
        width:calc(100% - 48px);
    }

    .nopal-header--home .nopal-header__inner{
        grid-template-columns:max-content minmax(0,1fr) 44px;
    }

    .nopal-header--internal .nopal-header__inner{
        grid-template-columns:max-content minmax(0,1fr);
    }

    .nopal-header__tagline{
        font-size:14px;
    }

    .nopal-header__nav{
        gap:24px;
    }

    .nopal-header__nav--home a{
        font-size:14px;
    }

    .nopal-header__nav--internal a{
        font-size:14px;
    }
}

/* Mobile */
@media(max-width:767px){
    .nopal-header__inner,
    .nopal-header--home .nopal-header__inner,
    .nopal-header--internal .nopal-header__inner{
        width:calc(100% - 40px);
        grid-template-columns:minmax(0,1fr) 44px;
        gap:18px;
    }

    .nopal-header__logo{
        width:96px !important;
        min-width:96px;
        max-width:96px !important;
    }

    .nopal-header__tagline,
    .nopal-header__nav{
        display:none;
    }

    .nopal-header__toggle svg{
        width:29px;
        height:21px;
    }

    .nopal-header--internal .nopal-header__toggle{
        display:flex;
    }

    .nopal-sidebar__main{
        display:block;
    }

    .nopal-sidebar{
        width:min(88vw,380px);
    }

    .nopal-sidebar__inner{
        padding:44px 30px 36px;
    }

    /* Home móvil: solo menú principal. */
    .nopal-sidebar--home .nopal-sidebar__title,
    .nopal-sidebar--home .nopal-sidebar__projects{
        display:none;
    }
}

@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto;
    }

    .nopal-sidebar,
    .nopal-sidebar-overlay,
    .nopal-header__toggle .nopal-line{
        transition:none;
    }
}

/* v2.3 */
.nopal-header__nav--home a{
 font-weight:400!important;
 font-size:16px!important;
}
.home .nopal-header__nav--home li:first-child{display:none!important;}