/* ============================================================
   HEADER — LEGALZONE 4.0

   Dos barras apiladas dentro de un contenedor sticky:

     .lz-topbar   redes sociales + enlace internacional
     .lz-header   logo + menú principal + acciones

   Comportamiento al hacer scroll (lo aplica header.js):
     - hacia abajo  → se ocultan ambas
     - hacia arriba → vuelve solo .lz-header (compacta)
     - arriba del todo → vuelven las dos
   ============================================================ */

.lz-site-head {
	position: sticky;
	top: 0;
	z-index: var(--lz-z-sticky);
	/* Se desplaza en bloque; la topbar se pliega por separado. */
	transform: translateY(0);
	transition: transform var(--lz-duration) var(--lz-ease);
	will-change: transform;
}

/* Oculto: sube su propia altura completa. */
.lz-site-head.is-hidden {
	transform: translateY(-100%);
}


/* Modo compacto: la topbar se pliega y solo queda el header. */
.lz-site-head.is-condensed .lz-topbar {
	height: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}


/* ============================================================
   TOPBAR
   ============================================================ */

.lz-topbar {
	background: var(--lz-surface-topbar);
	color: rgba(255, 255, 255, .72);
	font-size: var(--lz-text-xs);
	/* Altura fija para que el plegado sea animable.
	   El recorte solo se aplica al plegarse: con overflow oculto
	   permanente, el desplegable de utilidad quedaba invisible. */
	height: 38px;
	transition: height var(--lz-duration) var(--lz-ease),
	            opacity var(--lz-duration) var(--lz-ease),
	            visibility var(--lz-duration) var(--lz-ease);
}

.lz-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lz-space-4);
	height: 38px;
}

/* --- Aviso regulatorio (izquierda) ------------------------- */

.lz-topbar__notice {
	display: inline-flex;
	align-items: center;
	gap: var(--lz-space-2);
	letter-spacing: .04em;
	white-space: nowrap;
	min-width: 0;
}

.lz-topbar__notice .lz-age {
	color: var(--lz-accent);
	border-color: var(--lz-accent);
}

.lz-topbar__notice-text {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- Zona derecha ------------------------------------------ */

.lz-topbar__actions {
	display: flex;
	align-items: center;
	gap: var(--lz-space-4);
	flex-shrink: 0;
}

/* --- Menú de redes (dinámico desde WordPress) --------------
   El walker imprime <li> con una clase por red; el icono lo
   pone ::before vía máscara SVG para poder recolorearlo. */

.lz-social {
	display: flex;
	align-items: center;
	gap: var(--lz-space-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.lz-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--lz-radius-sm);
	color: rgba(255, 255, 255, .72);
	transition: color var(--lz-duration) var(--lz-ease),
	            background-color var(--lz-duration) var(--lz-ease);
}

.lz-social a:hover {
	color: var(--lz-accent);
	background: rgba(255, 255, 255, .07);
}

.lz-social .lz-icon {
	width: 16px;
	height: 16px;
}

/* Cuando el enlace no trae icono reconocible, se muestra el texto. */
.lz-social__label {
	font-size: var(--lz-text-xs);
	padding-inline: var(--lz-space-2);
}

/* --- Enlace internacional ---------------------------------- */

.lz-topbar__intl {
	display: inline-flex;
	align-items: center;
	gap: var(--lz-space-2);
	padding: var(--lz-space-1) var(--lz-space-3);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--lz-radius-sm);
	color: rgba(255, 255, 255, .86);
	font-size: var(--lz-text-xs);
	white-space: nowrap;
	transition: border-color var(--lz-duration) var(--lz-ease),
	            color var(--lz-duration) var(--lz-ease);
}

.lz-topbar__intl:hover {
	border-color: var(--lz-accent);
	color: var(--lz-accent);
}


/* --- Menú de utilidad (tres puntos) -------------------------
   Páginas de autoridad: accesibles, pero deliberadamente
   discretas para no desviar de las rutas de conversión. */

