/* ARRA — El blog.
 * ==========================================================================
 * Las tarjetas y el héroe NO se dibujan aquí: son los del sitio -las del
 * bloque «Artículos & noticias» de la home y el héroe de «Sobre nosotros»-,
 * con sus propias clases (inc/blog.php). Aquí solo va lo que el blog tiene
 * y el resto no: la foto de verdad dentro de la tarjeta, el enlace, las
 * categorías del héroe y el cuerpo del artículo.
 * ========================================================================== */

/* ---------------------------------------------------------- las tarjetas */

/* La foto: en la home era un fondo de CSS; en el blog es la foto destacada
   de la entrada, con su `alt`, así que va en un <img> que llena el hueco
   igual que llenaba el fondo. */
.arra-inicio-foto { overflow: hidden; }
/* Con `[width][height]` en el selector: compat-design.css deja a `auto` el
   ancho de toda imagen que traiga esos dos atributos, y con una clase sola
   ganaba él: la foto se quedaba a 224 px en una tarjeta de 271. */
img.arra-inicio-foto__img[width][height] { display: block; inline-size: 100%;
	block-size: 100%; object-fit: cover; }

/* El enlace es el título y se estira a toda la tarjeta. */
.arra-inicio-enlace { color: inherit; text-decoration: none; }
.arra-inicio-enlace::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.arra-inicio-articulo:has(.arra-inicio-enlace:focus-visible) {
	outline: 2px solid var(--wp--preset--color--dorado-700); outline-offset: 3px; }
.arra-inicio-enlace:focus-visible { outline: none; }
@media (hover: hover) {
	.arra-inicio-articulo:hover .arra-inicio-enlace { color: var(--arra-linea); }
}

/* EN EL BLOG ES UNA REJILLA, NO LA TIRA DE LA HOME. En el móvil la home
   enseña cuatro tarjetas en una tira que se desliza de lado; con veintiuna,
   eso sería esconderlas. Aquí van una debajo de otra. */
.arra-blog-rejilla.arra-blog-rejilla { display: grid; overflow: visible;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
	gap: 20px; inline-size: auto; margin-inline: 0; padding-inline: 0; }
.arra-blog-rejilla.arra-blog-rejilla > * { inline-size: auto; flex: none; }

.arra-blog-seccion { box-sizing: border-box; margin-inline: auto;
	max-inline-size: calc(1280px + 2 * clamp(20px, 5vw, 64px));
	padding: clamp(56px, 7vw, 100px) clamp(20px, 5vw, 64px); }
.arra-blog-seccion__titulo { margin: 0 0 28px; font-family: var(--font-display);
	font-weight: 500; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.02em;
	color: var(--fg); }
.arra-blog-vacio { color: var(--fg-soft); }

/* ------------------------------------------------------------ el héroe */

/* Las categorías, en las cajas de cristal del héroe institucional: el
   número en dorado y el nombre debajo, como las cifras de «Sobre
   nosotros». La activa, con el canto dorado. */
.arra-blog-categorias { align-self: center; }
.arra-blog-categoria { text-decoration: none; color: inherit;
	transition: border-color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida),
		background-color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); }
.arra-blog-categoria > span { display: block; }
.arra-blog-categoria.esta-activa { border-color: var(--wp--preset--color--dorado-500); }
@media (hover: hover) {
	.arra-blog-categoria:hover { border-color: var(--wp--preset--color--dorado-500);
		background-color: rgba(255, 255, 255, 0.09); }
}

/* En el móvil, compactas: número y nombre en una línea y dos por fila.
   Enteras, las siete cajas ocupaban media pantalla antes del primer
   artículo. */
@media (max-width: 859px) {
	.arra-blog-categorias.arra-blog-categorias { gap: 8px; }
	.arra-blog-categoria.arra-blog-categoria { padding: 10px 14px; display: flex;
		gap: 10px; align-items: baseline; }
	.arra-blog-categoria > span:first-child { font-size: 22px; }
}

/* La foto de la entrada, a la derecha del titular. */
.arra-entrada-marco { align-self: center; }
img.arra-entrada-foto[width][height] { display: block; inline-size: 100%; block-size: auto;
	aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-lg); }

/* -------------------------------------------------------- el artículo */

.arra-entrada { box-sizing: border-box; margin-inline: auto;
	max-inline-size: calc(1280px + 2 * clamp(20px, 5vw, 64px));
	padding: clamp(48px, 6vw, 88px) clamp(20px, 5vw, 64px) 0; }
.arra-entrada-cuerpo { max-inline-size: 68ch; margin-inline: auto;
	font-size: 17px; line-height: 1.75; color: var(--fg-soft); }
