/* ============================
SECTION HEADERS
============================ */

.gs-section-header{
text-align:center;
margin-bottom:var(--space-xl);
}

.gs-section-title{
font-size:var(--text-xl);
margin-bottom:var(--space-sm);
}

.gs-section-subtitle{
color:var(--color-text-azul);
max-width:600px;
margin:auto;
}


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

#gs-header{
position:fixed;
top:30px;
left:0;
width:100%;
z-index:999;
}

.gs-header-container{
background:var(--color-blanco);
border-radius:var(--radius-xxl);

padding:10px 12px;

display:flex;
align-items:center;
gap:var(--space-lg);

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

border:1px solid #ebebeb;
}


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

.gs-logo{
flex-shrink:0;
}

.gs-logo img{
width:110px;
height:auto;
display:block;
}


/* ============================
DESKTOP MENU
============================ */

.gs-menu{
flex:1;
display:flex;
justify-content:center;
}

.gs-menu-list{
display:flex;
align-items:center;
gap:28px;

list-style:none;
margin:0;
padding:0;
}

.gs-menu-list li{
position:relative;
}

.gs-menu-list a{
text-decoration:none;
font-size:15px;
font-weight:500;

color:var(--color-text-azul);

transition:.2s;
}

.gs-menu-list a:hover{
color:var(--color-primario);
}


/* ============================
SUBMENU DESKTOP
============================ */

.gs-menu-list .sub-menu{
position:absolute;

top:100%;
left:0;

background:var(--color-blanco);

border-radius:var(--radius-md);

padding:10px 0;
margin-top:12px;

list-style:none;

box-shadow:0 15px 40px rgba(0,0,0,.08);

opacity:0;
visibility:hidden;

transform:translateY(10px);

transition:all .25s ease;
}

.gs-menu-list li:hover > .sub-menu{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.gs-menu-list .sub-menu a{
display:block;
padding:10px 18px;
white-space:nowrap;
}


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

.gs-header-actions{
display:flex;
align-items:center;
gap:var(--space-sm);
flex-shrink:0;
}


/* ============================
LANGUAGE SWITCH
============================ */

.gs-lang-switch{
display:flex;
align-items:center;

background:var(--color-bg);

border-radius:var(--radius-xxl);

padding:5px;
gap:6px;
}

.gs-lang-item{
display:flex;
align-items:center;
justify-content:center;

width:40px;
height:34px;

border-radius:var(--radius-xxl);

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

text-decoration:none;

color:var(--color-text-azul);

transition:.25s;
}

.gs-lang-item.current-lang{
background:var(--color-primario);
color:var(--color-text-blanco);
}


/* ============================
MOBILE TOGGLE
============================ */

.gs-mobile-toggle{
display:none;

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

width:56px;
height:40px;

border-radius:var(--radius-xxl);

background:#3c67bc33;

border:none;
cursor:pointer;
}

.gs-hamburger{
display:flex;
flex-direction:column;
justify-content:space-between;

width:30px;
height:16px;
}

.gs-hamburger-line{
height:4px;

background:var(--color-primario);

border-radius:4px;

transition:.3s;

width:30px;
}

.gs-hamburger-line.bottom{
margin-left:auto;
}


/* ============================
MOBILE MENU
============================ */

.gs-mobile-menu{
position:fixed;

top:0;
left:0;

width:100%;
height:100vh;

background:var(--color-blanco);

z-index:998;

transform:translateX(-100%);

transition:transform .35s ease;

padding:130px 25px 40px;

overflow-y:auto;
}

.gs-mobile-menu.open{
transform:translateX(0);
}


/* ============================
MOBILE INNER
============================ */

.gs-mobile-inner{
display:flex;
flex-direction:column;
gap:40px;
}


/* ============================
MOBILE TOP
============================ */

.gs-mobile-top{
display:flex;
align-items:center;
gap:20px;
}


/* ============================
MOBILE MENU BOX
============================ */

.gs-mobile-menu-box{
background:var(--color-blanco);

border-radius:var(--radius-lg);

border:1px solid #e9e9e9;

padding:30px;
}


/* ============================
MOBILE MENU LIST
============================ */

.gs-mobile-menu-list{
list-style:none;
padding:0;
margin:0;

display:flex;
flex-direction:column;

gap:20px;
}

.gs-mobile-menu-list li{
position:relative;
}

.gs-mobile-menu-list a{
font-size:18px;
font-weight:600;

text-decoration:none;

color:var(--color-text-azul);

display:flex;
justify-content:space-between;
}


/* ============================
SUBMENU MOBILE
============================ */

.gs-mobile-menu-list .sub-menu{
display:none;

flex-direction:column;

gap:20px;

border-radius:var(--radius-md);

padding:20px;

background:var(--color-bg);

margin-top:20px;

list-style:none;
}

.gs-mobile-menu-list li.open > .sub-menu{
display:flex;
}

.gs-mobile-menu-list .menu-item-has-children > a::after{
content:"▾";
font-size:12px;
margin-left:8px;
}


/* ============================
MOBILE SOCIAL
============================ */

.gs-mobile-social{
display:flex;
justify-content:center;
gap:20px;
}

.gs-mobile-social a{
width:44px;
height:44px;

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

border-radius:var(--radius-md);

background:var(--color-bg);

color:var(--color-primario);

font-size:18px;

transition:.2s;
}

.gs-mobile-social a:hover{
background:var(--color-primario);
color:var(--color-text-blanco);
}


/* ============================
RESPONSIVE
============================ */

@media (max-width:1024px){

.gs-menu{
display:none;
}

.gs-user-desktop{
display:none;
}

.gs-mobile-toggle{
display:flex;
}

.gs-header-container{
justify-content:space-between;
}

.gs-lang-switch{
display:none;
}

.gs-lang-switch-mobile{
display:flex;
}

}