/**
 * Vexel Eclipse — hoja de marca del tema hijo.
 *
 * Se encola después de la del padre (vexel-base-main). Aquí solo va lo que
 * theme.json no puede expresar: los interlineados de la escala móvil y las
 * variantes de botón de la maqueta.
 *
 * Medidas tomadas del Figma "Eclipse": lienzo 1440, padding lateral 168
 * (contenido 1104), secciones a 120px arriba/abajo, header de 120px.
 */

/* -------------------------------------------------------------------------
 * Contenedor de la maqueta
 *
 * Todo lo que va "dentro" del sitio se alinea con esta caja: contenido de
 * 1104 con 168 de aire a cada lado, que es exactamente el lienzo de 1440 de
 * Figma. El fondo de cada sección sigue yendo a ancho completo; lo que se
 * limita es el contenido.
 *
 * Por encima de 1440 la caja deja de crecer y se centra — si no, el header y
 * el pie se estiraban hasta los bordes y cada franja acababa alineada de una
 * forma distinta. Por debajo, el aire se reduce con el viewport (11.667vw es
 * la misma proporción que 168 sobre 1440) hasta un mínimo de 24.
 * ---------------------------------------------------------------------- */
.vexel-eclipse-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(1104px + var(--wp--custom--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
}

/*
 * Curva del aire lateral
 *
 * Los 168 de la maqueta son el 11.667% de 1440. Mantener esa proporción hacia
 * abajo era un error: a 1100 dejaba 128 por lado y el contenido se quedaba en
 * 844, con el titular partido en cuatro renglones y el menú a dos líneas. El
 * aire no debe crecer en proporción, tiene que aplanarse.
 *
 * De 1440 hacia abajo va en línea recta de 168 a 48 (que se alcanza en 1024),
 * y de ahí al móvil baja de 48 a 24. Las dos curvas empalman en el mismo valor,
 * así que no hay salto en el breakpoint.
 */
:root,
.wp-site-blocks {
	--wp--custom--gutter: clamp(3rem, calc(3rem + (100vw - 64rem) * 0.2885), 10.5rem);
}

@media (max-width: 1023px) {
	:root,
	.wp-site-blocks {
		--wp--custom--gutter: clamp(1.5rem, 6.25vw, 3rem);
	}
}

/* -------------------------------------------------------------------------
 * Secciones pegadas
 *
 * WordPress separa con su block-gap (24px) los hijos directos de
 * .wp-site-blocks — header, main y footer — y también los bloques de primer
 * nivel del contenido. En la maqueta no hay ese hueco: el header termina en
 * 120 y el hero arranca ahí mismo, y cada sección se pone su propio aire con
 * los 120 de padding. Se anula solo en esos dos niveles; dentro de cada
 * bloque el block-gap sigue funcionando con normalidad.
 * ---------------------------------------------------------------------- */
.wp-site-blocks > *,
.wp-site-blocks > * + *,
.entry-content > *,
.entry-content > * + *,
#vexel-main > *,
#vexel-main > * + * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* -------------------------------------------------------------------------
 * Palabras largas
 *
 * Red de seguridad: una URL pegada, un correo o una palabra muy larga no deben
 * poder romper la caja y sacar la página de su ancho. Se rompen antes de
 * desbordar. `break-word` y no `anywhere` para que solo actúe cuando de verdad
 * no cabe, sin destrozar el reparto de líneas del resto del texto.
 * ---------------------------------------------------------------------- */
.wp-site-blocks p,
.wp-site-blocks li,
.wp-site-blocks h1,
.wp-site-blocks h2,
.wp-site-blocks h3,
.wp-site-blocks h4,
.wp-site-blocks h5,
.wp-site-blocks h6,
.wp-site-blocks a,
.wp-site-blocks dd,
.wp-site-blocks dt,
.wp-site-blocks figcaption {
	overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
 * Escala tipográfica móvil
 *
 * theme.json ya interpola los tamaños (fluid), pero el interlineado es un
 * valor único. La maqueta define dos juegos distintos:
 *   Desktop      H1 48/56  H2 40/48  H3 32/32  H4-6 24/32
 *   Smartphone   H1 36/44  H2 32/40  H3 28/36  H4-6 24/32
 * ---------------------------------------------------------------------- */
@media (max-width: 767px) {
	h1,
	.wp-block-post-title {
		line-height: 1.2222; /* 44/36 */
	}

	h2 {
		line-height: 1.25; /* 40/32 */
	}

	h3 {
		line-height: 1.2857; /* 36/28 */
	}
}

/* -------------------------------------------------------------------------
 * Titulares en cursiva
 *
 * En toda la maqueta el segundo renglón del titular va en Newsreader Medium
 * Italic y con el mismo tamaño ("Da el primer paso, / nosotros te ayudamos").
 * Se marca con <em> dentro del propio encabezado.
 * ---------------------------------------------------------------------- */
h1 em,
h2 em,
h3 em,
h4 em {
	font-style: italic;
	font-weight: inherit;
}

/* -------------------------------------------------------------------------
 * Botones
 *
 * Cuerpo común (ya en theme.json): Kumbh Sans 14/24, radio 8, padding 8/32,
 * texto en morado oscuro #353756. Cambia únicamente el relleno.
 * ---------------------------------------------------------------------- */
/*
 * Las variantes valen tanto envueltas en .wp-block-button como aplicadas
 * directamente sobre el enlace.
 *
 * El bloque de botón de WordPress envuelve el enlace en un .wp-block-button, y
 * ese es el selector natural. Pero los botones de las secciones propias son un
 * <a> suelto con la clase de variante encima, y con el selector de dos niveles
 * la variante no llegaba: el botón de "Ver todas las entradas" salía celeste en
 * vez de arena.
 */
.wp-element-button.is-style-arena,
.wp-block-button__link.is-style-arena {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy);
}

.wp-element-button.is-style-arena:hover,
.wp-element-button.is-style-arena:focus-visible,
.wp-block-button__link.is-style-arena:hover,
.wp-block-button__link.is-style-arena:focus-visible {
	background-color: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--navy);
}

