/*
 * Saioa Arellano — chrome del proyecto.
 * Solo presets: --wp--preset--* y --wp--custom--*. Ni un literal.
 */

/* Cabecera superpuesta al contenido, como en el kit: en reposo es transparente
 * y deja pasar el hero por debajo; al pasar el umbral se oscurece.
 * `fixed`, no `sticky`: sticky ocupa sitio en el flujo y empujaría el hero.
 * Sin transform ni will-change: convertirían la cabecera en bloque contenedor
 * y el panel del menú móvil se mediría contra ella. */
.wp-site-blocks > header:has( .zgn-cabecera ),
.zgn-cabecera {
	position: fixed;
	top: 0;
	inset-inline: 0;
	z-index: 100;
}

/* Por `.wp-block-group.zgn-cabecera`, dos clases: WordPress emite sus reglas de
 * grupo y de layout en un <style> que llega DESPUÉS de las hojas del tema, así
 * que a igual especificidad gana él y el padding del bloque se queda en cero. */
/*
 * El nombre del sitio, centrado por su tinta y no por su caja: la caja de línea
 * reserva más por debajo de la base que por encima de la mayúscula, así que con
 * `align-items: center` el rótulo se ve subido —2,5px en la barra fija, que a
 * ese tamaño se notan—. `text-box` recorta la caja a lo que el ojo lee como
 * texto. Donde el navegador no lo soporte, queda como estaba.
 */
.zgn-barra .wp-block-site-title {
	text-box: trim-both cap alphabetic;
}

/*
 * Logotipo horizontal en lugar del rótulo en texto. El bloque sigue siendo el
 * título del sitio: el enlace conserva «Saioa Arellano» para lectores de
 * pantalla y buscadores, y el SVG se pinta como máscara del color del texto,
 * así que hereda el arena, el azul del hover y el foco sin una segunda imagen.
 * El ancho no baja de los 160px mínimos de la guía de marca.
 *
 * Centrado óptico: la caja del SVG incluye la cola de la R, que baja de la
 * base; centrada la caja, las versales quedaban ~3px por encima de las del
 * menú. Las versales ocupan el 67% superior del dibujo (61,6 de 91,85), así
 * que se baja la diferencia entre ese centro y el de la caja: 16,5% del alto.
 */
.zgn-barra .wp-block-site-title a {
	display: block;
	inline-size: clamp( 170px, 15vw, 230px );
	aspect-ratio: 963.09 / 91.85;
	translate: 0 16.5%;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 110%;
	background-color: currentColor;
	mask: url( ../img/logo-horizontal.svg ) center / contain no-repeat;
}

/* En alto contraste forzado el navegador anula el fondo y el logo
 * desaparecería: vuelve el nombre en texto. */
@media ( forced-colors: active ) {
	.zgn-barra .wp-block-site-title a {
		inline-size: auto;
		aspect-ratio: auto;
		text-indent: 0;
		background: none;
		mask: none;
	}
}

.wp-block-group.zgn-cabecera {
	/* Barra más holgada: con el rótulo ya centrado, el aire se nota para bien. */
	--zgn-cabecera-padding: var( --wp--preset--spacing--50 );

	padding-block: var( --zgn-cabecera-padding );
	background-color: transparent;
	border-bottom: 1px solid transparent;
	transition: padding .35s ease, background-color .35s ease, border-color .35s ease;
}

/* Estado con scroll: el kit oscurece, marca el borde en azul y comprime el alto.
 * La clase la pone assets/js/cabecera.js. */
.wp-block-group.zgn-cabecera.is-scrolled {
	--zgn-cabecera-padding: var( --wp--preset--spacing--40 );

	background-color: var( --wp--custom--chocolate-scrim );
	backdrop-filter: blur( 8px );
	border-bottom-color: var( --wp--preset--color--sai-blue );
}

/* Al estar fuera del flujo, la cabecera ya no reserva su alto: el hermano que
 * la sigue lo compensa. Por `margin`, no `padding`: el padding del main viene
 * inline desde las plantillas y no se le puede ganar sin !important.
 * La landing es la excepción — ahí el hero debe pasar por debajo. */
.wp-site-blocks > header:has( .zgn-cabecera ) + * {
	margin-block-start: var( --zgn-cabecera-alto, 5.5rem );
}

body.page-template-page-landing .wp-site-blocks > header:has( .zgn-cabecera ) + * {
	margin-block-start: 0;
}

/* La 404 va sobre chocolate: el fondo sube por debajo de la cabecera, como en
 * la landing, en vez de dejar el hueco de su alto en arena. El aire lo pone el
 * padding superior del main en templates/404.html. */
body.error404 .wp-site-blocks > header:has( .zgn-cabecera ) + * {
	margin-block-start: 0;
}

/* En el lienzo del editor no hay viewport propio: una cabecera `fixed` flotaría
 * sobre el contenido y taparía lo que se está editando. */
.is-root-container .zgn-cabecera {
	position: static;
}

/*
 * El disparador del menú, centrado en la cabecera.
 *
 * El plugin lo pinta `fixed` a 1rem del borde de la ventana, que es lo correcto
 * mientras el panel está abierto pero deja el icono descolgado de una cabecera
 * que cambia de alto al hacer scroll: se veía desbordar por debajo. Ocupando
 * todo el alto de la barra, el icono queda centrado con el logotipo pase lo que
 * pase con el padding.
 */
.zgn-nav-toggle {
	/*
	 * El icono, a tamaño de dedo. El plugin lo deja en 28px con `content-box` a
	 * propósito: su padding de 0.5rem agranda el área de pulsación sin agrandar
	 * el trazo. Eso hay que respetarlo —tocar el `box-sizing` encoge el icono en
	 * lugar de centrarlo—, así que lo que se cambia es la medida, no la caja.
	 */
	--zgn-nav-icono: 32px;

	/*
	 * Y el centrado lo hace el layout, no una cuenta.
	 *
	 * La cabecera es `fixed`, así que es bloque contenedor de sus absolutos: el
	 * icono se ancla a su mitad y se sube la suya propia, y así queda centrado en
	 * el alto que tenga la barra en cada momento. Antes se calculaba con la
	 * variable que
	 * publica cabecera.js, y esa variable no se refresca cuando la barra se
	 * comprime al hacer scroll: el icono se quedaba con la medida en reposo y
	 * desbordaba 9px por debajo de la barra fija.
	 */
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: var( --wp--style--root--padding-right );
	transform: translateY( -50% );
}

/*
 * Con el panel abierto, la cabecera sube por encima de él.
 *
 * El disparador vive dentro de la barra y la barra tiene `z-index` propio: es
 * un contexto de apilado, así que el 9010 del icono se queda encerrado en el
 * 100 de la cabecera y el overlay lo tapa. No hay z-index en el icono que
 * arregle eso desde dentro; lo que sube es la cabecera entera.
 *
 * Y al subirla hay que esconder lo que no sea el icono: el logotipo de la barra
 * quedaría flotando sobre el panel, que ya trae el suyo.
 */
body.zgn-nav-abierto .zgn-cabecera {
	z-index: 9020;
}

body.zgn-nav-abierto .zgn-barra > :not( .zgn-nav-toggle ) {
	visibility: hidden;
}

/* ── Panel del menú ───────────────────────────────────────────────────── */

/* El logotipo en blanco, protagonista del panel: el panel ocupa la pantalla
 * entera y a 150px la marca se perdía arriba (feedback 6-oct). */
.zgn-nav__logo {
	/* Tope del logo en Zaguán FSE Core (nav.css), 160px por defecto. */
	--zgn-nav-logo-ancho: 320px;
}

.zgn-nav__logo-img {
	inline-size: clamp( 220px, 66vw, 320px );
	block-size: auto;
}

/*
 * Los enlaces, grandes: el panel ocupa la pantalla entera y un menú a 17px
 * dentro de una pantalla vacía se lee como una nota al pie.
 */
.zgn-nav__enlace {
	font-size: clamp( 28px, 8vw, 40px );
	line-height: 1.15;
}

.zgn-nav__nivel {
	gap: var( --wp--preset--spacing--20 );
}

/* Correo y teléfono al fondo del panel, en el tono secundario. */
.zgn-nav__contacto {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--20 );
	font-size: var( --wp--preset--font-size--sai-sm );
}

/* El color, explícito: dentro del panel el `inherit` acababa resolviendo al
 * carbón del documento y el bloque quedaba invisible sobre el propio carbón. */
.zgn-nav__contacto,
.zgn-nav__contacto a {
	color: var( --wp--preset--color--sai-arena );
}

.zgn-nav__contacto a {
	text-decoration: none;
	opacity: .7;
	transition: opacity .25s ease;
}

.zgn-nav__contacto a:hover,
.zgn-nav__contacto a:focus-visible {
	opacity: 1;
}

/* Separadores del menú: la rayita azul entre items del kit. */
.zgn-menu .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item::before {
	content: "";
	display: inline-block;
	inline-size: 14px;
	block-size: 1px;
	margin-inline-end: var( --wp--preset--spacing--30 );
	vertical-align: middle;
	background-color: var( --wp--preset--color--sai-blue );
}

/* Sobre fondo oscuro, el enlace hereda el color del texto en vez del acento
 * global: el color de enlace del tema es el chocolate, y sobre chocolate es
 * invisible. Vale para la cabecera, el pie y cualquier seccion en chocolate. */
