/* css/lp_header.css */

/*======================================================
SHARED HEADER - PUBLIC PAGES
======================================================*/

.lp-site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--white);
border-bottom: 1px solid var(--border);
}

/* ACCESIBILIDAD - SALTAR AL CONTENIDO */
.lp-skip-link {
position: absolute;
left: 16px;
top: 8px;
transform: translateY(-180%);
background: var(--blue);
color: var(--white);
padding: 10px 14px;
border-radius: 8px;
text-decoration: none;
font-size: 14px;
font-weight: 700;
z-index: 2;
}

.lp-skip-link:focus {
transform: translateY(0);
}

/* CONTENEDOR HEADER */
.lp-header-inner {
min-height: 78px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}

/* LOGO Y MARCA */
.lp-brand {
display: inline-flex;
align-items: center;
gap: 11px;
color: var(--blue);
font-size: 19px;
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.6px;
white-space: nowrap;
text-decoration: none;
}

.lp-brand img {
width: 40px;
height: 40px;
border-radius: 10px;
flex: none;
}

.lp-brand strong {
font-weight: 700;
}

/* MENU DESKTOP */
.lp-nav {
display: flex;
align-items: center;
gap: clamp(14px, 2.6vw, 34px);
}

.lp-nav a {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 400;
color: var(--text-muted);
text-decoration: none;
transition: color .2s ease;
}

.lp-nav a:hover,
.lp-nav a:focus-visible {
color: var(--blue);
text-decoration: underline;
text-decoration-color: var(--orange);
text-underline-offset: 4px;
}

.lp-nav a[aria-current="page"] {
color: var(--blue);
font-weight: 700;
}

/* ENLACE DESTACADO */
.lp-nav .lp-nav-community {
background: var(--blue);
color: var(--white);
border-radius: 10px;
padding: 11px 17px;
font-weight: 700;
}

.lp-nav .lp-nav-community:hover,
.lp-nav .lp-nav-community:focus-visible {
color: var(--white);
background: var(--blue);
text-decoration: none;
box-shadow: inset 0 0 0 2px var(--orange);
}

/* BOTON MENU MOVIL */
.lp-nav-toggle {
display: none;
width: 44px;
height: 44px;
flex: none;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--white);
color: var(--blue);
cursor: pointer;
}

/* RESPONSIVE */
@media (max-width: 760px) {

.lp-header-inner {
min-height: 68px;
}

.lp-brand {
font-size: 17px;
}

.lp-brand img {
width: 35px;
height: 35px;
}

.lp-nav-toggle {
display: inline-flex;
}

.lp-nav {
display: none;
position: absolute;
top: calc(100% + 1px);
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 3px;
padding: 12px 16px 18px;
background: var(--white);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-soft);
}

.lp-nav.is-open {
display: flex;
animation: lp-menu-drop .2s ease-out both;
}

.lp-nav a {
min-height: 44px;
padding: 10px 12px;
border-radius: 8px;
}

.lp-nav .lp-nav-community {
justify-content: center;
margin-top: 5px;
}

}

/* ANIMACION MENU */
@keyframes lp-menu-drop {

from {
opacity: 0;
transform: translateY(-7px);
}

to {
opacity: 1;
transform: translateY(0);
}

}