.wp-element-button.is-style-morado,
.wp-block-button__link.is-style-morado {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--bg);
}

.wp-element-button.is-style-morado:hover,
.wp-element-button.is-style-morado:focus-visible,
.wp-block-button__link.is-style-morado:hover,
.wp-block-button__link.is-style-morado:focus-visible {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--bg);
}

.wp-element-button.is-style-contorno,
.wp-block-button__link.is-style-contorno {
	background-color: transparent;
	color: var(--wp--preset--color--navy);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--navy);
}

.wp-block-button.is-style-arena .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy);
}

.wp-block-button.is-style-arena .wp-block-button__link:hover,
.wp-block-button.is-style-arena .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent-hover);
}

.wp-block-button.is-style-morado .wp-block-button__link {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--bg);
}

.wp-block-button.is-style-morado .wp-block-button__link:hover,
.wp-block-button.is-style-morado .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--secondary);
}

.wp-block-button.is-style-contorno .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--navy);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--navy);
}

.wp-block-button.is-style-contorno .wp-block-button__link:hover,
.wp-block-button.is-style-contorno .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--bg);
}

/* Botón grande: el del formulario de contacto mide 56 de alto (16/24, pad 16/24). */
.wp-block-button.is-style-grande .wp-block-button__link,
.wp-block-button--lg .wp-block-button__link {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.5;
	padding: 1rem 1.5rem;
}

/* -------------------------------------------------------------------------
 * Entrada del blog
 *
 * Medidas del nodo 3966:2600 (%Blog_ampliado):
 *   sección 1440x2609 · 120 de aire arriba y abajo · 280 a los lados
 *   columna de 880 con 40 entre la cabecera y el cuerpo
 *   cabecera 880 con 24 entre piezas:
 *     titular Newsreader Medium 48/48 · fecha y categoría 16/24
 *     entradilla Newsreader Regular 24/32 · imagen destacada 880x384
 *   cuerpo metido 224 más, o sea 656 de ancho, con 40 entre bloques
 *   los subtítulos van en Kumbh Sans Bold 16/24 (no en Newsreader) y a 16 de
 *   su párrafo, que es como está resuelto en la maqueta
 *   cierra un botón arena de 208x40 alineado con el cuerpo
 * ---------------------------------------------------------------------- */
