/*
 * VOZ IP: partes del tema (T7: encabezado). Maqueta hibrido-v2, sección "header".
 * Escritorio desde 1024 px: logo, cinco grupos con desplegable, Login y WhatsApp.
 * Por debajo de 1024 px: logo y botón de menú; el panel muestra todo desplegado.
 * Movimiento: solo transform y opacity, curva común; nada con movimiento reducido.
 */

/* ---------- Contenedor fijo ---------- */
.vz-encabezado {
	--vz-foco: var(--wp--custom--color--foco-oscuro, #5DC9C6);
	position: sticky;
	top: 0;
	z-index: 30;
	color: var(--wp--preset--color--gris-claro);
	/* El fondo es una capa aparte (::before) para compactarlo con transform, sin cambiar la altura. */
	isolation: isolate;
}

.vz-encabezado::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(3, 36, 20, 0.94);
	border-bottom: 1px solid var(--wp--preset--color--superficie);
	transform-origin: 50% 0;
	transition: transform 200ms var(--vz-curva), opacity 200ms var(--vz-curva);
}

/* Con la barra de administración (sesión iniciada), el encabezado queda debajo de ella. */
.admin-bar .vz-encabezado {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	/* En pantallas pequeñas la barra de administración no es fija. */
	.admin-bar .vz-encabezado {
		top: 0;
	}
}

.vz-encabezado__interior {
	display: flex;
	align-items: center;
	gap: 36px;
	min-height: var(--vz-alto-encabezado);
	max-width: 1440px;
	margin-inline: auto;
	padding: 12px var(--vz-lateral);
	transition: transform 200ms var(--vz-curva);
}

.vz-encabezado__interior > *,
.vz-encabezado__panel > *,
.vz-encabezado__acciones > * {
	margin-block: 0;
}

/* ---------- Estado compacto (encabezado.js, pasados 80 px) ---------- */
.vz-encabezado.is-compacto::before {
	transform: scaleY(0.86);
}

.vz-encabezado.is-compacto .vz-encabezado__interior {
	transform: translateY(-5px);
}

.vz-encabezado.is-compacto .vz-encabezado__logo img {
	transform: scale(0.88);
}

/* ---------- Logo ---------- */
.vz-encabezado__logo {
	display: block;
	flex: none;
	border-radius: 6px;
}

.vz-encabezado__logo img {
	display: block;
	width: auto;
	height: 50px;
	transform-origin: 0 50%;
	transition: transform 200ms var(--vz-curva);
}

/* ---------- Panel (en escritorio, una fila) ---------- */
.vz-encabezado__panel {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 24px;
	min-width: 0;
}

/* ---------- Menú ---------- */
.vz-menu {
	flex: 1;
}

.vz-menu .vz-menu__lista {
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 600;
	font-size: 0.9375rem;
}

.vz-menu .vz-menu__lista > li {
	position: relative;
	display: flex;
	align-items: center;
	border-radius: 10px;
	transition: background-color 200ms var(--vz-curva);
}

.vz-menu .vz-menu__lista > li > a {
	display: block;
	padding: 14px 12px;
	border-radius: 10px;
	color: var(--wp--preset--color--gris-claro);
	text-decoration: none;
}

/* Con JavaScript, el enlace deja sitio al botón de flecha y a su anillo de foco (2 px + 2 px por fuera). */
.js .vz-menu .vz-menu__grupo--con-panel > a {
	padding-right: 6px;
}

.vz-menu .vz-menu__lista > li:hover,
.vz-menu .vz-menu__lista > li:focus-within,
.vz-menu .vz-menu__lista > li.is-abierto {
	background-color: var(--wp--preset--color--superficie);
}

/* Botón de flecha (lo crea encabezado.js): objetivo de 32 x 44 px. */
.vz-menu__flecha {
	display: grid;
	place-items: center;
	width: 32px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--wp--preset--color--menta);
	cursor: pointer;
}