.lz-utility { position: relative; }

.lz-utility__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: var(--lz-radius-sm);
	background: transparent;
	color: rgba(255, 255, 255, .72);
	cursor: pointer;
	transition: color var(--lz-duration) var(--lz-ease),
	            background-color var(--lz-duration) var(--lz-ease);
}

.lz-utility__toggle:hover,
.lz-utility__toggle[aria-expanded="true"] {
	color: var(--lz-accent);
	background: rgba(255, 255, 255, .08);
}

.lz-utility__panel {
	position: absolute;
	top: calc(100% + var(--lz-space-2));
	right: 0;
	z-index: var(--lz-z-dropdown);
	min-width: 200px;
	padding: var(--lz-space-2);
	/* Nivel elevado: desplegable sobre la cabecera. */
	background: var(--lz-surface-raised);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius);
	box-shadow: var(--lz-shadow-md);
}

.lz-utility__panel[hidden] { display: none; }

.lz-utility__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lz-utility__list a {
	display: block;
	padding: var(--lz-space-2) var(--lz-space-3);
	border-radius: var(--lz-radius-sm);
	color: var(--lz-ink);
	font-size: var(--lz-text-base);
}

.lz-utility__list a:hover {
	color: var(--lz-accent);
	background: var(--lz-surface-sunken);
}


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

.lz-header {
	background: var(--lz-surface-header);
	border-bottom: 1px solid var(--lz-line-inverse);
}

.lz-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lz-space-6);
	height: 72px;
	transition: height var(--lz-duration) var(--lz-ease);
}

/* En modo compacto el header se estrecha un poco. */
.lz-site-head.is-condensed .lz-header__inner {
	height: 62px;
}

/* --- Logo --------------------------------------------------- */

.lz-brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.lz-brand img {
	width: auto;
	height: 26px;
	transition: height var(--lz-duration) var(--lz-ease);
}

.lz-site-head.is-condensed .lz-brand img {
	height: 22px;
}

/* Respaldo tipográfico mientras no haya archivo de logo. */
.lz-brand__text {
	font-family: var(--lz-font-display);
	font-size: var(--lz-text-xl);
	letter-spacing: .06em;
	color: #FFFFFF;
	text-transform: uppercase;
}

.lz-brand__text span { color: var(--lz-accent); }


/* ============================================================
   NAVEGACIÓN PRINCIPAL
   ============================================================ */

.lz-nav {
	display: flex;
	align-items: center;
	margin-inline-start: auto;
}