.vexel-eclipse-articulo {
	--vexel-art-columna: 880px;
	--vexel-art-sangria: 224px;
	--vexel-art-padding: 120px;
	/* 72 y no los 120 de la maqueta: a pantalla completa el hueco bajo el
	   header se hacía muy grande en las páginas sin foto. Decisión de Manuel,
	   24/08/2026. El aire de abajo sí se queda en 120. */
	--vexel-art-padding-top: 72px;

	padding-top: var(--vexel-art-padding-top);
	padding-bottom: var(--vexel-art-padding);
	background-color: var(--wp--preset--color--bg);
}

/*
 * La caja es la misma idea que .vexel-eclipse-wrap pero con 880 de contenido
 * en vez de 1104: con el gutter de 168, el ancho total queda en 1216, se
 * centra en los 1440 y el texto arranca justo en 280.
 */
.vexel-eclipse-articulo__inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
	max-width: calc(var(--vexel-art-columna) + var(--wp--custom--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
}

.vexel-eclipse-articulo__cabecera {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.vexel-eclipse-articulo__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--4-xl);
	font-weight: 500;
	line-height: 48px;
	color: var(--wp--preset--color--secondary);
}

.vexel-eclipse-articulo__meta {
	gap: 0.35em;
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	line-height: 24px;
	color: var(--wp--preset--color--secondary);
}

.vexel-eclipse-articulo__meta > * {
	margin: 0;
}

/*
 * La barra separadora es decorativa.
 *
 * El aire lo ponen el gap del contenedor y un margen a la derecha de la barra,
 * y no espacios dentro del content: el ::before abre la caja de la categoría,
 * que es un elemento flexible, y un espacio al principio de línea se colapsa.
 * Por eso el 2026 salía pegado a la barra.
 */
.vexel-eclipse-articulo__meta .wp-block-post-terms::before {
	content: "|";
	margin-right: 0.35em;
}

.vexel-eclipse-articulo__meta a {
	color: inherit;
	text-decoration: none;
}

.vexel-eclipse-articulo__meta a:hover,
.vexel-eclipse-articulo__meta a:focus-visible {
	text-decoration: underline;
}

.vexel-eclipse-articulo__entradilla {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	line-height: 32px;
	color: var(--wp--preset--color--secondary);
}

.vexel-eclipse-articulo__entradilla p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.vexel-eclipse-articulo__destacada {
	margin: 0;
}

.vexel-eclipse-articulo__destacada img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* ------------------------------------------------------------------- Cuerpo */
.vexel-eclipse-articulo__cuerpo {
	margin: 0 0 0 var(--vexel-art-sangria);
	/* 224 sobre los 880 de la columna del artículo —no sobre los 1104 del
	   sitio—, que es contra lo que resuelve un margen en porcentaje. Por debajo
	   de 1440 la sangría pasa a esa proporción; en píxeles fijos se comía la
	   columna de texto. */
	margin-left: min(var(--vexel-art-sangria), 25.4545%);
	font-size: var(--wp--preset--font-size--md);
	line-height: 24px;
	color: var(--wp--preset--color--secondary);
}

/*
 * Cadencia del cuerpo, tal y como la marca la maqueta: los bloques de texto de
 * Figma llevan paragraphSpacing 16, así que entre párrafos y entre un subtítulo
 * y su texto van 16. Los 40 se reservan para los cambios de sección: cuando
 * llega un subtítulo nuevo o una imagen.
 *
 * Va con la clase del artículo por delante para ganarle al reseteo general de
 * .entry-content de más arriba.
 */
