/*
Theme Name: GenA
Theme URI: https://www.picperu.com/
Author: Genética Animal S.A.
Description: Tema de bloques para Genética Animal S.A., representante exclusivo de PIC en el Perú desde 1986. Diseño basado en el prototipo aprobado por Comercial, con el contenido oficial del sitio.
Version: 2.41.2
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gena
Tags: block-theme, full-site-editing, business, accessibility-ready
*/

/*
 * La paleta y las tipografías viven en theme.json. Este archivo reproduce el
 * sistema de componentes del prototipo de Lovable que aprobó Comercial:
 * fondo claro, tarjetas con radio de 8 px, azul noche para cabeceras de
 * página, cifras y pie, y el rojo como único acento.
 *
 * Del prototipo se toma el diseño, nunca el contenido: textos, cifras y
 * menú son los oficiales del sitio.
 */

:root {
	--gena-curva: cubic-bezier(0.22, 0.61, 0.24, 1);
	/* Gris de pic.co: la franja de los títulos y el pie */
	--gena-gris-pie: #3e3f41;
	/* Celeste de la banda «Boletín PIC Latam» de pic.co, medido en la
	   propia página: rgb(72, 144, 205). Comercial lo quiere en las bandas
	   de llamada que cierran cada página, antes rojas. */
	--gena-celeste: #4890cd;
	--gena-radio: 8px;
	--gena-radio-grande: 16px;
	--gena-ancho: 1200px;
	--gena-sombra-tarjeta: 0 1px 2px rgb(16 28 40 / 0.05), 0 2px 8px rgb(16 28 40 / 0.05);
	--gena-sombra-tarjeta-hover: 0 12px 32px rgb(0 0 0 / 0.12), 0 4px 8px rgb(0 0 0 / 0.06);
	--gena-sombra-elegante: 0 20px 60px -20px rgb(212 12 26 / 0.4);

	/*
	 * El rojo de marca sobre azul noche da 3,2:1: no alcanza para texto
	 * pequeño. En fondos oscuros los rótulos usan este rojo más claro, que
	 * llega a 5,6:1 y se sigue leyendo como el mismo rojo.
	 */
	--gena-rojo-sobre-oscuro: #FF5A5A;
}

/* ==========================================================================
   Base
   ========================================================================== */

/* Salto al contenido: visible únicamente al tabular */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.85rem 1.5rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	text-decoration: none;
}

.skip-link:focus {
	left: 0;
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

/* Foco siempre visible: sin esto la navegación por teclado se pierde */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 3px;
}

/* Los titulares no deben partirse en una viuda de una palabra */
:where(h1, h2, h3) {
	text-wrap: balance;
}

/* Tablas de datos técnicos: que no desborden el ancho de la página */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	font-variant-numeric: tabular-nums;
}

html {
	scroll-behavior: smooth;
}

/* Que un ancla no quede tapada por la cabecera fija */
:target {
	scroll-margin-top: 8rem;
}

/*
 * WordPress separa los bloques de primer nivel con un margen, y entre
 * cabecera, contenido y pie eso deja ver el fondo como una franja.
 */
.wp-site-blocks > header.wp-block-template-part + main,
.wp-site-blocks > main,
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* Dos bandas a sangre seguidas van pegadas */
main .alignfull + .alignfull {
	margin-block-start: 0;
}

/* ==========================================================================
   Texto justificado
   --------------------------------------------------------------------------
   Norma del sitio: todo el contenido corrido va justificado. El editor no
   ofrece esa alineación para el párrafo, así que se resuelve aquí, con
   partición de palabras para que no se abran ríos de blanco.

   No se acota a <main>: el editor no lo tiene, y así lo que se ve al editar
   coincide con lo publicado. Quedan fuera los textos cortos de componentes
   —tarjetas, cabeceras, bandas—, donde el justificado deja huecos.
   ========================================================================== */

p:not([class*="has-text-align"]) {
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

@media (max-width: 599px) {
	p:not([class*="has-text-align"]) {
		text-align: left;
		hyphens: manual;
	}
}

.wp-block-template-part p,
.wp-block-column p,
.gena-intro p,
.gena-hero-l p,
.gena-cabecera-pagina p,
.gena-tarjeta p,
.gena-acceso p,
.gena-banda-cta p,
.gena-hito p,
.wp-block-image figcaption,
.wp-block-quote cite {
	text-align: inherit;
	hyphens: manual;
}

/* ==========================================================================
   Cabecera
   --------------------------------------------------------------------------
   Barra superior gris con redes y país, y debajo la cabecera blanca
   translúcida con el logo y el menú. Toda la cabecera queda fija.
   ========================================================================== */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 20;
	/* Fondo opaco y sin backdrop-filter, a propósito.
	   El desenfoque re-muestreaba cada cuadro el fondo que tiene detrás, y
	   detrás está el hero con su parallax en movimiento: el texto del menú
	   vibraba ~1 px de forma continua. Como el fondo ya era blanco al 95 %,
	   el desenfoque no aportaba casi nada visible y sí un temblor constante. */
	background-color: rgb(255 255 255);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	transition: box-shadow 0.28s var(--gena-curva);
}

/* Sin esto la cabecera se metería debajo de la barra de administración */
.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: 32px;
}

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

.gena-desplazado .wp-site-blocks > header.wp-block-template-part {
	box-shadow: 0 8px 24px rgb(16 28 40 / 0.08);
}

/*
 * La cabecera antigua traía un grupo interno con fondo blanco de preajuste.
 * Esas clases llevan !important dentro, así que se neutralizan igual: el
 * fondo lo pone la cabecera, translúcido.
 */
.wp-site-blocks > header .wp-block-group.has-background {
	background-color: transparent !important;
}

/* v2.39.0: el color de la franja de pic.co, #E2EAEA (Comercial) */
.gena-barra-superior {
	background-color: var(--wp--preset--color--alterno);
	padding-block: 0.3rem;
	font-size: 0.78rem;
	color: var(--wp--preset--color--ink-soft);
}

.gena-barra-superior .wp-block-social-links {
	gap: 0.85rem;
	margin: 0;
}

.gena-barra-superior .wp-social-link svg {
	width: 15px;
	height: 15px;
}

.gena-barra-superior__derecha,
.gena-barra-superior__izquierda {
	gap: 1.1rem;
	align-items: center;
}

/* Redes y «País» en la misma fila, como en pic.co */
.gena-barra-superior__izquierda {
	display: flex;
	flex-wrap: nowrap;
	gap: 1.6rem;
}

/*
 * v2.39.0: selector «País», como el de pic.co. Panel blanco con las regiones;
 * cada región abre a su derecha la lista de países (Europa, en dos columnas).
 * Se abre con el ratón o el teclado (:hover, :focus-within) y, en pantallas
 * táctiles, al pulsar (gena.js pone .es-abierto / .es-abierta).
 */
.gena-paises {
	position: relative;
}

.gena-paises button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.9rem;
	color: #3e3f41;
	cursor: pointer;
}

.gena-paises__flecha {
	transition: rotate 0.2s var(--gena-curva);
}

.gena-paises__menu,
.gena-paises__sub {
	display: none;
	box-sizing: border-box;
	position: absolute;
	z-index: 60;
	margin: 0;
	padding: 0.4rem 0;
	list-style: none;
	background-color: var(--wp--preset--color--base);
	border-radius: var(--gena-radio);
	box-shadow: 0 10px 30px rgb(0 0 0 / 0.14);
}

.gena-paises__menu {
	top: 100%;
	left: 0;
	min-width: 13rem;
}

.gena-paises:hover > .gena-paises__menu,
.gena-paises:focus-within > .gena-paises__menu,
.gena-paises.es-abierto > .gena-paises__menu {
	display: block;
}

.gena-paises__menu > li {
	position: relative;
}

.gena-paises__menu a,
.gena-paises__menu .gena-paises__region > button {
	display: flex;
	justify-content: space-between;
	/* v2.39.1: border-box; con el relleno sumado al 100 % el sombreado al
	   pasar el ratón se salía del panel blanco (Comercial) */
	box-sizing: border-box;
	width: 100%;
	padding: 0.45rem 1.1rem;
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	white-space: nowrap;
}

.gena-paises__menu a:hover,
.gena-paises__menu a:focus-visible,
.gena-paises__region > button:hover,
.gena-paises__region > button:focus-visible {
	color: var(--wp--preset--color--brand);
	background-color: var(--wp--preset--color--alterno);
}

.gena-paises__menu a[aria-current] {
	font-weight: 700;
	color: var(--wp--preset--color--brand);
}

.gena-paises__region .gena-paises__flecha {
	rotate: -90deg;
}

.gena-paises__sub {
	top: -0.4rem;
	left: 100%;
	min-width: 12rem;
}

.gena-paises__sub--2col {
	columns: 2;
	column-gap: 0;
	min-width: 24rem;
}

.gena-paises__sub li {
	break-inside: avoid;
}

.gena-paises__region:hover > .gena-paises__sub,
.gena-paises__region:focus-within > .gena-paises__sub,
.gena-paises__region.es-abierta > .gena-paises__sub {
	display: block;
}

.gena-pais {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	font-size: 0.78rem;
	color: var(--wp--preset--color--ink-soft);
}

.gena-bandera {
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08);
}

.gena-buscar .wp-block-search__button {
	padding: 0.25rem;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink-soft);
}

.gena-buscar .wp-block-search__button:hover {
	color: var(--wp--preset--color--brand);
}

.gena-buscar .wp-block-search__input {
	border-radius: var(--gena-radio);
	border: 1px solid var(--wp--preset--color--rule);
	font-size: 0.85rem;
}

@media (max-width: 781px) {
	.gena-barra-superior {
		display: none;
	}
}

/*
 * Cabecera al estilo de pic.co, que es la referencia que pidió Comercial.
 *
 * Medido allí a 1440 px: barra superior de 65, banda blanca de 93 y un logo
 * de 138 de alto que arranca en el borde de la barra superior y SOBRESALE
 * 45 px por debajo de la cabecera.
 *
 * Las alturas se trasladan tal cual porque la proporción del logo coincide:
 * el nuestro tiene viewBox 102×146 (0,699) y el de PIC 174×250 (0,696).
 *
 * Lo que hacía que esta cabecera pareciera alta no era la banda, sino que el
 * logo se quedaba pequeño dentro de ella. Ahora la banda baja de ~102 a 93 y
 * el logo sube de 76 a 138.
 */
.gena-cabecera-principal {
	padding-block: 0;
	min-height: 93px;
}

.gena-marca {
	gap: 0.7rem;
	align-items: center;
}

/*
 * El logo NO cambia al hacer scroll.
 *
 * Comercial lo pidió expresamente: que se quede estático tal cual, como en
 * pic.co. Antes se recogía a 60 px dentro de la cabecera.
 *
 * Efecto secundario buscado: como el logo se queda en 138 con su margen de
 * -45, su caja aporta siempre 93 px, así que la banda ya no puede encoger
 * aunque se lo pidiéramos. Por eso se retiró también la regla que la bajaba
 * a 76 al desplazar: había quedado como código muerto. De la cabecera solo
 * cambia ya la sombra, que sigue gobernada por `gena-desplazado`.
 */
.wp-site-blocks > header .wp-block-site-logo img,
.wp-site-blocks > header .wp-block-image img {
	/* En bloque, no en línea: si no, el hueco de la línea base suma alto y el
	   margen negativo no descuenta lo que debe. */
	display: block;
	width: auto;
	height: 138px;
	max-width: none;
	/* El margen negativo es lo que lo hace sobresalir sin estirar la cabecera:
	   mide 138 pero solo aporta 93 a la maquetación. La cabecera no recorta
	   (overflow visible) y va en z-index 20, así que asoma sobre el contenido. */
	margin-block-end: -45px;
}

