/*
Theme Name: ALLER.IA Blog
Theme URI: https://alleria.app/
Author: ALLER.IA
Author URI: https://alleria.app/
Description: Tema de bloques liviano para el blog de ALLER.IA, con la misma apariencia clara de alleria.app: cabecera en cápsula, Newsreader, Geist y Geist Mono alojadas en el tema, tarjetas de artículos y patrones para «En corto», «Qué hacer ahora», «Preguntas frecuentes», figuras y la llamada a la acción. Sin jQuery ni trackers: un script de 0,4 KB cierra el menú y otro, solo en artículos y páginas con tablas, muestra como tarjetas las tablas que no entran a lo ancho.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alleria-blog
Tags: blog, one-column, wide-blocks, block-patterns, block-styles, full-site-editing, featured-images, custom-colors
*/

/*
  Reglas de color del texto (las mismas de alleria.app):
  · Lo que se lee va en --tinta; lo secundario (firma, pies de figura, extractos), en --texto.
  · El énfasis es peso 600, nunca color. El verde solo pinta enlaces y elementos enteros.
  · Letra verde u oro sobre claro: --verde-texto y --oro-texto (pasan AA). --verde y --oro, solo rellenos.
  Los colores salen de theme.json: para otro cliente se cambia la paleta ahí y esto se adapta solo.
*/

/* ═════════════ 1. Variables ═════════════ */
:root {
	color-scheme: light;
	--fondo: var(--wp--preset--color--fondo);
	--blanco: var(--wp--preset--color--blanco);
	--tarjeta: var(--wp--preset--color--tarjeta);
	--linea: var(--wp--preset--color--linea);
	--tinta: var(--wp--preset--color--tinta);
	--texto: var(--wp--preset--color--texto);
	--verde: var(--wp--preset--color--verde);
	--verde-texto: var(--wp--preset--color--verde-texto);
	--bosque: var(--wp--preset--color--bosque);
	--lima: var(--wp--preset--color--lima);
	--menta: var(--wp--preset--color--menta);
	--oro: var(--wp--preset--color--oro);
	--oro-texto: var(--wp--preset--color--oro-texto);
	--claro: var(--wp--preset--color--claro);
	--linea-fuerte: var(--wp--custom--color--linea-fuerte);
	--menta-borde: var(--wp--custom--color--menta-borde);
	--salvia: var(--wp--custom--color--salvia);
	--verde-oscuro: var(--wp--custom--color--verde-oscuro);
	--claro-texto: var(--wp--custom--color--claro-texto);
	--lima-hover: var(--wp--custom--color--lima-hover);
	--cursiva: var(--wp--custom--color--cursiva);
	--borde-campo: var(--wp--custom--color--borde-campo);
	--serif: var(--wp--preset--font-family--newsreader);
	--sans: var(--wp--preset--font-family--geist);
	--mono: var(--wp--preset--font-family--geist-mono);
	--logotipo: var(--wp--custom--logotipo);
	--radio-s: var(--wp--custom--radio--s);
	--radio-m: var(--wp--custom--radio--m);
	--radio-l: var(--wp--custom--radio--l);
	--ancho-amplio: var(--wp--custom--ancho-amplio);
	--sombra-tarjeta: var(--wp--preset--shadow--tarjeta);
	--sombra-barra: var(--wp--preset--shadow--barra);
	--sombra-panel: var(--wp--preset--shadow--panel);
	--seccion: clamp(2.6rem, 6vw, 3.6rem);
	/* La huella de Alleria (misma forma que en alleria.app) */
	--huella: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 11.2c3.1 0 6 3.3 6 6.1 0 2.2-1.7 3.2-3.4 3.2-1.2 0-1.7-.6-2.6-.6s-1.4.6-2.6.6C7.7 20.5 6 19.5 6 17.3c0-2.8 2.9-6.1 6-6.1z'/%3E%3Cellipse cx='4.6' cy='10.4' rx='2' ry='2.6' transform='rotate(-20 4.6 10.4)'/%3E%3Cellipse cx='9' cy='5.6' rx='2.1' ry='2.8' transform='rotate(-8 9 5.6)'/%3E%3Cellipse cx='15' cy='5.6' rx='2.1' ry='2.8' transform='rotate(8 15 5.6)'/%3E%3Cellipse cx='19.4' cy='10.4' rx='2' ry='2.6' transform='rotate(20 19.4 10.4)'/%3E%3C/svg%3E");
}

/* ═════════════ 2. Base ═════════════ */
*, *::before, *::after { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
.wp-element-button:focus-visible, .wp-block-button__link:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
strong, b { font-weight: 600; }
.screen-reader-text:focus { background: var(--blanco); color: var(--tinta); border-radius: 0.5rem; box-shadow: var(--sombra-barra); }

/* El pie queda abajo aunque la página sea corta; entre cabecera, contenido y pie no hay hueco extra */
/* (En el editor, .wp-site-blocks es la lista de bloques: ahí no se toca) */
.wp-site-blocks:not(.block-editor-block-list__layout) { display: flex; flex-direction: column; min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); }
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-site-blocks > main, .wp-site-blocks > .principal { flex: 1 0 auto; }
.principal { padding-block: clamp(0.5rem, 2vw, 1.25rem) clamp(3rem, 8vw, 5.5rem); }

/* ═════════════ 3. Cabecera en cápsula ═════════════ */
.cabecera { position: relative; z-index: 30; padding-block: 0.7rem; background: linear-gradient(var(--fondo) 74%, transparent); }
/* Fija arriba al bajar (no en el editor, para que no tape lo que se edita, ni en celular) */
@media (min-width: 761px) {
	.cabecera:not(.block-editor-block-list__block) { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); }
	html { scroll-padding-top: 5.5rem; }
}
.capsula { position: relative; gap: 0.6rem; min-height: 3.45rem; padding: 0.4rem 0.45rem 0.4rem 1rem; background: var(--blanco); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-m); box-shadow: var(--sombra-barra); }
.marca { display: inline-flex; flex: none; align-items: center; gap: 0.55rem; color: var(--tinta); text-decoration: none; }
.marca img { display: block; width: 30px; height: 30px; }
.logotipo { font-family: var(--logotipo); font-weight: 700; font-size: 1.18rem; letter-spacing: 0.14em; white-space: nowrap; color: var(--tinta); }
.logotipo b { font-weight: 700; color: var(--oro); }

