/*
 * VOZ IP: base visual (T6).
 * Reinicio, variables, escala tipográfica, foco visible, "Saltar al contenido",
 * envoltura, ritmo claro/oscuro y cortes curvos. Los colores salen de theme.json.
 * Se carga en el sitio y en el Editor (add_editor_style), para que ambos se vean igual.
 */

/* ---------- Variables ---------- */
:root {
	--vz-lateral: var(--wp--custom--espacio--lateral, 32px);
	--vz-ancho-max: var(--wp--custom--espacio--ancho-max, 1280px);
	--vz-alto-encabezado: var(--wp--custom--encabezado--alto, 74px);
	--vz-corte: var(--wp--custom--radio--corte, 44px);
	--vz-curva: var(--wp--custom--movimiento--curva, cubic-bezier(0.16, 1, 0.3, 1));
	/* Color del anillo de foco: depende del fondo sobre el que se dibuja (T4). */
	--vz-foco: var(--wp--custom--color--foco-oscuro, #5DC9C6);
}

@media (max-width: 700px) {
	:root {
		--vz-lateral: var(--wp--custom--espacio--lateral-movil, 20px);
		--vz-alto-encabezado: var(--wp--custom--encabezado--alto-movil, 66px);
		--vz-corte: var(--wp--custom--radio--corte-movil, 28px);
	}
}

/* ---------- Reinicio ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* El lienzo usa el verde del pie y del encabezado: el rebote al principio y al final no muestra otra franja (T5). */
	background-color: var(--wp--preset--color--verde-bosque);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* El encabezado fijo nunca tapa el destino de un ancla ni el elemento enfocado (WCAG 2.4.11). */
	scroll-padding-top: calc(var(--vz-alto-encabezado) + 16px);
	scroll-padding-bottom: 16px;
}

body {
	margin: 0;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

:where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure) {
	margin-block: 0;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ---------- Escala tipográfica (maqueta v2, en rem) ---------- */
h1,
.vz-h1 {
	font-size: clamp(2.25rem, 4.1vw, 3.75rem);
	line-height: 1.04;
	letter-spacing: -0.028em;
}

h2,
.vz-h2 {
	font-size: clamp(2.375rem, 5vw, 4.5rem);
	line-height: 1.04;
}

h3,
.vz-h3 {
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	line-height: 1.15;
}

.vz-antetitulo {
	font-weight: 700;
	font-size: 0.78125rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.vz-acento {
	color: var(--wp--preset--color--turquesa);
}

/* ---------- Foco visible (T4, aprobado) ----------
 * Solo con :focus-visible: aparece al navegar con teclado y no con cada clic.
 * Anillo de 2 px con 2 px de separación; el color depende del fondo (variable --vz-foco). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus {
	outline: none;
}

:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--vz-foco);
	outline-offset: 2px;
}

/* ---------- Saltar al contenido ---------- */
.vz-saltar {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1000;
	padding: 12px 18px;
	border-radius: 999px;
	background: var(--wp--preset--color--turquesa);
	color: var(--wp--preset--color--verde-bosque);
	font-weight: 700;
	text-decoration: none;
	transform: translateY(-200%);
}

.vz-saltar:focus,
.vz-saltar:focus-visible {
	transform: none;
	/* Sobre el botón turquesa, el anillo va en el color del fondo del encabezado para que se distinga. */
	outline-color: var(--wp--preset--color--turquesa);
}

/* ---------- Envoltura y secciones ---------- */
.vz-envoltura {
	width: 100%;
	max-width: var(--vz-ancho-max);
	margin-inline: auto;
	padding-inline: var(--vz-lateral);
}

.vz-seccion {
	position: relative;
	padding-block: clamp(4.5rem, 8vw, 6.5rem) clamp(6.25rem, 10vw, 8.75rem);
}

/* Ritmo claro/oscuro: cada fondo fija sus colores de texto y el color del anillo de foco. */
.vz-oscuro {
	--vz-foco: var(--wp--custom--color--foco-oscuro, #5DC9C6);
	background-color: var(--wp--preset--color--fondo);
	color: var(--wp--preset--color--gris-claro);
}

.vz-oscuro.vz-bosque {
	background-color: var(--wp--preset--color--verde-bosque);
}

.vz-claro {
	--vz-foco: var(--wp--custom--color--foco-claro, #1A3F3E);
	background: linear-gradient(180deg, var(--wp--preset--color--claro-1) 0%, var(--wp--preset--color--claro-2) 100%);
	color: var(--wp--preset--color--fondo);
}

/* Grano de las bandas claras (líneas y pilares), el mismo ruido SVG de la maqueta, sobre el degradado. */
.vz-claro.vz-grano {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		linear-gradient(180deg, var(--wp--preset--color--claro-1) 0%, var(--wp--preset--color--claro-2) 100%);
}

/* En lo claro el turquesa nunca es texto: títulos, enlaces y antetítulos pasan a tonos verdes (T4). */
.vz-claro :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--verde-azulado);
}

.vz-claro :where(a:not(.wp-element-button):not(.wp-block-button__link)) {
	color: var(--wp--preset--color--verde-azulado);
}

.vz-claro .vz-antetitulo {
	color: var(--wp--preset--color--verde-hoja);
}

.vz-claro :where(figcaption, .wp-element-caption) {
	color: var(--wp--preset--color--verde-azulado);
}

.vz-claro :where(.wp-element-button, .wp-block-button__link) {
	background-color: var(--wp--preset--color--verde-azulado);
	color: var(--wp--preset--color--gris-claro);
}

/* Botón de contorno sobre lo claro: borde y texto #1A3F3E (nunca turquesa sobre claro). */
.vz-claro .is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--verde-azulado);
	background-color: transparent;
	color: var(--wp--preset--color--verde-azulado);
}