/* En móvil no hay barra superior y la pantalla es estrecha: el logo cabe
   entero y no tiene sentido que sobresalga. */
@media (max-width: 781px) {
	.gena-cabecera-principal {
		min-height: 64px;
	}

	.wp-site-blocks > header .wp-block-site-logo img,
	.wp-site-blocks > header .wp-block-image img {
		height: 52px;
		margin-block-end: 0;
	}
}

.gena-marca__pais {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}

@media (max-width: 599px) {
	.gena-marca__pais {
		display: none;
	}
}

/* --- Menú --- */

/* v2.33.0: relleno lateral de 0.7 a 0.45rem. Con cuatro entradas con
   submenú (y su flecha) el menú medía unos 1050 px y solo caben 1036 junto
   al logo: se partía en dos líneas (Comercial). Medido con la letra real. */
.wp-site-blocks > header .wp-block-navigation-item__content {
	padding: 0.5rem 0.45rem;
	font-family: var(--wp--preset--font-family--body);
	/* v2.41.0: 15 px (antes 16) para dejar aire entre los nombres (Comercial) */
	font-size: 0.9375rem;
	font-weight: 600;
	color: rgb(15 18 22 / 0.8);
	text-decoration: none;
	transition: color 0.15s var(--gena-curva);
}

.wp-site-blocks > header .wp-block-navigation-item__content:hover,
.wp-site-blocks > header .wp-block-navigation-item__content:focus-visible,
.wp-site-blocks > header .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--brand);
}

.wp-site-blocks > header .wp-block-navigation .wp-block-navigation__container {
	gap: 0;
}

.wp-site-blocks > header .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--ink-soft);
}

.wp-site-blocks > header .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--gena-radio);
	box-shadow: var(--gena-sombra-tarjeta-hover);
	padding-block: 0.4rem;
}

.wp-site-blocks > header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 1.1rem;
}

.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	padding: 2.5rem 1.5rem;
}

.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.1rem;
}

/*
 * Cabecera en dos columnas: el logo y, pegado a su derecha con una separación
 * fija, el menú. Como pic.co.
 *
 * Hasta la v2.10.1 eran tres columnas con el menú en el centro exacto de la
 * página. Con ocho entradas el menú ocupaba casi todo el ancho y quedaba a
 * 34 px del logo; Comercial pidió el aire de pic.co, que ronda los 80 px.
 * Separación 4,25rem (68 px) + el relleno de la entrada (11 px) = 79 px entre
 * el logo y la primera palabra. Centrar el menú en su columna daba 110 px y
 * variaba con el ancho de pantalla; alineado al inicio es fijo.
 * Solo desde 1200 px, que es donde caben las ocho entradas en una línea.
 */
@media (min-width: 1200px) {
	.gena-cabecera-principal > .wp-block-group.alignwide {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 2.75rem;   /* v2.41.0: antes 4.25rem; el aire pasa al menú */
		align-items: center;
	}

	.gena-cabecera-principal > .wp-block-group.alignwide > .wp-block-navigation {
		justify-self: stretch;
	}

	/* v2.41.0: las entradas se reparten todo el ancho libre junto al logo, en
	   vez de ir apiñadas a la izquierda (Comercial): más aire entre nombres y
	   siempre en una línea, porque el hueco se adapta al ancho de pantalla. */
	.gena-cabecera-principal > .wp-block-group.alignwide > .wp-block-navigation .wp-block-navigation__container {
		width: 100%;
		justify-content: space-between;
	}
}

/*
 * v2.33.0: por debajo de 1280 px la página pierde los 2rem de margen de cada
 * lado y el ancho amplio baja de 1200: el menú se ajusta para seguir en una
 * línea. Medido con la letra real: 16 px ≈ 990 px de menú, 15 px ≈ 914,
 * 14 px ≈ 860, frente a los 1036 / 972 / 908 px que deja libres el logo.
 */
@media (min-width: 1200px) and (max-width: 1279px) {
	.wp-site-blocks > header .wp-block-navigation-item__content {
		padding-inline: 0.375rem;
		font-size: 0.9375rem;
	}
}

@media (min-width: 1100px) and (max-width: 1199px) {
	.wp-site-blocks > header .wp-block-navigation-item__content {
		padding-inline: 0.375rem;   /* v2.33.0: antes 0.5rem y 0.9375rem */
		font-size: 0.875rem;
	}
}

/*
 * Entre 600 y 1100 px las ocho entradas no caben en una línea, así que se
 * adelanta el menú desplegable, que WordPress solo activa por debajo de 600.
 */
@media (min-width: 600px) and (max-width: 1099px) {
	.wp-site-blocks > header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-site-blocks > header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* ==========================================================================
   Piezas comunes
   ========================================================================== */

/* Bloque de introducción: rótulo, título y entradilla alineados al ancho amplio */
.gena-intro {
	margin-block-end: clamp(2rem, 4vw, 3rem);
}

.gena-intro > * {
	margin-block: 0;
}

.gena-intro > * + * {
	margin-block-start: 0.75rem;
}

.gena-intro p:not(.gena-ceja) {
	max-width: 42rem;
	color: var(--wp--preset--color--ink-soft);
}

.gena-intro--centrada {
	text-align: center;
}

.gena-intro--centrada p {
	margin-inline: auto;
}

.gena-ceja {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
}

:is(.gena-hero-l, .gena-cabecera-pagina, .has-navy-background-color) .gena-ceja {
	color: var(--gena-rojo-sobre-oscuro);
}

.gena-titulo-seccion {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(1.75rem, 2.8vw, 2.15rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}

.gena-seccion {
	padding-block: clamp(3.5rem, 7vw, 5rem);
}

/* --- Bloque de texto corrido (portada y Nosotros, como pic.co) ---
 * Al ancho de las tarjetas, título centrado y párrafos justificados. */

.gena-bloque-texto > * {
	margin-block: 0;
}

.gena-bloque-texto > * + * {
	margin-block-start: 1.1rem;
}

.gena-bloque-texto + .gena-bloque-texto {
	margin-block-start: clamp(3rem, 6vw, 4rem);
}

.gena-bloque-texto p {
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--wp--preset--color--ink-soft);
}

.gena-bloque-texto strong {
	color: var(--wp--preset--color--ink);
}

.gena-titulo-bloque {
	text-align: center;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(1.75rem, 3.2vw, 2.6rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}

.gena-bloque-texto > .gena-titulo-bloque {
	margin-block-end: 1.75rem;
}

/* Raya roja corta bajo el título, la de pic.co/acerca-de-nosotros */
.gena-titulo-bloque--subrayado::after {
	content: "";
	display: block;
	width: 5.5rem;
	height: 2px;
	margin: 1rem auto 0;
	background-color: var(--wp--preset--color--brand);
}

/* v2.32.0: Hembras, «La Camborough® es una excelente madre…», más grande y
   en negrita (Comercial). */
p.gena-parrafo-destacado {
	font-weight: 700;
	font-size: clamp(1.15rem, 1.6vw, 1.35rem);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

.gena-bloque-texto p.gena-bloque-texto__destacado {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: clamp(1.2rem, 1.8vw, 1.4rem);
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
}

/* Convocatorias (Contacto): aire entre el título y el listado */
.gena-bloque-texto + .gena-convocatorias {
	margin-block-start: clamp(2rem, 4vw, 2.75rem);
}

.gena-bloque-texto .wp-block-buttons {
	margin-block-start: 2rem;
}

/* Tras las tarjetas ya hay aire de sobra: el bloque no suma el suyo. Y
 * cierra sin margen, porque lo que viene detrás aporta el propio. */
.gena-accesos-seccion + .gena-seccion-compromiso {
	padding-block-start: 0;
}

.gena-seccion-compromiso {
	padding-block-end: 0;
}

/* Foto con leyenda dentro de un bloque de texto */
.gena-bloque-texto .wp-block-image.gena-foto-leyenda {
	max-width: 820px;
	margin-block-start: 2.25rem;
	margin-inline: auto;
}

.wp-block-image.gena-foto-leyenda img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--gena-radio);
	box-shadow: var(--gena-sombra-elegante);
}

.wp-block-image.gena-foto-leyenda figcaption {
	margin-block: 0.9rem 0;
	text-align: center;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
}

/* --- Carrusel de fotos (históricas de Nosotros) ---
 * Las fotos miden 384 x 223: a más de ~560 px se verían borrosas. */

.gena-carrusel {
	max-width: 560px;
	margin-block-start: 2.25rem;
	margin-inline: auto;
}

.gena-carrusel__pista {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--gena-radio);
	box-shadow: var(--gena-sombra-elegante);
}

.gena-carrusel__pista::-webkit-scrollbar {
	display: none;
}

.gena-carrusel__foto {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
	background-color: var(--wp--preset--color--base);
}

.gena-carrusel__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 384 / 223;
	object-fit: cover;
}

.gena-carrusel__foto figcaption {
	padding: 0.85rem 1rem;
	text-align: center;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
}

/* Sin JavaScript no hay botones: la pista se desliza con el dedo */
.gena-carrusel__controles {
	display: none;
}

.gena-carrusel--activo .gena-carrusel__controles {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	margin-block-start: 1.1rem;
}

.gena-carrusel__boton {
	position: relative;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 50%;
	background-color: var(--wp--preset--color--base);
	cursor: pointer;
	transition: border-color 0.2s var(--gena-curva), background-color 0.2s var(--gena-curva);
}

/* El «›» de las tarjetas de la portada, en rojo */
.gena-carrusel__boton::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.6rem;
	height: 0.6rem;
	border-top: 2px solid var(--wp--preset--color--brand);
	border-right: 2px solid var(--wp--preset--color--brand);
	translate: -65% -50%;
	rotate: 45deg;
}

.gena-carrusel__boton--anterior::before {
	translate: -35% -50%;
	rotate: -135deg;
}

.gena-carrusel__boton:hover,
.gena-carrusel__boton:focus-visible {
	border-color: var(--wp--preset--color--brand);
	background-color: var(--wp--preset--color--accent);
}

.gena-carrusel__contador {
	min-width: 3.5rem;
	text-align: center;
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink-soft);
}

/* Título de página centrado con la letra del titular de la portada (Nosotros) */
.gena-cabecera-pagina--centrada .gena-intro {
	text-align: center;
}

.gena-cabecera-pagina.gena-cabecera-pagina--centrada h1 {
	max-width: none;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	letter-spacing: 0;
}

/* --- Botones --- */

.wp-block-button__link,
.wp-element-button {
	border-radius: var(--gena-radio);
	padding: 0.75rem 1.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	transition:
		background-color 0.18s var(--gena-curva),
		color 0.18s var(--gena-curva),
		border-color 0.18s var(--gena-curva),
		transform 0.18s var(--gena-curva);
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--brand-deep);
	transform: translateY(-1px);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--rule);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--ink);
}

/* Enlace de texto con flecha que avanza al pasar el ratón */
.gena-enlace-flecha a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.gena-enlace-flecha a::after {
	content: "\2192";
	transition: translate 0.2s var(--gena-curva);
}

.gena-enlace-flecha a:hover::after,
.gena-enlace-flecha a:focus-visible::after {
	translate: 4px 0;
}

/* ==========================================================================
   Hero de la portada
   ========================================================================== */

.wp-block-cover.gena-hero-l {
	padding: clamp(4rem, 9vw, 6.5rem) 1.25rem clamp(6.5rem, 12vw, 9rem);
	color: var(--wp--preset--color--base);
}