.capsula > .menu { display: flex; align-items: center; gap: 0.1rem; margin: 0 auto 0 0.6rem; padding-left: 0.9rem; border-left: 1px solid var(--linea); font-size: 0.92rem; }
.menu > a, .desplegable > summary { display: inline-flex; align-items: center; gap: 0.32rem; padding: 0.46rem 0.72rem; border-radius: 0.62rem; color: var(--texto); font-weight: 500; line-height: 1.4; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.menu > a:hover, .desplegable > summary:hover, .desplegable[open] > summary { background: var(--tarjeta); color: var(--tinta); }
.menu > a[aria-current] { background: var(--menta); color: var(--tinta); font-weight: 600; }
.desplegable { position: relative; }
.desplegable > summary { list-style: none; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary svg { width: 0.7rem; height: 0.7rem; transition: transform 150ms ease; }
.desplegable[open] > summary svg { transform: rotate(180deg); }
.panel-menu { position: absolute; top: calc(100% + 0.85rem); left: -0.4rem; z-index: 40; display: grid; gap: 0.1rem; width: 25rem; padding: 0.45rem; background: var(--blanco); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-m); box-shadow: var(--sombra-panel); }
.opcion { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; gap: 0.8rem; padding: 0.7rem; border-radius: 0.7rem; text-decoration: none; white-space: normal; }
.opcion:hover { background: var(--fondo); }
.opcion .ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.65rem; background: var(--menta); color: var(--bosque); }
.opcion .ico svg { width: 1.2rem; height: 1.2rem; }
.opcion b { display: block; font-weight: 500; font-size: 0.92rem; color: var(--tinta); }
.opcion small { display: block; font-size: 0.8rem; line-height: 1.4; color: var(--texto); text-wrap: pretty; }

.capsula .wp-block-buttons { flex: none; gap: 0.45rem; }
.capsula .wp-block-button__link { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 0.86rem; box-shadow: 0 8px 16px -10px rgba(21, 54, 38, 0.9); transition: transform 150ms ease, background-color 150ms ease; }
.capsula .wp-block-button__link::after { content: ""; flex: none; width: 0.95rem; height: 0.95rem; background: var(--lima); -webkit-mask: var(--huella) center / contain no-repeat; mask: var(--huella) center / contain no-repeat; transform: rotate(18deg); transition: transform 180ms ease; }
.capsula .wp-block-button__link:hover { transform: translateY(-1px); }
.capsula .wp-block-button__link:hover::after { transform: rotate(18deg) translate(2px, -1px); }

@media (max-width: 1000px) {
	.capsula > .menu { margin-left: 0.3rem; padding-left: 0; border-left: 0; font-size: 0.88rem; }
	.menu > a, .desplegable > summary { padding: 0.44rem 0.5rem; }
}
/* En celular: marca y «Contacto» arriba, los enlaces en una segunda fila dentro de la misma cápsula. Sin JavaScript. */
@media (max-width: 760px) {
	.cabecera { padding-block: 0.6rem 0.2rem; }
	.capsula { row-gap: 0.15rem; padding: 0.35rem 0.4rem 0.3rem 0.75rem; }
	.capsula > .menu { order: 3; flex: 1 0 100%; justify-content: center; margin: 0.1rem 0 0; padding: 0.3rem 0 0; border-top: 1px solid var(--linea); }
	.desplegable { position: static; }
	.panel-menu { left: 0.45rem; right: 0.45rem; top: calc(100% + 0.4rem); width: auto; }
}
/* En celular, el botón es más bajo y su sombra no pisa la línea que separa las dos filas */
@media (max-width: 760px) {
	.capsula .wp-block-button__link { padding: 0.66rem 0.95rem; box-shadow: 0 6px 12px -9px rgba(21, 54, 38, 0.8); }
}
@media (max-width: 380px) {
	.logotipo { font-size: 1.02rem; letter-spacing: 0.1em; }
	.capsula .wp-block-button__link { padding: 0.7rem 0.85rem; }
	.capsula .wp-block-button__link::after { display: none; }
	.menu > a, .desplegable > summary { padding-inline: 0.42rem; }
}

/* ═════════════ 4. Pie ═════════════ */
.pie { margin-top: 0; padding-block: 2rem; border-top: 1px solid var(--linea); }
.pie-contenido { gap: 0.8rem 1.5rem; font-size: 0.86rem; color: var(--texto); }
.pie-marca { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0; color: var(--texto); }
.pie-marca img { display: block; width: 24px; height: 24px; }
.pie-marca .logotipo { font-size: 0.95rem; letter-spacing: 0.08em; }
.pie-marca .logotipo b { color: var(--oro-texto); }
.pie-menu { display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; }
.pie-menu a { color: var(--texto); text-decoration: none; }
.pie-menu a:hover { color: var(--tinta); text-decoration: underline; }

/* ═════════════ 5. Portada del blog y listados ═════════════ */
.etiqueta { display: inline-flex; align-items: center; gap: 0.45rem; width: fit-content; padding: 0.3rem 0.8rem; font-size: 0.8rem; font-weight: 500; line-height: 1.5; color: var(--tinta); background: var(--blanco); border: 1px solid var(--linea); border-radius: 999px; }
.etiqueta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--verde); }
.portada-blog, .cabeza-listado { position: relative; padding-block: clamp(0.8rem, 3vw, 2.2rem) clamp(1.6rem, 4vw, 2.8rem); }
.portada-blog > h1, .cabeza-listado > h1 { max-width: 20ch; margin-block-start: 1rem; }
:is(h1, h2) em { font-style: italic; color: var(--cursiva); }
.bajada { max-width: 56ch; font-size: clamp(1.02rem, 1.5vw, 1.12rem); color: var(--texto); }
.portada-blog::after { content: ""; position: absolute; right: 6%; bottom: 2.4rem; width: 3.4rem; height: 2.8rem; background: var(--verde); opacity: 0.24; -webkit-mask: var(--huella) left bottom / 1.2rem 1.2rem no-repeat, var(--huella) right top / 1.2rem 1.2rem no-repeat; mask: var(--huella) left bottom / 1.2rem 1.2rem no-repeat, var(--huella) right top / 1.2rem 1.2rem no-repeat; transform: rotate(-28deg); pointer-events: none; }
@media (max-width: 700px) { .portada-blog::after { display: none; } }
.cabeza-listado .wp-block-term-description { max-width: 56ch; color: var(--texto); }
.cabeza-listado .wp-block-search { max-width: 34rem; }

