/*
 * Cabecera fija, desplegable de servicios y menú móvil (spec R1 §5).
 * Portado del prototipo v22: CSS L79-121, L553-563 y L653-654.
 */

/* Cabecera fija en forma de píldora; se compacta al pasar 80 px (view.js). */
.cab {
	position: fixed;
	z-index: 30;
	top: calc(env(safe-area-inset-top, 0px) + 20px);
	left: var(--vs-margen);
	right: var(--vs-margen);
	height: var(--wp--preset--dimension--alto-cabecera);
	padding: 0 6px 0 22px;
	border-radius: var(--wp--preset--border-radius--radius-pill);
	background: var(--wp--preset--color--crema);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	transition:
		height 0.35s var(--vs-curva-ease),
		box-shadow 0.35s var(--vs-curva-ease),
		top 0.35s var(--vs-curva-ease),
		background 0.35s var(--vs-curva-ease),
		transform 0.6s var(--vs-curva-ease);

	@media (max-width: 900px) {
		height: 56px;
		padding: 0 6px 0 16px;
		top: calc(env(safe-area-inset-top, 0px) + 12px);
	}
}

.cab.compacta {
	top: calc(env(safe-area-inset-top, 0px) + 10px);
	height: 58px;
	background: var(--wp--preset--color--cabecera-compacta);
	box-shadow: var(--wp--preset--shadow--sombra-cabecera);
}

/* Entrada de la portada: la cabecera baja desde arriba (clase puesta por la portada). */
.vs-intro .cab {
	transform: translateY(-140%);
}

/*
 * Área de toque de 44 px como mínimo sin mover nada: una capa invisible centrada en el enlace que solo
 * crece por los lados que miden menos de 44 px. Los enlaces del menú usan ::before porque ::after es su punto.
 */
.cab-logo,
.menu-top a {
	position: relative;
}

.cab-logo::after,
.menu-top a::after,
.menu-pie::after,
.nav > a::before,
.nav-btn::before {
	content: "";
	position: absolute;
	inset-block: min(0px, calc((100% - 44px) / 2));
	inset-inline: min(0px, calc((100% - 44px) / 2));
}

.cab-logo img {
	height: 44px;
	width: auto;
	transition: height 0.35s var(--vs-curva-ease);

	@media (max-width: 900px) {
		height: 36px;
	}
}

.nav {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.4vw, 36px);
	font-size: var(--wp--preset--font-size--pequeno);

	@media (max-width: 1080px) {
		display: none;
	}
}

.nav-item {
	position: relative;
}

.nav-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 6px 0;
	cursor: pointer;
}

.nav-btn svg {
	transition: transform 0.35s var(--vs-curva-ease);
}

/* Desplegable de Servicios: dos columnas y «Todos los servicios». */
.mega {
	position: absolute;
	left: -28px;
	top: calc(100% + 18px);
	display: grid;
	grid-template-columns: auto auto;
	gap: 36px;
	padding: 28px 32px;
	background: var(--wp--preset--color--blanco);
	border-radius: var(--wp--preset--border-radius--radius-menu);
	box-shadow: var(--wp--preset--shadow--sombra-menu);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition:
		opacity var(--vs-dur-interaccion) var(--vs-curva-ease),
		transform var(--vs-dur-interaccion) var(--vs-curva-ease),
		visibility 0s var(--vs-dur-interaccion);
	white-space: nowrap;
}

/* Puente invisible entre el botón y el panel para que no se cierre al bajar el ratón. */
.mega::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -18px;
	height: 18px;
}

.nav-item.abierto .mega,
html:not(.vs-js) .nav-item:hover .mega,
html:not(.vs-js) .nav-item:focus-within .mega {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity var(--vs-dur-interaccion) var(--vs-curva-ease),
		transform var(--vs-dur-interaccion) var(--vs-curva-ease),
		visibility 0s;
}

.mega-col {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mega-tit {
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--wp--preset--color--verde-texto);
	margin-bottom: 8px;
}

.mega a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 6px 0;
	font-size: var(--wp--preset--font-size--boton);
	transition:
		color 0.25s var(--vs-curva-ease),
		transform 0.25s var(--vs-curva-ease);
}

.mega .mega-todos {
	margin-top: auto;
	padding-top: 14px;
	color: var(--wp--preset--color--azul);
	font-weight: 500;
}

/* Ítem activo y paso del ratón: punto verde de 5 px bajo el enlace. */
.nav > a,
.nav-btn {
	position: relative;
}

.nav > a {
	padding-block: 6px;
}

.nav > a::after,
.nav-btn::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -2px;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: var(--wp--preset--border-radius--radius-circle);
	background: var(--wp--preset--color--verde);
	transform: scale(0);
	transition: transform 0.35s var(--vs-curva-rebote);
}

.nav > a:hover::after,
.nav > a:focus-visible::after,
.nav > a[aria-current]::after,
.nav-btn.activo::after {
	transform: scale(1);
}

.cab .btn {
	height: 50px;

	@media (max-width: 1080px) {
		display: none;
	}
}