/*
 * Capa oscura pareja, no lateral.
 *
 * Antes iba de 0,7 a la izquierda a 0,3 a la derecha, porque el titular estaba
 * alineado a la izquierda. Al centrarlo (lo pidió Comercial, siguiendo pic.co)
 * su mitad derecha caía sobre la zona clara de la foto y perdía contraste.
 */
.gena-hero-l .wp-block-cover__background {
	background: linear-gradient(180deg, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0.6) 100%) !important;
	opacity: 1 !important;
}

/* Titular centrado, como en pic.co */
.gena-hero-l .gena-intro {
	text-align: center;
}

/*
 * Ancho 1200px, que es el mismo del contenedor `alignwide` donde viven las
 * tarjetas de acceso. Así el titular empieza y acaba donde ellas, que es lo
 * que pidió Comercial mirando pic.co y pic latam.
 *
 * Letra de pic.co desde la v2.5.0: Open Sans normal, no Montserrat negra,
 * que pidió Comercial. Medido con la tipografía real: 3 líneas a 1440 y 1920.
 *
 * El `margin-inline: auto` es imprescindible: sin él el texto se centraría
 * dentro de una caja que sigue pegada a la izquierda, y el titular apenas se
 * movería de sitio.
 */
.gena-hero-l :is(h1, .gena-hero-titulo) {
	max-width: 1200px;
	margin-block: 0.75rem 1.25rem;
	margin-inline: auto;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: clamp(1.75rem, 3.4vw, 3rem);
	line-height: 1.25;
	letter-spacing: 0;
	text-shadow: 0 1px 12px rgb(0 0 0 / 0.35);
	color: var(--wp--preset--color--base);
}

/* Hoy el hero no lleva párrafo, pero si vuelve tiene que salir centrado. */
.gena-hero-l p:not(.gena-ceja) {
	max-width: 36rem;
	margin-inline: auto;
	font-size: 1.15rem;
	color: rgb(255 255 255 / 0.85);
}

.gena-hero-l .wp-block-buttons {
	gap: 0.75rem;
	margin-block-start: 1.75rem;
}

.gena-hero-l .wp-block-button:not(.is-style-outline) > .wp-block-button__link::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.5rem;
	transition: translate 0.18s var(--gena-curva);
}

.gena-hero-l .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover::after {
	translate: 3px 0;
}

/* Botón secundario de cristal, sobre la foto */
.gena-hero-l .wp-block-button.is-style-outline > .wp-block-button__link {
	border-radius: 6px;
	border: 1px solid rgb(255 255 255 / 0.3);
	background-color: rgb(255 255 255 / 0.1);
	color: var(--wp--preset--color--base);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.gena-hero-l .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}

/*
 * Dos banners que se turnan (v2.14.0), como los del sitio antiguo.
 *
 * Los dos bloques Portada ocupan la misma celda de la rejilla y se funden uno
 * sobre otro. El que entra sube encima y aparece en 1 s; el que sale se queda
 * opaco debajo ese mismo segundo, así nunca se ve el blanco del fondo a
 * medio fundido. Sin JavaScript, solo se ve el primero.
 */
.gena-hero-banners {
	position: relative;
	display: grid;
}

.gena-hero-banners > .wp-block-cover {
	grid-area: 1 / 1;
	margin: 0 !important;
	/* Hueco para los controles, que quedan por encima de las tarjetas de acceso */
	padding-block-end: clamp(9rem, 14vw, 11rem);
}

.gena-hero-banners > .wp-block-cover + .wp-block-cover,
.gena-banners--activo > .wp-block-cover {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0s 1s, visibility 0s 1s;
}

.gena-banners--activo > .wp-block-cover.es-actual {
	z-index: 1;
	visibility: visible;
	opacity: 1;
	transition: opacity 1s var(--gena-curva);
}

/*
 * Círculos, a la derecha como en el sitio antiguo: los crea gena.js. Desde la
 * v2.14.1 sin flechas, que con dos banners sobraban (Comercial).
 *
 * El borde derecho coincide con el del contenedor de 1200px de las tarjetas;
 * se restan 0.9rem porque cada círculo va centrado en una zona táctil de
 * 2.75rem (44px, lo mínimo para el dedo) y así el círculo visible es el que
 * queda alineado.
 */
.gena-banners__controles {
	position: absolute;
	z-index: 2;
	/* 4rem es lo que las tarjetas de acceso montan sobre el banner */
	bottom: calc(4rem + clamp(1rem, 2vw, 1.5rem));
	right: max(0.5rem, calc((100% - 1200px) / 2 - 0.9rem));
	display: flex;
	align-items: center;
	gap: 0;
}

.gena-banners__punto {
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.gena-banners__punto::before {
	content: "";
	display: block;
	width: 0.95rem;
	height: 0.95rem;
	margin: auto;
	border-radius: 50%;
	background-color: rgb(255 255 255 / 0.6);
	transition: background-color 0.2s var(--gena-curva), scale 0.2s var(--gena-curva);
}

.gena-banners__punto:hover::before {
	background-color: var(--wp--preset--color--base);
}

/* El activo en rojo, como en el sitio antiguo */
.gena-banners__punto[aria-current="true"]::before {
	background-color: var(--wp--preset--color--brand);
	scale: 1.15;
}

.gena-banners__punto:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: -4px;
	border-radius: 50%;
}

/* --- Accesos rápidos, montados sobre el borde inferior del hero --- */

main .wp-block-group.gena-accesos-seccion {
	position: relative;
	z-index: 3;
	margin-block-start: -4rem;
	padding-block-end: clamp(3rem, 6vw, 4.5rem);
}

.gena-accesos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.5rem;
}

.gena-acceso {
	display: flex;
	flex-direction: column;
	/* Sin relleno y recortando: la lámina llega hasta el borde de la tarjeta. */
	overflow: hidden;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--gena-radio);
	box-shadow: var(--gena-sombra-tarjeta);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: box-shadow 0.3s var(--gena-curva);
}

.gena-acceso:hover,
.gena-acceso:focus-visible {
	box-shadow: var(--gena-sombra-tarjeta-hover);
}

/*
 * La lámina gris, al estilo de pic.com.
 *
 * El degradado va AQUÍ y la silueta llega como PNG transparente. Así el gris se
 * afina desde la hoja de estilos sin regenerar imágenes y la lámina se adapta
 * si cambia la proporción de la tarjeta.
 *
 * El degradado es CLARO a propósito: el oscuro que había antes se comía las
 * patas de las siluetas en su tercio inferior. Medido, no supuesto.
 */
.gena-acceso__lamina {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	/* Desde la v2.20.0 el fondo de chevrones viene dentro de la
	   propia lámina, así que aquí solo queda un gris de respaldo. */
	background-color: var(--wp--preset--color--surface-alt);
}

.gena-acceso__lamina img {
	width: 100%;
	height: 100%;
	/* cover: la lámina ya trae su fondo y debe llenar la caja */
	object-fit: cover;
}

/*
 * El título va DEBAJO de la lámina, no encima.
 *
 * Se probaron las dos: sobre una banda dentro de la lámina, la banda amputaba
 * las siluetas (las pezuñas del cerdo, las botas del técnico). Y sobre el
 * degradado claro, un título blanco no se lee. Sacarlo del panel resuelve las
 * dos cosas a la vez.
 */
.gena-acceso__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1.15rem 1.35rem 1.35rem;
}

.gena-acceso__titulo {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}

/* Texto a la izquierda y el símbolo a la derecha, centrado contra el párrafo. */
.gena-acceso__fila {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 1rem;
}

.gena-acceso__texto {
	flex: 1;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
}

/*
 * El símbolo «›», como en pic.co: sustituye al enlace de texto que pidió
 * quitar Comercial. Se dibuja con dos bordes girados, sin SVG ni tipografía
 * de iconos.
 */
.gena-acceso__flecha {
	flex: none;
	width: 0.72rem;
	height: 0.72rem;
	border-top: 3px solid var(--wp--preset--color--brand);
	border-right: 3px solid var(--wp--preset--color--brand);
	rotate: 45deg;
	transition: translate 0.2s var(--gena-curva);
}

.gena-acceso:hover .gena-acceso__flecha,
.gena-acceso:focus-visible .gena-acceso__flecha {
	translate: 4px 0;
}

/*
 * v2.32.0: carrusel de tres en tres (Comercial). La fila es una pista con
 * desplazamiento horizontal e imán: se ven tres tarjetas (dos en tableta,
 * una y un trozo de la siguiente en el móvil) y las flechas pasan a las
 * siguientes. Las flechas las pone gena.js; sin él, la pista se desliza con
 * el dedo o el trackpad igualmente.
 *
 * El relleno de la pista deja sitio a la sombra de las tarjetas, que el
 * desplazamiento recortaría; el margen negativo lo compensa.
 */
.gena-accesos-carrusel {
	position: relative;
	--gena-accesos-hueco: 1.5rem;
}

.gena-accesos-carrusel .gena-accesos {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--gena-accesos-hueco)) / 3);
	gap: var(--gena-accesos-hueco);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 0.75rem 0.75rem 1.5rem;
	margin: -0.75rem -0.75rem -1.5rem;
	scroll-padding-inline: 0.75rem;
}

.gena-accesos-carrusel .gena-accesos::-webkit-scrollbar {
	display: none;
}

.gena-accesos-carrusel .gena-acceso {
	scroll-snap-align: start;
}

@media (max-width: 1023px) {
	.gena-accesos-carrusel .gena-accesos {
		grid-auto-columns: calc((100% - var(--gena-accesos-hueco)) / 2);
	}
}

@media (max-width: 640px) {
	.gena-accesos-carrusel .gena-accesos {
		grid-auto-columns: 82%;
	}
}

/* Las flechas: círculos blancos con el «›» rojo de las tarjetas. */
.gena-accesos__boton {
	display: none;
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 3rem;
	height: 3rem;
	padding: 0;
	translate: 0 -50%;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 50%;
	box-shadow: var(--gena-sombra-tarjeta);
	cursor: pointer;
	transition: opacity 0.2s var(--gena-curva), box-shadow 0.2s var(--gena-curva);
}

.gena-accesos-carrusel--activo .gena-accesos__boton {
	display: block;
}

.gena-accesos-carrusel--sin-desborde .gena-accesos__boton {
	display: none;
}

.gena-accesos__boton::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.7rem;
	height: 0.7rem;
	border-top: 3px solid var(--wp--preset--color--brand);
	border-right: 3px solid var(--wp--preset--color--brand);
	translate: -65% -50%;
	rotate: 45deg;
}

.gena-accesos__boton--anterior {
	left: -1.5rem;
}

.gena-accesos__boton--anterior::before {
	translate: -35% -50%;
	rotate: -135deg;
}

.gena-accesos__boton--siguiente {
	right: -1.5rem;
}

.gena-accesos__boton:hover,
.gena-accesos__boton:focus-visible {
	box-shadow: var(--gena-sombra-tarjeta-hover);
}

.gena-accesos__boton:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Con margen de sobra, las flechas fuera de las tarjetas, como en pic.co */
@media (min-width: 1360px) {
	.gena-accesos__boton--anterior {
		left: -4.25rem;
	}

	.gena-accesos__boton--siguiente {
		right: -4.25rem;
	}
}

/* En el móvil, a la altura de la lámina: a media tarjeta tapaban el título */
@media (max-width: 640px) {
	.gena-accesos__boton {
		top: 30%;
	}

	.gena-accesos__boton--anterior {
		left: -0.5rem;
	}

	.gena-accesos__boton--siguiente {
		right: -0.5rem;
	}
}

/* --- Foto con sombra roja difusa --- */

.wp-block-image.gena-imagen-elegante {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--gena-radio);
	box-shadow: var(--gena-sombra-elegante);
}

.wp-block-image.gena-imagen-elegante img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Tarjetas
   ========================================================================== */