/* Tarjeta blanca dentro de una banda clara (contacto, pilares). */
.vz-tarjeta-blanca {
	--vz-foco: var(--wp--custom--color--foco-claro, #1A3F3E);
	background-color: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--fondo);
}

/* Cortes curvos: cada sección después del héroe sube sobre la anterior (44 px; 28 px en móvil). */
.vz-corte {
	border-radius: var(--vz-corte) var(--vz-corte) 0 0;
	margin-block-start: calc(var(--vz-corte) * -1);
}

/* Sin el espacio automático de WordPress entre encabezado, secciones y pie: el ritmo lo dan los cortes. */
.wp-site-blocks > *,
.vz-principal > * {
	margin-block: 0;
}

.wp-site-blocks > .vz-corte,
.vz-principal > .vz-corte {
	margin-block-start: calc(var(--vz-corte) * -1);
}

/* El héroe (T8) vive en secciones.css. */

/* Las secciones siguientes quedan por encima de la anterior para que el corte se vea. */
.vz-seccion + .vz-seccion,
.vz-pie {
	z-index: 1;
}

/* Recorte horizontal en el propio contenedor, nunca oculto en toda la página (T5). */
.vz-recorte-x {
	overflow-x: clip;
}

/* El encabezado (T7) vive en partes.css. */

/* ---------- Pie base (T6; el pie completo llega en T14b) ---------- */
.vz-pie {
	position: relative;
	background-color: var(--wp--preset--color--verde-bosque);
	border-top: 1px solid var(--wp--preset--color--superficie);
	padding-block: calc(var(--vz-corte) + 32px) 40px;
	color: var(--wp--preset--color--gris-palido);
}

.vz-pie a {
	color: var(--wp--preset--color--gris-palido);
}

.vz-pie a:hover {
	color: var(--wp--preset--color--turquesa);
}

/* ---------- Marcadores de datos pendientes (solo con sesión iniciada; los filtra inc/marcadores.php) ---------- */
.vozip-marcador {
	display: inline-block;
	margin-block: 8px;
	padding: 4px 10px;
	border-radius: 6px;
	background: #F2C94C;
	color: #1A1A1A;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.4;
}

/* ---------- Utilidades ---------- */
.vz-solo-lector {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}