:root{
    --aoi-white:#ffffff;
    --aoi-black:#000000;
    --aoi-navy:#003f82;
    --aoi-cyan:#00a8e5;
    --aoi-line:rgba(0,0,0,.10);
    --aoi-header-height:112px;
    --aoi-shell:1600px;
    --aoi-ease:cubic-bezier(.25,1,.5,1);
    --aoi-transition:.4s var(--aoi-ease);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--aoi-white);
    color:var(--aoi-black);
    font-family:"DM Sans",sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
body.aoi-menu-open{overflow:hidden}
a{color:inherit}
button{font:inherit}
img{display:block;max-width:100%;height:auto}

/* Lienzo vacío para evaluar únicamente el header. */
.aoi-header-preview{min-height:180vh;background:#fff}
.aoi-header-preview__space{height:180vh}

/* HEADER ----------------------------------------------------------- */
.aoi-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    padding:2rem 4rem;
    background:transparent;
    border-bottom:1px solid transparent;
    transition:padding var(--aoi-transition),background-color var(--aoi-transition),border-color var(--aoi-transition),box-shadow var(--aoi-transition);
}

.aoi-header.is-scrolled{
    padding:1rem 4rem;
    background:rgba(255,255,255,.85);
    border-bottom-color:rgba(0,0,0,.06);
    box-shadow:0 1px 0 rgba(0,0,0,.02);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
}

.aoi-header__inner{
    width:min(100%,var(--aoi-shell));
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:3rem;
}

.aoi-brand{
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    text-decoration:none;
    color:var(--aoi-black);
    font-family:"Manrope",sans-serif;
    font-size:1.5rem;
    font-weight:700;
    letter-spacing:-.04em;
}

.aoi-brand img{
    width:auto;
    max-width:176px;
    max-height:48px;
    object-fit:contain;
}
.aoi-brand--vertical img{max-width:94px;max-height:56px}

.aoi-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:1 1 auto;
}

.aoi-menu{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2.5rem;
    list-style:none;
    margin:0;
    padding:0;
}
.aoi-menu li{margin:0;padding:0}
.aoi-menu a{
    position:relative;
    display:inline-flex;
    align-items:center;
    min-height:44px;
    color:var(--aoi-black);
    text-decoration:none;
    font-family:"DM Sans",sans-serif;
    font-size:.95rem;
    font-weight:500;
    letter-spacing:-.01em;
    transition:color .45s var(--aoi-ease);
}
.aoi-menu a::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:6px;
    height:1px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:right center;
    transition:transform .4s var(--aoi-ease);
}
.aoi-menu a:hover,
.aoi-menu a:focus-visible{color:var(--aoi-cyan)}
.aoi-menu a:hover::after,
.aoi-menu a:focus-visible::after{transform:scaleX(1);transform-origin:left center}

.aoi-header__actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex:0 0 auto;
}

.aoi-cta{
    position:relative;
    isolation:isolate;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 1.45rem;
    overflow:hidden;
    border:1px solid var(--aoi-black);
    background:transparent;
    color:var(--aoi-black);
    text-decoration:none;
    font-family:"DM Sans",sans-serif;
    font-size:.9rem;
    font-weight:600;
    letter-spacing:-.01em;
    transition:color .35s var(--aoi-ease),border-color .35s var(--aoi-ease),transform .15s var(--aoi-ease);
}
.aoi-cta::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:var(--aoi-navy);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .4s var(--aoi-ease);
}
.aoi-cta:hover,
.aoi-cta:focus-visible{color:var(--aoi-white);border-color:var(--aoi-navy)}
.aoi-cta:hover::before,
.aoi-cta:focus-visible::before{transform:scaleX(1)}
.aoi-cta:active{transform:scale(.985)}
.aoi-cta:focus-visible{outline:2px solid var(--aoi-cyan);outline-offset:3px}

.aoi-menu-toggle{
    display:none;
    width:44px;
    height:44px;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:7px;
}
.aoi-menu-toggle span{
    display:block;
    width:26px;
    height:1px;
    background:var(--aoi-black);
    transition:transform .3s var(--aoi-ease),opacity .2s var(--aoi-ease);
}
.aoi-menu-toggle:focus-visible{outline:2px solid var(--aoi-cyan);outline-offset:3px}

/* FULL-SCREEN MOBILE MENU ----------------------------------------- */
.aoi-mobile-menu{
    position:fixed;
    inset:0;
    z-index:1200;
    display:flex;
    flex-direction:column;
    padding:1.5rem 2rem 2rem;
    background:var(--aoi-white);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-10px);
    transition:opacity .3s var(--aoi-ease),transform .3s var(--aoi-ease),visibility 0s linear .3s;
}
.aoi-mobile-menu.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    transition:opacity .3s var(--aoi-ease),transform .3s var(--aoi-ease),visibility 0s;
}
.aoi-mobile-menu__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
}
.aoi-mobile-brand{
    display:inline-flex;
    align-items:center;
    color:var(--aoi-black);
    text-decoration:none;
    font-family:"Manrope",sans-serif;
    font-size:1.45rem;
    font-weight:700;
    letter-spacing:-.04em;
}
.aoi-mobile-brand img{width:auto;max-width:164px;max-height:46px;object-fit:contain}
.aoi-mobile-close{
    position:relative;
    width:44px;
    height:44px;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
}
.aoi-mobile-close span{
    position:absolute;
    left:9px;
    top:21px;
    width:26px;
    height:1px;
    background:var(--aoi-black);
}
.aoi-mobile-close span:first-child{transform:rotate(45deg)}
.aoi-mobile-close span:last-child{transform:rotate(-45deg)}
.aoi-mobile-close:focus-visible{outline:2px solid var(--aoi-cyan);outline-offset:2px}

.aoi-mobile-menu__content{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3rem;
    padding:3rem 0 5rem;
}
.aoi-mobile-links{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.15rem;
}
.aoi-mobile-links li{margin:0;padding:0}
.aoi-mobile-links a{
    position:relative;
    display:inline-block;
    color:var(--aoi-black);
    text-decoration:none;
    font-family:"Manrope",sans-serif;
    font-size:clamp(2rem,7vw,3.75rem);
    line-height:1.05;
    font-weight:600;
    letter-spacing:-.045em;
    transition:color .4s var(--aoi-ease);
}
.aoi-mobile-links a::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-5px;
    height:1px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .4s var(--aoi-ease);
}
.aoi-mobile-links a:hover,
.aoi-mobile-links a:focus-visible{color:var(--aoi-cyan)}
.aoi-mobile-links a:hover::after,
.aoi-mobile-links a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.aoi-cta--mobile{min-width:210px}

@media (max-width:1100px){
    .aoi-header{padding:1.5rem 2rem}
    .aoi-header.is-scrolled{padding:1rem 2rem}
    .aoi-nav,.aoi-cta--desktop{display:none}
    .aoi-menu-toggle{display:flex}
    .aoi-header__inner{gap:1rem}
}

@media (max-width:640px){
    .aoi-header{padding:1.25rem 1.25rem}
    .aoi-header.is-scrolled{padding:.9rem 1.25rem}
    .aoi-brand img{max-width:145px;max-height:42px}
    .aoi-mobile-menu{padding:1.25rem 1.25rem 1.5rem}
    .aoi-mobile-brand img{max-width:145px;max-height:42px}
    .aoi-mobile-menu__content{padding:2.5rem 0 4rem;gap:2.5rem}
    .aoi-mobile-links{gap:1rem}
}

@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}