/**
 * Elementos globales: franjas, cabecera fija, WhatsApp flotante y utilidades.
 * Colores y medidas solo desde variables --wp--preset--* y --wp--custom--*.
 */

:root {
	--franja-h: calc(var(--wp--custom--franja--grueso) * 2 + var(--wp--custom--franja--fino));
	--franja-v: calc(var(--wp--custom--franja--grueso-vertical) * 2 + var(--wp--custom--franja--fino-vertical));
	--franja-degradado-h: linear-gradient(
		to bottom,
		var(--wp--preset--color--azul) 0 var(--wp--custom--franja--grueso),
		var(--wp--preset--color--blanco) var(--wp--custom--franja--grueso) calc(var(--wp--custom--franja--grueso) + var(--wp--custom--franja--fino)),
		var(--wp--preset--color--rojo) calc(var(--wp--custom--franja--grueso) + var(--wp--custom--franja--fino)) 100%
	);
	--franja-degradado-v: linear-gradient(
		to right,
		var(--wp--preset--color--azul) 0 var(--wp--custom--franja--grueso-vertical),
		var(--wp--preset--color--blanco) var(--wp--custom--franja--grueso-vertical) calc(var(--wp--custom--franja--grueso-vertical) + var(--wp--custom--franja--fino-vertical)),
		var(--wp--preset--color--rojo) calc(var(--wp--custom--franja--grueso-vertical) + var(--wp--custom--franja--fino-vertical)) 100%
	);
	--franja-v-margen: var(--wp--preset--spacing--40);
	/* Franja gruesa de las secciones de inicio: 60 / 19 / 60 px a 1366px. */
	--franja-gruesa-grueso: clamp(26px, 4.4vw, 60px);
	--franja-gruesa-fino: clamp(10px, 1.4vw, 19px);
}

@media (max-width: 781px) {
	:root {
		--franja-v: calc((var(--wp--custom--franja--grueso-vertical) * 2 + var(--wp--custom--franja--fino-vertical)) / 2);
		--franja-degradado-v: linear-gradient(
			to right,
			var(--wp--preset--color--azul) 0 calc(var(--wp--custom--franja--grueso-vertical) / 2),
			var(--wp--preset--color--blanco) calc(var(--wp--custom--franja--grueso-vertical) / 2) calc((var(--wp--custom--franja--grueso-vertical) + var(--wp--custom--franja--fino-vertical)) / 2),
			var(--wp--preset--color--rojo) calc((var(--wp--custom--franja--grueso-vertical) + var(--wp--custom--franja--fino-vertical)) / 2) 100%
		);
		--franja-v-margen: var(--wp--preset--spacing--20);
	}
}

/* ---------- Franjas ---------- */

/* Franja horizontal suelta: separador entre secciones. */
.franja-horizontal {
	height: var(--franja-h);
	min-height: var(--franja-h);
	background: var(--franja-degradado-h);
}

/* Variante gruesa (cierre de las secciones de inicio). */
.franja-horizontal.franja-gruesa {
	--franja-h: calc(var(--franja-gruesa-grueso) * 2 + var(--franja-gruesa-fino));
	--franja-degradado-h: linear-gradient(
		to bottom,
		var(--wp--preset--color--azul) 0 var(--franja-gruesa-grueso),
		var(--wp--preset--color--blanco) var(--franja-gruesa-grueso) calc(var(--franja-gruesa-grueso) + var(--franja-gruesa-fino)),
		var(--wp--preset--color--rojo) calc(var(--franja-gruesa-grueso) + var(--franja-gruesa-fino)) 100%
	);
}

/* Grupo «Con franja horizontal»: la franja va al pie del grupo. */
.is-style-franja-horizontal {
	position: relative;
	padding-bottom: calc(var(--franja-h) + var(--wp--preset--spacing--50));
}

.is-style-franja-horizontal::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: var(--franja-h);
	background: var(--franja-degradado-h);
}

/* Franja vertical suelta (el padre debe tener position: relative). */
.franja-vertical {
	position: absolute;
	top: 0;
	right: var(--franja-v-margen);
	bottom: 0;
	width: var(--franja-v);
	background: var(--franja-degradado-v);
	pointer-events: none;
}

