/**
 * EuroGestión 360 — Estilos de patrones
 *
 * Todo el color sale de la paleta de Blocksy (--theme-palette-color-N), así que
 * un cambio en el Customizer se propaga solo. Los hex de reserva son para el
 * editor de bloques, donde las variables del tema no siempre están disponibles.
 *
 * Paleta de referencia:
 *   1  #B4222E  rojo E360        8  #FFFFFF  blanco
 *   2  #8E1B24  rojo hover       9  #171C30  azul noche
 *   3  #1B2138  tinta           10  #1F2542  azul tarjeta
 *   4  #3D4257  texto           11  #2C3355  borde oscuro
 *   5  #5A5F70  texto suave     12  #A9AEC2  gris sobre oscuro
 *   6  #E7E4DE  borde           13  #E4525D  rojo claro
 *   7  #FAF9F7  hueso           14  #6A7190  gris apagado
 */

/* ==========================================================================
   Utilidades
   ========================================================================== */

/**
 * Única declaración de la fuente display en todo el proyecto.
 *
 * Los titulares no la necesitan: Blocksy asigna la familia dentro del ámbito de
 * cada h1-h6 y basta con usar el elemento correcto. Pero el claim de marca es un
 * párrafo, no un titular, y ahí la variable del tema resuelve a la fuente base.
 * Si algún día cambias la tipografía de titulares en el Customizer, esta línea
 * es el único punto que hay que sincronizar a mano.
 */
:root,
.editor-styles-wrapper {
	--eg-font-display: 'Bricolage Grotesque', sans-serif;
}

/**
 * NOTA SOBRE LOS MÁRGENES EN TODA ESTA HOJA
 *
 * WordPress inyecta el blockGap en los hijos directos de un bloque Grupo con
 * una regla del tipo `.wp-container-xxx > * + * { margin-block-start: … }`, que
 * además fuerza `margin-block-end: 0`. Esa regla tiene un solo nivel de clase y
 * se imprime DESPUÉS de esta hoja, así que en caso de empate gana ella.
 *
 * Por eso toda regla que fije un margen sobre el hijo directo de un grupo va
 * precedida de `.wp-block-group >`: sube la especificidad a dos niveles de
 * clase y evita depender del orden de impresión. Donde el espaciado interno es
 * uniforme se usa `gap` en el contenedor, que ningún margen puede alterar.
 */

/* Antetítulo: "ACTIVOS · NEGOCIOS · LIQUIDEZ · REESTRUCTURACIÓN" */
.is-style-eg-eyebrow {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--theme-palette-color-1, #B4222E);
}

.wp-block-group > .is-style-eg-eyebrow {
	margin: 0 0 16px;
}