/* Tarjetas de artículos */
.tarjetas .wp-block-post-template { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.3rem); margin: 0; padding: 0; list-style: none; }
@media (max-width: 960px) { .tarjetas .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tarjetas .wp-block-post-template { grid-template-columns: minmax(0, 1fr); } }
.tarjetas .wp-block-post-template > li { margin: 0; min-width: 0; }
.tarjeta { position: relative; display: flex; flex-direction: column; height: 100%; padding: 0.6rem 0.6rem 1.2rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-m); transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
.tarjeta:hover { transform: translateY(-2px); border-color: var(--linea-fuerte); box-shadow: var(--sombra-tarjeta); }
/* El foco se dibuja en la tarjeta entera; solo donde existe :has() (Firefox < 121 lo muestra en el título, como siempre) */
@supports selector(:has(a)) {
	.tarjeta:has(a:focus-visible) { outline: 2px solid var(--verde); outline-offset: 3px; }
	.tarjeta-titulo a:focus-visible { outline: none; }
}
.tarjeta > * { margin-block: 0; }
.tarjeta .wp-block-post-featured-image { margin: 0; overflow: hidden; border-radius: 0.8rem; background: var(--tarjeta); }
.tarjeta .wp-block-post-featured-image img { display: block; width: 100%; height: auto; }
/* Sin imagen destacada: una portadilla menta con la huella */
.tarjeta:not(:has(.wp-block-post-featured-image))::before { content: ""; display: block; aspect-ratio: 40 / 21; border-radius: 0.8rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232f8f5b' fill-opacity='.45'%3E%3Cpath d='M12 11.2c3.1 0 6 3.3 6 6.1 0 2.2-1.7 3.2-3.4 3.2-1.2 0-1.7-.6-2.6-.6s-1.4.6-2.6.6C7.7 20.5 6 19.5 6 17.3c0-2.8 2.9-6.1 6-6.1z'/%3E%3Cellipse cx='4.6' cy='10.4' rx='2' ry='2.6' transform='rotate(-20 4.6 10.4)'/%3E%3Cellipse cx='9' cy='5.6' rx='2.1' ry='2.8' transform='rotate(-8 9 5.6)'/%3E%3Cellipse cx='15' cy='5.6' rx='2.1' ry='2.8' transform='rotate(8 15 5.6)'/%3E%3Cellipse cx='19.4' cy='10.4' rx='2' ry='2.6' transform='rotate(20 19.4 10.4)'/%3E%3C/svg%3E") center / 2.2rem 2.2rem no-repeat, repeating-linear-gradient(135deg, rgba(21, 54, 38, 0.04) 0 1px, transparent 1px 8px), var(--menta); }
.tarjeta-cuerpo { display: flex; flex: 1; flex-direction: column; gap: 0.55rem; padding: 0.95rem 0.7rem 0; }
.tarjeta-cuerpo > * { margin-block: 0 !important; }
.tarjeta .categoria { position: relative; z-index: 1; width: fit-content; }
/* La categoría es un enlace de 16 px de alto encima del enlace de la tarjeta: se agranda el área que se toca a 24 px (WCAG 2.5.8) sin mover nada */
.categoria a { display: inline-block; padding-block: 0.25rem; margin-block: -0.25rem; }
.tarjeta-titulo { font-size: clamp(1.3rem, 1.12rem + 0.55vw, 1.55rem); line-height: 1.15; letter-spacing: -0.012em; }
.tarjeta-titulo a { color: var(--tinta); text-decoration: none; }
.tarjeta-titulo a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tarjeta .wp-block-post-excerpt__excerpt { margin: 0; }
.tarjeta .wp-block-post-date { margin-top: auto !important; padding-top: 0.35rem; }

/* Filas simétricas: con 2 o 4 tarjetas (o 1 destacada + 2 o 4), dos columnas en vez de tres con un hueco */
@media (min-width: 961px) {
	.tarjetas .wp-block-post-template:is(:has(> li:nth-child(2):last-child), :has(> li:nth-child(4):last-child)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body:not(.paged) .listado .wp-block-post-template:is(:has(> li:nth-child(3):last-child), :has(> li:nth-child(5):last-child)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body:not(.paged) .listado .wp-block-post-template:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Una sola tarjeta relacionada: horizontal, como la destacada de la portada */
@media (min-width: 761px) {
	.relacionados .wp-block-post-template:has(> li:only-child) { grid-template-columns: minmax(0, 1fr); }
	.relacionados li:only-child .tarjeta { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 0 1.6rem; padding: 0.6rem; }
	.relacionados li:only-child .tarjeta-cuerpo { padding: 1rem 1.4rem 1rem 0; }
}

/* En la portada y los archivos, el artículo más reciente ocupa la fila entera */
@media (min-width: 961px) {
	body:not(.paged) .listado .wp-block-post-template > li:first-child { grid-column: 1 / -1; }
	body:not(.paged) .listado li:first-child .tarjeta { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 0 1.6rem; padding: 0.6rem; }
	body:not(.paged) .listado li:first-child .tarjeta:not(:has(.wp-block-post-featured-image))::before { grid-row: 1; }
	body:not(.paged) .listado li:first-child .tarjeta-cuerpo { padding: 1rem 1.4rem 1rem 0; }
	body:not(.paged) .listado li:first-child .tarjeta-titulo { font-size: clamp(1.9rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.08; }
	body:not(.paged) .listado li:first-child .wp-block-post-excerpt { font-size: 1.02rem; }
}

.wp-block-query-pagination { gap: 0.4rem; margin-top: clamp(2rem, 5vw, 3rem); }
.wp-block-query-pagination-numbers { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; margin: 0; padding: 0 0.85rem; border: 1px solid var(--linea); border-radius: 0.6rem; background: var(--blanco); color: var(--tinta); text-decoration: none; }
.wp-block-query-pagination a:hover { border-color: var(--linea-fuerte); background: var(--tarjeta); }
.wp-block-query-pagination .page-numbers.current { border-color: var(--bosque); background: var(--bosque); color: var(--claro); }
.wp-block-query-pagination .page-numbers.dots { border-color: transparent; background: none; }
.wp-block-query-no-results { padding: 1.5rem; background: var(--blanco); border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-m); color: var(--texto); }

/* Búsqueda */
.wp-block-search__inside-wrapper { gap: 0.45rem; }
.wp-block-search__input { min-width: 0; padding: 0.7rem 0.85rem; font: inherit; color: var(--tinta); background: var(--blanco); border: 1px solid var(--borde-campo); border-radius: 0.6rem; }
.wp-block-search__input::placeholder { color: var(--texto); opacity: 1; }
.wp-block-search__input:focus { outline: 2px solid var(--verde); outline-offset: 1px; border-color: var(--verde); }
.wp-block-search__button { margin: 0; }

/* ═════════════ 6. Artículo: cabeza, imagen destacada y firma ═════════════ */
.destacada { margin-block: clamp(0.5rem, 2vw, 1rem) clamp(2rem, 5vw, 3.25rem) !important; }
.destacada img { display: block; width: 100%; height: auto; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-l); box-shadow: var(--sombra-tarjeta); }
@media (max-width: 480px) { .destacada img { border-radius: var(--radio-m); } }
.principal > .categoria + .titulo-articulo { margin-block-start: 0.6rem; }
.titulo-articulo, .titulo-pagina { font-size: var(--wp--preset--font-size--titulo-1); }

.firma { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; column-gap: 0.8rem; margin-block-start: 1.4rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--linea); font-size: 0.95rem; line-height: 1.45; color: var(--texto); }
/* El círculo de la firma: la foto del autor (la pone functions.php si el autor tiene una) o, si no, el emblema */
.firma::before, .firma > .firma-foto { grid-column: 1; grid-row: 1 / span 2; width: 2.75rem; height: 2.75rem; border-radius: 50%; box-shadow: 0 0 0 1px var(--linea), 0 10px 18px -12px rgba(21, 54, 38, 0.7); }
.firma::before { content: ""; background: var(--tarjeta) url("assets/img/emblema-alleria.png") center / cover no-repeat; }
.firma.con-foto::before { content: none; }
.firma > .firma-foto { display: block; max-width: none; object-fit: cover; background: var(--tarjeta); }
.firma > * { grid-column: 2; margin-block: 0 !important; }
.firma .wp-block-post-author { display: block; }
.firma .wp-block-post-author__content { display: block; }
.firma .wp-block-post-author__content p { display: inline; margin: 0; font-size: inherit; line-height: inherit; }
.firma .wp-block-post-author__byline::after { content: " "; }
.firma .wp-block-post-author__bio::before { content: ", "; }
.firma .fechas { gap: 0.1rem 0.6rem; }
.firma .wp-block-post-date__modified-date::before { content: "· Actualizado: "; }
.firma time { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; }
@media (max-width: 560px) { .firma .fechas { flex-direction: column; align-items: flex-start; } .firma .wp-block-post-date__modified-date::before { content: "Actualizado: "; } }

/* ═════════════ 7. Artículo: cuerpo ═════════════ */
.wp-block-post-content { font-size: var(--wp--preset--font-size--lectura); line-height: 1.7; overflow-wrap: break-word; }
.principal > .wp-block-post-content { margin-block-start: 1.8rem; }
.wp-block-post-content :where(h1, h2, h3) { font-optical-sizing: auto; }
/* HTML sin bloques (el del conector): mismo reparto de líneas que los bloques Título y Párrafo */
.wp-block-post-content :where(h2, h3, h4, summary) { text-wrap: balance; }
.wp-block-post-content :where(p, li, figcaption) { text-wrap: pretty; }
.wp-block-post-content > :where(h2, section, .wp-block-group, .preguntas-frecuentes) { margin-block-start: var(--seccion); }
.wp-block-post-content > :where(h3) { margin-block-start: 2.1rem; }
.wp-block-post-content > :where(h2, h3) + * { margin-block-start: 0.6rem; }
.wp-block-post-content > :where(h2) + :where(h3) { margin-block-start: 1.4rem; }
.wp-block-post-content > :where(:first-child) { margin-block-start: 0; }

/* Enlaces en el texto: verde de texto, subrayado suave que se llena al pasar */
.wp-block-post-content a:where(:not(.wp-element-button)) { font-weight: 500; text-decoration-color: color-mix(in srgb, currentColor 38%, transparent); transition: text-decoration-color 150ms ease; }
.wp-block-post-content a:where(:not(.wp-element-button)):hover { text-decoration-color: currentColor; }

/* Listas */
.wp-block-post-content :where(ul, ol) { padding: 0; list-style: none; }
.wp-block-post-content :where(li + li) { margin-top: 0.55em; }
.wp-block-post-content :where(li > ul, li > ol) { margin-top: 0.55em; }
.wp-block-post-content :where(ul > li) { position: relative; padding-left: 1.5rem; }
.wp-block-post-content :where(ul > li)::before { content: ""; position: absolute; left: 0.2rem; top: 0.68em; width: 0.45rem; height: 0.45rem; border-radius: 2px; background: var(--verde); }
.wp-block-post-content :where(ol) { counter-reset: numero; }
.wp-block-post-content :where(ol > li) { position: relative; padding-left: 2.6rem; counter-increment: numero; }
.wp-block-post-content :where(ol > li)::before { content: counter(numero); position: absolute; left: 0; top: 0.12em; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--menta); color: var(--verde-oscuro); font-family: var(--mono); font-size: 0.8rem; font-weight: 500; line-height: 1; }

.wp-block-post-content :where(blockquote:not(.wp-block-quote)) { margin-inline: 0; padding: 0.2rem 0 0.2rem 1.3rem; border-left: 3px solid var(--verde); font-family: var(--serif); font-size: 1.3rem; font-style: italic; line-height: 1.45; }
.wp-block-post-content :where(hr:not(.wp-block-separator)) { height: 1px; margin-block: 2.5rem; border: 0; background: var(--linea); }
.wp-block-post-content :where(code:not(.wp-block-code code)) { padding: 0.05em 0.35em; font-family: var(--mono); font-size: 0.88em; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 0.35rem; }
.wp-block-code { padding: 1rem 1.2rem; }

/* Lo que se ensancha más que la columna (56rem): tablas y figuras. Una figura con la clase «angosta» se queda en la columna. */
.wp-block-post-content > :is(.tabla, .wp-block-table, figure:not(.angosta, .is-style-angosta, .alignleft, .alignright, .aligncenter, .is-resized, .wp-block-embed, .wp-block-pullquote)) { max-width: var(--ancho-amplio); }
.wp-block-post-content > :is(.tabla, .wp-block-table, figure) { margin-block-start: 2.2rem; }
.wp-block-post-content > :is(.tabla, .wp-block-table, figure) + * { margin-block-start: 1.8rem; }
.wp-block-post-content > :is(.tabla, .wp-block-table, figure) + :is(h2, section, .wp-block-group, .preguntas-frecuentes, .llamado) { margin-block-start: var(--seccion); }
.wp-block-post-content > :is(.tabla, .wp-block-table, figure) + :is(.tabla, .wp-block-table, figure) { margin-block-start: 2.6rem; }
.wp-block-post-content > :is(.tabla, .wp-block-table, figure) + h3 { margin-block-start: 2.4rem; }

/* Tablas anchas (4 columnas o más): se abren hasta el ancho de la cabecera (74rem), centradas como las figuras,
   para que todas las columnas entren enteras. Con menos espacio ocupan todo lo que deja el margen de la página, con
   los mismos bordes que la cápsula de la cabecera. --ancho-util (lo pone assets/js/tablas.js) es el ancho de la ventana
   sin la barra de desplazamiento; sin el script se reservan 1,25rem por la barra de Windows, que 100vw incluye. */
@media screen {
	.wp-block-post-content > :is(.tabla, .wp-block-table):not(.tabla-tarjetas):has(tr > :nth-child(4)) {
		--ancho-tabla: max(100%, min(var(--wp--style--global--wide-size, 74rem), var(--ancho-util, 100vw - 1.25rem) - 2 * var(--wp--style--root--padding-left, 1.25rem)));
		width: var(--ancho-tabla);
		max-width: none;
		margin-inline: calc((100% - var(--ancho-tabla)) / 2) !important;
	}
}

/* Tablas: el script del tema (assets/js/tablas.js) las pasa a tarjetas cuando no entran (ver más abajo).
   Sin el script, la caja se desliza a lo ancho, con sombras que avisan que hay más */
:is(.tabla, .wp-block-table) { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--linea); border-radius: var(--radio-m); box-shadow: var(--sombra-tarjeta); background: linear-gradient(90deg, var(--blanco) 35%, rgba(255, 255, 255, 0)) left center / 2.2rem 100% no-repeat local, linear-gradient(270deg, var(--blanco) 35%, rgba(255, 255, 255, 0)) right center / 2.2rem 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(21, 54, 38, 0.2), transparent) left center / 0.8rem 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(21, 54, 38, 0.2), transparent) right center / 0.8rem 100% no-repeat scroll, var(--blanco); }
:is(.tabla, .wp-block-table) table { width: 100%; margin: 0; table-layout: auto; border-collapse: separate; border-spacing: 0; font-size: 0.94rem; line-height: 1.5; }
:is(.tabla, .wp-block-table) :is(th, td) { min-width: 9.5rem; padding: 0.85rem 1rem; text-align: left; vertical-align: top; border: 0; }
:is(.tabla, .wp-block-table) :is(thead, tfoot) { border: 0; }
:is(.tabla, .wp-block-table) :is(thead th, .fila-encabezado > *) { font-size: 0.86rem; font-weight: 600; line-height: 1.35; color: var(--tinta); background: var(--salvia); background: color-mix(in srgb, var(--salvia) 92%, transparent); border-bottom: 1px solid var(--linea-fuerte); }
:is(.tabla, .wp-block-table) tbody :is(td, th) { border-top: 1px solid var(--linea); }
:is(.tabla, .wp-block-table) tbody :is(tr:first-child, .fila-encabezado + tr) > :is(td, th) { border-top: 0; }
:is(.tabla, .wp-block-table) tbody :is(td, th):first-child { min-width: 8.5rem; font-weight: 600; }
:is(.tabla, .wp-block-table) :is(th, td) + :is(th, td) { border-left: 1px solid color-mix(in srgb, var(--linea) 70%, transparent); }
/* Fila cuya primera columna viene combinada desde arriba (rowspan; data-titulo lo pone el script): su primera celda es un dato */
:is(.tabla, .wp-block-table):not(.tabla-tarjetas) tbody tr[data-titulo] > :first-child { font-weight: 400; border-left: 1px solid color-mix(in srgb, var(--linea) 70%, transparent); }
:is(.tabla, .wp-block-table) tfoot td { border-top: 1px solid var(--linea-fuerte); }
figure.wp-block-table figcaption { margin: 0; padding: 0.7rem 1rem 0.9rem; border-top: 1px solid var(--linea); text-align: left; }
/* Celular: celdas más angostas. Una tabla de 2 o 3 columnas que así entra se queda como tabla; si no entra, el script
   la pasa a tarjetas. Las de 4 columnas o más que preparó el script (.tabla-ancha) conservan su mínimo: si no entran,
   pasan a tarjetas en vez de quedar apretadas. Sin el script, desde 4 columnas la primera queda fija al deslizar. */