.vz-menu__flecha::before,
html:not(.js) .vz-menu .vz-menu__lista > li > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 200ms var(--vz-curva);
}

html:not(.js) .vz-menu .vz-menu__lista > li > a::after {
	margin-left: 8px;
	color: var(--wp--preset--color--menta);
}

.vz-menu__flecha[aria-expanded="true"]::before {
	transform: rotate(225deg) translate(-2px, -1px);
}

/* Desplegable */
.vz-menu .vz-menu__desplegable {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 2;
	min-width: 240px;
	margin: 0;
	padding: 8px;
	list-style: none;
	border: 1px solid var(--wp--preset--color--superficie-media);
	border-radius: 16px;
	background: var(--wp--preset--color--fondo);
	box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.7);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 200ms var(--vz-curva), transform 200ms var(--vz-curva), visibility 200ms;
}

/* Se abre con el botón (JS); también al pasar el puntero, y sin JS con el foco. */
.vz-menu .vz-menu__lista > li.is-abierto > .vz-menu__desplegable,
html:not(.js) .vz-menu .vz-menu__lista > li:focus-within > .vz-menu__desplegable {
	opacity: 1;
	visibility: visible;
	transform: none;
}

@media (hover: hover) and (pointer: fine) {
	.vz-menu .vz-menu__lista > li:hover > .vz-menu__desplegable {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

.vz-menu .vz-menu__desplegable a {
	display: block;
	padding: 11px 14px;
	border-radius: 10px;
	color: var(--wp--preset--color--gris-claro);
	font-weight: 600;
	font-size: 0.90625rem;
	text-decoration: none;
}

.vz-menu .vz-menu__desplegable a:hover {
	background: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--turquesa);
}

.vz-menu .vz-menu__sub a {
	padding-left: 30px;
	color: var(--wp--preset--color--menta);
	font-weight: 500;
	font-size: 0.875rem;
}

.vz-menu .vz-menu__sub a::before {
	content: "› ";
}

/* Ni el texto de los grupos ni las flechas se parten o encogen. */
.vz-menu .vz-menu__lista > li,
.vz-menu .vz-menu__lista > li > a {
	flex: none;
	white-space: nowrap;
}

.vz-menu__flecha {
	flex: none;
}

/* De 1100 px hasta el ancho máximo de la envoltura (1280 px) la fila completa no cabe con las medidas de la
   maqueta: se aprieta sin cambiar su aspecto. Antes llegaba a 1199 px, pero con los cinco grupos visibles la fila
   se salía 10 px a 1200 px (0.3.2). Por debajo de 1100 px va el menú móvil (David, 0.3.2). */
@media (min-width: 1100px) and (max-width: 1279.98px) {
	.vz-encabezado__interior {
		gap: 20px;
	}

	.vz-encabezado__panel {
		gap: 14px;
	}

	.vz-menu .vz-menu__lista {
		gap: 2px;
		font-size: 0.875rem;
	}

	.vz-menu .vz-menu__lista > li > a {
		padding-inline: 8px;
	}

	.vz-menu__flecha {
		width: 28px;
	}

	.vz-encabezado .wp-element-button {
		padding-inline: 16px;
		font-size: 0.875rem;
	}
}

/* ---------- Acciones: Login y WhatsApp ---------- */
.vz-encabezado__acciones {
	display: flex;
	align-items: center;
	gap: 12px;
}

.vz-encabezado__acciones .wp-block-buttons {
	margin: 0;
}

.vz-boton-contorno {
	display: inline-flex;
	align-items: center;
	padding: 11px 22px;
	border: 1.5px solid var(--wp--preset--color--turquesa);
	border-radius: 999px;
	color: var(--wp--preset--color--turquesa);
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
	white-space: nowrap;
}

.vz-encabezado .wp-element-button {
	white-space: nowrap;
	transition: transform 250ms var(--vz-curva);
}

.vz-encabezado .wp-element-button:hover,
.vz-boton-contorno:hover {
	transform: translateY(-2px);
}

/* Enlace a una página que aún no existe (solo con sesión; el público no lo recibe). */
.vz-pendiente > a {
	outline: 1px dashed #F2C94C;
	outline-offset: -3px;
}

.vz-pendiente__nota {
	margin: 4px 12px;
	font-size: 0.6875rem;
	white-space: nowrap;
}

/* Login al GLPI (si se vaciara su dirección, con sesión se ve con la nota del dato pendiente). */
.vz-login {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	max-width: 260px;
}

/* ---------- Botón de menú (móvil) ---------- */
.vz-menu__abrir {
	display: none;
}

.vz-menu__abrir[hidden] {
	display: none !important;
}

.vz-menu__barras {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.vz-menu__barras i {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--wp--preset--color--gris-claro);
	transition: transform 300ms var(--vz-curva), opacity 200ms;
}

.vz-encabezado.is-menu-abierto .vz-menu__barras i:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.vz-encabezado.is-menu-abierto .vz-menu__barras i:nth-child(2) {
	opacity: 0;
}

.vz-encabezado.is-menu-abierto .vz-menu__barras i:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Por debajo de 1100 px (antes 1024; mismo corte en encabezado.js) ---------- */
@media (max-width: 1099.98px) {
	.vz-encabezado__interior {
		gap: 14px;
	}

	.vz-menu__abrir {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0 0 0 auto;
		padding: 0;
		border: 1.5px solid var(--wp--preset--color--superficie-media);
		border-radius: 12px;
		background: none;
		cursor: pointer;
	}

	/* Con JS, el panel se abre debajo de la barra; sin JS, el menú queda desplegado en el flujo. */
	.js .vz-encabezado__panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		max-height: calc(100dvh - var(--vz-alto-encabezado));
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--wp--preset--color--verde-bosque);
		border-bottom: 1px solid var(--wp--preset--color--superficie);
	}

	.js .vz-encabezado.is-menu-abierto .vz-encabezado__panel {
		display: flex;
	}

	html:not(.js) .vz-encabezado {
		position: relative;
	}

	html:not(.js) .vz-encabezado__interior {
		flex-wrap: wrap;
	}

	.vz-encabezado__panel {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 10px var(--vz-lateral) 22px;
		flex-basis: 100%;
	}

	.vz-menu .vz-menu__lista {
		flex-direction: column;
		gap: 0;
	}

	.vz-menu .vz-menu__lista > li {
		display: block;
		border-radius: 0;
		background: none !important;
	}

	.vz-menu .vz-menu__lista > li > a {
		padding: 14px 0;
		border-radius: 0;
		border-bottom: 1px solid var(--wp--preset--color--superficie);
	}

	/* Todos los grupos desplegados; sin flechas. */
	.vz-menu__flecha,
	html:not(.js) .vz-menu .vz-menu__lista > li > a::after {
		display: none;
	}

	.vz-menu .vz-menu__desplegable {
		position: static;
		min-width: 0;
		padding: 0 0 6px 12px;
		border: 0;
		background: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.vz-encabezado__acciones {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		margin-top: 18px;
	}

	.vz-encabezado__acciones .wp-block-button,
	.vz-encabezado__acciones .wp-element-button,
	.vz-boton-contorno {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	/* Botón de WhatsApp del panel: alto mínimo de 48 px (David, 0.3.2). */
	.vz-encabezado__whatsapp .wp-element-button {
		display: flex;
		align-items: center;
		min-height: 48px;
	}

	.vz-login {
		max-width: none;
		flex-wrap: wrap;
	}
}

@media (max-width: 700px) {
	.vz-encabezado__interior {
		padding-block: 10px;
	}

	.vz-encabezado__logo img {
		height: 40px;
	}
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
	.vz-encabezado::before,
	.vz-encabezado__interior,
	.vz-encabezado__logo img,
	.vz-menu .vz-menu__lista > li,
	.vz-menu .vz-menu__desplegable,
	.vz-menu__flecha::before,
	.vz-menu__barras i,
	.vz-encabezado .wp-element-button,
	.vz-boton-contorno {
		transition: none;
	}

	.vz-encabezado .wp-element-button:hover,
	.vz-boton-contorno:hover {
		transform: none;
	}
}

/* =====================================================================
 * Pie completo (T14b). Maqueta: .ft, .fb, .soc, .fc y .fz.
 * ===================================================================== */
.vz-pie {
	padding-block: calc(var(--vz-corte) + 56px) 0;
	font-size: 0.9375rem;
}

.vz-pie__interior > *,
.vz-pie__rejilla > *,
.vz-pie__marca > *,
.vz-pie__columna > * {
	margin-block: 0;
}

.vz-pie__rejilla {
	display: grid;
	/* Marca y las columnas que se publiquen (hasta cinco; Empresa y Legal se ocultan mientras su página no
	   exista, inc/pie.php). El reparto no depende de cuántas haya: la marca es la única columna fija
	   (1,4 partes, nunca más estrecha que el logo) y cada columna visible crea la suya (1 parte), en una fila,
	   así que todas se reparten el ancho completo de la envoltura. */
	grid-auto-flow: column;
	grid-template-columns: minmax(min-content, 1.4fr);
	grid-auto-columns: minmax(0, 1fr);
	gap: 32px;
	padding-bottom: 40px;
}

/* Escritorio: ninguna columna queda más estrecha que su enlace más largo, así el correo, el WhatsApp y el
   teléfono no se parten. */
@media (min-width: 1024px) {
	.vz-pie__rejilla {
		grid-auto-columns: minmax(max-content, 1fr);
	}

	/* Con sesión: la nota de pendiente no cuenta para el ancho de su columna; se acomoda debajo del enlace. */
	.vz-pie__lista .vz-pendiente__nota {
		display: block;
		contain: inline-size;
	}
}

/* Con las cinco columnas, por debajo de 1100 px no caben el logo y las cinco en una fila sin partir los datos
   (hacen falta unos 1063 px): la marca pasa a una fila propia y las cinco columnas van debajo, en una fila
   (opción 1, aprobada por David). Con menos columnas no cambia nada. */
@media (min-width: 1001px) and (max-width: 1099.98px) {
	.vz-pie__rejilla:has(> :nth-child(6)) {
		grid-auto-flow: row;
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.vz-pie__rejilla:has(> :nth-child(6)) > .vz-pie__marca {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) and (max-width: 1099.98px) {
	.vz-pie__rejilla:has(> :nth-child(6)) {
		grid-template-columns: repeat(5, minmax(max-content, 1fr));
	}
}

.vz-pie__logo {
	width: auto;
	max-width: none; /* Nunca se comprime (181 x 60): su ancho es el mínimo de la columna de la marca. */
	height: 60px;
}

.vz-pie__frase {
	max-width: 20em;
	margin-top: 18px !important;
	color: var(--wp--preset--color--gris-verde);
}

/* Redes: círculos de 40 px con el icono a 20 px; la separación deja 44 px de objetivo táctil. */
.vz-pie__redes {
	display: flex;
	gap: 10px;
	margin: 20px 0 0 !important;
	padding: 0;
	list-style: none;
}

.vz-pie__redes li {
	margin: 0;
}

.vz-pie .vz-pie__redes a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1.5px solid var(--wp--preset--color--superficie-media);
	border-radius: 50%;
	color: var(--wp--preset--color--menta);
	transition: border-color 200ms, color 200ms, transform 300ms var(--vz-curva);
}

.vz-pie .vz-pie__redes a:hover {
	border-color: var(--wp--preset--color--turquesa);
	color: var(--wp--preset--color--turquesa);
	transform: translateY(-3px);
}

/* Con sesión: las redes pendientes llevan el contorno de pendiente y una sola nota debajo de la fila
   (la nota de cada red no cabe junto al círculo). */
.vz-pie__redes .vz-pendiente__nota {
	display: none;
}

/* Las notas de pendiente nunca ensanchan la rejilla del pie. */
.vz-pie__rejilla > * {
	min-width: 0;
}

.vz-pie .vz-pendiente__nota {
	white-space: normal;
}

.vz-pie__columna {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vz-pie .vz-pie__titulo {
	margin-bottom: 6px !important;
	color: var(--wp--preset--color--turquesa);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.vz-pie__lista {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vz-pie__lista li {
	margin: 0;
}

.vz-pie .vz-pie__lista a {
	overflow-wrap: anywhere;
	color: var(--wp--preset--color--gris-palido);
	text-decoration: none;
	transition: color 200ms;
}

.vz-pie .vz-pie__lista a:hover {
	color: var(--wp--preset--color--turquesa);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vz-pie__derechos {
	padding-block: 22px 36px;
	border-top: 1px solid var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--gris-verde);
	font-size: 0.84375rem;
}

/* Corte de la maqueta a 1000 px: logo arriba a lo ancho y columnas de dos en dos. */
@media (max-width: 1000px) {
	.vz-pie__rejilla {
		grid-auto-flow: row;
		grid-template-columns: 1fr 1fr;
	}

	.vz-pie__marca {
		grid-column: 1 / -1;
	}
}

@media (max-width: 700px) {
	.vz-pie {
		padding-top: calc(var(--vz-corte) + 40px);
	}

	.vz-pie__rejilla {
		gap: 28px;
		padding-bottom: 28px;
	}

	.vz-pie__derechos {
		padding-block: 20px;
	}
}

/* En pantallas estrechas, una columna: el correo y los teléfonos no caben en media columna (medido a 360 y 390 px). */
@media (max-width: 480px) {
	.vz-pie__rejilla {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vz-pie .vz-pie__redes a {
		transition: none;
	}

	.vz-pie .vz-pie__redes a:hover {
		transform: none;
	}
}

/* =====================================================================
 * Páginas de contenido (templates/page.html): política de datos y, más adelante, Nosotros y Soporte.
 * Banda clara con grano, columna de lectura de unos 760 px y la fecha de última actualización.
 * ===================================================================== */
.vz-pagina {
	min-height: 60vh;
}

.vz-pagina__columna {
	max-width: calc(760px + 2 * var(--vz-lateral));
}

.vz-pagina__columna > *,
.vz-pagina__fecha > * {
	margin-block: 0;
}

.vz-pagina .vz-pagina__titulo {
	color: var(--wp--preset--color--verde-azulado);
	font-weight: 800;
	font-size: clamp(2.25rem, 4.6vw, 3.5rem);
	line-height: 1.06;
	letter-spacing: -0.025em;
}

.vz-pagina__fecha {
	margin-top: 14px !important;
	color: var(--wp--preset--color--verde-hoja);
	font-weight: 600;
	font-size: 0.9375rem;
}

.vz-pagina__contenido {
	margin-top: 40px !important;
	color: var(--wp--preset--color--fondo);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.vz-pagina__contenido > * {
	margin-block: 0 1em;
}

.vz-pagina__contenido :where(h2) {
	margin-top: 1.8em;
	font-weight: 800;
	font-size: clamp(1.5rem, 2.6vw, 1.875rem);
	line-height: 1.2;
}

.vz-pagina__contenido :where(h3) {
	margin-top: 1.5em;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.3;
}

.vz-pagina__contenido :where(ul, ol) {
	padding-left: 1.4em;
}

.vz-pagina__contenido :where(li + li) {
	margin-top: 0.4em;
}

.vz-pagina__contenido a {
	text-decoration: underline;
	text-underline-offset: 3px;
}