/*
 * El padre centra y mete 32 de aire lateral a los bloques del contenido para
 * las entradas normales (regla .wp-block-post-content.is-layout-flow > …). Aquí
 * la columna ya la fija el artículo, así que ese aire sobra: dejaba el texto en
 * 592 en vez de 656 y añadía tres renglones a cada párrafo largo.
 */
.vexel-eclipse-articulo .vexel-eclipse-articulo__cuerpo > * {
	max-width: none;
	margin-block: 0;
	margin-inline: 0;
	padding-inline: 0;
}

.vexel-eclipse-articulo .vexel-eclipse-articulo__cuerpo > * + * {
	margin-block-start: 16px;
}

.vexel-eclipse-articulo .vexel-eclipse-articulo__cuerpo > * + :is(h2, h3, h4, h5, h6),
.vexel-eclipse-articulo .vexel-eclipse-articulo__cuerpo > * + :is(figure, .wp-block-image),
.vexel-eclipse-articulo .vexel-eclipse-articulo__cuerpo > :is(figure, .wp-block-image) + * {
	margin-block-start: 40px;
}

.vexel-eclipse-articulo__cuerpo > :is(h2, h3, h4, h5, h6) {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 24px;
	color: var(--wp--preset--color--secondary);
}

.vexel-eclipse-articulo__cuerpo :is(img, figure) {
	max-width: 100%;
}

/* El bloque de imagen del padre trae 32 de padding lateral; aquí la imagen
   ocupa la columna entera, que es lo que hace la maqueta. */
.vexel-eclipse-articulo__cuerpo figure {
	margin-inline: 0;
	padding-inline: 0;
}

.vexel-eclipse-articulo__cuerpo img {
	display: block;
	width: 100%;
	height: auto;
}

.vexel-eclipse-articulo__cuerpo a {
	color: var(--wp--preset--color--celeste-texto);
	overflow-wrap: anywhere;
}

/*
 * Las listas de la maqueta van con un punto medio y el texto sangrado 28; los
 * puntos van pegados entre sí (24 de renglón, sin el aire de 16 que separa los
 * párrafos), y son los 16 los que las separan del párrafo de antes y de después.
 */
/* Solo la sangría: el margen lo pone la cadencia de más arriba, y si aquí se
   volviera a poner a cero ganaría por especificidad y la lista se pegaría al
   párrafo anterior. */
.vexel-eclipse-articulo .vexel-eclipse-articulo__cuerpo :is(ul, ol) {
	padding-left: 28px;
}

/* El punto va separado del texto, como en la maqueta: el marcador se alinea a
   la derecha del hueco, así que los espacios del final lo empujan a su sitio. */
.vexel-eclipse-articulo__cuerpo ul {
	list-style-type: "·  ";
}

.vexel-eclipse-articulo__cuerpo :is(ul, ol) li {
	margin: 0;
	padding-left: 0;
}

.vexel-eclipse-articulo__cuerpo :is(ul, ol) li::marker {
	color: var(--wp--preset--color--secondary);
}

/* -------------------------------------------------------------------- Botón */
.vexel-eclipse-articulo__volver {
	margin: 0 0 0 var(--vexel-art-sangria);
	margin-left: min(var(--vexel-art-sangria), 25.4545%);
}

.vexel-eclipse-articulo__volver .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 208px;
	padding-inline: 16px;
	line-height: 24px;
}

/* --------------------------------------------------------------------- Móvil */
/* Sin maqueta de móvil: el cuerpo pierde la sangría y ocupa toda la columna. */
@media (max-width: 1023px) {
	.vexel-eclipse-articulo {
		padding-top: clamp(2.5rem, 5vw, var(--vexel-art-padding-top));
		padding-bottom: clamp(3.5rem, 8.333vw, var(--vexel-art-padding));
	}

	.vexel-eclipse-articulo__cuerpo,
	.vexel-eclipse-articulo__volver {
		margin-left: 0;
	}

	.vexel-eclipse-articulo__titulo {
		line-height: 1.1667; /* 56/48 */
	}
}