@media (max-width: 560px) {
	:is(.tabla, .wp-block-table) table { font-size: 0.875rem; line-height: 1.45; }
	:is(.tabla, .wp-block-table) :is(th, td) { padding: 0.7rem 0.75rem; }
	:is(.tabla, .wp-block-table):not(.tabla-ancha) :is(th, td), :is(.tabla, .wp-block-table):not(.tabla-ancha) tbody :is(td, th):first-child { min-width: 6.6rem; }
	:is(.tabla, .wp-block-table) :is(thead th, .fila-encabezado > *) { font-size: 0.8rem; }
	:is(.tabla, .wp-block-table):not(.tabla-lista):has(tr > :nth-child(4)) :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--blanco); box-shadow: 1px 0 0 var(--linea-fuerte), 8px 0 12px -10px rgba(21, 54, 38, 0.35); }
	:is(.tabla, .wp-block-table):not(.tabla-lista):has(tr > :nth-child(4)) thead :is(th, td):first-child { background: var(--salvia); }
}

/* Tabla en tarjetas (.tabla-tarjetas la pone el script solo cuando la tabla no entra a lo ancho).
   Cada fila es una tarjeta: el primer dato (la primera columna, .celda-titulo) es el título, en negrita sobre la franja
   salvia del encabezado, y los demás van como «Encabezado: valor», uno debajo del otro. La fila de encabezado (<thead> o
   .fila-encabezado) queda oculta a la vista pero la leen los lectores de pantalla (los roles ARIA los pone el script).
   Solo en pantalla: al imprimir sale la tabla. */