:is( .zgn-cabecera, .zgn-pie, .has-sai-chocolate-background-color ) a:where( :not( .wp-element-button ) ) {
	color: currentColor;
	text-decoration-color: var( --wp--custom--arena-veil );
	text-underline-offset: 0.25em;
}

:is( .zgn-cabecera, .zgn-pie ) a:where( :not( .wp-element-button ) ) {
	text-decoration: none;
}

:is( .zgn-cabecera, .zgn-pie, .has-sai-chocolate-background-color ) a:where( :not( .wp-element-button ) ):hover {
	color: var( --wp--preset--color--sai-blue );
}

/* Voz editorial: la serif del kit va en cursiva sobre destacados. */
:is( .entry-content, .is-root-container ) .zgn-editorial {
	font-family: var( --wp--preset--font-family--sai-serif );
	font-style: italic;
	font-weight: 300;
}

/* Acordeón de preguntas: la línea que separa cada pregunta es diseño del
 * tema, no un atributo del bloque — en core/details el editor la pierde. */
/*
 * La línea entre preguntas: fina y apenas insinuada. Va con la sección delante
 * del selector porque algo posterior —la hoja del bloque `details`— le estaba
 * poniendo el carbón entero, y la lista parecía una tabla.
 *
 * La sangría del número es la misma pieza que usa el cuerpo para alinearse con
 * el título, así que se declara una vez aquí.
 */
.zgn-faq {
	--zgn-faq-num: 1.75rem;
}

.zgn-faq .zgn-faq__item {
	border-block-start: 1px solid color-mix( in srgb, var( --wp--preset--color--sai-chocolate ) 15%, transparent );
}

.zgn-faq__num {
	inline-size: var( --zgn-faq-num );
}

/*
 * El aire del item vive aquí y no en el bloque: el titular es lo que hay que
 * centrar, y para centrarlo hace falta repartir el padding de forma desigual.
 *
 * Por qué desigual: las tres piezas del summary son cajas de línea, y la de
 * Gayathri reserva mucho más bajo la baseline (0.478em) que sobre la altura de
 * mayúscula (0.043em). Con el padding simétrico el ojo ve el titular subido.
 * La compensación —la mitad de esa diferencia, 0.217em— pasa el sobrante de
 * abajo a arriba sin cambiar la altura de la fila. En los hitos de «Quién soy»
 * esto lo resuelve `text-box`; aquí no sirve, porque el summary es flex y su
 * texto es un item anónimo al que la propiedad no llega.
 */
.zgn-faq__item > summary {
	cursor: pointer;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding-block: calc( var( --wp--preset--spacing--30 ) + 0.33em )
		calc( var( --wp--preset--spacing--30 ) - 0.33em );
}

/*
 * La respuesta: discreta, y alineada con la pregunta y no con su número. La
 * sangría es el ancho del número más el hueco del summary, así que las dos
 * líneas de texto arrancan en la misma vertical.
 */
.zgn-faq__cuerpo {
	padding-inline-start: calc( var( --zgn-faq-num ) + var( --wp--preset--spacing--30 ) );
	padding-block-end: var( --wp--preset--spacing--30 );
	font-size: var( --wp--preset--font-size--sai-xs );
	color: color-mix( in srgb, currentColor 65%, transparent );
}

/* La rejilla del portfolio no usa el gap por defecto de las columnas. */
.zgn-rejilla-trabajos .zgn-trabajo figure {
	margin-block-end: 0;
}

/* ── Interacciones del kit ─────────────────────────────────────────────── */

/* Indicador del acordeón: el kit usa + y −, no el triángulo nativo, que
 * Zaguán FSE Core ya retira. */
.zgn-faq__item > summary {
	display: flex;
	align-items: center;

	/* Sin `gap`: el hueco entre el número y la pregunta lo pone el número con su
	 * margen. El `gap` se aplicaba también a los nodos sueltos que deja el
	 * marcado, y la pregunta arrancaba 16px más allá de donde el cuerpo cree que
	 * empieza — que es lo que desalineaba la respuesta. */
	gap: 0;
}

.zgn-faq__num {
	margin-inline-end: var( --wp--preset--spacing--30 );
}

.zgn-faq__item > summary::after {
	content: "+";
	margin-inline-start: auto;
	font-weight: 400;
	color: var( --wp--preset--color--sai-blue );
	transition: transform .25s ease;
}

.zgn-faq__item[ open ] > summary::after {
	content: "\2212";
	transform: rotate( 180deg );
}

/*
 * Las fotos del portfolio, el retrato de «Quién soy» y el visor de «Cómo
 * trabajo» se acercan al pasar por
 * encima y el zoom sigue al cursor: assets/js/zoom.js mueve `transform-origin`
 * con el puntero, así que recorrer la foto con el ratón es recorrerla de cerca.
 * Sin ese script el zoom se hace desde el centro. Solo con puntero fino y sin
 * movimiento reducido.
 *
 * Va con `transform` y no con `scale`: el retrato ya anima `scale` y
 * `translate` con el scroll, y una animación gana siempre a una regla normal
 * sobre la misma propiedad. `transform` se compone con las dos.
 */
.zgn-trabajo figure {
	overflow: hidden;
}

@media ( hover: hover ) and ( pointer: fine ) and ( prefers-reduced-motion: no-preference ) {
	/* Entrada lenta y sin rebote; el origen lo suaviza zoom.js, no el CSS. */
	.zgn-trabajo img,
	.zgn-quien-soy__retrato img,
	.zgn-pasos__foto img {
		transition: transform 1.2s cubic-bezier( 0.16, 1, 0.3, 1 );
	}

	.zgn-trabajo figure:hover img,
	.zgn-quien-soy__retrato:hover img,
	.zgn-pasos__foto:hover img {
		transform: scale( 1.45 );
		cursor: zoom-in;
	}
}

/* Botones: el contorno se rellena con el acento al pasar por encima. */
.zgn-trabajos .wp-block-button.is-style-outline > .wp-element-button:hover,
.zgn-trabajos .wp-block-button.is-style-outline > .wp-element-button:focus-visible {
	background-color: var( --wp--preset--color--sai-blue );
	border-color: var( --wp--preset--color--sai-blue );
	color: var( --wp--preset--color--sai-chocolate );
}

.zgn-contacto .wp-block-button.is-style-outline > .wp-element-button:hover,
.zgn-contacto .wp-block-button.is-style-outline > .wp-element-button:focus-visible {
	background-color: var( --wp--preset--color--sai-arena );
	border-color: var( --wp--preset--color--sai-arena );
	color: var( --wp--preset--color--sai-chocolate );
}