.gena-tarjetas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.5rem;
}

.gena-tarjeta {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--gena-radio);
	box-shadow: var(--gena-sombra-tarjeta);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: box-shadow 0.3s var(--gena-curva);
}

.gena-tarjeta:hover,
.gena-tarjeta:focus-visible {
	box-shadow: var(--gena-sombra-tarjeta-hover);
}

/* Las de producto se iluminan con la sombra roja */
.gena-tarjeta--producto:hover,
.gena-tarjeta--producto:focus-visible {
	box-shadow: var(--gena-sombra-elegante);
}

/*
 * Las fotos de producto miden 370 px y no hay originales mayores: van
 * contenidas sobre blanco, a su tamaño, en lugar de recortadas a sangre.
 */
.gena-tarjeta__imagen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 5 / 3;
	overflow: hidden;
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.gena-tarjeta__imagen img {
	display: block;
	max-width: min(90%, 370px);
	height: auto;
	transition: scale 0.5s var(--gena-curva);
}

.gena-tarjeta:hover .gena-tarjeta__imagen img {
	scale: 1.05;
}

.gena-tarjeta__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.4rem 1.5rem 1.6rem;
}

/* Las dos frases de PIC Latam, cada una en su línea (v2.15.0) */
.gena-seccion-genetica .gena-intro p:not(.gena-ceja) {
	max-width: 54rem;
}

/*
 * Tarjeta con solo la foto y su botón, como latam.pic.com (v2.15.0). Allí el
 * botón rojo lleva el nombre del producto y no hay más texto.
 */
.gena-tarjeta--boton .gena-tarjeta__cuerpo {
	align-items: center;
	padding-block: 1.25rem 1.5rem;
}

.gena-tarjeta--boton .wp-block-button__link {
	display: block;
	text-align: center;
}

.gena-tarjeta__titulo {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.2rem;
	letter-spacing: -0.01em;
}

.gena-tarjeta__texto {
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
}

/* Cifra grande en lugar de foto (genética líquida) */
.gena-cifra-marco {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(3.2rem, 6vw, 4.5rem);
	line-height: 1;
	color: var(--wp--preset--color--brand);
	font-variant-numeric: tabular-nums;
}

.gena-cifra-marco__pie {
	max-width: 15rem;
	margin: 0.4rem 0 0;
	font-size: 0.875rem;
	line-height: 1.4;
	text-align: center;
	color: var(--wp--preset--color--ink-soft);
}

/* Tarjeta que enmarca una sola imagen o cifra, en las filas de producto */
.gena-tarjeta--marco {
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: 2rem;
}

.gena-tarjeta--marco > * {
	margin-block: 0;
}

.gena-tarjeta--marco .wp-block-image img {
	max-width: min(100%, 370px);
	height: auto;
	transition: scale 0.5s var(--gena-curva);
}

.gena-tarjeta--marco:hover .wp-block-image img {
	scale: 1.05;
}

/* v2.28.0: las fotos de producto van sin lámina blanca, directamente sobre la
   banda blanca o gris, como en la página de productos de pic.co (Comercial).
   Por eso las fotos tienen ahora el fondo transparente. */
.gena-tarjeta--foto,
.gena-tarjeta--foto:hover {
	background: none;
	border-color: transparent;
	box-shadow: none;
}

/* Logotipo de producto en lugar de foto (Genética Líquida PIC): es apaisado
   y a 370 px quedaría pequeño en la lámina */
.gena-tarjeta--marco .gena-logo-producto img {
	max-width: min(100%, 460px);
}

/* --- Noticias (bucle de entradas) --- */

.gena-tarjeta--noticia .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.gena-tarjeta--noticia .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 0.5s var(--gena-curva);
}

.gena-tarjeta--noticia:hover .wp-block-post-featured-image img {
	scale: 1.05;
}

.gena-categoria a {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

/*
 * «Últimas Noticias» de la portada, como las tarjetas de pic.co (2026-09-21):
 * la categoría en una píldora roja montada sobre el borde de la foto, el
 * título, «Leer más »» en rojo y la fecha al pie, separada por una raya.
 */
.gena-tarjeta--noticia {
	position: relative;
	box-shadow: 0 0 10px rgb(0 0 0 / 0.12);
}

/* 25-09-2026: las tres tarjetas del mismo alto aunque un título ocupe menos
   líneas (Comercial). Cada tarjeta llena su celda de la cuadrícula; «Leer
   más» y la fecha quedan así alineados abajo en las tres. */
.gena-noticias .wp-block-post-template > li {
	display: flex;
}

.gena-noticias .wp-block-post-template > li > .gena-tarjeta--noticia {
	flex: 1;
}

.gena-tarjeta--noticia .gena-tarjeta__cuerpo {
	flex: 1;
	gap: 0.75rem;
	padding-block-start: 1.5rem;
}

/* 25-09-2026: la categoría, en la esquina superior izquierda de la tarjeta,
   sobre la foto (Comercial). Antes iba montada sobre el borde de la foto. */
.gena-insignia {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 1;
	margin: 0;
}

.gena-insignia a {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--brand);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

/* Si una noticia tiene dos categorías, solo se ve la primera píldora */
.gena-insignia .wp-block-post-terms__separator,
.gena-insignia a ~ a {
	display: none;
}

.gena-leer-mas {
	margin-block-start: auto;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.gena-leer-mas:hover {
	color: var(--wp--preset--color--brand-deep);
}

.gena-tarjeta__pie {
	margin: 0;
	padding: 0.9rem 1.5rem;
	border-top: 1px solid var(--wp--preset--color--rule);
	font-size: 0.8rem;
}

.gena-tarjeta--noticia .wp-block-post-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.35;
}

/*
 * Página Noticias: listado como el de pic.co, foto a la izquierda y a su lado
 * título, fecha y categoría. En móvil, la foto encima.
 */
.gena-listado-noticias .wp-block-post-template {
	display: grid;
	gap: clamp(1.75rem, 3vw, 2.25rem);
	max-width: 900px;
	margin-inline: auto;
	padding: 0;
	list-style: none;
}

.gena-noticia-fila {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

.gena-noticia-fila .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 4px;
}

.gena-noticia-fila .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 0.5s var(--gena-curva);
}

.gena-noticia-fila:hover .wp-block-post-featured-image img {
	scale: 1.04;
}

.gena-noticia-fila__texto > * {
	margin-block: 0;
}

.gena-noticia-fila__texto > * + * {
	margin-block-start: 0.5rem;
}

.gena-noticia-fila .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.15rem, 1.8vw, 1.4rem);
	font-weight: 600;
	line-height: 1.35;
}

.gena-noticia-fila .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.gena-noticia-fila .wp-block-post-title a:hover {
	color: var(--wp--preset--color--brand);
}

.gena-paginacion {
	max-width: 900px;
	margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
	padding-block-start: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--rule);
	font-size: 1rem;
}

.gena-paginacion a,
.gena-paginacion .page-numbers {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.gena-paginacion .page-numbers {
	padding-inline: 0.4rem;
}

.gena-paginacion .page-numbers.current {
	font-weight: 700;
	color: var(--wp--preset--color--brand);
}

.gena-paginacion a:hover {
	color: var(--wp--preset--color--brand);
}

.gena-listado-noticias .wp-block-query-no-results {
	text-align: center;
	color: var(--wp--preset--color--ink-soft);
}

@media (max-width: 599px) {
	.gena-noticia-fila {
		grid-template-columns: 1fr;
		gap: 0.9rem;
	}
}

.gena-tarjeta--noticia .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.gena-tarjeta--noticia .wp-block-post-title a:hover {
	color: var(--wp--preset--color--brand);
}

.gena-tarjeta--noticia .wp-block-post-excerpt {
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink-soft);
}

.gena-fecha {
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink-soft);
}

/* Mientras no haya entradas publicadas, la sección no se pinta */
.gena-seccion-noticias:not(:has(.wp-block-post)) {
	display: none;
}

/* ==========================================================================
   Banda de llamada a la acción
   ========================================================================== */

.wp-block-group.gena-banda-cta {
	padding: clamp(2.5rem, 5vw, 3.5rem);
	border-radius: var(--gena-radio-grande);
	background-color: var(--gena-celeste);
	/* La sombra general tira a rojo; bajo el celeste dejaba un halo rosa. */
	box-shadow: 0 20px 60px -20px rgb(72 144 205 / 0.45);
	color: var(--wp--preset--color--base);
	text-align: center;
}

.gena-banda-cta h2 {
	margin-block: 0 0.75rem;
	font-weight: 900;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	color: var(--wp--preset--color--base);
}

.gena-banda-cta p {
	max-width: 36rem;
	margin-inline: auto;
	text-align: center;
	color: rgb(255 255 255 / 0.9);
}

.gena-banda-cta p a {
	color: var(--wp--preset--color--base);
}

.gena-banda-cta .wp-block-buttons {
	justify-content: center;
	gap: 0.75rem;
	margin-block-start: 1.5rem;
}

/* Sobre el celeste, el botón va en rojo con letra blanca: es lo que hace
   pic.co en esa misma banda y así el rojo de PIC no desaparece. */
.gena-banda-cta .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
}

.gena-banda-cta .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--brand-deep);
	color: var(--wp--preset--color--base);
}

/* v2.24.0: Comercial quiere los dos botones de la banda iguales, rojos con
   letra blanca; el de contorno deja de serlo aquí dentro. */
.gena-banda-cta .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--brand);
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
}

.gena-banda-cta .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--brand-deep);
	background-color: var(--wp--preset--color--brand-deep);
	color: var(--wp--preset--color--base);
}

/* ==========================================================================
   Cabecera de página interior (azul noche)
   ========================================================================== */

.gena-cabecera-pagina {
	padding-block: clamp(3.5rem, 7vw, 5rem);
}

.gena-cabecera-pagina .gena-intro {
	margin-block-end: 0;
}

.gena-cabecera-pagina h1,
.gena-cabecera-pagina .wp-block-post-title {
	max-width: 22ch;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--base);
}

.gena-cabecera-pagina p:not(.gena-ceja) {
	max-width: 40rem;
	font-size: 1.05rem;
	color: rgb(255 255 255 / 0.75);
}

/* Si la página ya abre con su propia cabecera (Productos y sus líneas), la
   plantilla no pinta la suya: dos títulos seguidos confundían. Funciona con
   cualquier plantilla que se le asigne a la página. */
main:has(> .wp-block-post-content > .gena-cabecera-pagina:first-child) > .gena-cabecera-pagina {
	display: none;
}

main > .wp-block-post-content:has(> .gena-cabecera-pagina:first-child) {
	margin-block-start: 0 !important;
	padding-block: 0 !important;
}

/* ==========================================================================
   Filas de producto
   ========================================================================== */

.gena-fila-producto {
	gap: clamp(2rem, 5vw, 4rem);
}

.gena-fila-producto + .gena-fila-producto {
	margin-block-start: clamp(3.5rem, 7vw, 5rem);
}

@media (max-width: 781px) {
	.gena-fila-producto--invertida {
		flex-direction: column-reverse;
	}
}

.gena-nombre-producto {
	margin-block: 0 0.35rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(1.9rem, 3.2vw, 2.5rem);
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--brand);
}

/* Sin subtítulo (Sementales, desde el 18-09-2026): el texto se separa igual */
.gena-nombre-producto + p:not(.gena-subtitulo) {
	margin-block-start: 1rem;
}