@media screen {
	.wp-block-post-content > :is(.tabla, .wp-block-table).tabla-tarjetas { width: auto; max-width: var(--wp--style--global--content-size, 40rem); margin-inline: auto !important; }
	:is(.tabla, .wp-block-table).tabla-tarjetas { overflow: visible; border: 0; border-radius: 0; box-shadow: none; background: none; }
	.tabla-tarjetas :is(table, tbody, tfoot, tr, th, td, caption) { display: block; }
	.tabla-tarjetas table { width: 100%; font-size: 0.94rem; line-height: 1.5; }
	.tabla-tarjetas thead, .tabla-tarjetas.tabla-tarjetas tbody > tr.fila-encabezado { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; box-shadow: none; }
	.tabla-tarjetas :is(tbody, tfoot) > tr { overflow: hidden; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-m); box-shadow: 0 18px 30px -28px rgba(21, 54, 38, 0.55); }
	.tabla-tarjetas :is(tbody, tfoot) > tr + tr, .tabla-tarjetas :is(tbody, tfoot) + :is(tbody, tfoot) > tr:first-child { margin-top: 0.7rem; }
	.tabla-tarjetas.tabla-tarjetas tbody > tr.fila-encabezado + tr { margin-top: 0; }
	/* Cada dato: «Encabezado: valor», separados por una línea como las filas de la tabla */
	.tabla-tarjetas.tabla-tarjetas :is(tbody, tfoot) > tr > :is(td, th) { position: static; min-width: 0; padding: 0.7rem 1.15rem; border: 0; border-top: 1px solid var(--linea); background: none; box-shadow: none; font-size: inherit; font-weight: 400; line-height: 1.5; color: var(--tinta); }
	.tabla-tarjetas.tabla-tarjetas :is(tbody, tfoot) > tr > [data-label]:not(.celda-titulo)::before { content: attr(data-label) ": "; content: attr(data-label) ": " / ""; font-weight: 600; }
	/* El título de la tarjeta, en negrita sobre la franja salvia del encabezado. Si la primera columna viene combinada
	   desde una fila de arriba (rowspan), el título lo pone la fila (data-titulo) */
	.tabla-tarjetas.tabla-tarjetas :is(tbody, tfoot) > tr > .celda-titulo, .tabla-tarjetas.tabla-tarjetas :is(tbody, tfoot) > tr[data-titulo]::before { display: block; padding-block: 0.85rem 0.8rem; border-top: 0; border-bottom: 1px solid var(--linea-fuerte); background: var(--salvia); font-size: 1rem; font-weight: 600; line-height: 1.35; }
	.tabla-tarjetas.tabla-tarjetas :is(tbody, tfoot) > tr[data-titulo]::before { content: attr(data-titulo); content: attr(data-titulo) / ""; padding-inline: 1.15rem; }
	.tabla-tarjetas.tabla-tarjetas :is(tbody, tfoot) > tr > .celda-titulo + *, .tabla-tarjetas.tabla-tarjetas :is(tbody, tfoot) > tr[data-titulo] > :first-child { border-top: 0; }
	.tabla-tarjetas caption { padding: 0 0.2rem 0.75rem; text-align: left; }
	.wp-block-table.tabla-tarjetas figcaption { margin-top: 0.75rem; padding: 0 0.2rem; border-top: 0; }
}
@media screen and (max-width: 480px) {
	.tabla-tarjetas.tabla-tarjetas :is(tbody, tfoot) > tr > :is(td, th), .tabla-tarjetas.tabla-tarjetas :is(tbody, tfoot) > tr[data-titulo]::before { padding-inline: 1rem; }
}
/* Solo mientras el script mide (un instante, sin pintar): una tabla con «ancho fijo» se mide como las demás */
.tabla-midiendo table { table-layout: auto !important; }