.lz-nav__list {
	display: flex;
	align-items: center;
	gap: var(--lz-space-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.lz-nav__list a {
	display: inline-flex;
	align-items: center;
	gap: var(--lz-space-2);
	padding: var(--lz-space-2) var(--lz-space-3);
	border-radius: var(--lz-radius-sm);
	color: rgba(255, 255, 255, .86);
	font-size: var(--lz-text-base);
	font-weight: 500;
	letter-spacing: .01em;
	white-space: nowrap;
	transition: color var(--lz-duration) var(--lz-ease),
	            background-color var(--lz-duration) var(--lz-ease);
}

.lz-nav__list a:hover {
	color: var(--lz-accent);
	background: rgba(255, 255, 255, .06);
}

/* Página actual: el subrayado dorado no depende solo del color. */
.lz-nav__list .current-menu-item > a,
.lz-nav__list .current-menu-ancestor > a,
.lz-nav__list .current-menu-parent > a {
	color: var(--lz-accent);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* --- Megamenú ----------------------------------------------

   Los elementos con hijos despliegan un panel a todo el ancho
   del contenedor; los que no tienen hijos son enlaces simples.
   Ambos conviven en la misma barra.
   ------------------------------------------------------------ */

.lz-nav__list > li { position: static; }

/* Sin hijos: nada que desplegar, se comporta como enlace normal. */
.lz-nav__list > li:not(.menu-item-has-children) > a::after { content: none; }

.lz-nav__list .menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-left: 2px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .7;
	transition: transform var(--lz-duration) var(--lz-ease);
}

.lz-nav__list .menu-item-has-children:hover > a::after,
.lz-nav__list .menu-item-has-children:focus-within > a::after {
	transform: translateY(1px) rotate(-135deg);
}

/* El panel desplegable es exclusivo de escritorio. En móvil el menú
   vive en .lz-mobile-panel y se muestra en flujo normal, así que
   estas reglas NO deben aplicarse allí. */
@media (min-width: 992px) {

	/* Panel: ocupa el ancho del contenedor y se ancla bajo el header.
	   Las columnas se reparten solas según cuántos hijos haya. */
	.lz-nav__list > li > .lz-mega {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: var(--lz-z-dropdown);
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: var(--lz-space-5) var(--lz-space-6);
		align-items: start;
		width: min(100%, var(--lz-container));
		margin-inline: auto;
		padding: var(--lz-space-5);
		background: var(--lz-surface);
		border: 1px solid var(--lz-line);
		border-radius: var(--lz-radius-md) var(--lz-radius-md);
		box-shadow: var(--lz-shadow-md);
		list-style: none;
		/* Oculto sin display:none para poder animarlo. */
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity var(--lz-duration) var(--lz-ease),
		            transform var(--lz-duration) var(--lz-ease),
		            visibility var(--lz-duration) var(--lz-ease);
	}

	.lz-nav__list > li:hover > .lz-mega,
	.lz-nav__list > li:focus-within > .lz-mega {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.lz-nav__list .lz-mega a {
		display: block;
		width: 100%;
		padding: var(--lz-space-3);
		border-radius: var(--lz-radius-sm);
		color: var(--lz-ink);
		font-size: var(--lz-text-base);
		font-weight: 500;
		white-space: normal;
	}

	.lz-nav__list .lz-mega a:hover {
		color: var(--lz-accent);
		background: var(--lz-surface-sunken);
	}

	/* Columnas temáticas: cada una con su título y sus enlaces. */

	.lz-mega__col {
		display: flex;
		flex-direction: column;
		gap: var(--lz-space-1);
	}

	.lz-mega__title {
		display: block;
		padding: 0 var(--lz-space-3) var(--lz-space-2);
		margin-bottom: var(--lz-space-1);
		border-bottom: 1px solid var(--lz-line);
		font-family: var(--lz-font-display);
		font-size: var(--lz-text-xs);
		text-transform: uppercase;
		letter-spacing: var(--lz-tracking-wide);
		color: var(--lz-muted);
	}

	.lz-mega__links {
		display: flex;
		flex-direction: column;
		gap: 0;
		list-style: none;
		margin: 0;
		padding: 0;
	}

}


/* ============================================================
   ACCIONES (buscador, tema, menú móvil)
   ============================================================ */

.lz-header__actions {
	display: flex;
	align-items: center;
	gap: var(--lz-space-2);
	flex-shrink: 0;
}

.lz-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: var(--lz-radius-sm);
	background: transparent;
	color: rgba(255, 255, 255, .82);
	cursor: pointer;
	transition: color var(--lz-duration) var(--lz-ease),
	            background-color var(--lz-duration) var(--lz-ease);
}

.lz-iconbtn:hover {
	color: var(--lz-accent);
	background: rgba(255, 255, 255, .08);
}

/* --- Conmutador de tema ------------------------------------
   Se muestra el icono del tema al que se cambiará. */

.lz-theme-toggle__sun { display: none; }
.lz-theme-toggle__moon { display: block; }

:root[data-theme="dark"] .lz-theme-toggle__sun { display: block; }
:root[data-theme="dark"] .lz-theme-toggle__moon { display: none; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .lz-theme-toggle__sun { display: block; }
	:root:not([data-theme="light"]) .lz-theme-toggle__moon { display: none; }
}

/* --- Botón hamburguesa -------------------------------------- */

/* Oculto en escritorio; en móvil lo activa la media query del final.
   Las barras se posicionan de forma absoluta respecto al botón: así el
   giro a "X" pivota sobre el centro exacto y no depende del flujo,
   que es lo que rompía el icono al heredar el flex de .lz-iconbtn. */
.lz-burger {
	display: none;
	position: relative;
}

.lz-burger__bar {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20px;
	height: 2px;
	margin-left: -10px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--lz-duration) var(--lz-ease),
	            opacity var(--lz-duration) var(--lz-ease);
}

.lz-burger__bar:nth-child(1) { transform: translateY(-7px); }
.lz-burger__bar:nth-child(2) { transform: translateY(0); }
.lz-burger__bar:nth-child(3) { transform: translateY(7px); }

.lz-burger[aria-expanded="true"] .lz-burger__bar:nth-child(1) {
	transform: translateY(0) rotate(45deg);
}

.lz-burger[aria-expanded="true"] .lz-burger__bar:nth-child(2) {
	opacity: 0;
}

.lz-burger[aria-expanded="true"] .lz-burger__bar:nth-child(3) {
	transform: translateY(0) rotate(-45deg);
}


/* ============================================================
   PANEL MÓVIL

   A pantalla completa: evita que el contenido quede recortado
   bajo el header y da sitio a las secciones plegables.
   ============================================================ */

.lz-mobile-panel {
	/* Fijo respecto al viewport: al vivir dentro del header sticky
	   necesita un z-index por encima de todo y su propio contexto. */
	position: fixed;
	inset: 0;
	z-index: var(--lz-z-modal);
	isolation: isolate;
	display: none;
	flex-direction: column;
	background: var(--lz-surface-header);
	overscroll-behavior: contain;
}

.lz-mobile-panel[data-open="true"] { display: flex; }

.lz-mobile-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lz-space-4);
	padding: var(--lz-space-3) var(--lz-gutter);
	border-bottom: 1px solid var(--lz-line-inverse);
	flex-shrink: 0;
}