.gena-subtitulo {
	margin-block: 0 1rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/* Lista con marca de verificación, del icono circle-check de Lucide */
.gena-checks {
	display: grid;
	gap: 0.6rem;
	margin: 1.25rem 0 1.5rem;
	padding: 0;
	list-style: none;
}

.gena-checks li {
	position: relative;
	padding-left: 1.9rem;
	line-height: 1.5;
}

.gena-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.2rem;
	height: 1.2rem;
	background-color: var(--wp--preset--color--brand);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Rejilla de ventajas: cada punto es una tarjeta con su icono */
.gena-valores {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.5rem;
	/* Centrada en su sección: con «margin: 0» se quedaba pegada a la izquierda
	   cuando la fila de tarjetas es más estrecha que el ancho amplio. */
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.gena-valores li {
	padding: 2rem 1.5rem;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--gena-radio);
	box-shadow: var(--gena-sombra-tarjeta);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.35;
	text-align: center;
	transition: box-shadow 0.3s var(--gena-curva);
}

.gena-valores li:hover {
	box-shadow: var(--gena-sombra-tarjeta-hover);
}

.gena-valores li::before {
	content: "";
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 auto 1rem;
	border-radius: var(--gena-radio);
	background: var(--wp--preset--color--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D40C1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / 26px no-repeat;
}

/*
 * Variante con icono propio: los seis puntos de la Camborough llevan los
 * iconos del PPT de PIC en lugar del visto bueno que pinta el CSS. En
 * pantalla ancha van tres y tres, como en las diapositivas de origen.
 */
.gena-valores--icono li::before {
	content: none;
}

.gena-valores--icono li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding-block: 1.75rem;
}

.gena-valores--icono img {
	width: 88px;
	height: 88px;
	object-fit: contain;
}

@media (min-width: 62rem) {
	.gena-valores--icono {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   Hojas de producto: tablas y bandas de cifras (Hembras y Sementales)
   --------------------------------------------------------------------------
   Los datos salen de los PDF de PIC. La cabecera de la tabla va en el celeste
   de la banda de llamada, que es además el azul de esas hojas de producto.
   ========================================================================== */

.gena-tabla {
	max-width: 760px;
	margin: 2rem auto 0;
	overflow-x: auto;
}

.gena-tabla table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--wp--preset--color--base);
	border-radius: var(--gena-radio);
	overflow: hidden;
	box-shadow: var(--gena-sombra-tarjeta);
	font-variant-numeric: tabular-nums;
}

.gena-tabla thead th {
	padding: 0.85rem 1rem;
	background-color: var(--gena-celeste);
	color: var(--wp--preset--color--base);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.3;
	text-align: center;
}

.gena-tabla thead th:first-child {
	text-align: left;
}

/* v2.32.0: Genética Líquida, las fotos del CTG grandes, una debajo de la
   otra y a todo el ancho amplio, con la cifra y su rótulo de pie (Comercial:
   «grandes y vistosas»). El sello ISO va debajo, en su tarjeta. */
.gena-fotos-cifra {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin: 0 auto;   /* v2.33.1: el sello ISO pasó junto a los botones */
}

.gena-foto-cifra {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--alterno);
	border-radius: var(--gena-radio);
	box-shadow: var(--gena-sombra-tarjeta);
}

.gena-foto-cifra img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: scale 0.6s var(--gena-curva);
}

.gena-foto-cifra:hover img {
	scale: 1.03;
}

.gena-foto-cifra figcaption {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	padding: 1.25rem 1rem 1.4rem;
	text-align: center;
}

/* v2.33.1: Genética Líquida, el sello ISO al lado de los botones, como
   distintivo. En pantallas estrechas pasa debajo de los botones. */
.gena-acciones-sello {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
}

.gena-acciones-sello > .wp-block-buttons {
	flex: none;
	width: auto;
	margin: 0;
}

.gena-sello-iso {
	display: block;
	flex: none;
	line-height: 0;
	transition: scale 0.2s var(--gena-curva);
}

.gena-sello-iso:hover,
.gena-sello-iso:focus-visible {
	scale: 1.06;
}

/* v2.35.0: más grande (Comercial), de 68 a 104 px */
.gena-sello-iso img {
	width: 104px;
	height: 104px;
}

/* v2.34.0: Misión y Visión. Los textos van centrados, algo más grandes, y
   respetan los cortes de línea que pidió Comercial; en el móvil los saltos
   desaparecen y el texto fluye. */
p.gena-declaracion,
.gena-bloque-texto p.gena-declaracion {
	max-width: none;
	text-align: center;
	margin-inline: auto;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(1.1rem, 1.7vw, 1.35rem);
	line-height: 1.65;
	color: var(--wp--preset--color--ink);
	hyphens: manual;
}

@media (max-width: 600px) {
	p.gena-declaracion .gena-salto {
		display: none;
	}
}

/* Valores: las cuatro imágenes sin bordes, en una fila (dos por fila en
   tableta y móvil). Aparecen una tras otra con un desvanecido cuando la
   sección entra en pantalla (la clase gena-visible la pone gena.js).
   v2.38.0: más pequeñas, en armonía con los textos de la página (Comercial):
   la fila mide lo que el texto de la Misión, no el ancho amplio. */
.gena-valores-img {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 3vw, 2.25rem);
	max-width: 46rem;
	margin: 2rem auto 0;
	padding: 0;
	list-style: none;
}

.gena-valores-img li {
	margin: 0;
}

.gena-valores-img img {
	display: block;
	width: 100%;
	height: auto;
}

.gena-js main .gena-valores-img li {
	opacity: 0;
	transition: opacity 0.9s var(--gena-curva);
}

.gena-js main .gena-visible .gena-valores-img li {
	opacity: 1;
}

.gena-js main .gena-visible .gena-valores-img li:nth-child(2) {
	transition-delay: 0.45s;
}

.gena-js main .gena-visible .gena-valores-img li:nth-child(3) {
	transition-delay: 0.9s;
}

.gena-js main .gena-visible .gena-valores-img li:nth-child(4) {
	transition-delay: 1.35s;
}

@media (max-width: 781px) {
	.gena-valores-img {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gena-js main .gena-valores-img li {
		opacity: 1;
		transition: none;
	}
}

/* v2.32.0: las columnas de cifras («Top 10%», «T3-2025») en una sola línea */
.gena-tabla thead th + th {
	white-space: nowrap;
}

.gena-tabla tbody th,
.gena-tabla tbody td {
	padding: 0.8rem 1rem;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.gena-tabla tbody th {
	font-weight: 600;
	text-align: left;
	color: var(--wp--preset--color--ink);
}

.gena-tabla tbody td {
	text-align: center;
	font-weight: 700;
	white-space: nowrap;
}

.gena-tabla tbody tr:nth-child(even) {
	background-color: var(--wp--preset--color--surface-alt);
}

/*
 * v2.41.2: en el móvil, las tablas de cuatro o cinco columnas (Hembras)
 * aplastaban la primera columna hasta partir las palabras letra por letra
 * (Comercial). La primera columna conserva un ancho mínimo legible, la letra
 * y los rellenos se compactan, y si aun así no cabe, la tabla se desliza de
 * lado dentro de su caja en vez de deformarse.
 */
@media (max-width: 600px) {
	.gena-tabla table {
		font-size: 0.85rem;
	}

	.gena-tabla thead th,
	.gena-tabla tbody th,
	.gena-tabla tbody td {
		padding: 0.6rem 0.4rem;
	}

	.gena-tabla thead th {
		font-size: 0.8rem;
	}

	/* «T3-2025» puede partirse en dos líneas en el móvil */
	.gena-tabla thead th + th {
		white-space: normal;
	}

	.gena-tabla thead th:first-child,
	.gena-tabla tbody th {
		width: 7.5rem;
		min-width: 7.5rem;
		hyphens: manual;
		word-break: normal;
		overflow-wrap: normal;
	}

	/* La columna que contiene la tabla no debe ensancharse más que la
	   pantalla: así, si no cabe, la tabla se desliza dentro de su caja. */
	.gena-fila-tabla > .wp-block-column {
		min-width: 0;
	}

	.gena-tabla {
		max-width: 100%;
	}
}

/* En «Mejora obtenida año tras año» el título ocupa las dos columnas */
.gena-tabla--mejora thead th {
	text-align: center;
}

.gena-tabla--mejora tbody td {
	text-align: right;
}

/* Las flechas verdes de la hoja de producto: suben o bajan, las dos a mejor */
.gena-tabla__flecha {
	margin-inline-end: 0.35rem;
	color: #1e9e4a;
}

.gena-tabla p.gena-tabla__nota {
	margin: 0.6rem 0 0;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--wp--preset--color--ink-soft);
	text-align: left;
}

/* v2.29.0: en Hembras cada texto va al costado de su tabla; dentro de la
   columna, la tabla ocupa todo el ancho y sin el margen de arriba */
/* En la fila invertida la tabla va a la izquierda; en el móvil, donde las
   columnas se apilan, el texto sigue yendo primero para que el título quede
   encima de su tabla. */
@media (max-width: 781px) {
	.gena-fila-tabla--invertida > .wp-block-column:first-child {
		order: 2;
	}
}

.gena-fila-tabla .gena-tabla {
	max-width: none;
	margin: 0;
}

/* Cifras de las fichas de producto (PIC® 337 y PIC® 410): la tarjeta con
   icono de los seis puntos de la Camborough, con la cifra en grande. Sustituyen
   a la franja oscura de la v2.24.0, que Comercial pidió quitar. Van centradas,
   sean dos o tres, y pesan más que la regla de tres columnas de --icono. */
/* v2.28.0: todas las tarjetas con icono (Hembras, Genética Líquida, 337 y
   410) llevan el gris alterno de pic.co (Comercial). Van sobre fondo blanco
   para que se distingan. */
.gena-valores--icono li {
	background-color: var(--wp--preset--color--alterno);
}

.gena-valores--cifra {
	grid-template-columns: repeat(auto-fit, minmax(15rem, 19rem));
	justify-content: center;
}

.gena-valores--cifra li {
	gap: 0.4rem;
}

.gena-valores--cifra img {
	margin-block-end: 0.6rem;
}

/* Marca de certificación (AENOR): la altura de los iconos y su ancho natural,
   para que no se deforme ni se quede diminuta en el cuadro de 88 px. */
.gena-valores--icono img.gena-valor__sello {
	width: auto;
	max-width: 100%;
	height: 88px;
}

.gena-valor__numero {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(1.6rem, 2.6vw, 2rem);
	line-height: 1.1;
	color: var(--wp--preset--color--ink);
	font-variant-numeric: tabular-nums;
}

.gena-valor__etiqueta {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}

.gena-valor__detalle {
	max-width: 15rem;
	margin-block-start: 0.35rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--ink-soft);
}

/* Las notas de la fuente, centradas bajo las tarjetas (la regla general de
   justificado pesa más que una clase sola) */
p.gena-valores__nota {
	max-width: 48rem;
	margin: 1rem auto 0;
	font-size: 0.8rem;
	line-height: 1.45;
	text-align: center;
	color: var(--wp--preset--color--ink-soft);
}

.gena-valores--cifra + p.gena-valores__nota {
	margin-block-start: 2rem;
}

/* ==========================================================================
   Páginas interiores: Nosotros, Recursos, Eventos y Contacto
   ========================================================================== */

/*
 * Prosa larga dentro de columnas. La regla general deja sin justificar el
 * texto en columnas, porque en una caja estrecha abre huecos; en una columna
 * ancha de texto corrido sí se justifica, que es la norma del sitio.
 */