.cab .btn .arr {
	width: 38px;
	height: 38px;
}

.burger {
	display: none;
	width: 48px;
	height: 48px;
	border-radius: var(--wp--preset--border-radius--radius-circle);
	border: 0;
	background: var(--wp--preset--color--azul);
	color: var(--wp--preset--color--blanco);
	align-items: center;
	justify-content: center;
	cursor: pointer;

	@media (max-width: 1080px) {
		display: flex;
	}
}

/* Menú móvil: panel azul a pantalla completa que entra desde la derecha. */
.menu {
	position: fixed;
	inset: 0;
	z-index: 40;
	background: var(--wp--preset--color--azul);
	color: var(--wp--preset--color--blanco);
	padding: calc(env(safe-area-inset-top, 0px) + 24px) var(--vs-margen)
		calc(env(safe-area-inset-bottom, 0px) + 32px);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-3);
	transition: transform var(--vs-dur-estado) var(--vs-curva-ease);
	overflow-y: auto;
}

/* Cerrado solo con JS: sin JS el panel se queda en la página (ver al final). */
.vs-js .menu {
	transform: translateX(100%);
	visibility: hidden;
}

.vs-js .menu.abierto {
	transform: none;
	visibility: visible;
}

/* Sobre el azul, el contorno de foco azul no se ve: va en blanco. */
.menu :focus-visible {
	outline: 2px solid var(--wp--preset--color--blanco);
	outline-offset: 3px;
}

.menu-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	z-index: 1;
}

.menu-top img {
	height: 40px;
	width: auto;
}

.menu-cerrar {
	width: 48px;
	height: 48px;
	border-radius: var(--wp--preset--border-radius--radius-circle);
	border: 1px solid
		color-mix(in srgb, var(--wp--preset--color--blanco) 50%, transparent);
	background: transparent;
	color: var(--wp--preset--color--blanco);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.menu nav {
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 1;
}

.menu-sub a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 20px;
	padding: 8px 0 8px 20px;
	color: var(--wp--preset--color--menu-sub);
}

.menu nav > a,
.menu-grupo {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--menu-movil);
	font-weight: var(--wp--custom--tipo--menu-movil--font-weight);
	line-height: var(--wp--custom--tipo--menu-movil--line-height);
	letter-spacing: var(--wp--custom--tipo--menu-movil--letter-spacing);
	color: var(--wp--preset--color--blanco);
	padding: 10px 0;
	border-bottom: 1px solid
		color-mix(in srgb, var(--wp--preset--color--blanco) 14%, transparent);
}

.menu-grupo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	cursor: pointer;
	text-align: left;
}

.menu-grupo svg {
	transition: transform 0.35s var(--vs-curva-ease);
}

.menu-grupo[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* Enlaces en cascada al abrir: 0,05 s × índice (--i lo pone render.php). */
.vs-js .menu nav > :not(.menu-sub) {
	opacity: 0;
	transform: translateX(32px);
	transition:
		opacity 0.45s var(--vs-curva-ease),
		transform 0.45s var(--vs-curva-ease);
}

.vs-js .menu.abierto nav > :not(.menu-sub) {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--i, 0) * 0.05s);
}

.menu-sub {
	display: flex;
	flex-direction: column;
}

.menu-sub[hidden] {
	display: none;
}

.menu-sub a.todos {
	font-weight: 400;
	color: var(--wp--preset--color--blanco);
}

.menu-pie {
	margin: auto 0 0;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--wp--preset--font-size--cuerpo);
	color: var(--wp--preset--color--blanco);
	position: relative;
	z-index: 1;
}

.menu-columna {
	position: absolute;
	right: -30px;
	top: 12%;
	height: 76%;
	width: auto;
	pointer-events: none;
}

.menu-columna circle {
	fill: color-mix(in srgb, var(--wp--preset--color--blanco) 20%, transparent);
}

/*
 * Estados (al final por la especificidad): cabecera compacta, desplegable abierto y enlace
 * activo o con el ratón encima.
 */
.cab.compacta .cab-logo img {
	height: 38px;
}

.nav-item.abierto .nav-btn svg {
	transform: rotate(180deg);
}

.mega a:hover,
.mega a:focus-visible,
.mega a[aria-current] {
	color: var(--wp--preset--color--azul);
	transform: translateX(4px);
}

/*
 * Sin JS: hasta 1080 px el panel es una lista estática bajo la cabecera fija (84 px de cabecera
 * y 24 de aire), con Servicios desplegado; sin hamburguesa, botón de cerrar ni botón de Servicios (no se
 * puede plegar). Por encima, oculto.
 */
html:not(.vs-js) .menu {
	position: relative;
	inset: auto;
	z-index: auto;
	padding-top: calc(env(safe-area-inset-top, 0px) + 108px);

	@media (min-width: 1081px) {
		display: none;
	}
}

html:not(.vs-js) .menu-top,
html:not(.vs-js) .burger,
html:not(.vs-js) .menu-grupo {
	display: none;
}

html:not(.vs-js) .menu-sub[hidden] {
	display: flex;
}