/* La navegación es lo único que hace scroll. */
.lz-mobile-panel__nav {
	flex-grow: 1;
	overflow-y: auto;
	/* Explícito: overflow-y: auto habilita también el eje
	   horizontal cuando el contenido no cabe. */
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	padding-block: var(--lz-space-2);
}

.lz-mobile-panel .lz-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
}

.lz-mobile-panel .lz-nav__list > li {
	border-bottom: 1px solid var(--lz-line-inverse);
}

.lz-mobile-panel .lz-nav__list a {
	padding: var(--lz-space-4) var(--lz-gutter);
	border-radius: 0;
	min-height: 52px;
	font-size: var(--lz-text-md);
}

.lz-mobile-panel .lz-nav__list .current-menu-item > a {
	color: var(--lz-accent);
}

/* Submenús anidados y plegables. */
.lz-mobile-panel .sub-menu {
	position: static;
	display: flex;
	flex-direction: column;
	width: auto;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	border: 0;
	background: rgba(0, 0, 0, .22);
	border-radius: 0;
	padding: 0;
	margin: 0;
}

/* Las secciones arrancan plegadas: el panel se abre corto y legible.
   Al desplegar una, su contenido aparece entero — columnas y enlaces
   incluidos — sin exigir más clics. */
.lz-mobile-panel .lz-nav__list > .menu-item-has-children > .sub-menu {
	display: none;
}

.lz-mobile-panel .lz-nav__list > .menu-item-has-children.is-abierto > .sub-menu {
	display: flex;
}

.lz-mobile-panel .lz-mega__title {
	display: block;
	padding: var(--lz-space-3) var(--lz-gutter) var(--lz-space-1);
	border: 0;
	color: rgba(255, 255, 255, .45);
}

.lz-mobile-panel .lz-mega__col { display: block; }

.lz-mobile-panel .sub-menu a {
	padding-inline-start: calc(var(--lz-gutter) + var(--lz-space-4));
	color: rgba(255, 255, 255, .74);
	font-size: var(--lz-text-base);
	min-height: 48px;
	width: 100%;
}