.wp-block-column.gena-prosa p:not([class*="has-text-align"]):not(.gena-ceja),
.gena-fila-producto .wp-block-column > p:not([class]) {
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

@media (max-width: 599px) {
	.wp-block-column.gena-prosa p:not([class*="has-text-align"]):not(.gena-ceja),
	.gena-fila-producto .wp-block-column > p:not([class]) {
		text-align: left;
		hyphens: manual;
	}
}

/* Rejillas de tarjetas. WordPress separa los hijos con margen: aquí sobra. */
.gena-rejilla,
.gena-testimonios,
.gena-galeria {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	gap: 1.5rem;
}

/*
 * Los eventos van en columnas fijas: con auto-fit, un año con un solo evento
 * estiraba su tarjeta a todo el ancho. Con auto-fill ocupa su tercio.
 */
.gena-rejilla {
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}

main :is(.gena-rejilla, .gena-testimonios, .gena-galeria) > * {
	margin-block: 0;
}

/* --- Nosotros --- */

.wp-block-image.gena-emblema img {
	display: block;
}

.wp-block-quote.gena-cita {
	margin-block: 1.75rem;
	padding: 0.25rem 0 0.25rem 1.5rem;
	border-left: 3px solid var(--wp--preset--color--brand);
}

.gena-cita p {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.55;
	color: var(--wp--preset--color--ink);
}

.gena-cita cite {
	display: block;
	margin-block-start: 0.75rem;
	font-size: 0.875rem;
	font-style: normal;
	color: var(--wp--preset--color--ink-soft);
}

/* Tarjeta azul noche con la cifra de PIC */
.wp-block-group.gena-destacado {
	padding: clamp(2rem, 4vw, 2.75rem);
	border-radius: var(--gena-radio-grande);
	box-shadow: var(--gena-sombra-elegante);
}

.gena-destacado > * {
	margin-block: 0;
}

.gena-destacado p {
	text-align: left;
	hyphens: manual;
}

.gena-destacado > .gena-destacado__cifra {
	margin-block-start: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(3.5rem, 7vw, 5rem);
	line-height: 1;
	color: var(--wp--preset--color--base);
}

.gena-destacado > .gena-destacado__texto {
	margin-block-start: 0.75rem;
	font-size: 1.15rem;
	line-height: 1.5;
	color: rgb(255 255 255 / 0.85);
}

/* Fotos históricas: miden 384 px, así que van a su tamaño en una rejilla */
main .gena-galeria {
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
}

.gena-galeria .wp-block-image {
	overflow: hidden;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--gena-radio);
	box-shadow: var(--gena-sombra-tarjeta);
}

.gena-galeria .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 384 / 223;
	object-fit: cover;
	transition: scale 0.5s var(--gena-curva);
}

.gena-galeria .wp-block-image:hover img {
	scale: 1.04;
}

.gena-galeria .wp-element-caption {
	margin: 0;
	padding: 0.8rem 1rem 0.9rem;
	font-size: 0.875rem;
	line-height: 1.45;
	text-align: left;
	color: var(--wp--preset--color--ink-soft);
}

/* Testimonios */
.gena-testimonio {
	display: flex;
	flex-direction: column;
	padding: 2rem 1.75rem 1.75rem;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--gena-radio);
	box-shadow: var(--gena-sombra-tarjeta);
	transition: box-shadow 0.3s var(--gena-curva);
}

.gena-testimonio:hover {
	box-shadow: var(--gena-sombra-tarjeta-hover);
}

.gena-testimonio::before {
	content: "";
	width: 2rem;
	height: 2rem;
	margin-block-end: 1rem;
	background-color: var(--wp--preset--color--brand);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0.9;
}

.gena-testimonio > p {
	margin: 0;
	font-size: 0.975rem;
	line-height: 1.65;
}

/* El pie baja al fondo de la tarjeta, pero nunca pegado al texto */
.gena-testimonio > p:first-of-type {
	margin-block-end: 1.5rem;
}

/* v2.37.0: pie de reseña, con la foto del cliente en círculo, su nombre y
   su empresa (Comercial). Quien no tiene foto lleva sus iniciales. */
.gena-testimonio__pie {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-block-start: auto;
	padding-block-start: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.gena-testimonio__foto {
	flex: none;
	width: 92px;   /* más grande, a pedido de Comercial (antes 64) */
	height: 92px;
	border-radius: 50%;
	object-fit: cover;
	/* Aro blanco y fino borde rojo, como las webs de reseñas */
	box-shadow: 0 0 0 3px var(--wp--preset--color--base), 0 0 0 5px var(--wp--preset--color--brand);
}

.gena-testimonio__iniciales {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.6rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--base);
}

.gena-testimonio__quien p {
	margin: 0;
	text-align: left;
	hyphens: manual;
}

.gena-testimonio__quien .gena-testimonio__autor {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
}

.gena-testimonio__quien .gena-testimonio__empresa {
	margin-block-start: 0.15rem;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--brand);
}

/* --- Recursos --- */

.gena-anclas {
	margin-block-end: clamp(2.5rem, 5vw, 3.5rem);
}

.gena-anclas ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gena-anclas a {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: border-color 0.2s var(--gena-curva), color 0.2s var(--gena-curva), background-color 0.2s var(--gena-curva);
}

.gena-anclas a:hover,
.gena-anclas a:focus-visible {
	border-color: var(--wp--preset--color--brand);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--brand-deep);
}

.wp-block-image.gena-imagen-recurso {
	margin: 0;
	overflow: hidden;
	border-radius: var(--gena-radio);
	box-shadow: var(--gena-sombra-tarjeta-hover);
}

.wp-block-image.gena-imagen-recurso img {
	display: block;
	width: 100%;
	height: auto;
	transition: scale 0.5s var(--gena-curva);
}

.wp-block-image.gena-imagen-recurso:hover img {
	scale: 1.03;
}

/* Lista de documentos descargables, con el icono file-text de Lucide */
.gena-documentos {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.gena-documentos li {
	position: relative;
	padding: 0.7rem 0 0.7rem 2rem;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	line-height: 1.45;
}

.gena-documentos li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.8rem;
	width: 1.15rem;
	height: 1.15rem;
	background-color: var(--wp--preset--color--brand);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gena-documentos a {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.gena-documentos a:hover,
.gena-documentos a:focus-visible {
	color: var(--wp--preset--color--brand);
}

.gena-documentos__meta {
	display: block;
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink-soft);
}

/* Desplegables por año del boletín */
.wp-block-details.gena-desplegable {
	margin-block: 0.6rem 0;
	padding: 0.85rem 1.1rem;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--gena-radio);
}

.gena-desplegable > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-weight: 600;
	list-style: none;
}

.gena-desplegable > summary::-webkit-details-marker {
	display: none;
}

.gena-desplegable > summary::after {
	content: "+";
	flex: none;
	font-size: 1.35rem;
	line-height: 1;
	color: var(--wp--preset--color--brand);
	transition: rotate 0.2s var(--gena-curva);
}

.gena-desplegable[open] > summary::after {
	rotate: 45deg;
}

.gena-desplegable .gena-documentos {
	margin-block-start: 0.75rem;
}

.gena-desplegable .gena-documentos li:last-child {
	border-bottom: 0;
	padding-block-end: 0.2rem;
}

/* --- Eventos --- */

.gena-anio {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	line-height: 1;
	color: var(--wp--preset--color--brand);
	font-variant-numeric: tabular-nums;
}

.gena-anio::after {
	content: "";
	flex: 1;
	height: 1px;
	background-color: var(--wp--preset--color--rule);
}

.gena-intro:has(> .gena-anio) {
	margin-block-end: 1.5rem;
}

main .gena-rejilla + .gena-intro {
	margin-block-start: clamp(3rem, 6vw, 4rem);
}

.gena-evento {
	padding: 1.75rem;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--gena-radio);
	box-shadow: var(--gena-sombra-tarjeta);
	transition: box-shadow 0.3s var(--gena-curva);
}

.gena-evento:hover {
	box-shadow: var(--gena-sombra-tarjeta-hover);
}

.gena-evento > * {
	margin-block: 0;
}

.gena-evento::before {
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	margin-block-end: 1.1rem;
	border-radius: var(--gena-radio);
	background: var(--wp--preset--color--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D40C1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E") center / 24px no-repeat;
}

.gena-evento--importacion::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D40C1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/%3E%3C/svg%3E");
}

.gena-evento--evento::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D40C1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

.gena-evento--congreso::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D40C1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h20'/%3E%3Cpath d='M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3'/%3E%3Cpath d='m7 21 5-5 5 5'/%3E%3C/svg%3E");
}

.gena-evento > .gena-ceja {
	font-size: 0.75rem;
}

.gena-evento > h3 {
	margin-block: 0.35rem 0.6rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
}

/* --- Contacto --- */

.wp-block-columns.gena-contacto {
	gap: clamp(2rem, 4vw, 3.5rem);
}

.wp-block-group.gena-formulario {
	padding: clamp(1.75rem, 4vw, 2.5rem);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--gena-radio-grande);
	box-shadow: var(--gena-sombra-tarjeta);
}

.gena-formulario > .gena-titulo-seccion {
	margin-block: 0 0.5rem;
}

.gena-formulario > p {
	color: var(--wp--preset--color--ink-soft);
}

/*
 * Ficha de contacto, como la de pic.co/?page_id=282: una sola tarjeta blanca
 * con cada dato en su fila (icono rojo, título y valor debajo). Hasta la
 * v2.10.2 eran cuatro tarjetas sueltas con una nota debajo.
 */
.gena-ficha {
	padding: clamp(1.75rem, 4vw, 2.5rem);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--gena-radio-grande);
	box-shadow: var(--gena-sombra-tarjeta);
}

.gena-ficha__titulo {
	margin: 0 0 1.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1.5rem, 2.2vw, 1.75rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}

.gena-ficha__dato {
	display: flex;
	align-items: flex-start;
	gap: 1.1rem;
}

.gena-ficha__dato + .gena-ficha__dato {
	margin-block-start: 1.75rem;
}

.gena-ficha__icono {
	display: flex;
	flex: none;
	padding-block-start: 0.1rem;
	color: var(--wp--preset--color--brand);
}

.gena-ficha__etiqueta {
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--wp--preset--color--ink-soft);
}

.gena-ficha__valor {
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
	overflow-wrap: anywhere;
}

.gena-ficha__valor a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s var(--gena-curva);
}

.gena-ficha__valor a:hover,
.gena-ficha__valor a:focus-visible {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
}

/* --- Convocatorias (Contacto) --- */

.gena-convocatoria {
	padding: 1.75rem;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--gena-radio);
	box-shadow: var(--gena-sombra-tarjeta);
	transition: box-shadow 0.3s var(--gena-curva);
}

.gena-convocatoria:hover {
	box-shadow: var(--gena-sombra-tarjeta-hover);
}

.gena-convocatoria > * {
	margin-block: 0;
}

.gena-convocatoria > .wp-block-post-title {
	margin-block: 0.35rem 0.6rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
}

.gena-convocatoria .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.gena-convocatoria .wp-block-post-title a:hover {
	color: var(--wp--preset--color--brand);
}

.gena-convocatoria .wp-block-post-excerpt {
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink-soft);
}

.gena-convocatoria .wp-block-read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-block-start: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.gena-convocatoria .wp-block-read-more::after {
	content: "\2192";
	transition: translate 0.2s var(--gena-curva);
}

.gena-convocatoria .wp-block-read-more:hover::after {
	translate: 4px 0;
}

.gena-sin-convocatorias {
	padding: 2rem 1.5rem;
	border: 1px dashed var(--wp--preset--color--rule);
	border-radius: var(--gena-radio);
	background-color: var(--wp--preset--color--base);
	text-align: center;
	color: var(--wp--preset--color--ink-soft);
	hyphens: manual;
}

/* --- Servicios: lámina con icono, porque no hay fotos de esa sección --- */

/* --- Página Soporte técnico (v2.13.1) ---
 * Reúne todo Servicios, como en pic.co: sus áreas y, dentro de Mejoramiento
 * genético y Cadena de suministro, sus notas con título propio (h3). */