/* Grupo «Con franja vertical»: franja a la derecha, el contenido no la pisa. */
.is-style-franja-vertical {
	position: relative;
	padding-right: calc(var(--franja-v) + var(--franja-v-margen) * 2);
}

.is-style-franja-vertical::after {
	content: "";
	position: absolute;
	top: 0;
	right: var(--franja-v-margen);
	bottom: 0;
	width: var(--franja-v);
	background: var(--franja-degradado-v);
	pointer-events: none;
}

/* Bloque azul + rojo que asoma por el borde izquierdo. */
.franja-lateral {
	position: relative;
}

.franja-lateral::before {
	content: "";
	position: absolute;
	top: var(--wp--preset--spacing--50);
	left: 0;
	width: clamp(var(--wp--preset--spacing--40), 10vw, var(--wp--preset--spacing--60));
	height: var(--franja-h);
	background: var(--franja-degradado-h);
	pointer-events: none;
}

/* ---------- Cabecera fija ---------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: var(--wp--preset--color--blanco);
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 0);
}

@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

/* ---------- Pie pegado al contenido ---------- */

/* Sin el espacio de bloque (24px blancos) entre la última sección y el pie. */
.wp-site-blocks > main + * {
	margin-block-start: 0;
}

/* ---------- WhatsApp flotante ---------- */

.whatsapp-flotante {
	position: fixed;
	right: var(--wp--custom--whatsapp--distancia);
	bottom: var(--wp--custom--whatsapp--distancia);
	z-index: 60;
	display: block;
	width: var(--wp--custom--whatsapp--tamano);
	height: var(--wp--custom--whatsapp--tamano);
	transition: filter var(--wp--custom--transicion), transform var(--wp--custom--transicion);
}

/* Logo original a todo color (SVG/icono-whatsapp.svg); no lleva fondo propio.
   La sombra sigue la forma del logo para separarlo de fondos claros y de fotos. */
.whatsapp-flotante img {
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.28)) drop-shadow(0 1px 2px rgb(0 0 0 / 0.18));
}

.has-modal-open .whatsapp-flotante {
	display: none;
}

.whatsapp-flotante:hover,
.whatsapp-flotante:focus-visible {
	filter: brightness(0.9);
	transform: scale(1.05);
}

/* ---------- Íconos junto a textos (botones y menú) ---------- */

.icono-externo .wp-block-button__link,
.icono-whatsapp .wp-block-button__link,
.icono-externo .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.icono-externo .wp-block-button__link::after,
.icono-whatsapp .wp-block-button__link::after,
.icono-externo .wp-block-navigation-item__content::after {
	content: "";
	flex: none;
	width: 1.4em;
	height: 1.4em;
	background-color: currentColor;
	-webkit-mask: var(--icono) center / contain no-repeat;
	mask: var(--icono) center / contain no-repeat;
}

.icono-externo {
	--icono: url("../icons/icono-link-externo.svg");
}

.icono-whatsapp {
	--icono: url("../icons/icono-whatsapp.svg");
}

.icono-whatsapp .wp-block-button__link::after {
	width: 1.1em;
	height: 1.1em;
}

/* ---------- Utilidades ---------- */

/* Marcador gris mientras llegan las fotos. */
.marcador-imagen {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 18rem;
	border-radius: var(--wp--custom--radio--imagen);
	background-color: var(--wp--preset--color--gris-claro);
	color: var(--wp--preset--color--gris);
	font-size: var(--wp--preset--font-size--medium);
	text-align: center;
}

/* Caja con borde azul para íconos (La Marca, Encuentra la solución). */
.caja-borde-azul {
	border: 2px solid var(--wp--preset--color--azul);
	border-radius: var(--wp--custom--radio--tarjeta);
}

/* Imagen inclinada de la línea de tiempo. */
.imagen-inclinada {
	transform: rotate(-3deg);
}

/* Año de la línea de tiempo. */
.anio {
	color: var(--wp--preset--color--rojo);
	font-style: italic;
	font-weight: 700;
	line-height: 1;
}

.screen-reader-text:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
	}
}