.arra-entrada-cuerpo > * { margin-block: 0 1.1em; }
.arra-entrada-cuerpo h2 { margin-block: 2em 0.6em; font-family: var(--font-display);
	font-weight: 500; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2;
	letter-spacing: -0.02em; color: var(--fg); }
.arra-entrada-cuerpo h3 { margin-block: 1.6em 0.5em; font-family: var(--font-display);
	font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--fg); }
.arra-entrada-cuerpo h4 { margin-block: 1.4em 0.4em; font-size: 17px; color: var(--fg); }
.arra-entrada-cuerpo strong { color: var(--fg); font-weight: 600; }
/* Los enlaces, en tinta con el subrayado dorado: el burdeos es de Corporate
   (cliente, 26/09/2026), y el dorado como color de TEXTO no pasa AA sobre
   blanco -3,59:1 el más oscuro-. Al pasar, el subrayado engorda. */
.arra-entrada-cuerpo a { color: var(--fg); text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--dorado-500);
	text-decoration-thickness: 2px; text-underline-offset: 0.22em;
	transition: text-decoration-thickness var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida),
		text-decoration-color var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); }
@media (hover: hover) {
	.arra-entrada-cuerpo a:hover { text-decoration-thickness: 4px;
		text-decoration-color: var(--wp--preset--color--dorado-700); }
}
.arra-entrada-cuerpo ul, .arra-entrada-cuerpo ol { padding-inline-start: 1.3em; }
.arra-entrada-cuerpo li { margin-block: 0.4em; }
.arra-entrada-cuerpo li::marker { color: var(--wp--preset--color--dorado-700); }
.arra-entrada-cuerpo blockquote { margin-inline: 0; padding: 4px 0 4px 22px;
	border-inline-start: 3px solid var(--wp--preset--color--dorado-500);
	color: var(--fg); font-size: 18px; }
.arra-entrada-cuerpo table { inline-size: 100%; border-collapse: collapse;
	font-size: 15px; display: block; overflow-x: auto; }
.arra-entrada-cuerpo th, .arra-entrada-cuerpo td { padding: 10px 12px; text-align: start;
	border-block-end: 1px solid var(--arra-line-soft); }
.arra-entrada-cuerpo th { color: var(--fg); font-weight: 600; }
.arra-entrada-cuerpo figure { margin-inline: 0; }

/* ------------------------------------------------ el cuerpo, con ritmo */
/* Lo que el cliente pidió el 26/09/2026 al ver el texto «muy plano»: la
   capa A la escribe inc/blog-cuerpo.php leyendo el esquema de cada
   artículo, y la B son los patrones `blog-*` que marketing mete a mano. Todo
   en los colores de lo genérico: dorado y neutros. Ni verde ni granate, que
   son de Core y de Corporate. */

.arra-entrada-cuerpo { counter-reset: arra-seccion; }

/* La entradilla: el primer párrafo, en la letra de los titulares. */
.arra-entrada-cuerpo > .arra-entradilla { font-family: var(--font-display);
	font-size: 19px; line-height: 1.6; letter-spacing: -0.01em; color: var(--fg);
	padding-inline-start: 18px;
	border-inline-start: 3px solid var(--wp--preset--color--dorado-500); }

/* Cada sección, numerada y con el filete dorado sobre el filete gris. El
   número es un contador: no está en el texto, y con `/ ""` los lectores de
   pantalla no lo leen (la primera línea es para quien no entienda eso). */
.arra-entrada-cuerpo > h2 { position: relative; counter-increment: arra-seccion;
	padding-block-start: 50px; border-block-start: 1px solid var(--arra-line-soft); }
.arra-entrada-cuerpo > h2::before { content: ""; position: absolute;
	inset-block-start: -1px; inset-inline-start: 0; inline-size: 56px; block-size: 2px;
	background: var(--wp--preset--color--dorado-500); }
.arra-entrada-cuerpo > h2::after { content: counter(arra-seccion, decimal-leading-zero);
	content: counter(arra-seccion, decimal-leading-zero) / "";
	position: absolute; inset-block-start: 22px; inset-inline-start: 0;
	font-family: var(--font-body); font-size: 13px; font-weight: 600;
	letter-spacing: 0.16em; color: var(--wp--preset--color--dorado-700); }