.lz-mobile-panel .sub-menu a:hover {
	background: rgba(255, 255, 255, .06);
	color: var(--lz-accent);
}

/* El enlace navega; el botón despliega. */
.lz-mobile-panel .lz-nav__list > .menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.lz-mobile-panel .lz-nav__list > .menu-item-has-children > a {
	flex-grow: 1;
	width: auto;
}

.lz-mobile-panel .lz-nav__list > .menu-item-has-children > .sub-menu {
	flex-basis: 100%;
}

/* Las columnas del megamenú no se pliegan: son agrupaciones, no
   secciones navegables. */
.lz-mobile-panel .lz-mega__col {
	display: block;
}

.lz-mobile-panel .menu-item-has-children > a::after { content: none; }

/* Se lee como control pulsable sin competir con el enlace de la
   sección: superficie translúcida, no un color de marca. El dorado
   queda reservado para las llamadas a la acción. */
.lz-submenu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Área táctil holgada, dentro de la fila de 52px. */
	width: 44px;
	height: 44px;
	min-height: 0;
	margin-inline-end: var(--lz-space-2);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--lz-radius-sm);
	background: rgba(255, 255, 255, .10);
	color: #FFFFFF;
	cursor: pointer;
	flex-shrink: 0;
	transition: background-color var(--lz-duration) var(--lz-ease),
	            border-color var(--lz-duration) var(--lz-ease),
	            color var(--lz-duration) var(--lz-ease);
}

.lz-submenu-toggle:hover {
	background: rgba(255, 255, 255, .18);
	border-color: rgba(255, 255, 255, .28);
}

/* Abierto: el dorado marca el estado activo, no la mera existencia
   del botón. */
.lz-mobile-panel .is-abierto > .lz-submenu-toggle {
	background: rgba(201, 162, 75, .18);
	border-color: rgba(201, 162, 75, .45);
	color: var(--lz-accent);
}

.lz-submenu-toggle::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--lz-duration) var(--lz-ease);
}

.lz-mobile-panel .lz-submenu-toggle::after {
	transform: translateY(-2px) rotate(45deg);
}

.lz-mobile-panel .is-abierto > .lz-submenu-toggle::after {
	transform: translateY(2px) rotate(-135deg);
}

/* Pie: utilidad y redes, fuera del flujo principal. */
.lz-mobile-panel__foot {
	flex-shrink: 0;
	border-top: 1px solid var(--lz-line-inverse);
	padding: var(--lz-space-4) var(--lz-gutter);
	padding-bottom: max(var(--lz-space-4), env(safe-area-inset-bottom));
}

.lz-mobile-panel__utility {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lz-space-2) var(--lz-space-4);
	list-style: none;
	margin: 0 0 var(--lz-space-4);
	padding: 0;
}

.lz-mobile-panel__utility a {
	color: rgba(255, 255, 255, .6);
	font-size: var(--lz-text-sm);
}

.lz-mobile-panel__utility a:hover { color: var(--lz-accent); }

.lz-mobile-panel__social { display: flex; }


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

@media (max-width: 991px) {
	.lz-nav { display: none; }
	.lz-burger { display: inline-flex; }

	.lz-header__inner { height: 62px; }
	.lz-site-head.is-condensed .lz-header__inner { height: 56px; }

	/* El aviso regulatorio se recorta antes que las redes. */
	.lz-topbar__notice-text { display: none; }
}

@media (max-width: 575px) {
	.lz-topbar { height: 34px; }
	.lz-topbar__inner { height: 34px; }
	.lz-topbar__intl span { display: none; }
	.lz-social a { width: 28px; height: 28px; }
}


/* ============================================================
   MOVIMIENTO REDUCIDO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.lz-site-head,
	.lz-topbar,
	.lz-header__inner,
	.lz-brand img,
	.lz-nav__list .sub-menu {
		transition: none;
	}
}