/* Figuras y gráficos (también <picture> con versión de celular) */
.wp-block-post-content figure:where(:not(.wp-block-table, .wp-block-embed, .wp-block-pullquote)) { margin-inline: auto; }
.wp-block-post-content figure:where(:not(.wp-block-table, .is-resized)) :is(img, picture, svg) { display: block; width: 100%; height: auto; }
.wp-block-post-content figure:where(:not(.wp-block-table)) img { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-m); box-shadow: var(--sombra-tarjeta); }
.wp-block-post-content figcaption { margin-top: 0.75rem; margin-bottom: 0; padding-inline: 0.2rem; font-size: 0.9rem; line-height: 1.5; color: var(--texto); text-align: left; }
.wp-block-post-content figcaption strong { color: var(--tinta); }
.wp-block-post-content :is(figure.angosta, .is-style-angosta) { max-width: 100%; }
/* HTML sin bloques: WordPress (wpautop) envuelve <picture> en un <p> dentro de la figura */
.wp-block-post-content figure > p { margin: 0; }

/* ═════════════ 8. Piezas del artículo (patrones y clases del kit) ═════════════ */

/* «En corto»: la respuesta directa, en tarjeta menta (p.en-corto del kit o grupo con estilo «En corto») */
:is(.en-corto, .is-style-en-corto) { position: relative; padding: 1.3rem 3.2rem 1.4rem 1.5rem; background: var(--menta); border: 1px solid var(--menta-borde); border-radius: var(--radio-m); }
.wp-block-post-content > :is(.en-corto, .is-style-en-corto) { margin-block-start: 1.8rem; }
.wp-block-post-content > :is(.en-corto, .is-style-en-corto):first-child { margin-block-start: 0; }
.wp-block-post-content > :is(.en-corto, .is-style-en-corto) + p { margin-block-start: 1.6rem; }
.is-style-en-corto > * { margin-block: 0; }
.is-style-en-corto > * + * { margin-block-start: 0.8rem; }
:is(.en-corto, .is-style-en-corto)::after { content: ""; position: absolute; right: 1.15rem; top: 1.15rem; width: 1.3rem; height: 1.3rem; background: var(--verde); opacity: 0.4; -webkit-mask: var(--huella) center / contain no-repeat; mask: var(--huella) center / contain no-repeat; transform: rotate(16deg); }
@media (max-width: 480px) { :is(.en-corto, .is-style-en-corto) { padding: 1.15rem 1.15rem 1.2rem; } :is(.en-corto, .is-style-en-corto)::after { display: none; } }