/* Claim de marca en la fuente display */
.is-style-eg-claim {
	font-family: var(--eg-font-display);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.4;
	color: var(--theme-palette-color-5, #5A5F70);
}

/* Titular grande en fuente display, para los H3 que el diseño saca de escala */
.is-style-eg-display {
	font-family: var(--eg-font-display);
	font-weight: 600;
	font-size: 23px;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

/* --- Split a dos columnas ----------------------------------------------- */

/**
 * El diseño repite la misma rejilla asimétrica en cinco secciones, cambiando
 * solo la proporción. Se resuelve con una utilidad y una custom property, así
 * que cada sección declara únicamente su ratio.
 *
 * .eg-hero__split entra aquí por compatibilidad: el hero se maquetó antes de
 * existir esta utilidad y su marcado ya está insertado en la página.
 */
.eg-split,
.eg-hero__split {
	display: grid;
	grid-template-columns: var(--eg-split-cols, 1fr 1fr);
	gap: var(--eg-split-gap, 56px);
	align-items: var(--eg-split-align, center);
}

.eg-hero__split {
	--eg-split-cols: 1.08fr 0.92fr;
}

/**
 * Para WordPress estos contenedores siguen siendo de flujo, aunque aquí los
 * pasemos a rejilla: sigue inyectando margen en el segundo hijo. En flujo ese
 * margen se colapsaría, pero entre celdas de una rejilla se suma al `gap` y
 * descuadra la columna derecha.
 */
.wp-block-group.eg-split > *,
.wp-block-group.eg-hero__split > * {
	margin-block: 0;
}

@media (max-width: 980px) {
	.eg-split,
	.eg-hero__split {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* --- Superficie blanca --------------------------------------------------- */

/**
 * Secciones sobre fondo blanco con filete arriba y abajo. El diseño la usa en
 * cuatro sitios para separar del fondo hueso sin recurrir a más color.
 *
 * .eg-posic entra por compatibilidad: se maquetó antes de existir la utilidad
 * y su marcado ya está insertado en la página.
 */
.eg-surface,
.eg-posic {
	background-color: var(--theme-palette-color-8, #FFFFFF);
	border-top: 1px solid var(--theme-palette-color-6, #E7E4DE);
	border-bottom: 1px solid var(--theme-palette-color-6, #E7E4DE);
}

/* --- Tarjeta clara ------------------------------------------------------ */

.eg-card {
	padding: 28px;
	background-color: var(--theme-palette-color-8, #FFFFFF);
	border: 1px solid var(--theme-palette-color-6, #E7E4DE);
	border-radius: 10px;
}

/* El H3 ya viene a 18px del tema: aquí solo se ajusta el margen. */
.wp-block-group > .eg-card__title {
	margin: 0 0 10px;
}

.eg-card__text {
	font-size: 15px;
	line-height: 1.65;
	color: var(--theme-palette-color-5, #5A5F70);
}

.wp-block-group > .eg-card__text {
	margin: 0;
}

/* --- Iconos ------------------------------------------------------------- */

/**
 * Todos los iconos son SVG de trazo en una rejilla de 24x24 con stroke-width
 * 1.6 y remates redondos. El color va por `currentColor`, así que basta con
 * cambiar `color` aquí para recolorearlos todos.
 *
 * Para sustituir uno por el tuyo: edita el bloque HTML de la tarjeta y pega
 * cualquier SVG con viewBox="0 0 24 24", stroke="currentColor" y fill="none".
 * Mantén la clase .eg-icon y encajará solo.
 */
.eg-icon {
	display: block;
	width: 28px;
	height: 28px;
	color: var(--theme-palette-color-1, #B4222E);
}

.wp-block-group > .eg-icon {
	margin: 0 0 14px;
}

/* --- Botones ------------------------------------------------------------ */

.eg-btn .wp-block-button__link {
	border-radius: 6px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.eg-btn--primary .wp-block-button__link {
	padding: 15px 26px;
	border: none;
	background-color: var(--theme-palette-color-1, #B4222E);
	color: var(--theme-palette-color-8, #FFFFFF);
}

.eg-btn--primary .wp-block-button__link:hover,
.eg-btn--primary .wp-block-button__link:focus {
	background-color: var(--theme-palette-color-2, #8E1B24);
	color: var(--theme-palette-color-8, #FFFFFF);
}

.eg-btn--outline .wp-block-button__link {
	padding: 14px 26px;
	border: 1.5px solid var(--theme-palette-color-3, #1B2138);
	background-color: transparent;
	color: var(--theme-palette-color-3, #1B2138);
}

.eg-btn--outline .wp-block-button__link:hover,
.eg-btn--outline .wp-block-button__link:focus {
	background-color: var(--theme-palette-color-3, #1B2138);
	color: var(--theme-palette-color-8, #FFFFFF);
}

.eg-btn--dark .wp-block-button__link {
	padding: 12px 22px;
	border: none;
	font-size: 15px;
	background-color: var(--theme-palette-color-3, #1B2138);
	color: var(--theme-palette-color-8, #FFFFFF);
}

.eg-btn--dark .wp-block-button__link:hover,
.eg-btn--dark .wp-block-button__link:focus {
	background-color: var(--theme-palette-color-1, #B4222E);
	color: var(--theme-palette-color-8, #FFFFFF);
}

/**
 * Contorno sobre fondo oscuro.
 *
 * El borde usa el slot 16 de la paleta, que es opcional: si no lo has añadido
 * en el Customizer, el hex de reserva (#4A5170) lo cubre igual.
 */
.eg-btn--outline-light .wp-block-button__link {
	padding: 14px 28px;
	border: 1.5px solid var(--theme-palette-color-16, #4A5170);
	background-color: transparent;
	color: var(--theme-palette-color-8, #FFFFFF);
}

.eg-btn--outline-light .wp-block-button__link:hover,
.eg-btn--outline-light .wp-block-button__link:focus {
	border-color: var(--theme-palette-color-8, #FFFFFF);
	background-color: transparent;
	color: var(--theme-palette-color-8, #FFFFFF);
}

.eg-btn--ghost .wp-block-button__link {
	padding: 14px 6px;
	border: none;
	background-color: transparent;
	color: var(--theme-palette-color-1, #B4222E);
}

.eg-btn--ghost .wp-block-button__link:hover,
.eg-btn--ghost .wp-block-button__link:focus {
	background-color: transparent;
	color: var(--theme-palette-color-2, #8E1B24);
}

@media (prefers-reduced-motion: reduce) {
	.eg-btn .wp-block-button__link {
		transition: none;
	}
}

/* ==========================================================================
   Hero
   ========================================================================== */

.eg-hero {
	padding: 96px 24px;
	background-color: var(--theme-palette-color-7, #FAF9F7);

	/* Círculos concéntricos arriba a la derecha + un rubor rojo muy tenue. */
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cg fill='none' stroke='%231B2138' stroke-opacity='0.05'%3E%3Ccircle cx='380' cy='380' r='120'/%3E%3Ccircle cx='380' cy='380' r='200'/%3E%3Ccircle cx='380' cy='380' r='280'/%3E%3Ccircle cx='380' cy='380' r='360'/%3E%3C/g%3E%3C/svg%3E"),
		radial-gradient(ellipse 60% 50% at 85% 20%, rgba(180, 34, 46, 0.05), transparent);
	background-repeat: no-repeat;
	background-position: right -180px top -180px, top right;
}

.eg-hero__body > .is-style-eg-eyebrow {
	margin: 0 0 20px;
}

/* El H1 hereda tamaño, familia, peso e interletrado del tema. */
.wp-block-group > .eg-hero__title {
	margin: 0 0 24px;
}

.eg-hero__title {
	text-wrap: pretty;
}

.eg-hero__lead {
	max-width: 640px;
	font-size: 20px;
	line-height: 1.55;
	color: var(--theme-palette-color-4, #3D4257);
}

.wp-block-group > .eg-hero__lead {
	margin: 0 0 14px;
}

.eg-hero__sub {
	max-width: 640px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--theme-palette-color-5, #5A5F70);
}

.wp-block-group > .eg-hero__sub {
	margin: 0 0 40px;
}

.eg-hero__ctas {
	gap: 14px;
	align-items: center;
}

.wp-block-group > .eg-hero__claim {
	margin: 48px 0 0;
}

.eg-hero__media {
	height: 100%;
}

.wp-block-group > .eg-hero__media {
	margin: 0;
}

.eg-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 480px;
	object-fit: cover;
	object-position: center 40%;
	border-radius: 16px;
}

@media (max-width: 980px) {
	.eg-hero__media img {
		min-height: 380px;
	}
}

@media (max-width: 720px) {
	.eg-hero {
		padding: 64px 20px;
	}

	/* El diseño prescinde de la imagen en móvil y arranca directo con el titular. */
	.eg-hero__media {
		display: none;
	}

	.eg-hero__ctas .wp-block-button {
		width: 100%;
	}

	.eg-hero__ctas .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* ==========================================================================
   Posicionamiento — "Mucho más que una gestoría"
   ========================================================================== */

.eg-posic {
	padding: 88px 24px;
}

.eg-posic__split {
	--eg-split-cols: 1fr 1.4fr;
	--eg-split-gap: 64px;
	--eg-split-align: start;
}

/* Columna izquierda: titular sobre imagen. */
.eg-posic__aside {
	display: grid;
	gap: 28px;
}

/* El H2 hereda familia, tamaño e interletrado del tema. */
.wp-block-group > .eg-posic__title,
.wp-block-group > .eg-posic__media {
	margin: 0;
}

.eg-posic__media img {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: cover;
	border-radius: 14px;
}

/* Columna derecha: bloque de texto corrido. */
.eg-posic__body {
	display: grid;
	gap: 18px;
}

.eg-posic__body p {
	margin: 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--theme-palette-color-4, #3D4257);
}

/* Nota sobre colaboración con profesionales habilitados: un escalón por debajo. */
.eg-posic__body p.eg-posic__note {
	font-size: 15px;
	color: var(--theme-palette-color-5, #5A5F70);
}

@media (max-width: 720px) {
	.eg-posic {
		padding: 64px 20px;
	}

	/* El diseño prescinde de la imagen en móvil, igual que en el hero. */
	.eg-posic__media {
		display: none;
	}

	.eg-posic__body p {
		font-size: 16px;
	}
}

/* ==========================================================================
   ¿A quién ayudamos?
   ========================================================================== */

.eg-ayuda {
	padding: 96px 24px;
}

/* El H2 hereda familia, tamaño e interletrado del tema. */
.wp-block-group > .eg-ayuda__title {
	margin: 0 0 48px;
}

.eg-ayuda__grid {
	gap: 20px;
}

@media (max-width: 720px) {
	.eg-ayuda {
		padding: 64px 20px;
	}

	.wp-block-group > .eg-ayuda__title {
		margin-bottom: 36px;
	}
}

/* ==========================================================================
   Diagnóstico 360
   ========================================================================== */

.eg-diag {
	padding: 96px 24px;
}

.eg-diag__split {
	--eg-split-cols: 1fr 1.2fr;
	--eg-split-gap: 64px;
	--eg-split-align: start;
}

/* El H2 hereda familia, tamaño e interletrado del tema. */
.wp-block-group > .eg-diag__title {
	margin: 0 0 20px;
}

.eg-diag__text {
	font-size: 17px;
	line-height: 1.65;
	color: var(--theme-palette-color-4, #3D4257);
}

.wp-block-group > .eg-diag__text {
	margin: 0 0 12px;
}

/* Último párrafo antes de la caja de resultado: respira más. */
.wp-block-group > .eg-diag__text--spaced {
	margin-bottom: 28px;
}

.eg-diag__result {
	padding: 18px 22px;
	background-color: var(--theme-palette-color-8, #FFFFFF);
	border: 1px solid var(--theme-palette-color-6, #E7E4DE);
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--theme-palette-color-4, #3D4257);
}

.wp-block-group > .eg-diag__result {
	margin: 0 0 28px;
}

.eg-diag__result strong {
	color: var(--theme-palette-color-3, #1B2138);
}

/* --- Filas de análisis --------------------------------------------------- */

.eg-diag__rows {
	display: grid;
	gap: 14px;
}

.wp-block-group.eg-diag__rows > * {
	margin-block: 0;
}

/**
 * Etiqueta a la izquierda en columna fija y descripción a la derecha, alineadas
 * por línea base para que los dos textos arranquen a la misma altura pese a
 * tener tamaños distintos.
 */
.eg-row {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 18px;
	align-items: baseline;
	padding: 22px 26px;
	background-color: var(--theme-palette-color-8, #FFFFFF);
	border: 1px solid var(--theme-palette-color-6, #E7E4DE);
	border-radius: 10px;
}

/* La fila es una rejilla de dos columnas: cualquier margen inyectado
   desalinearía la etiqueta respecto a su descripción. */
.wp-block-group.eg-row > * {
	margin-block: 0;
}

.eg-row__title {
	font-size: 15.5px;
	line-height: 1.4;
}

.eg-row__text {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--theme-palette-color-5, #5A5F70);
}

@media (max-width: 720px) {
	.eg-diag {
		padding: 64px 20px;
	}

	/* Apiladas, la columna fija de 190px no tiene sentido. */
	.eg-row {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.eg-diag__ctas .wp-block-button {
		width: 100%;
	}

	.eg-diag__ctas .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* ==========================================================================
   Cómo trabajamos
   ========================================================================== */

.eg-proceso {
	padding: 96px 24px;
}

/**
 * Dos niveles de clase a propósito.
 *
 * WordPress inyecta el blockGap en los hijos directos de un grupo con una regla
 * de un solo nivel (`.wp-container-xxx > * + *`), y además fuerza
 * `margin-block-end: 0`. Con un solo nivel aquí empataríamos en especificidad y
 * ganaría la suya, que se imprime después de esta hoja.
 */
.eg-proceso > .eg-proceso__title {
	margin: 0 0 8px;
}

.eg-proceso > .eg-proceso__subtitle {
	margin: 0 0 48px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--theme-palette-color-5, #5A5F70);
}

.eg-proceso__grid {
	gap: 36px 32px;
}

/**
 * Dentro del paso el espaciado va por `gap`, no por márgenes: los tres huecos
 * del diseño miden lo mismo y así ningún margen inyectado puede alterarlos.
 */
.eg-step {
	display: grid;
	gap: 8px;
	align-content: start;
}

.wp-block-group.eg-step > * {
	margin-block: 0;
}

/* Numeración en fuente display: es un párrafo, no un titular. */
.eg-step__num {
	font-family: var(--eg-font-display);
	font-size: 30px;
	font-weight: 600;
	line-height: 1;
	color: var(--theme-palette-color-1, #B4222E);
}

.eg-step__title {
	font-size: 17px;
	line-height: 1.35;
}

.eg-step__text {
	font-size: 15px;
	line-height: 1.6;
	color: var(--theme-palette-color-5, #5A5F70);
}

@media (max-width: 720px) {
	.eg-proceso {
		padding: 64px 20px;
	}

	.eg-proceso > .eg-proceso__subtitle {
		margin-bottom: 36px;
	}
}

/* ==========================================================================
   Banda de imagen
   ========================================================================== */

.eg-banda {
	padding: 72px 24px 0;
}

.wp-block-group > .eg-banda__media {
	margin: 0;
}

.eg-banda__media img {
	display: block;
	width: 100%;
	height: 340px;
	object-fit: cover;
	object-position: center 70%;
	border-radius: 16px;
}

/* Puramente decorativa: en móvil desaparece entera, como en el diseño. */
@media (max-width: 720px) {
	.eg-banda {
		display: none;
	}
}

/* ==========================================================================
   Red de profesionales
   ========================================================================== */

.eg-red {
	padding: 96px 24px;
}

.eg-red__split {
	--eg-split-cols: 1.1fr 1fr;
	--eg-split-gap: 64px;
	--eg-split-align: start;
}

/* El H2 hereda familia, tamaño e interletrado del tema. */
.wp-block-group > .eg-red__title {
	margin: 0 0 20px;
}

.eg-red__text {
	font-size: 17px;
	line-height: 1.65;
	color: var(--theme-palette-color-4, #3D4257);
}

.wp-block-group > .eg-red__text {
	margin: 0 0 18px;
}

/* Nota de reparto de responsabilidad profesional: un escalón por debajo. */
.eg-red__note {
	font-size: 15px;
	line-height: 1.65;
	color: var(--theme-palette-color-5, #5A5F70);
}

.wp-block-group > .eg-red__note {
	margin: 0;
}

/* Variante apagada del antetítulo: aquí no es un reclamo, es una etiqueta. */
.eg-red__label {
	letter-spacing: 0.14em;
	color: var(--theme-palette-color-5, #5A5F70);
}

/**
 * Las píldoras son una lista de verdad, no una fila de <span>: el listado de
 * especialistas es una enumeración y así lo anuncia el lector de pantalla.
 */
.eg-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
	list-style: none;
}

.wp-block-group > .eg-pills {
	margin: 0;
}

.eg-pills li {
	padding: 9px 18px;
	background-color: var(--theme-palette-color-8, #FFFFFF);
	border: 1px solid var(--theme-palette-color-6, #E7E4DE);
	border-radius: 999px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--theme-palette-color-4, #3D4257);
}

@media (max-width: 720px) {
	.eg-red {
		padding: 64px 20px;
	}
}

/* ==========================================================================
   Perfiles
   ========================================================================== */

.eg-perfiles {
	padding: 88px 24px;
}

.eg-perfiles__grid {
	gap: 20px;
}

/**
 * Columna flexible con el texto en `flex: 1`, para que el botón quede pegado
 * al fondo de la tarjeta aunque los tres textos tengan distinta longitud.
 */
.eg-perfil {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px;
	background-color: var(--theme-palette-color-7, #FAF9F7);
	border: 1px solid var(--theme-palette-color-6, #E7E4DE);
	border-radius: 12px;
}

.wp-block-group.eg-perfil > * {
	margin-block: 0;
}

.eg-perfil__text {
	flex: 1;
	font-size: 15px;
	line-height: 1.65;
	color: var(--theme-palette-color-5, #5A5F70);
}

/* El botón se ciñe a su texto en lugar de estirarse a lo ancho. */
.eg-perfil__ctas {
	align-self: flex-start;
}

@media (max-width: 720px) {
	.eg-perfiles {
		padding: 64px 20px;
	}
}

/* ==========================================================================
   Confidencialidad
   ========================================================================== */

.eg-conf {
	padding: 72px 24px;
	background-color: var(--theme-palette-color-9, #171C30);
	color: var(--theme-palette-color-8, #FFFFFF);
}

.eg-conf__split {
	--eg-split-cols: 1fr 1.4fr;
	--eg-split-gap: 56px;
	--eg-split-align: center;
}

/**
 * Aquí el H2 pesa menos que en el resto: 32px en lugar de los 38 del tema.
 *
 * El color va explícito a propósito: Blocksy fija un color propio para los
 * encabezados, así que un H2 sobre fondo oscuro no hereda el blanco del
 * contenedor. Mismo motivo que en Áreas de negocio.
 */
.eg-conf__title {
	font-size: 32px;
	line-height: 1.2;
	color: var(--theme-palette-color-8, #FFFFFF);
}

.wp-block-group > .eg-conf__title {
	margin: 0;
}

.eg-conf__body {
	display: grid;
	gap: 14px;
}

.wp-block-group.eg-conf__body > * {
	margin-block: 0;
}

.eg-conf__body p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--theme-palette-color-12, #A9AEC2);
}

@media (max-width: 720px) {
	.eg-conf {
		padding: 56px 20px;
	}
}

/* ==========================================================================
   Por qué EuroGestión 360
   ========================================================================== */

.eg-porque {
	padding: 96px 24px;
}

/* El H2 hereda familia, tamaño e interletrado del tema. */
.wp-block-group > .eg-porque__title {
	margin: 0 0 48px;
}

.eg-porque__grid {
	gap: 36px 32px;
}

.eg-razon {
	display: grid;
	gap: 8px;
	align-content: start;
}

.wp-block-group.eg-razon > * {
	margin-block: 0;
}

/**
 * El filete rojo va sobre el titular, no sobre una tarjeta: aquí no hay caja,
 * solo una regla que marca el arranque de cada motivo.
 */
.eg-razon__title {
	padding-top: 14px;
	border-top: 2px solid var(--theme-palette-color-1, #B4222E);
	font-size: 17px;
	line-height: 1.35;
}

.eg-razon__text {
	font-size: 15px;
	line-height: 1.6;
	color: var(--theme-palette-color-5, #5A5F70);
}

/* --- Caja del modelo de trabajo ------------------------------------------ */

.eg-modelo {
	padding: 32px 36px;
	background-color: var(--theme-palette-color-8, #FFFFFF);
	border: 1px solid var(--theme-palette-color-6, #E7E4DE);
	border-radius: 12px;
}

.wp-block-group > .eg-modelo {
	margin: 56px 0 0;
}

.wp-block-group.eg-modelo > * {
	margin-block: 0;
}

/* Hereda Bricolage del estilo de bloque; solo baja de 23px a 22px. */
.eg-modelo > .eg-modelo__title {
	margin-bottom: 12px;
	font-size: 22px;
}

.eg-modelo__text {
	font-size: 15px;
	line-height: 1.65;
	color: var(--theme-palette-color-5, #5A5F70);
}

@media (max-width: 720px) {
	.eg-porque {
		padding: 64px 20px;
	}

	.eg-modelo {
		padding: 28px 24px;
	}

	.wp-block-group > .eg-modelo {
		margin-top: 44px;
	}
}

/* ==========================================================================
   Casos de uso
   ========================================================================== */

.eg-casos {
	padding: 96px 24px;
}

/* El H2 hereda familia, tamaño e interletrado del tema. */
.wp-block-group > .eg-casos__title {
	margin: 0 0 48px;
}

.eg-casos__grid {
	gap: 20px;
}

.eg-caso {
	padding: 28px 30px;
	background-color: var(--theme-palette-color-7, #FAF9F7);
	border: 1px solid var(--theme-palette-color-6, #E7E4DE);
	border-radius: 10px;
}

.wp-block-group.eg-caso > * {
	margin-block: 0;
}

/* Variante del antetítulo: algo menor, más peso y menos interletrado. */
.eg-caso__label {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.eg-caso > .eg-caso__label {
	margin-bottom: 10px;
}

.eg-caso__text {
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--theme-palette-color-4, #3D4257);
}

@media (max-width: 720px) {
	.eg-casos {
		padding: 64px 20px;
	}

	.eg-caso {
		padding: 24px 22px;
	}
}

/* ==========================================================================
   Preguntas frecuentes
   ========================================================================== */

.eg-faq {
	padding: 96px 24px;
}

/* El H2 hereda familia, tamaño e interletrado del tema. */
.wp-block-group > .eg-faq__title {
	margin: 0 0 40px;
}

.eg-faq__list {
	display: grid;
	gap: 12px;
}

.wp-block-group.eg-faq__list > * {
	margin-block: 0;
}

/**
 * El relleno lo lleva el <summary>, no la caja.
 *
 * Así el contenedor se ciñe exactamente al alto del resumen cuando está
 * cerrado, y además toda la fila queda dentro del área clicable en lugar de
 * solo la línea de texto.
 */
.eg-faq__item {
	background-color: var(--theme-palette-color-8, #FFFFFF);
	border: 1px solid var(--theme-palette-color-6, #E7E4DE);
	border-radius: 8px;
}

.wp-block-details.eg-faq__item > * {
	margin-block: 0;
}

.eg-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--theme-palette-color-3, #1B2138);
	list-style: none;
}

.eg-faq__item summary::-webkit-details-marker {
	display: none;
}

/**
 * Galón indicador. El diseño original ocultaba el marcador nativo sin poner
 * nada en su sitio, así que nada delataba que las filas se abren. Para
 * volver al comportamiento original, borra este bloque y el de [open].
 */
.eg-faq__item summary::after {
	content: "";
	flex: 0 0 9px;
	width: 9px;
	height: 9px;
	margin-right: 3px;
	border-right: 2px solid var(--theme-palette-color-1, #B4222E);
	border-bottom: 2px solid var(--theme-palette-color-1, #B4222E);
	transform: translateY(-3px) rotate(45deg);
	transition: transform 0.18s ease;
}

.eg-faq__item[open] summary::after {
	transform: translateY(2px) rotate(-135deg);
}

/* Hacia dentro, para que el anillo no se salga de la caja redondeada. */
.eg-faq__item summary:focus-visible {
	outline: 2px solid var(--theme-palette-color-1, #B4222E);
	outline-offset: -2px;
	border-radius: 8px;
}

.eg-faq__item p {
	margin: 0;
	padding: 0 24px 18px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--theme-palette-color-5, #5A5F70);
}

@media (max-width: 720px) {
	.eg-faq {
		padding: 64px 20px;
	}

	.eg-faq__item summary {
		padding: 16px 20px;
	}

	.eg-faq__item p {
		padding: 0 20px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eg-faq__item summary::after {
		transition: none;
	}
}

/* ==========================================================================
   CTA final
   ========================================================================== */

.eg-cta {
	padding: 104px 24px;
	text-align: center;
	background-color: var(--theme-palette-color-9, #171C30);
	color: var(--theme-palette-color-8, #FFFFFF);

	/* El motivo cierra abajo a la izquierda, en espejo del hero. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.045'%3E%3Ccircle cx='380' cy='380' r='120'/%3E%3Ccircle cx='380' cy='380' r='200'/%3E%3Ccircle cx='380' cy='380' r='280'/%3E%3Ccircle cx='380' cy='380' r='360'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left -260px bottom -260px;
}

/**
 * El titular más grande de la home, por encima incluso del H1 del hero.
 * Es deliberado: es la última frase antes de que el visitante decida.
 * El color va explícito porque Blocksy fija un color propio de encabezados.
 */
.eg-cta__title {
	font-size: 44px;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--theme-palette-color-8, #FFFFFF);
	text-wrap: pretty;
}

.wp-block-group > .eg-cta__title {
	margin: 0 0 20px;
}

.eg-cta__text {
	max-width: 620px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--theme-palette-color-12, #A9AEC2);
}

.wp-block-group > .eg-cta__text {
	margin: 0 auto 36px;
}

.eg-cta__ctas {
	justify-content: center;
	gap: 14px;
}

.eg-cta__claim {
	font-size: 19px;
	color: var(--theme-palette-color-12, #A9AEC2);
}

.wp-block-group > .eg-cta__claim {
	margin: 64px 0 0;
}

.eg-cta__tagline {
	color: var(--theme-palette-color-14, #6A7190);
}

.wp-block-group > .eg-cta__tagline {
	margin: 10px 0 0;
}

@media (max-width: 720px) {
	.eg-cta {
		padding: 72px 20px;
	}

	.eg-cta__title {
		font-size: 34px;
	}

	.wp-block-group > .eg-cta__claim {
		margin-top: 48px;
	}

	.eg-cta__ctas .wp-block-button {
		width: 100%;
	}

	.eg-cta__ctas .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* ==========================================================================
   Cabecera de página

   Usada por la página de contacto y por las páginas interiores. El nombre
   `.eg-contacto-hero` se mantiene como alias porque la página de contacto se
   maquetó antes de que esta cabecera fuera genérica y su marcado ya está
   insertado: no hace falta tocarlo.
   ========================================================================== */

.eg-page-hero,
.eg-contacto-hero {
	padding: 76px 24px 64px;
	border-bottom: 1px solid var(--theme-palette-color-6, #E7E4DE);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cg fill='none' stroke='%231B2138' stroke-opacity='0.05'%3E%3Ccircle cx='380' cy='380' r='120'/%3E%3Ccircle cx='380' cy='380' r='200'/%3E%3Ccircle cx='380' cy='380' r='280'/%3E%3Ccircle cx='380' cy='380' r='360'/%3E%3C/g%3E%3C/svg%3E"),
		radial-gradient(ellipse 60% 50% at 88% 15%, rgba(180, 34, 46, 0.05), transparent);
	background-repeat: no-repeat;
	background-position: right -220px top -260px, top right;
}

.eg-page-hero > .is-style-eg-eyebrow,
.eg-contacto-hero > .is-style-eg-eyebrow {
	margin: 0 0 18px;
}

/* Página interior: el H1 baja de los 54px de la home a 46px. */
.eg-page-hero__title,
.eg-contacto-hero__title {
	max-width: 860px;
	font-size: 46px;
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: pretty;
}

.wp-block-group > .eg-page-hero__title,
.wp-block-group > .eg-contacto-hero__title {
	margin: 0 0 20px;
}

.eg-page-hero__text,
.eg-contacto-hero__text {
	max-width: 680px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--theme-palette-color-4, #3D4257);
}

.wp-block-group > .eg-page-hero__text,
.wp-block-group > .eg-contacto-hero__text {
	margin: 0;
}

/* --- Migas de pan --------------------------------------------------------- */

/**
 * Contenedor para el shortcode de Rank Math. Si no ves nada, comprueba que las
 * migas están activadas en Rank Math → Ajustes generales → Migas de pan: con
 * la opción desactivada el shortcode no devuelve nada.
 */
.eg-breadcrumbs {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--theme-palette-color-5, #5A5F70);
}

.wp-block-group > .eg-breadcrumbs {
	margin: 20px 0 0;
}

.eg-breadcrumbs p {
	margin: 0;
}

.eg-breadcrumbs a {
	color: var(--theme-palette-color-5, #5A5F70);
}

.eg-breadcrumbs a:hover,
.eg-breadcrumbs a:focus {
	color: var(--theme-palette-color-1, #B4222E);
}

/* --- Variante oscura ----------------------------------------------------- */

/**
 * No está en el diseño original: se añade para que la página no arranque en el
 * mismo tono que mantiene hasta el final. Hereda tamaños y anchos de la
 * cabecera clara y solo cambia fondo, colores y aire.
 *
 * Los selectores llevan las dos clases para ganarle a las reglas de la
 * variante clara sin depender del orden en el archivo.
 */
.eg-page-hero.eg-page-hero--dark,
.eg-contacto-hero.eg-contacto-hero--dark {
	padding: 88px 24px 80px;
	border-bottom: none;
	background-color: var(--theme-palette-color-9, #171C30);
	color: var(--theme-palette-color-8, #FFFFFF);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.045'%3E%3Ccircle cx='380' cy='380' r='120'/%3E%3Ccircle cx='380' cy='380' r='200'/%3E%3Ccircle cx='380' cy='380' r='280'/%3E%3Ccircle cx='380' cy='380' r='360'/%3E%3C/g%3E%3C/svg%3E");
	background-position: right -220px top -260px;
}

/* Sobre fondo oscuro el rojo corporativo se apaga: entra el rojo claro. */
.eg-page-hero--dark .is-style-eg-eyebrow,
.eg-contacto-hero--dark .is-style-eg-eyebrow {
	color: var(--theme-palette-color-13, #E4525D);
}

/* Explícito porque Blocksy fija un color propio para los encabezados. */
.eg-page-hero--dark .eg-page-hero__title,
.eg-contacto-hero--dark .eg-contacto-hero__title {
	color: var(--theme-palette-color-8, #FFFFFF);
}

.eg-page-hero--dark .eg-page-hero__text,
.eg-contacto-hero--dark .eg-contacto-hero__text {
	color: var(--theme-palette-color-12, #A9AEC2);
}

.eg-page-hero--dark .eg-breadcrumbs,
.eg-page-hero--dark .eg-breadcrumbs a {
	color: var(--theme-palette-color-12, #A9AEC2);
}

.eg-page-hero--dark .eg-breadcrumbs a:hover,
.eg-page-hero--dark .eg-breadcrumbs a:focus {
	color: var(--theme-palette-color-8, #FFFFFF);
}

/**
 * Línea de método, separada por un filete. Va en Color 12 y no en el Color 14
 * que usa la misma línea en el CTA final de la home: sobre el azul noche, el
 * gris apagado se queda en torno a 3,3:1 y a 13px no llega a AA.
 */
.eg-contacto-hero--dark .eg-contacto-hero__method {
	padding-top: 24px;
	border-top: 1px solid var(--theme-palette-color-11, #2C3355);
	color: var(--theme-palette-color-12, #A9AEC2);
}

.wp-block-group > .eg-contacto-hero__method {
	margin: 44px 0 0;
}

@media (max-width: 720px) {
	.eg-page-hero,
	.eg-contacto-hero {
		padding: 56px 20px 48px;
	}

	.eg-page-hero.eg-page-hero--dark,
	.eg-contacto-hero.eg-contacto-hero--dark {
		padding: 64px 20px 56px;
	}

	.eg-page-hero__title,
	.eg-contacto-hero__title {
		font-size: 36px;
	}

	.wp-block-group > .eg-contacto-hero__method {
		margin-top: 32px;
	}
}

/* ==========================================================================
   Página interior — cuerpo
   ========================================================================== */

.eg-pagina {
	padding: 80px 24px;
}

/**
 * El texto se limita a 780px aunque el contenedor llegue a 1160: por encima de
 * unos 90 caracteres por línea la lectura se resiente. La imagen sí ocupa todo
 * el ancho, que es lo que crea el contraste entre columna de lectura y medio.
 */
.eg-pagina__title {
	max-width: 780px;
}

.wp-block-group > .eg-pagina__title {
	margin: 0 0 20px;
}

.eg-pagina__text {
	max-width: 780px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--theme-palette-color-4, #3D4257);
}

.wp-block-group > .eg-pagina__text {
	margin: 0 0 18px;
}

.wp-block-group > .eg-pagina__media {
	margin: 40px 0 0;
}

/* Sin alto fijo: cada página traerá su imagen con su proporción. */
.eg-pagina__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

@media (max-width: 720px) {
	.eg-pagina {
		padding: 56px 20px;
	}

	.wp-block-group > .eg-pagina__media {
		margin-top: 32px;
	}
}

/* ==========================================================================
   Banda de CTA
   ========================================================================== */

.eg-ctaband {
	padding: 72px 24px;
	text-align: center;
	background-color: var(--theme-palette-color-9, #171C30);
	color: var(--theme-palette-color-8, #FFFFFF);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.045'%3E%3Ccircle cx='380' cy='380' r='120'/%3E%3Ccircle cx='380' cy='380' r='200'/%3E%3Ccircle cx='380' cy='380' r='280'/%3E%3Ccircle cx='380' cy='380' r='360'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left -300px bottom -300px;
}

/* Más contenido que el CTA final de la home: 30px frente a 44px. Este cierra
   una página interior, no la portada. Color explícito por Blocksy. */
.eg-ctaband__title {
	font-size: 30px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--theme-palette-color-8, #FFFFFF);
	text-wrap: pretty;
}

.wp-block-group > .eg-ctaband__title {
	margin: 0 0 14px;
}

.eg-ctaband__text {
	max-width: 560px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--theme-palette-color-12, #A9AEC2);
}

.wp-block-group > .eg-ctaband__text {
	margin: 0 auto 28px;
}

.eg-ctaband__ctas {
	justify-content: center;
}

@media (max-width: 720px) {
	.eg-ctaband {
		padding: 56px 20px;
	}

	.eg-ctaband__title {
		font-size: 26px;
	}

	.eg-ctaband__ctas .wp-block-button {
		width: 100%;
	}

	.eg-ctaband__ctas .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* ==========================================================================
   Contacto — datos y formulario
   ========================================================================== */

.eg-contacto {
	padding: 80px 24px 88px;
}

.eg-contacto__split {
	--eg-split-cols: 0.85fr 1.15fr;
	--eg-split-gap: 64px;
	--eg-split-align: start;
}

.eg-contacto__aside {
	display: grid;
	gap: 32px;
}

.wp-block-group.eg-contacto__aside > * {
	margin-block: 0;
}

/* Los H2 de esta página son de sección interior: 28px, no 38px. */
.eg-contacto__subtitle {
	font-size: 28px;
	letter-spacing: -0.01em;
}

.wp-block-group > .eg-contacto__subtitle {
	margin: 0 0 8px;
}

.eg-contacto__lead {
	font-size: 15px;
	line-height: 1.6;
	color: var(--theme-palette-color-5, #5A5F70);
}

.wp-block-group > .eg-contacto__lead {
	margin: 0;
}

/* --- Lista de datos ------------------------------------------------------ */

.eg-datos {
	display: grid;
	gap: 4px;
}

.wp-block-group.eg-datos > * {
	margin-block: 0;
}

.eg-dato {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 16px;
	align-items: start;
	padding: 20px 0;
	border-top: 1px solid var(--theme-palette-color-6, #E7E4DE);
}

.eg-datos > .eg-dato:last-child {
	border-bottom: 1px solid var(--theme-palette-color-6, #E7E4DE);
}

.wp-block-group.eg-dato > * {
	margin-block: 0;
}

.eg-dato__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background-color: var(--theme-palette-color-8, #FFFFFF);
	border: 1px solid var(--theme-palette-color-6, #E7E4DE);
	border-radius: 8px;
	color: var(--theme-palette-color-1, #B4222E);
}

.eg-dato__icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

.wp-block-group.eg-dato__body > * {
	margin-block: 0;
}

.eg-dato__label {
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--theme-palette-color-5, #5A5F70);
}

.eg-dato__body > .eg-dato__label {
	margin-bottom: 6px;
}

.eg-dato__value {
	font-size: 16px;
	line-height: 1.55;
	color: var(--theme-palette-color-3, #1B2138);
}

.eg-dato__value a {
	font-weight: 500;
	color: var(--theme-palette-color-3, #1B2138);
}

.eg-dato__value a:hover,
.eg-dato__value a:focus {
	color: var(--theme-palette-color-1, #B4222E);
}

.eg-dato__note {
	font-size: 15px;
	line-height: 1.55;
	color: var(--theme-palette-color-5, #5A5F70);
}

.eg-dato__body > .eg-dato__note {
	margin-top: 4px;
}

/* --- Aviso de confidencialidad ------------------------------------------- */

.eg-aviso {
	padding: 28px 30px;
	background-color: var(--theme-palette-color-9, #171C30);
	border-radius: 12px;
}

.wp-block-group.eg-aviso > * {
	margin-block: 0;
}

/* Hereda Bricolage del estilo de bloque; baja de 23px a 20px.
   El color va explícito: Blocksy fija color propio de encabezados. */
.eg-aviso > .eg-aviso__title {
	margin-bottom: 10px;
	font-size: 20px;
	line-height: 1.25;
	color: var(--theme-palette-color-8, #FFFFFF);
}

.eg-aviso__text {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--theme-palette-color-12, #A9AEC2);
}

/* --- Tarjeta del formulario ---------------------------------------------- */

.eg-formcard {
	padding: 40px 44px;
	background-color: var(--theme-palette-color-8, #FFFFFF);
	border: 1px solid var(--theme-palette-color-6, #E7E4DE);
	border-radius: 14px;
}

.wp-block-group.eg-formcard > * {
	margin-block: 0;
}

.eg-formcard__title {
	font-size: 28px;
	letter-spacing: -0.01em;
}

.eg-formcard > .eg-formcard__title {
	margin-bottom: 10px;
}

.eg-formcard__text {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--theme-palette-color-5, #5A5F70);
}

.eg-formcard > .eg-formcard__text {
	margin-bottom: 32px;
}

.eg-formcard__legal {
	font-size: 13px;
	line-height: 1.6;
	color: var(--theme-palette-color-5, #5A5F70);
}

.eg-formcard > .eg-formcard__legal {
	margin-top: 24px;
}

/**
 * Hueco del formulario.
 *
 * El aviso de montaje es visible por defecto y se oculta SOLO en el front,
 * colgando de los contenedores de contenido que existen ahí y no dentro del
 * lienzo del editor.
 *
 * El sentido de la regla importa: si algún día el tema deja de usar
 * `.entry-content`, el peor caso es que se vea una caja de aviso en la web
 * —feo pero evidente— en lugar de un bloque invisible e imposible de editar,
 * que es lo que pasaba al revés.
 */
.eg-form-slot__hint {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 300px;
	padding: 32px;
	border: 1.5px dashed #D8D3CA;
	border-radius: 10px;
	text-align: center;
}

.eg-form-slot__label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--theme-palette-color-1, #B4222E);
}

.eg-form-slot__text {
	max-width: 340px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--theme-palette-color-5, #5A5F70);
}

.entry-content .eg-form-slot__hint,
.wp-site-blocks .eg-form-slot__hint {
	display: none;
}

@media (max-width: 720px) {
	.eg-contacto {
		padding: 56px 20px;
	}

	.eg-formcard {
		padding: 28px 22px;
	}
}

/* ==========================================================================
   Contacto — accesos rápidos
   ========================================================================== */

.eg-accesos {
	padding: 64px 24px;
}

.eg-accesos__grid {
	gap: 20px;
}

.eg-acceso {
	padding: 26px 28px;
	background-color: var(--theme-palette-color-7, #FAF9F7);
	border: 1px solid var(--theme-palette-color-6, #E7E4DE);
	border-radius: 10px;
}

.wp-block-group.eg-acceso > * {
	margin-block: 0;
}

/* Mismo filete rojo que los motivos de «Por qué EuroGestión 360». */
.eg-acceso__title {
	padding-top: 14px;
	border-top: 2px solid var(--theme-palette-color-1, #B4222E);
	font-size: 17px;
	line-height: 1.35;
}

.eg-acceso > .eg-acceso__title {
	margin-bottom: 8px;
}

.eg-acceso__text {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--theme-palette-color-5, #5A5F70);
}

@media (max-width: 720px) {
	.eg-accesos {
		padding: 48px 20px;
	}
}

/* ==========================================================================
   Áreas de negocio
   ========================================================================== */

.eg-areas {
	padding: 96px 24px;
	background-color: var(--theme-palette-color-9, #171C30);
	color: var(--theme-palette-color-8, #FFFFFF);

	/* El motivo de círculos concéntricos: el "360" convertido en textura.
	   Va como data-URI, sin peticiones extra. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.045'%3E%3Ccircle cx='380' cy='380' r='120'/%3E%3Ccircle cx='380' cy='380' r='200'/%3E%3Ccircle cx='380' cy='380' r='280'/%3E%3Ccircle cx='380' cy='380' r='360'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right -220px top -260px;
}

/* El H2 hereda familia, peso y letter-spacing del tema. */
.eg-areas__title {
	color: var(--theme-palette-color-8, #FFFFFF);
}

.wp-block-group > .eg-areas__title {
	margin: 0 0 12px;
}

.eg-areas__intro {
	max-width: 620px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--theme-palette-color-12, #A9AEC2);
}

.wp-block-group > .eg-areas__intro {
	margin: 0 0 48px;
}

.eg-areas__grid {
	gap: 16px;
}

/* --- Tarjeta ------------------------------------------------------------ */

.eg-area {
	padding: 24px;
	background-color: var(--theme-palette-color-10, #1F2542);
	border: 1px solid var(--theme-palette-color-11, #2C3355);
	border-radius: 10px;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.eg-area:hover {
	border-color: var(--theme-palette-color-1, #B4222E);
}

.wp-block-group > .eg-area__tag {
	margin: 0 0 10px;
}

.wp-block-group > .eg-area__title {
	margin: 0 0 8px;
}

.wp-block-group > .eg-area__text {
	margin: 0;
}

.eg-area__tag {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.2;
	color: var(--theme-palette-color-13, #E4525D);
}

/* El H3 del tema es Archivo 600; aquí solo se ajusta el tamaño. */
.eg-area__title {
	font-size: 16.5px;
	line-height: 1.3;
	color: var(--theme-palette-color-8, #FFFFFF);
}

.eg-area__text {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--theme-palette-color-12, #A9AEC2);
}

/* --- Tarjeta de contacto ------------------------------------------------ */

.eg-area--cta {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: var(--theme-palette-color-1, #B4222E);
	border-color: var(--theme-palette-color-1, #B4222E);
}

.eg-area--cta:hover {
	background-color: var(--theme-palette-color-2, #8E1B24);
	border-color: var(--theme-palette-color-2, #8E1B24);
}

.eg-area--cta .eg-area__text a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

/* Toda la tarjeta es zona de clic, pero el enlace sigue siendo un enlace real:
   navegable por teclado y anunciado por el lector de pantalla. */
.eg-area--cta .eg-area__text a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.eg-area--cta:focus-within {
	outline: 2px solid var(--theme-palette-color-8, #FFFFFF);
	outline-offset: 3px;
}

.eg-area--cta .eg-area__text a:focus-visible {
	outline: none;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 720px) {
	.eg-areas {
		padding: 64px 20px;
		background-position: right -280px top -300px;
	}

	.wp-block-group > .eg-areas__intro {
		margin-bottom: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eg-area {
		transition: none;
	}
}