/* Los subtítulos, en versalitas: se distinguen de la sección sin competir. */
.arra-entrada-cuerpo h3 { font-family: var(--font-body); font-size: 14px;
	font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

/* Las negritas del texto, con un subrayado de rotulador dorado. En los
   titulares no: ya son negrita. */
.arra-entrada-cuerpo p strong, .arra-entrada-cuerpo li > strong {
	background: linear-gradient(transparent 62%,
		color-mix(in srgb, var(--wp--preset--color--dorado-300) 55%, transparent) 62%); }

/* De aqui abajo, `:is(..., .is-root-container)`: la misma regla vale en
   el editor, donde el cuerpo del articulo es `.is-root-container`, para
   que marketing vea el bloque como se va a publicar. */
/* Listas simples: ticks dorados. */
:is(.arra-entrada-cuerpo, .is-root-container) ul.arra-lista-tick { list-style: none; padding-inline-start: 0; }
:is(.arra-entrada-cuerpo, .is-root-container) ul.arra-lista-tick > li { position: relative; padding-inline-start: 30px; }
:is(.arra-entrada-cuerpo, .is-root-container) ul.arra-lista-tick > li::before { content: ""; position: absolute;
	inset-inline-start: 0; inset-block-start: 0.32em; inline-size: 18px; block-size: 18px;
	border-radius: 50%; background: var(--wp--preset--color--dorado-700); }
:is(.arra-entrada-cuerpo, .is-root-container) ul.arra-lista-tick > li::after { content: ""; position: absolute;
	inset-inline-start: 6px; inset-block-start: calc(0.32em + 4px); inline-size: 5px;
	block-size: 9px; border: solid var(--wp--preset--color--blanco);
	border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Fichas: «Término: explicación», el término en su línea. */
:is(.arra-entrada-cuerpo, .is-root-container) ul.arra-fichas { list-style: none; padding: 0; display: grid;
	gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
:is(.arra-entrada-cuerpo, .is-root-container) ul.arra-fichas > li { margin: 0; display: grid; gap: 4px;
	padding: 16px 18px; border-radius: 14px; border: 1px solid var(--arra-line-soft);
	background: var(--wp--preset--color--neutro-100); font-size: 15.5px; line-height: 1.55;
	align-content: start; }
:is(.arra-entrada-cuerpo, .is-root-container) ul.arra-fichas > li > strong { background: none;
	font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 1.3; }
/* Sin huecos en la rejilla (cliente, 28/09/2026): a dos columnas, tres fichas
   dejaban la tercera sola y un blanco a su derecha. Tres van en una fila en
   cuanto caben; con otro número impar, la última ocupa la fila entera. */
@media (min-width: 760px) {
	:is(.arra-entrada-cuerpo, .is-root-container) ul.arra-fichas:has(> li:nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
:is(.arra-entrada-cuerpo, .is-root-container) ul.arra-fichas > li:last-child:nth-child(odd):not(:nth-child(3)):not(:first-child) {
	grid-column: 1 / -1; }

/* La balanza: ventajas en dorado, desventajas en gris. La usan la capa A y
   el patrón «Ventajas y desventajas». */
:is(.arra-entrada-cuerpo, .is-root-container) .arra-balanza { display: grid; gap: 14px; margin-block: 1.6em;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.arra-balanza > * { padding: 18px; border-radius: 16px; border: 1px solid var(--arra-line-soft);
	margin: 0; }
/* En el patron, el grupo de WordPress mete su propio margen entre hijos. */
.arra-balanza.arra-balanza > * + * { margin-block-start: 0; }
.arra-balanza__pro { background: color-mix(in srgb, var(--wp--preset--color--dorado-300) 16%, var(--wp--preset--color--blanco));
	border-color: color-mix(in srgb, var(--wp--preset--color--dorado-500) 45%, transparent); }
.arra-balanza__contra { background: var(--wp--preset--color--neutro-200); }
:is(.arra-entrada-cuerpo, .is-root-container) .arra-balanza h3 { margin: 0 0 12px; }
.arra-balanza__pro h3::before { content: "+ "; color: var(--wp--preset--color--dorado-700); }
.arra-balanza__contra h3::before { content: "− "; color: var(--wp--preset--color--tinta-500); }
:is(.arra-entrada-cuerpo, .is-root-container) .arra-balanza ul.arra-fichas { grid-template-columns: minmax(0, 1fr); margin: 0; }
:is(.arra-entrada-cuerpo, .is-root-container) .arra-balanza ul.arra-fichas > li { background: var(--wp--preset--color--blanco); }
:is(.arra-entrada-cuerpo, .is-root-container) .arra-balanza > * > ul:not(.arra-fichas) { margin: 0; }

/* ---- Capa B: los bloques de marketing (patrones `blog-*`) ---- */

/* Destacado: una idea que no se puede saltar. */
:is(.arra-entrada-cuerpo, .is-root-container) .arra-destacado { margin-block: 1.6em; padding: 20px 22px;
	border-radius: 16px; background: var(--wp--preset--color--carbon-950);
	color: color-mix(in srgb, var(--wp--preset--color--blanco) 86%, transparent);
	font-size: 16.5px; line-height: 1.65; }
:is(.arra-entrada-cuerpo, .is-root-container) .arra-destacado > * { margin: 0; }
:is(.arra-entrada-cuerpo, .is-root-container) .arra-destacado > * + * { margin-block-start: 0.6em; }
:is(.arra-entrada-cuerpo, .is-root-container) .arra-destacado .arra-destacado__rotulo { font-size: 12px;
	font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--wp--preset--color--dorado-300); }
:is(.arra-entrada-cuerpo, .is-root-container) .arra-destacado strong { background: none; color: var(--wp--preset--color--blanco); }
:is(.arra-entrada-cuerpo, .is-root-container) .arra-destacado a { color: var(--wp--preset--color--dorado-300); }

/* Cita: una frase del artículo, grande. */
:is(.arra-entrada-cuerpo, .is-root-container) .arra-cita { margin: 1.8em 0; padding: 18px 0 18px 58px;
	position: relative; border: 0; border-block: 1px solid var(--arra-line-soft); }
:is(.arra-entrada-cuerpo, .is-root-container) .arra-cita::before { content: "\201C"; position: absolute;
	inset-inline-start: 0; inset-block-start: 14px; font-family: var(--font-display);
	font-size: 64px; line-height: 0.8; color: var(--wp--preset--color--dorado-500); }
:is(.arra-entrada-cuerpo, .is-root-container) .arra-cita p { margin: 0; font-family: var(--font-display);
	font-size: 21px; line-height: 1.35; letter-spacing: -0.015em; color: var(--fg); }
:is(.arra-entrada-cuerpo, .is-root-container) .arra-cita cite { display: block; margin-block-start: 10px;
	font-size: 13px; font-style: normal; color: var(--fg-soft); }

/* Dato clave: una cifra que resume la sección. */
:is(.arra-entrada-cuerpo, .is-root-container) .arra-dato { display: grid; gap: 4px 20px; margin-block: 1.8em;
	padding: 20px 22px; border-radius: 16px; background: var(--wp--preset--color--neutro-100);
	border: 1px solid var(--arra-line-soft); }
@media (min-width: 560px) {
	:is(.arra-entrada-cuerpo, .is-root-container) .arra-dato { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
}
:is(.arra-entrada-cuerpo, .is-root-container) .arra-dato > * { margin: 0; }
:is(.arra-entrada-cuerpo, .is-root-container) .arra-dato .arra-dato__cifra { font-family: var(--font-display);
	font-size: clamp(38px, 6vw, 52px); font-weight: 500; line-height: 1;
	letter-spacing: -0.03em; color: var(--wp--preset--color--dorado-700); }

/* Pasos: una lista numerada que se lee como un camino. */
:is(.arra-entrada-cuerpo, .is-root-container) ol.arra-pasos strong { background: none; color: var(--fg); }
:is(.arra-entrada-cuerpo, .is-root-container) ol.arra-pasos { list-style: none; padding: 0; counter-reset: arra-paso; }
:is(.arra-entrada-cuerpo, .is-root-container) ol.arra-pasos > li { position: relative; counter-increment: arra-paso;
	margin: 0; padding: 0 0 22px 50px; }
:is(.arra-entrada-cuerpo, .is-root-container) ol.arra-pasos > li::before { content: counter(arra-paso);
	position: absolute; inset-inline-start: 0; inset-block-start: -2px; display: grid;
	place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50%;
	border: 1px solid var(--wp--preset--color--dorado-300);
	background: color-mix(in srgb, var(--wp--preset--color--dorado-300) 18%, var(--wp--preset--color--blanco));
	font-family: var(--font-display); font-size: 14px; color: var(--fg); }
:is(.arra-entrada-cuerpo, .is-root-container) ol.arra-pasos > li:not(:last-child)::after { content: "";
	position: absolute; inset-inline-start: 16.5px; inset-block: 36px 2px; inline-size: 1px;
	background: var(--wp--preset--color--dorado-300); }

/* El cierre: una llamada corta, con el botón que cierra los bloques. */
.arra-entrada-cierre { max-inline-size: 68ch; margin: 48px auto 0; box-sizing: border-box;
	padding: 26px 28px; border-radius: var(--r-lg);
	background: var(--wp--preset--color--neutro-100);
	border: 1px solid var(--arra-line-soft);
	display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center;
	justify-content: space-between; }
.arra-entrada-cierre__texto { margin: 0; flex: 1 1 22rem; color: var(--fg);
	font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.35; }
/* El servicio de la entrada (inc/blog.php): una línea debajo, a todo lo ancho. */
.arra-entrada-cierre__servicio { order: 3; flex: 1 1 100%; margin: 0; font-size: 15px; color: var(--fg-soft); }
.arra-entrada-cierre__servicio a { color: var(--fg); text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--dorado-500); text-decoration-thickness: 2px;
	text-underline-offset: 0.2em; }