/* «Cómo lo hacemos en ALLER.IA» */
:is(.seccion-marca, .is-style-seccion-marca) { position: relative; overflow: hidden; padding: clamp(1.4rem, 4vw, 2.2rem); background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-l); }
:is(.seccion-marca, .is-style-seccion-marca) > * { margin-block: 0; }
:is(.seccion-marca, .is-style-seccion-marca) > * + * { margin-block-start: 1.15rem; }
:is(.seccion-marca, .is-style-seccion-marca) > h2 { padding-right: 3rem; }
:is(.seccion-marca, .is-style-seccion-marca) > h2 + * { margin-block-start: 0.6rem; }
:is(.seccion-marca, .is-style-seccion-marca)::before, :is(.seccion-marca, .is-style-seccion-marca)::after { content: ""; position: absolute; width: 1.25rem; height: 1.25rem; background: var(--verde); opacity: 0.3; -webkit-mask: var(--huella) center / contain no-repeat; mask: var(--huella) center / contain no-repeat; }
:is(.seccion-marca, .is-style-seccion-marca)::before { right: 2.4rem; top: 1.9rem; transform: rotate(28deg); }
:is(.seccion-marca, .is-style-seccion-marca)::after { right: 1.2rem; top: 1.15rem; transform: rotate(38deg); }
@media (max-width: 480px) { :is(.seccion-marca, .is-style-seccion-marca) > h2 { padding-right: 2.2rem; } :is(.seccion-marca, .is-style-seccion-marca)::before { display: none; } }

/* Preguntas frecuentes: bloque Detalles (se abre y cierra), tarjetas .pregunta del kit y bloques de Yoast y Rank Math */
.preguntas-frecuentes > * { margin-block: 0; }
.preguntas-frecuentes > h2 + * { margin-block-start: 1.1rem; }
.preguntas-frecuentes > * + :is(.pregunta, .wp-block-details) { margin-block-start: 0.65rem; }
.wp-block-details + .wp-block-details { margin-block-start: 0.65rem; }
.wp-block-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.05rem; list-style: none; cursor: pointer; font-family: var(--serif); font-weight: 500; font-size: 1.24rem; line-height: 1.3; letter-spacing: -0.006em; color: var(--tinta); }
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after { content: ""; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--tarjeta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' stroke='%2314231a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat; transition: transform 150ms ease; }
.wp-block-details[open] > summary::after { transform: rotate(45deg); }
.wp-block-details > summary:focus-visible { outline-offset: 2px; border-radius: 0.4rem; }
.wp-block-details > :not(summary) { margin-block: 0; font-size: 1.03rem; line-height: 1.65; }
.wp-block-details > summary + * { margin-block-start: 0; }
.wp-block-details > :not(summary) + :not(summary) { margin-block-start: 0.8rem; }
.wp-block-details > :last-child:not(summary) { margin-block-end: 1.15rem; }
:is(.pregunta, .schema-faq-section, .rank-math-list-item) { padding: 1.15rem 1.35rem 1.25rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: 0.9rem; }
:is(.pregunta, .schema-faq-section, .rank-math-list-item) + :is(.pregunta, .schema-faq-section, .rank-math-list-item) { margin-block-start: 0.65rem; }
:is(.pregunta > h3, .schema-faq-question, .rank-math-question) { display: block; margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.24rem; line-height: 1.3; letter-spacing: -0.006em; color: var(--tinta); }
:is(.pregunta > h3 + *, .schema-faq-answer, .rank-math-answer) { margin-block-start: 0.45rem; }
:is(.pregunta > p, .schema-faq-answer, .rank-math-answer p) { margin-block-end: 0; font-size: 1.03rem; line-height: 1.65; }

/* «Qué hacer ahora»: pasos numerados en tarjetas (ol.que-hacer del kit o lista con estilo «Pasos numerados») */
.wp-block-post-content :is(ol.que-hacer, ol.is-style-que-hacer), :is(ol.que-hacer, ol.is-style-que-hacer) { display: grid; gap: 0.7rem; padding: 0; list-style: none; counter-reset: paso; }
:is(ol.que-hacer, ol.is-style-que-hacer) > li { position: relative; display: block; min-height: calc(2.5rem + 2.15rem); margin: 0; padding: 1.05rem 1.3rem 1.1rem calc(1.05rem + 2.5rem + 1rem); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-m); box-shadow: 0 18px 30px -28px rgba(21, 54, 38, 0.55); counter-increment: paso; }
:is(ol.que-hacer, ol.is-style-que-hacer) > li::before { content: counter(paso); position: absolute; left: 1.05rem; top: 1.05rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.7rem; background: var(--bosque); color: var(--lima); font-family: var(--mono); font-size: 1rem; font-weight: 500; line-height: 1; }
@media (max-width: 480px) {
	:is(ol.que-hacer, ol.is-style-que-hacer) > li { min-height: calc(2.1rem + 1.9rem); padding: 0.95rem 1rem 0.95rem calc(1rem + 2.1rem + 0.8rem); }
	:is(ol.que-hacer, ol.is-style-que-hacer) > li::before { left: 1rem; top: 0.95rem; width: 2.1rem; height: 2.1rem; font-size: 0.9rem; }
}