/* -------------------------------------------------------------------------
 * Páginas legales
 *
 * Medidas de los nodos 3983:4103 (aviso legal), 3983:4610 (privacidad) y
 * 3983:4784 (cookies), que comparten maqueta:
 *   sección 1440 · 120 de aire arriba y abajo · contenido de 1104
 *   titular Newsreader Medium 48/48 · 56 hasta el texto
 *   texto metido 136, o sea una columna de 832
 *   subtítulos Newsreader Regular 24/32 · cuerpo Kumbh Sans 16/24
 *   16 entre párrafos y entre subtítulo y texto · 40 al cambiar de apartado
 * ---------------------------------------------------------------------- */
.vexel-eclipse-legal {
	--vexel-legal-sangria: 136px;
	--vexel-legal-padding: 120px;
	/* Mismo criterio que en la entrada del blog: 72 arriba en vez de 120. */
	--vexel-legal-padding-top: 72px;

	padding-top: var(--vexel-legal-padding-top);
	padding-bottom: var(--vexel-legal-padding);
	background-color: var(--wp--preset--color--bg);
}

.vexel-eclipse-legal__inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 56px;
	width: 100%;
	max-width: calc(1104px + var(--wp--custom--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
}

.vexel-eclipse-legal__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--4-xl);
	font-weight: 500;
	line-height: 48px;
	color: var(--wp--preset--color--secondary);
}

.vexel-eclipse-legal__cuerpo {
	margin: 0 var(--vexel-legal-sangria);
	/* 136 sobre los 1104 de la maqueta, por la misma razón. */
	margin-inline: min(var(--vexel-legal-sangria), 12.3188%);
	font-size: var(--wp--preset--font-size--md);
	line-height: 24px;
	color: var(--wp--preset--color--secondary);
}

/*
 * Misma idea que en la entrada del blog: hay que anular el centrado y los 32
 * de aire lateral que el padre le pone a los bloques del contenido, porque
 * aquí la columna la fija el artículo.
 */
.vexel-eclipse-legal .vexel-eclipse-legal__cuerpo > * {
	max-width: none;
	margin-block: 0;
	margin-inline: 0;
	padding-inline: 0;
}

.vexel-eclipse-legal .vexel-eclipse-legal__cuerpo > * + * {
	margin-block-start: 16px;
}

.vexel-eclipse-legal .vexel-eclipse-legal__cuerpo > * + :is(h2, h3, h4, h5, h6) {
	margin-block-start: 40px;
}

.vexel-eclipse-legal__cuerpo > :is(h2, h3, h4, h5, h6) {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	line-height: 32px;
	color: var(--wp--preset--color--secondary);
}

.vexel-eclipse-legal__cuerpo a {
	color: var(--wp--preset--color--celeste-texto);
	/* Las URL de ayuda de los navegadores son una sola palabra de 50 caracteres
	   y en un móvil de 360 se salían por la derecha. */
	overflow-wrap: anywhere;
}

/* Las listas repiten el punto medio y la sangría de 28 de la entrada. */
.vexel-eclipse-legal .vexel-eclipse-legal__cuerpo :is(ul, ol) {
	padding-left: 28px;
}

.vexel-eclipse-legal__cuerpo ul {
	list-style-type: "·  ";
}

.vexel-eclipse-legal__cuerpo :is(ul, ol) li {
	margin: 0;
	padding-left: 0;
}

/* --------------------------------------------------------------------- Móvil */
/* Sin maqueta de móvil: el texto pierde la sangría y ocupa toda la columna. */
@media (max-width: 1023px) {
	.vexel-eclipse-legal {
		padding-top: clamp(2.5rem, 5vw, var(--vexel-legal-padding-top));
		padding-bottom: clamp(3.5rem, 8.333vw, var(--vexel-legal-padding));
	}

	.vexel-eclipse-legal__cuerpo {
		margin-inline: 0;
	}

	.vexel-eclipse-legal__titulo {
		line-height: 1.1667; /* 56/48 */
	}
}