.wp-element-button {
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* ── Correcciones de fidelidad al kit (rev. handoff) ───────────────────── */

/* Destacado editorial dentro de los titulares: serif en cursiva y en azul,
 * como el contraste del kit. */
:is( .entry-content, .is-root-container ) .zgn-trabajos .wp-block-heading em {
	font-family: var( --wp--preset--font-family--sai-serif );
	font-style: italic;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
	color: var( --wp--preset--color--sai-blue );
}

/* Enlaces de texto del kit: sin subrayado propio y con una barra azul debajo. */
:is( .entry-content, .is-root-container ) .zgn-enlace-subrayado a {
	text-decoration: none;
	border-block-end: 3px solid var( --wp--preset--color--sai-blue );
	padding-block-end: 4px;
}

/* Sobre el azul de la sección de preguntas, las líneas van en el color del
 * texto pero muy rebajadas: a plena intensidad la lista se lee como una tabla y
 * las rayas pesan más que las preguntas. El signo del acordeón sí va entero,
 * que es el único indicador de que aquello se abre. */
.zgn-faq-seccion .zgn-faq__item {
	border-block-start-color: color-mix( in srgb, currentColor 15%, transparent );
}

.zgn-faq-seccion .zgn-faq__item:last-child {
	border-block-end: 1px solid color-mix( in srgb, currentColor 15%, transparent );
}

.zgn-faq-seccion .zgn-faq__item > summary::after {
	color: currentColor;
}

/* Las secciones de la landing se tocan: cada una trae su propio fondo y su
 * propio padding, así que el blockGap del contenido dejaba ver una banda de
 * arena entre color y color — muy visible alrededor de la sección azul.
 * `reset.css` ya anula el primer nivel (.wp-site-blocks > *); esto cubre el
 * segundo, el de dentro de la página, donde viven las secciones. */
:is( .entry-content, .is-root-container ) > .alignfull {
	margin-block-start: 0;
}

/* Firma del cierre: el logotipo a la izquierda y los datos a la derecha, como
 * en el kit. El ancho del logo es el del handoff. */
.zgn-contacto__logo img {
	inline-size: clamp( 170px, 20vw, 260px );
	block-size: auto;
	display: block;
}

.zgn-contacto__firma {
	inline-size: 100%;
}

.zgn-contacto__datos {
	margin-inline-start: auto;
}

/* Quién soy: las medidas del kit — el retrato manda sobre la columna de texto,
 * y el párrafo no pasa de una medida cómoda de lectura. */
.zgn-quien-soy__retrato {
	/* min() y no 620px a secas: entre 782 y ~1100px la columna es más
	 * estrecha que la fotografía y esta se comía la columna del texto.
	 * La medida va en la figura y no en la imagen para que el recorte del
	 * paralaje, el lightbox y la foto coincidan. */
	max-inline-size: min( 100%, 620px );

	/* clip y no hidden: hidden la convierte en contenedor de scroll y la
	 * view timeline de la imagen mediría contra ella, que no se mueve, y se
	 * quedaría congelada. */
	overflow: clip;
}

.zgn-quien-soy__retrato img {
	max-inline-size: 100%;
}

/*
 * Entrada del retrato con el lenguaje del mural del hero: la figura se
 * descubre de abajo arriba y la foto de dentro llega grande y desplazada y se
 * asienta. Va ligada al scroll del propio retrato (view timeline), así que es
 * el relevo natural de la coreografía de arriba.
 *
 * Solo recorte en la figura y escala/traslado en la imagen: la opacidad y el
 * transform de la figura los anima Zaguán FSE Core (`is-anim-fade-up`) y aquí
 * no se pisan. Sin soporte de view timelines, la foto se queda como estaba.
 */
@supports ( animation-timeline: view() ) {
	@media ( prefers-reduced-motion: no-preference ) {
		.zgn-quien-soy__retrato {
			animation: zgn-retrato-abre linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 30%;
		}

		.zgn-quien-soy__retrato img {
			animation: zgn-retrato-asienta linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 50%;
		}
	}
}

@keyframes zgn-retrato-abre {
	from {
		clip-path: inset( 100% 0 0 0 );
	}

	to {
		clip-path: inset( 0 0 0 0 );
	}
}

@keyframes zgn-retrato-asienta {
	from {
		scale: 1.3;
		translate: 0 12%;
	}

	to {
		scale: 1;
		translate: 0 0;
	}
}

.zgn-quien-soy__texto {
	max-inline-size: 520px;
}

/* Apiladas, la columna del texto arrancaba a 16px del retrato: el gap de fila
 * por defecto de las columnas. Dos clases más que la regla de layout que
 * imprime WordPress, que llega después de esta hoja. */
@media ( max-width: 781px ) {
	.zgn-quien-soy .wp-block-columns.wp-block-columns {
		row-gap: var( --wp--preset--spacing--70 );
	}
}

/* El titular de «Quién soy» va a dos líneas exactas, como en el kit: el salto
 * lo pone el marcado y ninguna de las dos se parte por el ancho de la columna.
 * En pantallas estrechas se deja fluir, o desbordaría. */
@media ( min-width: 782px ) {
	/* El tamaño del titular se ata al ancho de SU columna, no al del viewport:
	 * con `6.2vw` la letra crece más deprisa que la columna que la contiene y
	 * «de disparar.» se salía por la derecha. `!important` aquí no es capricho:
	 * las clases de preset de WordPress (`has-...-font-size`) lo llevan puestas
	 * y ningún selector del tema puede ganarles de otra forma. */
	.zgn-quien-soy .wp-block-column {
		container-type: inline-size;
	}

	.zgn-quien-soy h2 {
		white-space: nowrap;
		font-size: min( 13.5cqi, 92px ) !important;
	}
}

/* ── Rejilla del portfolio: el masonry desordenado del kit ─────────────── */

/* Doce columnas y cada pieza en su sitio, con su propia caída vertical: es lo
 * que da la sensación de collage. La rejilla automática anterior las alineaba
 * todas a la misma altura y al mismo tamaño, que es justo lo contrario. */
.zgn-rejilla-trabajos {
	display: grid;
	/* minmax(0,1fr) y no 1fr: con `min-width:auto` una foto ancha estira su
	 * pista y la rejilla se sale del ancho de la página. */
	grid-template-columns: repeat( 12, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--60 );
	align-items: start;
}

/*
 * La ficha se ciñe a su foto: si la versión `large` es más estrecha que la
 * columna del collage, el filete de la meta mide lo que la imagen y no lo que
 * el hueco. Cuando la foto llena la columna, fit-content es el ancho de esta.
 */
.zgn-rejilla-trabajos > .zgn-trabajo {
	min-inline-size: 0;
	inline-size: fit-content;
	max-inline-size: 100%;
}

/* El titular de la sección no cruza toda la página: 22em, como en el kit. */
.zgn-trabajos > .wp-block-heading {
	max-inline-size: 22em;
}

.zgn-rejilla-trabajos > .zgn-trabajo:nth-child( 7n + 1 ) { grid-column: 1 / span 7; }
.zgn-rejilla-trabajos > .zgn-trabajo:nth-child( 7n + 2 ) { grid-column: 9 / span 4; margin-block-start: clamp( 48px, 14vh, 200px ); }
.zgn-rejilla-trabajos > .zgn-trabajo:nth-child( 7n + 3 ) { grid-column: 3 / span 10; margin-block-start: clamp( 56px, 10vh, 150px ); }
.zgn-rejilla-trabajos > .zgn-trabajo:nth-child( 7n + 4 ) { grid-column: 1 / span 4; margin-block-start: clamp( 56px, 10vh, 150px ); }
.zgn-rejilla-trabajos > .zgn-trabajo:nth-child( 7n + 5 ) { grid-column: 6 / span 6; margin-block-start: clamp( 96px, 20vh, 280px ); }
.zgn-rejilla-trabajos > .zgn-trabajo:nth-child( 7n + 6 ) { grid-column: 2 / span 5; margin-block-start: clamp( 56px, 10vh, 150px ); }
.zgn-rejilla-trabajos > .zgn-trabajo:nth-child( 7n + 7 ) { grid-column: 8 / span 5; margin-block-start: clamp( 24px, 4vh, 64px ); }

/*
 * En pantallas estrechas el collage no cabe: una sola columna, sin caídas.
 *
 * Los selectores llevan el mismo peso que los `:nth-child` de arriba —clase,
 * hijo y pseudoclase— porque si no, la posición escrita para el collage gana
 * aquí dentro y las fotografías salen a 95px de ancho en el móvil.
 */
@media ( max-width: 781px ) {
	.zgn-trabajos .zgn-rejilla-trabajos {
		grid-template-columns: minmax( 0, 1fr );
		gap: var( --wp--preset--spacing--70 );
	}

	.zgn-rejilla-trabajos > .zgn-trabajo:nth-child( n ) {
		grid-column: 1 / -1;
		margin-block-start: 0;
	}

	/* A una columna, la etiqueta a 11px y el número a 20px se leían como
	 * nota al pie de una foto que ocupa la pantalla. `!important` por las
	 * clases de preset, que lo llevan. */
	.zgn-trabajo .zgn-trabajo__etiqueta {
		font-size: 13px !important;
	}

	.zgn-trabajo .zgn-trabajo__num {
		font-size: 30px !important;
	}

	.zgn-trabajo .wp-block-group {
		margin-block-start: var( --wp--preset--spacing--30 );
		padding-block-start: var( --wp--preset--spacing--20 );
	}
}

/* El pie de cada foto: filete, medidas y color del kit. */
.zgn-trabajo .wp-block-group {
	align-items: center;
	padding-block-start: 0;
	margin-block-start: var( --wp--preset--spacing--20 );
	border-block-start: 1px solid var( --wp--custom--arena-veil );
}

.zgn-trabajo__etiqueta {
	color: var( --wp--preset--color--sai-arena );
	opacity: .62;
}

/* Cada tipo enlaza a su archivo: discreto en reposo, acento al pasar. */
.zgn-trabajo__etiqueta a {
	color: inherit;
	text-decoration: none;
	transition: color .25s ease;
}

.zgn-trabajo__etiqueta:has( a:hover, a:focus-visible ) {
	opacity: 1;
}

.zgn-trabajo__etiqueta a:hover,
.zgn-trabajo__etiqueta a:focus-visible {
	color: var( --wp--preset--color--sai-blue );
	text-decoration: underline;
	text-underline-offset: .3em;
}

/* ── Preguntas frecuentes: la pregunta es un titular, no texto corrido ── */
.zgn-faq__item > summary {
	font-family: var( --wp--preset--font-family--heading );

	/* Un punto por debajo de la escala fluida: la pregunta es un titular, pero
	 * cinco titulares seguidos a 31px convierten el acordeón en un muro. */
	font-size: var( --wp--preset--font-size--sai-md );
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0;
	transition: color .25s ease;
}

/* La pregunta entera responde al puntero, no solo el texto. */
.zgn-faq__item > summary:hover,
.zgn-faq__item > summary:focus-visible {
	color: var( --wp--preset--color--sai-arena );
}

.zgn-faq__item > summary:hover .zgn-faq__num,
.zgn-faq__item > summary:hover::after {
	color: inherit;
}

.zgn-faq__num {
	/* El número nunca parte: es una etiqueta, no texto que fluya. */
	flex-shrink: 0;
	white-space: nowrap;
	align-self: center;
	font-family: var( --wp--preset--font-family--sai-serif );
	font-style: italic;
	font-weight: 300;
	font-size: var( --wp--preset--font-size--sai-sm );
	text-transform: none;
	letter-spacing: 0;
	margin-inline-end: var( --wp--preset--spacing--30 );
}

/* Sin sangría propia: la pone el cuerpo, que es quien sabe dónde arranca la
 * pregunta. Con las dos, la respuesta se iba 64px más adentro que su título. */
.zgn-faq__respuesta {
	max-inline-size: 56ch;
}

/* ── Botones: las cajas del kit, anchas y de trazo fino ────────────────── */

/* El de contorno es el grande del kit (22/44); el sólido, más compacto (16/32). */
.zgn-boton.is-style-outline > .wp-element-button {
	padding-block: var( --wp--preset--spacing--40 );
	padding-inline: var( --wp--preset--spacing--50 );
}

.zgn-boton:not( .is-style-outline ) > .wp-element-button {
	padding-block: var( --wp--preset--spacing--30 );
	padding-inline: var( --wp--preset--spacing--50 );
}

/* Al pasar por encima, el contorno se rellena: es el mismo gesto que el botón
 * del formulario, al revés. Sin esto el botón tenía la transición declarada y
 * nada que transicionar.
 *
 * `!important` en el color, como en el botón sólido: el bloque trae puesta la
 * clase `has-…-color` del core, que lo lleva, y sin igualarla el texto se queda
 * del mismo color que el relleno y el botón se vacía al pasar por encima. */
.zgn-boton.is-style-outline > .wp-element-button:hover,
.zgn-boton.is-style-outline > .wp-element-button:focus-visible {
	background-color: var( --wp--preset--color--sai-chocolate );
	border-color: var( --wp--preset--color--sai-chocolate );
	color: var( --wp--preset--color--sai-arena ) !important;
}

.zgn-trabajos .zgn-boton.is-style-outline > .wp-element-button {
	border-color: var( --wp--custom--arena-veil );
}

/* Sobre el carbón de «Trabajos» el relleno se invierte, o el botón desaparece. */
.zgn-trabajos .zgn-boton.is-style-outline > .wp-element-button:hover,
.zgn-trabajos .zgn-boton.is-style-outline > .wp-element-button:focus-visible {
	background-color: var( --wp--preset--color--sai-arena );
	border-color: var( --wp--preset--color--sai-arena );
	color: var( --wp--preset--color--sai-chocolate ) !important;
}

/* El enlace de Instagram no lleva caja en el kit: barra fina debajo. */
:is( .entry-content, .is-root-container ) .zgn-enlace-arena a {
	text-decoration: none;
	border-block-end: 2px solid var( --wp--custom--arena-veil );
	padding-block-end: 4px;
}

/* La portada del hero se dimensiona en 100vw, que incluye el ancho de la barra
 * de scroll: por eso sobraban unos píxeles a la derecha. `clip` y no `hidden`,
 * que anularía el `position: sticky` de la escena. */
.wp-site-blocks {
	overflow-x: clip;
}

/* Centrado óptico de la barra: Gayathri reserva mucho descendente, así que con
 * `line-height: 1` el rótulo queda 4px por encima del centro real de la
 * cabecera — se nota sobre todo cuando el scroll la comprime. Recortando la
 * caja a la altura de mayúsculas, el centrado de flex ya cuadra. */
@supports ( text-box: trim-both cap alphabetic ) {
	.zgn-barra .wp-block-site-title,
	.zgn-barra .zgn-menu .wp-block-navigation-item__content {
		text-box: trim-both cap alphabetic;
	}
}

/* El hero no rotula el nombre: lo firma el logotipo. El h1 sigue existiendo
 * para lectores de pantalla y buscadores, solo que fuera de la vista. */
.zgn-solo-lectores {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* ── Estados de cabecera y pie ─────────────────────────────────────────── */

/* Todo lo clicable de la barra y del pie responde igual: pasa al azul del kit
 * con la misma transición, de modo que el cambio se lee como intencionado y no
 * como un salto. Incluye el rótulo del sitio, el menú, los enlaces legales y
 * los datos de contacto. */
:is( .zgn-cabecera, .zgn-pie ) :is( a, .wp-block-site-title a, .wp-block-navigation-item__content ) {
	transition: color .25s ease, border-color .25s ease, opacity .25s ease;
}

:is( .zgn-cabecera, .zgn-pie ) a:hover,
:is( .zgn-cabecera, .zgn-pie ) a:focus-visible {
	color: var( --wp--preset--color--sai-blue );
	opacity: 1;
}

/* La línea legal del pie ya es discreta por el beige, las versales y el cuerpo
 * pequeño. No lleva opacidad: al .62 el beige bajaba a 2,8:1 sobre el chocolate
 * y no llegaba al 4,5:1 de WCAG AA; entero da 5,08:1. */

/*
 * Los enlaces del menú necesitan la clase repetida en el selector: el core
 * emite `.wp-block-navigation .…__content.…__content { color: inherit }` y con
 * una sola clase gana él y el hover no se ve. Subir la forma del selector, que
 * es lo correcto — nunca !important.
 */
.zgn-cabecera .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.zgn-cabecera .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	color: var( --wp--preset--color--sai-blue );
}

/* Página actual: el kit marca dónde estás con el azul, no con un subrayado. */
.zgn-cabecera .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.zgn-cabecera .wp-block-navigation-item__content.wp-block-navigation-item__content[ aria-current="page" ] {
	color: var( --wp--preset--color--sai-blue );
}

/* ── Estados de los botones y enlaces del cierre ───────────────────────── */

/*
 * El botón sólido pinta su fondo desde el tema y no con el atributo de color
 * del bloque: las clases `has-…-background-color` del core llevan !important y
 * con ellas puestas no hay hover que valga sin escalar a otro !important.
 */
.zgn-boton--solido > .wp-element-button {
	background-color: var( --wp--preset--color--sai-blue );
	border-color: var( --wp--preset--color--sai-blue );
	color: var( --wp--preset--color--sai-chocolate );
}

.zgn-boton--solido > .wp-element-button:hover,
.zgn-boton--solido > .wp-element-button:focus-visible {
	background-color: var( --wp--preset--color--sai-arena );
	border-color: var( --wp--preset--color--sai-arena );
	color: var( --wp--preset--color--sai-chocolate );
}

/* Los enlaces de barra inferior — Instagram, «Sobre mí» — pasan al azul con
 * la barra incluida. */
:is( .entry-content, .is-root-container ) :is( .zgn-enlace-arena, .zgn-enlace-subrayado ) a {
	transition: color .25s ease, border-color .25s ease;
}

:is( .entry-content, .is-root-container ) :is( .zgn-enlace-arena, .zgn-enlace-subrayado ) a:hover,
:is( .entry-content, .is-root-container ) :is( .zgn-enlace-arena, .zgn-enlace-subrayado ) a:focus-visible {
	color: var( --wp--preset--color--sai-blue );
	border-block-end-color: var( --wp--preset--color--sai-blue );
}

/* ── Portfolio, Sobre mí y Contacto ───────────────────────────────────── */

/* Portadas de página: el kit las deja respirar bajo la cabecera fija. */
:is( .zgn-portfolio-portada, .zgn-sobremi-portada, .zgn-contacto-portada ) {
	padding-block-start: clamp( 210px, 24vh, 280px );
}

/* La de contacto es la excepción: el kit la deja más baja porque su titular
 * ocupa media página y el formulario tiene que asomar. */
.zgn-contacto-portada {
	padding-block-start: clamp( 140px, 16vh, 170px );
}

:is( .zgn-portfolio-portada, .zgn-sobremi-portada ) > .wp-block-heading {
	max-inline-size: 18em;
}

/* Fotografía a sangre entre secciones: ni margen ni ancho que la contenga. */
.zgn-sangre {
	padding: 0;
	line-height: 0;
}

.zgn-sangre img {
	inline-size: 100%;
	display: block;
}

/* Cita del kit: filete azul a la izquierda. */
:is( .entry-content, .is-root-container ) .zgn-cita {
	border-inline-start: 2px solid var( --wp--preset--color--sai-blue );
	padding-inline-start: var( --wp--preset--spacing--50 );
	max-inline-size: 24em;
}

/*
 * Pasos de «Cómo trabajo»: compactos, con un filete solo ENTRE pasos —ni
 * encima del primero ni debajo del último— y texto de apoyo, no protagonista.
 *
 * Los espacios se fijan aquí y no en el blockGap de los grupos: las reglas de
 * layout que imprime WordPress llegan después de esta hoja con el mismo peso,
 * así que los selectores llevan una clase más para ganarles.
 */
.zgn-pasos > .zgn-paso + .zgn-paso {
	margin-block-start: var( --wp--preset--spacing--30 );
	padding-block-start: var( --wp--preset--spacing--30 );
	border-block-start: 1px solid color-mix( in srgb, var( --wp--preset--color--sai-arena ) 15%, transparent );
}

.zgn-paso > .wp-block-heading {
	margin-block-start: var( --wp--preset--spacing--20 );
}

/* El texto pertenece a su título: pegado a él, no a media distancia entre el
 * título y el paso siguiente. */
.zgn-paso > .zgn-paso__texto {
	margin-block-start: .375rem;
	max-inline-size: 38ch;
	color: var( --wp--custom--arena-scrim );
}

/* En móvil el número bajaba a 28px y el título a 20px, separados por 8px: se
 * leían como una sola línea apretada. El número es el primer párrafo del paso
 * y lleva tamaño propio en línea, de ahí el `!important`. */
@media ( max-width: 781px ) {
	.zgn-pasos > .zgn-paso + .zgn-paso {
		margin-block-start: var( --wp--preset--spacing--40 );
		padding-block-start: var( --wp--preset--spacing--50 );
	}

	.zgn-paso > p:first-child {
		font-size: 48px !important;
	}

	.zgn-paso > .wp-block-heading {
		margin-block-start: var( --wp--preset--spacing--40 );
		font-size: 26px !important;
	}

	.zgn-paso > .zgn-paso__texto {
		margin-block-start: .625rem;
	}
}

/*
 * Visor de «Cómo trabajo»: cinco fotografías apiladas, una por paso. Acompaña
 * a la columna de pasos de arriba abajo y solo se ve la activa; la cambia
 * assets/js/pasos.js al pasar por un paso. Sin JavaScript se queda la primera,
 * que lleva `is-activa` desde el marcado.
 */
.zgn-pasos__fotos {
	position: relative;
	block-size: 100%;
	min-block-size: 24rem;
	overflow: hidden;
}

.zgn-pasos__fotos > .zgn-pasos__foto {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s cubic-bezier( 0.22, 1, 0.36, 1 ), visibility 0s linear .6s;
}

.zgn-pasos__fotos > .zgn-pasos__foto.is-activa {
	opacity: 1;
	visibility: visible;
	transition: opacity .6s cubic-bezier( 0.22, 1, 0.36, 1 ), visibility 0s;
}

.zgn-pasos__fotos > .zgn-pasos__foto img {
	block-size: 100%;
	inline-size: 100%;
	object-fit: cover;
	display: block;
}

@media ( prefers-reduced-motion: reduce ) {
	.zgn-pasos__fotos > .zgn-pasos__foto,
	.zgn-pasos__fotos > .zgn-pasos__foto.is-activa {
		transition: none;
	}
}

/* Caja azul de llamada a la acción del portfolio. */
.zgn-cta-azul__caja .wp-block-heading {
	max-inline-size: 22em;
}

/* Datos de contacto sobre el azul: el filete separa cada dato en pantallas
 * anchas y desaparece cuando la fila se apila. */
.zgn-datos__fila > .zgn-dato {
	flex: 1 1 14rem;
}

/* Destacado editorial dentro de cualquier titular: serif en cursiva, en azul y
 * sin las versales del titular que lo contiene. Antes solo valía para la
 * sección de trabajos de la portada. */
:is( .entry-content, .is-root-container ) .wp-block-heading .zgn-editorial,
:is( .entry-content, .is-root-container ) .zgn-trabajos .wp-block-heading em {
	font-family: var( --wp--preset--font-family--sai-serif );
	font-style: italic;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
	color: var( --wp--preset--color--sai-blue );
}

/* ── Filtro del portfolio ─────────────────────────────────────────────── */
.zgn-filtros-pf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var( --wp--preset--spacing--40 );
	padding-block-end: var( --wp--preset--spacing--50 );
	border-block-end: 1px solid var( --wp--custom--arena-veil );
}