/* Llamada a la acción: caja bosque con botón lima.
   Kit: <p class="llamado"><strong>¿Pregunta?</strong> <a href="…">Botón</a> resto.</p>
   Bloques: grupo con estilo «Llamada a la acción» con párrafo .llamado-pregunta, texto y un botón. */
/* Primero un fondo liso: sin color-mix (Safari < 16,2, Chrome < 111) la línea con degradados no vale y la letra clara quedaría sobre fondo claro */
:is(.llamado, .is-style-llamado) { position: relative; overflow: hidden; padding: clamp(1.7rem, 5vw, 2.8rem); border-radius: var(--radio-l); color: var(--claro-texto); font-size: 1.05rem; line-height: 1.55; background: var(--bosque); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--lima) 5%, transparent) 0 1px, transparent 1px 8px), radial-gradient(70% 130% at 85% 130%, color-mix(in srgb, var(--verde) 70%, transparent), transparent 70%), var(--bosque); }
.wp-block-post-content > :is(.llamado, .is-style-llamado), .principal > :is(.llamado, .is-style-llamado) { margin-block-start: var(--seccion); }
p.llamado { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1rem; }
.is-style-llamado > * { position: relative; margin-block: 0; }
.is-style-llamado > * + * { margin-block-start: 0.7rem; }
.is-style-llamado > .wp-block-buttons { margin-block-start: 1.3rem; }
:is(p.llamado > strong:first-child, .llamado-pregunta) { flex-basis: 100%; padding-right: 2.5rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.15rem); line-height: 1.12; letter-spacing: -0.016em; color: var(--claro); text-wrap: balance; }
:is(p.llamado > a, .is-style-llamado .wp-block-button__link) { display: inline-flex; align-items: center; gap: 0.75rem; max-width: 100%; padding: 0.85rem 1.15rem; border-radius: 0.55rem; background: var(--lima); color: var(--bosque); font-weight: 600; font-size: 0.95rem; line-height: 1.3; text-decoration: none; box-shadow: 0 14px 24px -16px rgba(0, 0, 0, 0.7); transition: transform 150ms ease, background-color 150ms ease; }
:is(p.llamado > a, .is-style-llamado .wp-block-button__link)::after { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 1px; background: var(--bosque); }
:is(p.llamado > a, .is-style-llamado .wp-block-button__link):hover { transform: translateY(-1px); background: var(--lima-hover); color: var(--bosque); }
:is(.llamado, .is-style-llamado) :focus-visible { outline-color: var(--lima); }
.is-style-llamado a:not(.wp-element-button) { color: var(--lima); }
:is(.llamado, .is-style-llamado)::after { content: ""; position: absolute; right: 1.4rem; top: 1.5rem; width: 1.5rem; height: 1.5rem; background: var(--lima); opacity: 0.35; -webkit-mask: var(--huella) center / contain no-repeat; mask: var(--huella) center / contain no-repeat; transform: rotate(24deg); }
@media (max-width: 480px) {
	/* La pregunta ocupa todo el ancho: con «balance» y el hueco de la huella quedaba en renglones muy cortos */
	:is(p.llamado > strong:first-child, .llamado-pregunta) { padding-right: 1.6rem; text-wrap: pretty; }
	:is(p.llamado > a, .is-style-llamado .wp-block-button__link) { width: 100%; justify-content: center; text-align: center; }
	.is-style-llamado .wp-block-button { width: 100%; }
	:is(p.llamado > a, .is-style-llamado .wp-block-button__link)::after { display: none; }
}

/* ═════════════ 9. Relacionados ═════════════ */
.relacionados { padding-block: 0 clamp(3rem, 8vw, 5rem); }
.relacionados-titulo { margin-block-end: clamp(1rem, 3vw, 1.5rem) !important; padding-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--linea); font-size: var(--wp--preset--font-size--titulo-2); }
.principal:has(+ .relacionados) { padding-block-end: clamp(2.5rem, 6vw, 4rem); }

/* ═════════════ 10. Página 404 ═════════════ */
.no-encontrado { padding-block: clamp(2rem, 7vw, 5rem) clamp(1rem, 3vw, 2rem); }
.no-encontrado-contenido > * + * { margin-block-start: 1.1rem; }
.no-encontrado-contenido > h1 { margin-block-start: 1rem; }
.no-encontrado-contenido > .wp-block-search { margin-block-start: 1.8rem; }
.boton-claro .wp-block-button__link { background: var(--blanco); color: var(--tinta); border: 1px solid var(--linea-fuerte); }
.boton-claro .wp-block-button__link:hover { background: var(--tarjeta); color: var(--tinta); }

/* ═════════════ 11. Movimiento reducido e impresión ═════════════ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.tarjeta:hover, .capsula .wp-block-button__link:hover, :is(p.llamado > a, .is-style-llamado .wp-block-button__link):hover { transform: none; }
}
@media print {
	.cabecera, .cabecera:not(.block-editor-block-list__block) { position: static; }
	.capsula > .menu, .capsula .wp-block-buttons, .relacionados, .pie-menu { display: none; }
	:is(.tabla, .wp-block-table), .destacada img, .wp-block-post-content figure img, .tarjeta { box-shadow: none; }
	/* Tablas: siempre como tabla, entera en el ancho de la hoja (sin mínimos por celda ni desplazamiento que corte) */
	:is(.tabla, .wp-block-table) { overflow: visible; }
	:is(.tabla, .wp-block-table) :is(th, td), :is(.tabla, .wp-block-table) tbody :is(td, th):first-child { min-width: 0; }
	:is(.tabla, .wp-block-table) tr { break-inside: avoid; }
	:is(.llamado, .is-style-llamado) { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}