/* v2.13.2: filas alternas texto + lámina, como latam.pic.com/soporte-tecnico.
 * Bajo la fila de Mejoramiento Genético y de Cadena de suministro, sus notas. */
.gena-fila-producto + .gena-notas-servicio {
	margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
}

.gena-notas-servicio > .gena-titulo-nota:first-child {
	margin-block-start: 0;
}

.gena-bloque-texto > .gena-titulo-nota {
	margin-block-start: 2.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.3rem, 2vw, 1.55rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
}

/* Imagen de una nota (Socios de la cadena de suministro) */
.gena-nota-cuerpo .wp-block-image.gena-nota-imagen {
	margin-block: 0.5rem 1.5rem;
}

.wp-block-image.gena-nota-imagen img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--gena-radio);
}

/* Las áreas de Soporte técnico enlazan a su sección: que se note */
.gena-bloque-texto .gena-checks a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--brand);
	text-underline-offset: 0.2em;
}

.gena-bloque-texto .gena-checks a:hover {
	color: var(--wp--preset--color--brand);
}

/* v2.41.1: Soporte Técnico, como la página Productos (Comercial): bandas
   alternas, foto a un lado y texto al otro, sin tarjeta. Las fotos son
   fotografías 4:3 (no recortes de producto): ocupan toda su columna, con las
   esquinas redondeadas, en vez del tope de 370 px de las fotos de producto. */
.gena-seccion-area .gena-tarjeta--marco {
	padding: 0;
	aspect-ratio: auto;
}

.gena-seccion-area .gena-tarjeta--marco .wp-block-image,
.gena-seccion-area .gena-tarjeta--marco .wp-block-image img {
	width: 100%;
	max-width: none;
}

.gena-seccion-area .gena-tarjeta--marco .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--gena-radio);
}

/* El texto de presentación, con el color de los textos de las áreas */
.gena-presentacion p,
.gena-presentacion li {
	color: var(--wp--preset--color--ink);
}

/* Texto plegado: unas líneas y un desvanecido; «Seguir leyendo» lo
   despliega. Solo con JavaScript (gena-js): sin él se ve entero. */
.gena-js .gena-plegable:not(.es-abierto) {
	max-height: 7.2em;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
	mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.gena-plegable > * + * {
	margin-block-start: 0.85rem;
}

/* Aire entre el texto, «Seguir leyendo» y el botón «Leer más» */
.gena-plegable + .gena-plegable__boton {
	margin-block-start: 0.75rem;
}

.gena-plegable__boton + .wp-block-buttons,
.gena-plegable + .wp-block-buttons {
	margin-block-start: 1.5rem;
}

.gena-plegable__boton {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--wp--preset--color--brand);
	cursor: pointer;
}

.gena-plegable__boton::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	rotate: 45deg;
	translate: 0 -0.15rem;
	transition: rotate 0.2s var(--gena-curva);
}

.gena-plegable__boton[aria-expanded="true"]::after {
	rotate: -135deg;
	translate: 0 0.1rem;
}

.gena-icono-servicio {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	border-radius: var(--gena-radio-grande);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--brand);
}

.gena-aviso-admin {
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--wp--preset--color--brand);
	border-radius: var(--gena-radio);
	background-color: var(--wp--preset--color--accent);
}

/*
 * «Nuestros clientes nos eligen»: los tres testimonios en vídeo de los 40
 * años (2026-09-23). Están en Vimeo; aquí solo se les da la caja 16:9 y el
 * pie con el nombre y el cargo.
 */
.gena-videos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: clamp(1.5rem, 3vw, 2.25rem);
}

/* Un solo vídeo: centrado y a un ancho cómodo de ver (2026-09-23) */
.gena-videos--unico {
	grid-template-columns: minmax(0, 1fr);
	max-width: 960px;
	margin-inline: auto;
}

.gena-video {
	margin: 0;
}

.gena-video__marco {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--gena-radio);
	background-color: var(--wp--preset--color--ink);
	box-shadow: var(--gena-sombra-tarjeta);
}

.gena-video__marco iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.gena-video__pie {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-block-start: 0.9rem;
	text-align: center;
}

.gena-video__nombre {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--wp--preset--color--ink);
}

.gena-video__cargo {
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--wp--preset--color--ink-soft);
}

/* Los dos PDF de «Nuestras Políticas», centrados bajo su título */
/* Certificación ISO 9001 de AENOR en «Nuestras Políticas» (v2.27.0): la marca
   a la izquierda, sin recolorear ni deformar, y los datos del certificado a
   la derecha. En móvil, una debajo de otra. */
.gena-certificacion {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	/* v2.32.1: más ancha, para que los dos certificados quepan en una fila
	   ahora que el sello ISO ocupa el otro extremo */
	max-width: 66rem;
	margin: 2rem auto 0;
	padding: 1.5rem 1.75rem;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--gena-radio);
	box-shadow: var(--gena-sombra-tarjeta);
}

.gena-certificacion__marca {
	flex: none;
	width: auto;
	height: 110px;
}

/* v2.32.0: el texto ocupa el centro y el sello ISO va al otro extremo */
.gena-certificacion__texto {
	flex: 1;
	text-align: center;   /* v2.33.0: centrado entre los dos sellos (Comercial) */
}

.gena-certificacion .gena-certificacion__texto p {
	text-align: center;
}

/* La lista, centrada como bloque pero con las viñetas alineadas */
.gena-certificacion .gena-certificacion__actividades {
	display: inline-block;
	text-align: left;
}

.gena-certificacion .gena-certificacion__botones {
	justify-content: center;
}

/* v2.32.1: más grande (Comercial) */
.gena-certificacion__marca--iso {
	height: 160px;
}

.gena-certificacion__texto p,
.gena-certificacion__texto li {
	margin: 0;
	text-align: left;
	hyphens: manual;
}

p.gena-certificacion__titulo {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
}

p.gena-certificacion__norma {
	margin-block: 0.3rem 0.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand);
	font-variant-numeric: tabular-nums;
}

p.gena-certificacion__alcance {
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink-soft);
}

.gena-certificacion__actividades {
	margin: 0.25rem 0 0;
	padding-inline-start: 1.1rem;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 40rem) {
	.gena-certificacion {
		flex-direction: column;
		text-align: center;
	}

	.gena-certificacion__texto p {
		text-align: center;
	}

	.gena-certificacion__actividades {
		display: inline-block;
		text-align: left;
	}
}

/* Los dos certificados (español e inglés), dentro de la ficha de AENOR */
.gena-certificacion__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-block-start: 1.1rem;
}

/*
 * v2.32.1: en la página Políticas no hay ningún bloque Botón de verdad (estos
 * van en HTML), así que WordPress no carga la hoja del bloque y el enlace se
 * quedaba en línea: el relleno desbordaba y los dos certificados se montaban
 * uno sobre otro. El tema les da su caja.
 */
.gena-certificacion__botones .wp-block-button__link {
	display: inline-block;
	text-decoration: none;
	text-align: center;
}

/* Políticas en botones rojos, como los del certificado (Comercial descartó
   las tarjetas de documento): a dos columnas y del mismo ancho, con el texto
   centrado aunque ocupe varias líneas; una columna en el móvil. Cada política
   nueva ocupa el siguiente hueco: izquierda, derecha, izquierda… (Comercial). */
.gena-politicas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	max-width: 66rem;   /* v2.32.1: al ancho de la ficha del certificado */
	margin: 1.5rem auto 0;
}

.gena-politicas > .wp-block-button {
	display: flex;
	margin: 0;
}

.gena-politicas .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-align: center;
	white-space: normal;
	line-height: 1.35;
}

@media (max-width: 40rem) {
	.gena-politicas {
		grid-template-columns: 1fr;
	}
}


/*
 * Franja de los títulos de página con el gris del pie, no azul noche
 * (Comercial, 2026-09-22). Así no hay que volver a pegar las páginas.
 *
 * El !important es imprescindible: WordPress escribe el fondo de sus
 * clases de color (.has-navy-background-color) con !important, y sin
 * esto la franja se quedaba azul aunque la regla estuviera.
 */
.gena-seccion.gena-cabecera-pagina.has-navy-background-color {
	background-color: var(--gena-gris-pie) !important;
}

/* ==========================================================================
   Pie de página (gris, como el de pic.co)
   ========================================================================== */

/*
 * Desde el 2026-09-20, a pedido de Comercial: el gris es el de pic.co
 * (#3E3F41), el emblema «Nunca dejamos de mejorar» va a la izquierda con las
 * redes, el menú completo en medio y el logo GenA a la derecha. La franja
 * legal va del mismo gris, no más oscura.
 */
.gena-pie {
	padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem;
	background-color: var(--gena-gris-pie);
}

/*
 * Dos filas: arriba el emblema y el logo GenA, uno en cada punta; abajo el
 * menú entero en una sola línea y centrado, que es lo que pidió Comercial.
 * En el medio no cabría: las ocho entradas miden unos 900 px.
 */
.gena-pie__fila {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: space-between;
	gap: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
}

.gena-pie__izq {
	grid-area: 1 / 1;
}

.gena-pie__der {
	grid-area: 1 / 2;
	justify-self: end;
	min-width: 0;
	max-width: 22rem;
}

.gena-pie__fila > .gena-pie__menu {
	grid-area: 2 / 1 / 3 / -1;
	justify-self: center;
}

.gena-pie__fila > * {
	margin-block: 0;
}

.gena-pie__emblema img {
	display: block;
	width: clamp(9rem, 14vw, 11rem);
	height: auto;
}

.gena-pie__redes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-block-start: 1rem;
}

.gena-pie .wp-block-social-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem;
}

/*
 * Del tamaño de los de pic.co (30 px). v2.31.0: casi al doble, 56 px
 * (Comercial).
 *
 * Van marcados: WordPress imprime el estilo de sus bloques dentro de la
 * página, o sea después de esta hoja, y fija el icono en 1em con relleno
 * en el enlace. Sin la marca, los iconos se quedaban pequeños por mucho
 * que el selector del tema fuese más preciso (v2.18.1 y 2.18.2).
 */
.gena-pie .wp-block-social-links {
	font-size: 56px !important;
}

.gena-pie .wp-block-social-links .wp-social-link {
	width: 56px !important;
	height: 56px !important;
	margin: 0 !important;
}

.gena-pie .wp-block-social-links .wp-social-link a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 56px !important;
	height: 56px !important;
	padding: 0 !important;
	line-height: 0;
}

.gena-pie .wp-block-social-links .wp-social-link svg {
	width: 56px !important;
	height: 56px !important;
}

.gena-pie p.gena-pie__sigue {
	margin: 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--base);
}

/* Las entradas del menú, en varias filas si hacen falta */
.gena-pie .gena-pie__menu ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem clamp(0.9rem, 2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Como pic.co: blanco puro, algo mayor y seminegrita */
.gena-pie .gena-pie__menu a {
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--wp--preset--color--base);
	white-space: nowrap;
}

/* Con la letra del menú del pie y centrado bajo el logo (Comercial) */
.gena-pie .gena-pie__representante {
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.5;
	max-width: 100%;
	margin-block: 0.75rem 0;
	text-align: center;
}

.gena-pie__der .gena-pie__logo svg,
.gena-pie__der .gena-pie__logo img {
	margin-inline: auto;
}

.gena-pie h3 {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
}

.gena-pie p,
.gena-pie li {
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--wp--preset--color--base);
}

.gena-pie a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	transition: color 0.15s var(--gena-curva);
}

.gena-pie a:where(:not(.wp-element-button)):hover {
	color: var(--gena-rojo-sobre-oscuro);
}