.zgn-filtros-pf__rotulo {
	margin: 0;
	font-size: var( --wp--preset--font-size--sai-micro );
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var( --wp--preset--color--sai-blue );
}

.zgn-filtros-pf__botones {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--30 );
	margin-inline-start: auto;
}

/* Las píldoras son de trazo fino, como los botones de contorno del kit. */
.zgn-filtro-pf {
	font: inherit;
	font-size: var( --wp--preset--font-size--sai-mini );
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --wp--preset--color--sai-arena );
	background-color: transparent;
	border: 1px solid var( --wp--custom--arena-veil );
	padding: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--50 );
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.zgn-filtro-pf:hover,
.zgn-filtro-pf:focus-visible {
	border-color: var( --wp--preset--color--sai-blue );
	color: var( --wp--preset--color--sai-blue );
}

/* El filtro activo se marca con el acento lleno, no con un subrayado. */
.zgn-filtro-pf[ aria-pressed="true" ] {
	background-color: var( --wp--preset--color--sai-blue );
	border-color: var( --wp--preset--color--sai-blue );
	color: var( --wp--preset--color--sai-chocolate );
}

.zgn-filtro-pf__cuenta {
	opacity: .55;
	margin-inline-start: .35em;
}

/* Sobre el celeste del filtro activo, .55 da 3,15:1; .75 llega a 5,26:1. */
.zgn-filtro-pf[ aria-pressed="true" ] .zgn-filtro-pf__cuenta {
	opacity: .75;
}

/* La cuenta de resultados es para lectores de pantalla; en pantalla ya se ve. */
.zgn-filtros-pf__estado {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset( 50% );
}

/*
 * En móvil las píldoras van en una sola fila que se sale por la derecha y se
 * desliza con el dedo, sin barra de desplazamiento. La fila llega hasta el
 * borde de la pantalla (margen negativo del gutter) para que se vea cortada y
 * se entienda que sigue.
 */
@media ( max-width: 781px ) {
	.zgn-filtros-pf__botones {
		flex: 1 1 100%;
		flex-wrap: nowrap;
		margin-inline: 0 calc( -1 * var( --wp--style--root--padding-right, 1.5rem ) );
		padding-inline-end: var( --wp--style--root--padding-right, 1.5rem );
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.zgn-filtros-pf__botones::-webkit-scrollbar {
		display: none;
	}

	.zgn-filtro-pf {
		flex: none;
		white-space: nowrap;
		scroll-snap-align: start;
	}
}

/* Al filtrar, las fichas ocultas no dejan hueco en la rejilla. */
.zgn-rejilla-trabajos > .zgn-trabajo[ hidden ] {
	display: none;
}

/*
 * Con un filtro puesto, el collage deja de tener sentido: sus posiciones y sus
 * caídas están escritas para las siete fotografías, y con dos seleccionadas
 * quedan huecos enormes y piezas descolgadas al fondo. Mientras dura el filtro
 * la rejilla pasa a un flujo regular que recoloca lo que queda desde arriba.
 */
.zgn-rejilla-trabajos.is-filtrando {
	grid-template-columns: repeat( auto-fill, minmax( min( 22rem, 100% ), 1fr ) );
	align-items: start;
}

.zgn-rejilla-trabajos.is-filtrando > .zgn-trabajo {
	grid-column: auto;
	margin-block-start: 0;
}

/* ── Recorrido ────────────────────────────────────────────────────────── */

.zgn-recorrido__lista {
	position: relative;
	z-index: 1;
	margin-block-start: var( --wp--preset--spacing--60 );
}

/* Cada hito es una fila de tres columnas: año, hito y disciplina. */
.zgn-hito {
	display: grid;
	grid-template-columns: 5.5rem minmax( 0, 1fr ) minmax( 0, 20ch );
	gap: var( --wp--preset--spacing--50 );
	align-items: baseline;
	padding-block: var( --wp--preset--spacing--30 );
	border-block-end: 1px solid color-mix( in srgb, var( --wp--preset--color--sai-chocolate ) 20%, transparent );
	transition: color .25s ease, opacity .25s ease;
	cursor: pointer;
}

/* Filetes solo ENTRE hitos: ni encima del primero ni debajo del último. */
.zgn-recorrido__lista > .zgn-hito:last-child {
	border-block-end: 0;
}

/*
 * Las tres piezas del hito se alinean por baseline, así que lo que descuadra la
 * fila no es el padding —es simétrico— sino la caja de cada texto: el margen
 * superior que WordPress le da a la etiqueta y el aire muerto que el tipo deja
 * dentro de su línea. `text-box` recorta esa caja a la altura de mayúscula, que
 * es lo que el ojo lee como borde del texto. Donde el navegador no lo soporte,
 * la fila se queda como estaba, sin romperse.
 */
.zgn-hito > * {
	margin-block: 0;
}

.zgn-hito__anio,
.zgn-hito__titulo,
.zgn-hito__etiqueta {
	text-box: trim-both cap alphabetic;
}

.zgn-hito__titulo {
	margin: 0;
}

.zgn-hito__etiqueta {
	text-align: end;
}

/* Al recorrer la lista, el hito bajo el cursor se queda y los demás ceden. */
/* El atenuado va en los HIJOS del hito, no en el hito: la capa de animación
 * escribe `opacity` en línea sobre el elemento animado y una regla de hoja no
 * le gana nunca. */
@media ( hover: hover ) and ( pointer: fine ) {
	.zgn-hito > * {
		transition: opacity .25s ease;
	}

	.zgn-recorrido__lista:hover .zgn-hito > * {
		opacity: .4;
	}

	.zgn-recorrido__lista .zgn-hito:hover > * {
		opacity: 1;
	}
}

/* Año y título, un punto más grandes, y más aire entre hitos: a 20 y 23px con
 * 12px de padding la lista se leía apelmazada. Clases de preset: !important. */
.zgn-hito {
	padding-block: var( --wp--preset--spacing--50 );
}

.zgn-hito .zgn-hito__anio {
	font-size: clamp( 28px, 2.4vw, 34px ) !important;
}

.zgn-hito .zgn-hito__titulo {
	font-size: clamp( 28px, 3.4vw, 52px ) !important;
}

/* En móvil, el año encima del hito y no en una columna estrecha a su lado. */
@media ( max-width: 781px ) {
	.zgn-hito {
		grid-template-columns: minmax( 0, 1fr );
		gap: var( --wp--preset--spacing--40 );
		padding-block: var( --wp--preset--spacing--60 );
	}

	.zgn-hito .zgn-hito__anio {
		font-size: 36px !important;
	}

	.zgn-hito .zgn-hito__titulo {
		font-size: 30px !important;
	}

	.zgn-hito__etiqueta {
		grid-column: 1;
		text-align: start;
	}
}

/* ── Página de contacto ───────────────────────────────────────────────── */

/* El texto de entrada no cruza la página entera: media columna, como el kit. */
/* El texto de entrada ocupa media columna. El ancho se limita aquí, pero el
 * que NO se centre depende de que su contenedor sea flex: en uno constrained,
 * WordPress fuerza `margin: auto` con !important sobre todo lo que lleva
 * medida máxima, y contra eso no hay especificidad posible. */
/*
 * Medidas del kit: el titular a media página y el texto a 46 caracteres.
 *
 * Ambos van dentro de un contenedor flex porque en uno «constrained» WordPress
 * centra con !important todo lo que lleve medida máxima, y contra eso no hay
 * especificidad posible.
 */
.zgn-contacto-portada__titular {
	max-inline-size: 50%;
	line-height: 1.02;
}

.zgn-contacto-portada__intro .zgn-contacto-portada__texto {
	max-inline-size: 46ch;
}

@media ( max-width: 900px ) {
	.zgn-contacto-portada__titular {
		max-inline-size: none;
	}
}

/* El rótulo del dato no lleva color propio: hereda el de la sección. Sobre el
 * azul eso es el chocolate, que es lo que pide el kit. */
.zgn-dato__rotulo {
	opacity: .7;
}

.zgn-dato__valor {
	margin: 0;
}

/*
 * Sobre el azul, el hover NO puede ser el acento: azul sobre azul no se ve.
 * Los datos clicables pasan al claro.
 */
.zgn-datos a {
	text-decoration: none;
	transition: color .25s ease;
}

.zgn-datos a:hover,
.zgn-datos a:focus-visible {
	color: var( --wp--preset--color--sai-arena );
}

/* ── Ampliar la fotografía: el disparador del lightbox ────────────────── */

/*
 * Sin lupa. La foto se amplía haciendo clic en ella —el lightbox de WordPress
 * escucha el clic en la imagen—, así que el botón sobra a la vista. No se
 * borra: es la única vía para abrir el lightbox con teclado, y por eso solo
 * aparece cuando recibe el foco con el tabulador.
 *
 * El fondo se anula con !important porque WordPress se lo da con un selector
 * de cinco piezas (`button:not(:hover):not(:active)…`) que cubre todos los
 * estados.
 */
.wp-lightbox-container .lightbox-trigger {
	opacity: 0 !important;
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	box-shadow: none !important;
	pointer-events: none;
}

.wp-lightbox-container .lightbox-trigger:focus-visible {
	opacity: 1 !important;
	pointer-events: auto;
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ── Pie: bloque de contacto, sello, datos y línea legal ──────────────── */

/*
 * Todo centrado en una columna, de arriba abajo: antetítulo, titular, sello,
 * logotipo, datos y línea legal. El ritmo lo ponen los márgenes de cada pieza,
 * no el blockGap (está a 0 en el marcado): las distancias del diseño no son
 * iguales entre sí.
 *
 * Los márgenes van con `.zgn-pie` delante: el layout flex de WordPress pone
 * `margin: 0` a los hijos con el mismo peso que una clase y llega después de
 * esta hoja, así que una sola clase pierde.
 */
.zgn-pie {
	align-items: center;
	text-align: center;
}

.zgn-pie .zgn-pie__cta {
	align-items: center;
	margin-block-end: clamp( 72px, 10vw, 144px );
}

/* Antetítulo entre dos filetes azules. */
.zgn-pie .zgn-pie__antetitulo {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 32px;
	font-size: var( --wp--preset--font-size--sai-micro );
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.zgn-pie__antetitulo::before,
.zgn-pie__antetitulo::after {
	content: "";
	inline-size: 28px;
	block-size: 1px;
	background-color: var( --wp--preset--color--sai-blue );
}

.zgn-pie .zgn-pie__titular {
	max-inline-size: 900px;
	margin: 0 0 clamp( 40px, 5vw, 64px );
	line-height: 1.03;
	text-wrap: balance;
}

/*
 * El sello: círculo azul con «ESCRIBIR ·» girando alrededor (inc/sello.php).
 *
 * El selector lleva `a.` para pesar más que la regla general de enlaces del
 * pie (`:is(.zgn-cabecera, .zgn-pie) :is(a, …)`), que fija la `transition` solo
 * en color, borde y opacidad: con ella ganando, la escala no se animaba y el
 * sello crecía de golpe.
 *
 * Al pasar por encima: crece despacio, el giro se para y la flecha crece un
 * poco más que el círculo.
 */
.zgn-pie a.zgn-sello {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: clamp( 170px, 16vw, 230px );
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var( --wp--preset--color--sai-blue );
	color: var( --wp--preset--color--sai-chocolate );
	text-decoration: none;
	transition:
		background-color .6s ease,
		transform .9s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.zgn-pie a.zgn-sello:hover,
.zgn-pie a.zgn-sello:focus-visible {
	background-color: var( --wp--preset--color--sai-arena );
	color: var( --wp--preset--color--sai-chocolate );
	transform: scale( 1.05 );
}

.zgn-pie a.zgn-sello:focus-visible {
	outline: 2px solid var( --wp--preset--color--sai-arena );
	outline-offset: 6px;
}

.zgn-sello__anillo {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	overflow: visible;
	pointer-events: none;
}

.zgn-sello__anillo text {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 5px;
	fill: currentColor;
}

.zgn-sello__flecha {
	display: inline-block;
	font-size: clamp( 40px, 3.6vw, 52px );
	line-height: 1;
	transition: transform .9s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.zgn-sello:hover .zgn-sello__flecha,
.zgn-sello:focus-visible .zgn-sello__flecha {
	transform: scale( 1.25 );
}

@keyframes zgn-gira {
	to {
		transform: rotate( 360deg );
	}
}

@media ( prefers-reduced-motion: no-preference ) {
	.zgn-sello__anillo {
		animation: zgn-gira 16s linear infinite;
	}

	/* El giro se para donde esté mientras el puntero sigue encima. */
	.zgn-sello:hover .zgn-sello__anillo,
	.zgn-sello:focus-visible .zgn-sello__anillo {
		animation-play-state: paused;
	}
}

.zgn-pie .zgn-pie__logo {
	margin: 0 0 44px;
}

.zgn-pie__logo img {
	inline-size: clamp( 200px, 22vw, 310px );
	block-size: auto;
}

/* Datos: correo · teléfono · Instagram · Tenerife, con un punto azul entre cada
 * uno. El punto va delante de cada dato salvo el primero. */
.zgn-pie__datos {
	align-items: center;
	gap: 20px;
	font-size: var( --wp--preset--font-size--sai-xs );
	letter-spacing: 0.03em;
}

.zgn-pie .zgn-pie__datos > * {
	display: flex;
	align-items: center;
	margin: 0;
}

.zgn-pie__datos > * + *::before {
	content: "";
	inline-size: 5px;
	block-size: 5px;
	margin-inline-end: 20px;
	border-radius: 50%;
	background-color: var( --wp--preset--color--sai-blue );
}

.zgn-pie .zgn-pie__datos a {
	color: var( --wp--preset--color--sai-arena );
	text-decoration: none;
	border-block-end: 1px solid color-mix( in srgb, var( --wp--preset--color--sai-arena ) 35%, transparent );
	padding-block-end: 2px;
	transition: opacity .25s ease;
}

.zgn-pie .zgn-pie__datos a:hover,
.zgn-pie .zgn-pie__datos a:focus-visible {
	color: var( --wp--preset--color--sai-arena );
	opacity: .7;
}

.zgn-pie__lugar {
	font-size: var( --wp--preset--font-size--sai-micro );
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: color-mix( in srgb, var( --wp--preset--color--sai-arena ) 60%, transparent );
}

/* Línea legal: versales finas, a todo el ancho y con un filete encima. */
.zgn-pie .zgn-pie__legal {
	align-self: stretch;
	gap: 28px;
	margin-block-start: clamp( 56px, 7vw, 104px );
	padding-block-start: 32px;
	border-block-start: 2px solid color-mix( in srgb, var( --wp--preset--color--sai-arena ) 20%, transparent );
	font-size: var( --wp--preset--font-size--sai-micro );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix( in srgb, var( --wp--preset--color--sai-arena ) 60%, transparent );
}

.zgn-pie__legal > p {
	margin: 0;
}

.zgn-pie .zgn-pie__legal a {
	color: inherit;
	text-decoration: none;
	transition: color .25s ease;
}

.zgn-pie .zgn-pie__legal a:hover,
.zgn-pie .zgn-pie__legal a:focus-visible {
	color: var( --wp--preset--color--sai-arena );
}

/* Financiación del Kit Digital: franja blanca bajo el pie con los logos
 * oficiales. El banner trae su propio aire, así que solo se limita el ancho. */
.zgn-pie-financiacion .zgn-pie-financiacion__logos {
	max-inline-size: 1200px;
	margin-block: var( --wp--preset--spacing--30 ) 0;
}

.zgn-pie-financiacion__logos img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1536 / 106;
}

/* En escritorio, más contenido: a 1200px pesaba más que el propio pie. */
@media ( min-width: 782px ) {
	.zgn-pie-financiacion .zgn-pie-financiacion__logos {
		max-inline-size: 690px;
	}
}

/*
 * Pie más compacto en escritorio (feedback 6-oct): ocupaba más de una pantalla
 * entera. Menos aire arriba, titular, sello y logotipo un escalón por debajo.
 * En móvil se queda como estaba. El padding superior va en línea en el bloque,
 * de ahí el `!important`; el titular lleva clase de preset.
 */
@media ( min-width: 782px ) {
	.zgn-pie.zgn-pie {
		padding-block-start: var( --wp--preset--spacing--70 ) !important;
	}

	.zgn-pie .zgn-pie__cta {
		margin-block-end: clamp( 48px, 5vw, 80px );
	}

	.zgn-pie .zgn-pie__antetitulo {
		margin-block-end: 24px;
	}

	.zgn-pie .zgn-pie__titular {
		margin-block-end: clamp( 28px, 3vw, 44px );
		font-size: clamp( 40px, 4.6vw, 68px ) !important;
	}

	.zgn-pie a.zgn-sello {
		inline-size: clamp( 130px, 10vw, 160px );
	}

	.zgn-pie .zgn-pie__logo {
		margin-block-end: 32px;
	}

	.zgn-pie__logo img {
		inline-size: clamp( 170px, 14vw, 220px );
	}
}

/* ── Gracias: la pantalla de después de enviar ────────────────────────── */

/*
 * Va con la plantilla `page-landing`, sin título impreso y a sangre, así que
 * ocupa la pantalla entera y el mensaje no compite con nada. El padding
 * superior reserva el alto de la cabecera, que en esa plantilla flota sobre el
 * contenido en lugar de empujarlo.
 */
/*
 * Todo en una columna centrada y compacta: es una pantalla de acuse, no una
 * página. El ritmo lo pone el `gap` del flex y no los márgenes de cada bloque,
 * que es lo que antes dejaba huecos distintos entre una pieza y la siguiente.
 */
.zgn-gracias {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var( --wp--preset--spacing--30 );
	text-align: center;
	min-block-size: 100svh;
	padding-block: var( --zgn-cabecera-alto, 5.5rem ) var( --wp--preset--spacing--60 );
	padding-inline: var( --wp--style--root--padding-left ) var( --wp--style--root--padding-right );
}

/*
 * Doble clase, no `!important`: WordPress emite las reglas de layout del grupo
 * en un <style> que llega DESPUÉS de las hojas del tema, y a igual
 * especificidad gana él con sus márgenes.
 */
.zgn-gracias.zgn-gracias > * {
	max-inline-size: 46ch;
	margin-block: 0;
	margin-inline: auto;
}

.zgn-gracias.zgn-gracias > h1 {
	max-inline-size: 20ch;
}

/* El botón, algo más suelto: es la única acción de la pantalla. */
.zgn-gracias.zgn-gracias > .wp-block-buttons {
	margin-block-start: var( --wp--preset--spacing--30 );
}

/* ── Marca de «mensaje recibido» ──────────────────────────────────────── */

/*
 * El círculo se dibuja, el check se traza detrás y una onda sale una vez. Son
 * trazos, no relleno: el mismo lenguaje que las líneas del formulario.
 *
 * `stroke-dashoffset` igual a la longitud del trazo es lo que lo mantiene
 * invisible hasta que la animación lo lleva a cero — de ahí que los dos valores
 * tengan que coincidir con la geometría del SVG (345 ≈ el perímetro del círculo
 * de radio 55, 60 ≈ el recorrido del check).
 */
.zgn-tick {
	inline-size: clamp( 88px, 12vw, 120px );
	flex: none;
}

.zgn-tick svg {
	inline-size: 100%;
	block-size: auto;
	overflow: visible;
}

.zgn-tick__aro,
.zgn-tick__check {
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.zgn-tick__aro {
	stroke: currentColor;
	stroke-dasharray: 345;
	stroke-dashoffset: 345;
	animation: zgn-tick-trazo .7s cubic-bezier( .65, 0, .35, 1 ) forwards;
}

/* El check en azul: es el único acento de la pantalla y lo que se mira. */
.zgn-tick__check {
	stroke: var( --wp--preset--color--sai-blue );
	stroke-dasharray: 60;
	stroke-dashoffset: 60;
	animation: zgn-tick-trazo .4s cubic-bezier( .25, 1, .5, 1 ) .55s forwards;
}

.zgn-tick__onda {
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
	opacity: 0;
	transform-origin: 60px 60px;
	animation: zgn-tick-onda .9s ease-out .55s forwards;
}

@keyframes zgn-tick-trazo {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes zgn-tick-onda {
	from {
		opacity: .55;
		transform: scale( .85 );
	}

	to {
		opacity: 0;
		transform: scale( 1.35 );
	}
}

/* Sin movimiento: la marca se ve terminada desde el primer fotograma. */
@media ( prefers-reduced-motion: reduce ) {
	.zgn-tick__aro,
	.zgn-tick__check {
		animation: none;
		stroke-dashoffset: 0;
	}

	.zgn-tick__onda {
		animation: none;
	}
}

.zgn-gracias .wp-block-buttons {
	max-inline-size: none;
}

/* ── CTA azul: el fondo se abre a pantalla completa al llegar ─────────── */

/*
 * El color crece con el scroll hasta llenar la pantalla mientras el titular y
 * el botón se quedan donde están y al tamaño que tienen.
 *
 * Por eso el que crece es un pseudo-elemento y no la propia caja: escalar la
 * caja escalaría también su contenido, y animar su ancho lo recolocaría línea a
 * línea. El pseudo es un color plano — se puede estirar sin que nada se
 * deforme.
 *
 * `calc( 50% - 50vh )` es el desbordamiento que hace falta por arriba y por
 * abajo para que el pseudo mida exactamente una pantalla: el % se mide contra
 * la caja, el vh contra el viewport. Igual en horizontal.
 *
 * Donde no haya animaciones por scroll, el pseudo se queda en `inset: 0` y la
 * sección se ve como antes.
 */
@keyframes zgn-cta-abrir {
	to {
		inset-block: calc( 50% - 50vh );
		inset-inline: calc( 50% - 50vw );
	}
}

.zgn-cta-azul__caja {
	position: relative;
}

.zgn-cta-azul__caja::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var( --wp--preset--color--sai-blue );
	animation: zgn-cta-abrir linear both;
	animation-timeline: view();
	animation-range: entry 15% cover 50%;
}

/* El contenido, por encima del color y en su sitio. */
.zgn-cta-azul__caja > * {
	position: relative;
	z-index: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	.zgn-cta-azul__caja::before {
		animation: none;
	}
}

/* En móvil, la caja quieta: ni el azul que se abre con el scroll ni el
 * relleno del botón, que en táctil se queda pegado tras el toque. */
@media ( max-width: 781px ) {
	.zgn-cta-azul__caja::before {
		animation: none;
	}

	.zgn-cta-azul .zgn-boton.is-style-outline > .wp-element-button:hover {
		background-color: transparent;
		border-color: currentColor;
		color: var( --wp--preset--color--sai-chocolate ) !important;
	}
}

/* ── Conversación: la columna del texto acompaña al formulario ────────── */

/*
 * La columna izquierda se queda a la vista mientras se rellena el formulario.
 * `align-self: start` no es opcional: las columnas de WordPress estiran a la
 * altura de la fila y una columna tan alta como su contenedor no tiene
 * recorrido contra el que pegarse, así que el sticky no haría nada.
 *
 * Solo de 782px arriba: en una sola columna no hay nada a lo que acompañar.
 */
/* En móvil el formulario va directo, sin antetítulo, titular ni párrafo
 * delante: la portada ya ha dicho lo mismo y el formulario quedaba a dos
 * pantallas de distancia. */
@media ( max-width: 781px ) {
	.zgn-conversacion .wp-block-column:first-child {
		display: none;
	}
}

@media ( min-width: 782px ) {
	.zgn-conversacion .wp-block-column:first-child {
		position: sticky;
		inset-block-start: calc( var( --zgn-cabecera-alto, 5.5rem ) + var( --wp--preset--spacing--50 ) );
		align-self: start;
	}
}

/* ── Formulario de contacto (Contact Form 7) ──────────────────────────── */

/*
 * El marcado lo escribe CF7 desde su pestaña «Formulario» (ver
 * artefactos/cf7-formulario-contacto.html en el repositorio del proyecto). Los
 * estilos viven AQUÍ y no en el formulario: lo que se guarda en base de datos
 * se pierde el día que alguien edite el formulario desde el escritorio.
 *
 * CF7 envuelve cada control en un <span class="wpcf7-form-control-wrap">, así
 * que los selectores van al control, no al envoltorio.
 */

.zgn-form__fila {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );

	/* Menos aire entre filas que entre columnas: en vertical el rótulo ya
	 * separa visualmente un campo del anterior, y un hueco igual al de las
	 * columnas hacía el formulario interminable. */
	column-gap: var( --wp--preset--spacing--60 );
	row-gap: var( --wp--preset--spacing--50 );
}

@media ( max-width: 781px ) {
	.zgn-form__fila {
		grid-template-columns: minmax( 0, 1fr );
	}
}

.zgn-form__campo {
	display: flex;
	flex-direction: column;

	/* El rótulo es la etiqueta del campo, no un párrafo suelto: va pegado a él. */
	gap: var( --wp--preset--spacing--20 );
}

/* CF7 envuelve cada control en un span que, por defecto, mete su propio aire. */
.zgn-form .wpcf7-form-control-wrap {
	display: block;
	margin: 0;
}

.zgn-form__campo--ancho {
	grid-column: 1 / -1;
}

.zgn-form__rotulo {
	font-size: var( --wp--preset--font-size--sai-micro );
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Los campos son una línea, no una caja: es lo que hace que el formulario se
 * lea como el resto de la página y no como un formulario pegado encima. */
.zgn-form input[ type="text" ],
.zgn-form input[ type="email" ],
.zgn-form input[ type="tel" ],
.zgn-form select,
.zgn-form textarea {
	inline-size: 100%;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--sai-sm );
	line-height: 1.6;
	color: inherit;
	background-color: transparent;
	border: 0;

	/* La línea es un apoyo para escribir, no un marco, pero es lo único que
	 * señala que ahí hay un campo: WCAG 1.4.11 le pide 3:1 contra el fondo. Al
	 * 20 % se quedaba en 1,5:1; al 50 % del chocolate da 3,11:1 sobre la arena y
	 * sigue siendo una raya fina. */
	border-block-end: 1px solid color-mix( in srgb, var( --wp--preset--color--sai-chocolate ) 50%, transparent );
	border-radius: 0;

	/* Casi nada: lo que separa el texto de su línea es el propio descendente de
	 * la fuente. Con el espaciado 30 el campo parecía una caja vacía con una raya
	 * suelta al fondo. */
	padding: 0 0 2px;
	transition: border-color .25s ease;
}

.zgn-form textarea {
	resize: vertical;

	/* Cuatro líneas, no seis: con `rows="6"` la línea del campo quedaba a media
	 * pantalla del rótulo y el mensaje parecía otro bloque. Sigue creciendo si
	 * quien escribe lo arrastra. */
	block-size: 7rem;
}

/* Al escribir sí: el foco necesita verse, y es el único momento en que la
 * línea tiene que pesar. */
.zgn-form :is( input, select, textarea ):focus {
	outline: 0;
	border-block-end-color: var( --wp--preset--color--sai-chocolate );
}

/* El ejemplo del campo es texto y necesita 4,5:1: el beige daba 2,77:1 sobre la
 * arena. Al 65 % del chocolate da 4,82:1 y se sigue leyendo como secundario. */
.zgn-form ::placeholder {
	color: color-mix( in srgb, var( --wp--preset--color--sai-chocolate ) 65%, var( --wp--preset--color--sai-arena ) );
	opacity: 1;
}

/*
 * Motivo del mensaje: casillas presentadas como píldoras. Son checkbox de
 * verdad —se pueden marcar varias y el teclado las recorre— y lo único que
 * cambia es la piel: la casilla nativa se oculta sin salir del foco.
 */
.zgn-form__opciones .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--30 );
}

.zgn-form__opciones .wpcf7-list-item {
	margin: 0;
}

.zgn-form__opciones .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.zgn-form__opciones input[ type="checkbox" ] {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset( 50% );
}

.zgn-form__opciones .wpcf7-list-item-label {
	display: inline-block;
	font-size: var( --wp--preset--font-size--sai-mini );
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	/* Mismo trazo que la línea de los campos: en reposo la píldora se insinúa,
	 * y el peso se lo lleva la que está marcada. */
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--sai-chocolate ) 20%, transparent );
	padding: var( --wp--preset--spacing--20 ) var( --wp--preset--spacing--40 );
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.zgn-form__opciones label:hover .wpcf7-list-item-label {
	border-color: var( --wp--preset--color--sai-chocolate );
}

/* Marcada: el acento lleno, igual que el filtro del portfolio. */
.zgn-form__opciones input:checked + .wpcf7-list-item-label {
	background-color: var( --wp--preset--color--sai-blue );
	border-color: var( --wp--preset--color--sai-blue );
	color: var( --wp--preset--color--sai-chocolate );
}

/* Sin ratón: la casilla oculta sigue recibiendo foco y tiene que verse. */
.zgn-form__opciones input:focus-visible + .wpcf7-list-item-label {
	outline: 2px solid var( --wp--preset--color--sai-chocolate );
	outline-offset: 2px;
}

/* El desplegable pierde el aspecto del sistema y recupera su flecha. */
.zgn-form select {
	appearance: none;
	cursor: pointer;
	padding-inline-end: var( --wp--preset--spacing--50 );
	background-image: linear-gradient( 45deg, transparent 49%, currentColor 49% 51%, transparent 51% ),
		linear-gradient( -45deg, transparent 49%, currentColor 49% 51%, transparent 51% );
	background-size: 7px 7px;
	background-position: right 7px center, right 2px center;
	background-repeat: no-repeat;
}

/* Consentimiento y aviso legal. */
.zgn-form__legal {
	margin-block-start: var( --wp--preset--spacing--60 );
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--40 );
	font-size: var( --wp--preset--font-size--sai-xs );
	line-height: 1.6;
}