.gena-pie ul {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 156 px: el lienzo del logo se ensanchó (76 en vez de 73) para no cortar la «l» */
.gena-pie__logo svg {
	display: block;
	width: 156px;
	height: auto;
	margin-block-end: 1rem;
}

/* v2.31.0: el logo rojo que mandó Comercial, en imagen con transparencia.
   Algo más ancho que el SVG blanco, porque su texto es más fino. */
.gena-pie__logo img {
	display: block;
	width: 176px;
	height: auto;
	margin-block-end: 1rem;
}

.gena-pie .wp-block-social-links {
	gap: 0.9rem;
}

.gena-pie__legal {
	margin-block-start: 2rem;
	padding-block-start: 1.25rem;
	border-top: 1px solid rgb(255 255 255 / 0.15);
	font-size: 0.8rem;
	text-align: center;
	color: var(--wp--preset--color--base);
}

/* En tableta y móvil, las tres piezas se apilan centradas */
@media (max-width: 899px) {
	.gena-pie__fila {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.gena-pie__representante {
		text-align: center;
	}

	.gena-pie__logo svg,
	.gena-pie__logo img {
		margin-inline: auto;
	}
}

/* ==========================================================================
   Nosotros: emblema y línea de tiempo
   ========================================================================== */

.wp-block-image.gena-emblema img {
	max-width: min(100%, 280px);
	height: auto;
	margin-inline: auto;
}

/*
 * Línea de tiempo de hitos: un grupo .gena-timeline con un .gena-hito por
 * año. Móvil con la espina a la izquierda; desde 782 px al centro y los
 * hitos alternan de lado.
 */
.gena-timeline {
	--gena-timeline-bg: var(--wp--preset--color--base);
	position: relative;
}

.gena-timeline::before {
	content: "";
	position: absolute;
	top: 0.75rem;
	bottom: 0.75rem;
	left: 8px;
	width: 2px;
	background: linear-gradient(to bottom, var(--wp--preset--color--rule) 0, var(--wp--preset--color--rule) calc(100% - 5rem), transparent 100%);
}

.gena-timeline > .gena-hito {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.gena-hito {
	position: relative;
	padding-left: 3rem;
	padding-bottom: var(--wp--preset--spacing--50);
}

.gena-hito:last-child {
	padding-bottom: 0;
}

.gena-hito::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5rem;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--gena-timeline-bg);
	border: 3px solid var(--wp--preset--color--brand);
}

.gena-hito .wp-block-image img {
	max-width: min(100%, 360px);
	height: auto;
	border-radius: var(--gena-radio);
}

/* v2.29.0: la foto de 1986 de la cronología, en marco circular (Comercial).
   Es apaisada: se recorta al centro, algo a la izquierda, donde están las
   naves. */
.gena-hito .gena-foto-circular img {
	width: min(100%, 260px);
	aspect-ratio: 1;
	object-fit: cover;
	object-position: 40% center;
	border-radius: 50%;
	border: 4px solid var(--wp--preset--color--base);
	box-shadow: var(--gena-sombra-tarjeta);
}

.gena-hito > h3 {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--brand);
}

.gena-hito > p {
	margin: 0 0 0.45rem;
}

.gena-hito > p:last-child {
	margin-bottom: 0;
}

.gena-hito .wp-block-image {
	margin: 0.9rem 0 0;
}

@media (min-width: 782px) {
	.gena-timeline::before {
		left: 50%;
		margin-left: -1px;
	}

	.gena-hito {
		width: 50%;
		padding-left: 0;
		padding-right: 3.25rem;
		text-align: right;
	}

	.gena-hito::before {
		left: auto;
		right: -9px;
	}

	.gena-hito:nth-of-type(even) {
		margin-left: 50%;
		padding-left: 3.25rem;
		padding-right: 0;
		text-align: left;
	}

	.gena-hito:nth-of-type(even)::before {
		right: auto;
		left: -9px;
	}

	.gena-hito .wp-block-image img {
		margin-left: auto;
	}

	.gena-hito:nth-of-type(even) .wp-block-image img {
		margin-left: 0;
		margin-right: auto;
	}
}

.editor-styles-wrapper .gena-hito {
	outline: 1px dashed var(--wp--preset--color--rule);
	outline-offset: 8px;
}

/* ==========================================================================
   Formulario de contacto (Fluent Forms)
   --------------------------------------------------------------------------
   La versión gratuita no deja elegir colores. El !important del botón es
   deliberado: el plugin escribe su azul en una hoja acotada a cada
   formulario que pesa más que cualquier selector razonable del tema.
   ========================================================================== */

.fluentform .ff-el-form-control {
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--gena-radio);
	background-color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--brand);
	outline: 3px solid rgb(212 12 26 / 0.18);
	outline-offset: 0;
	box-shadow: none;
}

.fluentform .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.fluentform .ff-el-is-required.asterisk-right label:after,
.fluentform .ff-el-is-required.asterisk-left label:before {
	color: var(--wp--preset--color--brand);
}

.fluentform .ff-btn-submit {
	padding: 0.75rem 1.5rem;
	border-radius: var(--gena-radio);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 600;
	background-color: var(--wp--preset--color--brand) !important;
	border: 1px solid var(--wp--preset--color--brand) !important;
	color: var(--wp--preset--color--base) !important;
	transition: background-color 0.18s var(--gena-curva), transform 0.18s var(--gena-curva);
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus-visible {
	background-color: var(--wp--preset--color--brand-deep) !important;
	border-color: var(--wp--preset--color--brand-deep) !important;
	transform: translateY(-1px);
}

.fluentform .error.text-danger,
.fluentform .ff-el-is-error .error {
	font-size: 0.875rem;
	color: var(--wp--preset--color--brand-deep);
}

.ff-message-success {
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--wp--preset--color--brand);
	border-radius: var(--gena-radio);
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

.fluentform .ff-el-form-check-label,
.fluentform .ff_tc_checkbox_label {
	text-align: left;
	hyphens: manual;
}

/* ==========================================================================
   Botón flotante de WhatsApp
   --------------------------------------------------------------------------
   Comercial pidió el verde original de WhatsApp (#25D366). Queda anotado que
   el texto blanco sobre ese verde da 2,2:1 y no cumple AA; antes se usaba un
   verde más oscuro que sí cumplía. Se mantiene el original por marca.
   ========================================================================== */

.gena-whatsapp {
	position: fixed;
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 99;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.8rem 1.2rem;
	border-radius: 999px;
	background: #25D366;
	color: #FFFFFF;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 6px 20px rgb(0 0 0 / 0.22);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.gena-whatsapp:hover,
.gena-whatsapp:focus-visible {
	background: #1DA851;
	color: #FFFFFF;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgb(0 0 0 / 0.3);
}

.gena-whatsapp svg {
	flex: none;
}

@media (max-width: 599px) {
	.gena-whatsapp {
		padding: 0.85rem;
	}

	.gena-whatsapp__texto {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}

@media print {
	.gena-whatsapp {
		display: none;
	}
}

/* ==========================================================================
   Movimiento
   --------------------------------------------------------------------------
   El prototipo apenas se mueve: solo responde al ratón. Aquí se conserva
   eso y se añade, muy discreto, el revelado de cada sección al entrar en
   pantalla y una deriva lenta de la foto del hero.

   Regla de composición: el desplazamiento usa `translate` y el acercamiento
   `scale`, nunca `transform` para los dos, para que no se pisen.
   ========================================================================== */

/*
 * Revelado. Solo se oculta si hay JavaScript: la clase gena-js la pone un
 * script en la cabecera. Los :not() van dentro de :where() para no sumar
 * especificidad; si la regla de ocultar pesara más que la de mostrar, la
 * página quedaría en blanco.
 */
.gena-js main > :where(:not(.wp-block-cover):not(.wp-block-post-content)),
.gena-js main > .wp-block-post-content > :where(:not(.wp-block-cover):not(.gena-cabecera-pagina)),
.gena-js main .gena-hito {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s var(--gena-curva), transform 0.6s var(--gena-curva);
}

.gena-js main > .gena-visible,
.gena-js main > .wp-block-post-content > .gena-visible,
.gena-js main .gena-hito.gena-visible {
	opacity: 1;
	transform: none;
}

@media (min-width: 782px) {
	.gena-js main .gena-hito {
		transform: translateX(-24px);
	}

	.gena-js main .gena-hito:nth-of-type(even) {
		transform: translateX(24px);
	}

	.gena-js main .gena-hito.gena-visible {
		transform: none;
	}
}

/* Las columnas de una sección aparecen escalonadas */
.gena-js main .wp-block-columns > .wp-block-column {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.55s var(--gena-curva), transform 0.55s var(--gena-curva);
}

.gena-js main .gena-visible .wp-block-column,
.gena-js main .gena-visible.wp-block-columns > .wp-block-column {
	opacity: 1;
	transform: none;
}

.gena-js main .wp-block-columns > .wp-block-column:nth-child(2) {
	transition-delay: 0.1s;
}

.gena-js main .wp-block-columns > .wp-block-column:nth-child(3) {
	transition-delay: 0.2s;
}

.gena-js main .wp-block-columns > .wp-block-column:nth-child(4) {
	transition-delay: 0.3s;
}

/* El texto del hero entra pieza a pieza al cargar */
@keyframes gena-entrar {
	to {
		opacity: 1;
		transform: none;
	}
}

.gena-js .gena-hero-l .gena-intro > * {
	opacity: 0;
	transform: translateY(16px);
	animation: gena-entrar 0.7s var(--gena-curva) forwards;
}

.gena-js .gena-hero-l .gena-intro > *:nth-child(2) {
	animation-delay: 0.12s;
}

.gena-js .gena-hero-l .gena-intro > *:nth-child(3) {
	animation-delay: 0.24s;
}

.gena-js .gena-hero-l .gena-intro > *:nth-child(4) {
	animation-delay: 0.36s;
}

/* Deriva lenta de la foto del hero */
@keyframes gena-deriva {
	from {
		scale: 1.001;
	}

	to {
		scale: 1.06;
	}
}

.wp-block-cover .wp-block-cover__image-background {
	animation: gena-deriva 22s var(--gena-curva) both;
}

/* El botón de WhatsApp entra cuando la página ya se ha asentado */
.gena-js .gena-whatsapp {
	opacity: 0;
	transform: translateY(16px);
	animation: gena-entrar 0.5s var(--gena-curva) 0.9s forwards;
}

main a:where(:not(.wp-element-button)) {
	transition: color 0.2s var(--gena-curva);
}

main details > summary {
	cursor: pointer;
	transition: color 0.2s var(--gena-curva);
}

main details > summary:hover,
main details[open] > summary {
	color: var(--wp--preset--color--brand);
}

/* Movimiento ligado al scroll: el hero se desplaza más despacio que la página */
@supports (animation-timeline: view()) {
	@keyframes gena-parallax {
		from {
			translate: 0 -6%;
		}

		to {
			translate: 0 6%;
		}
	}

	.wp-block-cover .wp-block-cover__image-background {
		scale: 1.16;
		animation: gena-parallax linear both;
		animation-timeline: view();
		animation-range: cover;
	}
}

/* Respeta a quien pidió menos movimiento en su sistema */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/*
	 * Anular la transición no basta: hay que devolver el contenido a la
	 * vista. Sin esto, quien pide menos movimiento vería la página vacía.
	 */
	.gena-js main > *,
	.gena-js main > .wp-block-post-content > *,
	.gena-js main .gena-hito,
	.gena-js main .wp-block-columns > .wp-block-column,
	.gena-js .gena-hero-l .gena-intro > *,
	.gena-js .gena-whatsapp {
		opacity: 1 !important;
		transform: none !important;
	}

	.wp-block-cover .wp-block-cover__image-background {
		animation: none !important;
		translate: none !important;
		scale: none !important;
	}
}