.zgn-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.zgn-form input[ type="checkbox" ] {
	inline-size: 18px;
	block-size: 18px;
	margin-inline-end: var( --wp--preset--spacing--30 );
	accent-color: var( --wp--preset--color--sai-chocolate );
	cursor: pointer;
}

/* La casilla de aceptación es visible y no tiene píldora que marque el foco, y
 * el `outline: 0` de los campos de texto le quitaba el del navegador. Recupera
 * el mismo trazo que las píldoras del motivo. */
.zgn-form input[ type="checkbox" ]:focus-visible {
	outline: 2px solid var( --wp--preset--color--sai-chocolate );
	outline-offset: 2px;
}

.zgn-form__aviso {
	max-inline-size: 70ch;
	margin: 0;
	font-size: var( --wp--preset--font-size--sai-mini );
	line-height: 1.65;
	opacity: .7;
}

/* Botón de envío: la misma caja que el botón de contorno del kit. */
.zgn-form__acciones {
	margin-block-start: var( --wp--preset--spacing--60 );
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --wp--preset--spacing--50 );
}

.zgn-form input[ type="submit" ] {
	font-family: inherit;
	font-size: var( --wp--preset--font-size--sai-xs );
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --wp--preset--color--sai-arena );
	background-color: var( --wp--preset--color--sai-chocolate );
	border: 1px solid var( --wp--preset--color--sai-chocolate );
	border-radius: 0;
	padding: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--60 );
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}

.zgn-form input[ type="submit" ]:hover,
.zgn-form input[ type="submit" ]:focus-visible {
	background-color: transparent;
	color: var( --wp--preset--color--sai-chocolate );
}

/* Mensajes de CF7: sin las cajas de colores del plugin. */
.wpcf7 form .wpcf7-response-output {
	margin: var( --wp--preset--spacing--50 ) 0 0;
	padding: var( --wp--preset--spacing--40 ) 0 0;
	border: 0;
	border-block-start: 1px solid var( --wp--custom--chocolate-veil );
	font-family: var( --wp--preset--font-family--sai-serif );
	font-style: italic;
	font-size: var( --wp--preset--font-size--sai-fluid-sm );
	line-height: 1.2;
}

.wpcf7-not-valid-tip {
	font-size: var( --wp--preset--font-size--sai-mini );
	letter-spacing: 0.06em;
	margin-block-start: var( --wp--preset--spacing--20 );
}

.zgn-form .wpcf7-not-valid {
	border-block-end-color: currentColor;
}

.wpcf7-spinner {
	margin-inline-start: var( --wp--preset--spacing--30 );
}

/* ── Ajustes de pantallas estrechas ───────────────────────────────────── */
@media ( max-width: 781px ) {
	/* Apilado bajo los pasos, el visor no tiene columna a la que estirarse:
	 * toma su propia proporción. */
	.zgn-pasos__fotos {
		block-size: auto;
		min-block-size: 0;
		aspect-ratio: 4 / 5;
	}

	/* Las cifras de la portada arrancan alineadas con el texto, no a la derecha. */
	.zgn-cifras {
		justify-content: flex-start;
		gap: var( --wp--preset--spacing--50 );
	}

	/* La firma del cierre apila: el logotipo arriba y los datos debajo, a la
	 * izquierda como todo lo demás. */
	.zgn-contacto__datos {
		margin-inline-start: 0;
	}

	.zgn-contacto__datos p {
		text-align: start;
	}

	/* Los datos de contacto, uno por línea y con aire entre ellos. */
	.zgn-datos__fila {
		gap: var( --wp--preset--spacing--50 );
	}
}

/* ── Páginas legales (plantilla page-legal) ─────────────────────────────── */

/*
 * Los h2 y h3 de theme.json son de portada (hasta 108 px): en un texto legal
 * largo desproporcionan la página. Aquí bajan a escala de lectura; el h1 lo
 * reduce la plantilla con el preset sai-fluid-lg.
 */
.zgn-legal .wp-block-post-content h2 {
	margin-block-start: var( --wp--preset--spacing--50 );
	font-size: var( --wp--preset--font-size--sai-md );
}

.zgn-legal .wp-block-post-content h3 {
	margin-block-start: var( --wp--preset--spacing--40 );
	font-size: var( --wp--preset--font-size--sai-base );
}