/*
Theme Name: ComunicaODS
Theme URI: https://comunicaods.es/
Author: ComunicaODS
Author URI: https://comunicaods.es/
Description: Tema hijo de Twenty Twenty-Five para la asociación ComunicaODS, organización sin ánimo de lucro dedicada a la comunicación multiactor de la Agenda 2030 y los Objetivos de Desarrollo Sostenible (ODS). Aplica la paleta y la tipografía de la marca, una cabecera con logotipo y menú principal, un pie de página institucional y clases auxiliares para la franja de colores ODS, tablas, tarjetas y metas ODS.
Template: twentytwentyfive
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.2
Version: 1.0.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: comunicaods
*/

/* ==========================================================================
   Variables propias
   Los 17 colores oficiales de los ODS. Para los ODS 12, 16 y 17 se usan los
   presets de la paleta del tema (theme.json).
   ========================================================================== */
:root {
	--cods-ods-1: #E5243B;
	--cods-ods-2: #DDA63A;
	--cods-ods-3: #4C9F38;
	--cods-ods-4: #C5192D;
	--cods-ods-5: #FF3A21;
	--cods-ods-6: #26BDE2;
	--cods-ods-7: #FCC30B;
	--cods-ods-8: #A21942;
	--cods-ods-9: #FD6925;
	--cods-ods-10: #DD1367;
	--cods-ods-11: #FD9D24;
	--cods-ods-12: var(--wp--preset--color--ods-12);
	--cods-ods-13: #3F7E44;
	--cods-ods-14: #0A97D9;
	--cods-ods-15: #56C02B;
	--cods-ods-16: var(--wp--preset--color--ods-16);
	--cods-ods-17: var(--wp--preset--color--ods-17);

	/* Degradado por tramos: 17 bandas de 100% / 17 cada una. */
	--cods-franja: linear-gradient(
		90deg,
		var(--cods-ods-1) 0 5.882%,
		var(--cods-ods-2) 5.882% 11.765%,
		var(--cods-ods-3) 11.765% 17.647%,
		var(--cods-ods-4) 17.647% 23.529%,
		var(--cods-ods-5) 23.529% 29.412%,
		var(--cods-ods-6) 29.412% 35.294%,
		var(--cods-ods-7) 35.294% 41.176%,
		var(--cods-ods-8) 41.176% 47.059%,
		var(--cods-ods-9) 47.059% 52.941%,
		var(--cods-ods-10) 52.941% 58.824%,
		var(--cods-ods-11) 58.824% 64.706%,
		var(--cods-ods-12) 64.706% 70.588%,
		var(--cods-ods-13) 70.588% 76.471%,
		var(--cods-ods-14) 76.471% 82.353%,
		var(--cods-ods-15) 82.353% 88.235%,
		var(--cods-ods-16) 88.235% 94.118%,
		var(--cods-ods-17) 94.118% 100%
	);

	--cods-radio: 12px;
	--cods-borde-suave: color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
	--cods-sombra-suave: 0 10px 28px -14px color-mix(in srgb, var(--wp--preset--color--azul-noche) 40%, transparent);
}

/* ==========================================================================
   .ods-franja (sobre core/separator)
   Anula el borde, la opacidad, la anchura (100px del estilo por defecto) y
   los márgenes verticales que aplican core y Twenty Twenty-Five.
   No se tocan los márgenes laterales ni la anchura máxima: así la franja
   sin alinear respeta el ancho de contenido (contentSize), "alignwide" usa
   el ancho amplio (wideSize) y "alignfull" sigue llegando al borde de la
   pantalla dentro de contenedores con relleno global.
   ========================================================================== */
hr.wp-block-separator.ods-franja.ods-franja {
	box-sizing: border-box;
	display: block;
	width: auto;
	height: 6px;
	margin-block: 0;
	padding: 0;
	border: 0;
	opacity: 1;
	color: transparent;
	background: var(--cods-franja);
}

/* ==========================================================================
   .tabla-ods (sobre core/table)
   ========================================================================== */
.wp-block-table.tabla-ods {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--cods-borde-suave);
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-table.tabla-ods table {
	width: 100%;
	border-collapse: collapse;
	table-layout: auto;
}

.wp-block-table.tabla-ods thead,
.wp-block-table.tabla-ods tfoot {
	border: 0;
}

.wp-block-table.tabla-ods th,
.wp-block-table.tabla-ods td {
	padding: 0.75rem 1rem;
	border: 0;
	border-block-end: 1px solid var(--cods-borde-suave);
	border-inline-end: 1px solid var(--cods-borde-suave);
	text-align: start;
	vertical-align: top;
	word-break: normal;
	overflow-wrap: break-word;
}

.wp-block-table.tabla-ods tr > :last-child {
	border-inline-end: 0;
}

.wp-block-table.tabla-ods tbody tr:last-child > * {
	border-block-end: 0;
}

.wp-block-table.tabla-ods thead th,
.wp-block-table.tabla-ods thead td {
	background-color: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base);
	font-weight: 700;
	vertical-align: bottom;
	border-color: color-mix(in srgb, var(--wp--preset--color--base) 25%, transparent);
}

.wp-block-table.tabla-ods tbody tr:nth-child(even) {
	background-color: var(--wp--preset--color--accent-5);
}

.wp-block-table.tabla-ods tbody > tr > :first-child {
	font-weight: 700;
	color: var(--wp--preset--color--azul-noche);
	white-space: nowrap;
}

.wp-block-table.tabla-ods figcaption {
	padding: 0.5rem 1rem;
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--small);
	text-align: start;
}

@media (max-width: 781px) {
	/* En móvil, las tablas de 2 columnas (dato/valor) se ajustan al ancho de
	   la pantalla. Las de 3 o más columnas se apilan si llevan la clase
	   .tabla-apilada (ver más abajo); si no, mantienen una anchura legible y
	   se desplazan en horizontal. */
	.wp-block-table.tabla-ods:not(.tabla-apilada) table:has(tr > :nth-child(3)) {
		min-width: 40rem;
	}

	.wp-block-table.tabla-ods tbody > tr > :first-child {
		white-space: normal;
	}
}

/* ==========================================================================
   .tarjeta y .meta-ods (sobre core/group o core/column)
   ========================================================================== */
.tarjeta,
.meta-ods {
	--cods-relleno: var(--wp--preset--spacing--40);
	box-sizing: border-box;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: var(--cods-radio);
	padding: var(--cods-relleno);
}

.meta-ods {
	--cods-meta: var(--wp--preset--color--accent-3);
}

/* La franja superior de 8px se pinta como fondo (y no como borde) para que
   el radio la recorte limpiamente, sin media luna en las esquinas. */
.meta-ods.meta-ods {
	border-top-color: transparent;
	padding-top: calc(var(--cods-relleno) + 7px);
	background: linear-gradient(var(--cods-meta), var(--cods-meta)) top / 100% 8px no-repeat border-box, var(--wp--preset--color--base);
}

.meta-ods-12 {
	--cods-meta: var(--wp--preset--color--ods-12);
}

.meta-ods-16 {
	--cods-meta: var(--wp--preset--color--ods-16);
}

.meta-ods-17 {
	--cods-meta: var(--wp--preset--color--ods-17);
}

/* Altura completa dentro de columnas y de rejillas de entradas. */
.wp-block-column.tarjeta,
.wp-block-column.meta-ods {
	align-self: stretch;
}

.wp-block-column > .tarjeta:only-child,
.wp-block-column > .meta-ods:only-child,
.wp-block-post > .tarjeta:only-child {
	height: 100%;
}

.wp-block-post-template .tarjeta:hover {
	box-shadow: var(--cods-sombra-suave);
}

@media not (prefers-reduced-motion) {
	.wp-block-post-template .tarjeta {
		transition: box-shadow 0.2s ease;
	}
}

/* ==========================================================================
   .cods-hero (héroe de Inicio). El color de fondo lo pone el bloque;
   aquí solo se añade una decoración sutil con tintes claros de la marca
   (verde lima muy transparente y azul claro), sin zonas oscuras detrás
   del texto.
   ========================================================================== */
.cods-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-image:
		radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--wp--preset--color--accent-1) 22%, transparent) 0, transparent 40%),
		radial-gradient(circle at 0% 100%, var(--wp--preset--color--accent-2) 0, color-mix(in srgb, var(--wp--preset--color--accent-2) 55%, transparent) 22%, transparent 48%),
		radial-gradient(circle at 70% 110%, color-mix(in srgb, var(--wp--preset--color--accent-1) 10%, transparent) 0, transparent 35%);
}

.cods-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -12rem;
	right: -9rem;
	box-sizing: border-box;
	width: 30rem;
	height: 30rem;
	border: 2.5rem solid color-mix(in srgb, var(--wp--preset--color--accent-1) 14%, transparent);
	border-radius: 50%;
	pointer-events: none;
}

/* En móvil y tableta el anillo se reduce y queda en la esquina, sin cruzar
   el texto, y el logo completo (que repite el de la cabecera) se reduce
   para no alargar el héroe. */
@media (max-width: 781px) {
	.cods-hero::before {
		top: -8rem;
		right: -8rem;
		width: 16rem;
		height: 16rem;
		border-width: 1.75rem;
	}

	.cods-hero .wp-block-image img {
		max-width: 13rem;
	}
}

/* ==========================================================================
   Secciones oscuras (texto "base"): los títulos y enlaces heredan el color
   del texto para que no queden en azul sobre azul. Si el bloque fija su
   propio color de títulos o enlaces (elements.heading / elements.link),
   prevalece ese color:
   - Títulos: especificidad (0,1,0), mayor que la del color global de los
     títulos (h1…h6) y menor que la de las reglas ".wp-elements-N h2" que
     genera el editor.
   - Enlaces: se excluyen los que están dentro de un bloque con color de
     enlace propio (.has-link-color).
   ========================================================================== */
:where(.has-base-color) :where(h1, h2, h3, h4, h5, h6):not(.has-text-color) {
	color: inherit;
}

.has-base-color a:where(:not(.wp-element-button, .has-link-color a)) {
	color: inherit;
}

/* Tarjetas blancas dentro de una sección oscura: recuperan los colores normales. */
.has-base-color :is(.tarjeta, .meta-ods):not(.has-text-color) {
	color: var(--wp--preset--color--contrast);
}

.has-base-color :is(.tarjeta, .meta-ods):not(.has-text-color) :where(h1, h2, h3, h4, h5, h6):not(.has-text-color) {
	color: var(--wp--preset--color--azul-noche);
}

.has-base-color :is(.tarjeta, .meta-ods):not(.has-text-color) a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--accent-3);
}

/* ==========================================================================
   Foco visible accesible
   ========================================================================== */
:where(.wp-site-blocks) :focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-3);
	outline-offset: 2px;
}

/* Sobre fondos oscuros el contorno azul no contrasta: se usa el verde lima. */
:where(.wp-site-blocks) .has-base-color :focus-visible {
	outline-color: var(--wp--preset--color--accent-1);
}

/* ==========================================================================
   Cabecera
   ========================================================================== */
@media (min-width: 782px) {
	/* Cabecera pegajosa solo en escritorio/tableta: el menú móvil (superposición
	   a pantalla completa por debajo de 600px) no se ve afectado. */
	.wp-site-blocks > .wp-block-template-part:has(> .cods-cabecera) {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 50;
	}

	.cods-cabecera {
		box-shadow: 0 4px 16px -10px color-mix(in srgb, var(--wp--preset--color--azul-noche) 45%, transparent);
	}

	/* Las anclas (#seccion) y el enlace "Saltar al contenido" no quedan tapados. */
	html {
		scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 7.5rem);
	}
}

/* El menú principal completo necesita unos 1000px. Para que nunca se parta
   en dos líneas:
   - entre 600 y 1023px se muestra el botón de menú (superposición), igual
     que en móvil (core solo lo hace por debajo de 600px);
   - entre 1024 y 1199px el menú se compacta (texto de 1rem y menos hueco). */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.cods-cabecera .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.cods-cabecera .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
	.cods-cabecera .wp-block-navigation {
		font-size: 1rem;
		column-gap: 1rem;
	}
}

@media (min-width: 600px) {
	.cods-cabecera .wp-block-site-logo {
		flex-shrink: 0;
	}
}

/* Página actual en el menú principal (y, en escritorio, el elemento padre
   de la subpágina actual). */
.cods-cabecera .wp-block-navigation-item__content[aria-current="page"],
.cods-cabecera .wp-block-navigation__responsive-container:not(.is-menu-open) .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-3);
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

/* Submenús desplegables (no afecta al menú móvil abierto). */
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--cods-borde-suave);
	border-radius: 8px;
	box-shadow: 0 14px 32px -14px color-mix(in srgb, var(--wp--preset--color--azul-noche) 40%, transparent);
	padding-block: var(--wp--preset--spacing--20);
}

.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--accent-3);
}

/* ==========================================================================
   Pie de página
   ========================================================================== */
.wp-site-blocks > .wp-block-template-part:has(> .cods-pie) {
	margin-block-start: 0;
}

.cods-pie a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.cods-pie a:where(:not(.wp-element-button)):hover,
.cods-pie a:where(:not(.wp-element-button)):focus-visible {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Enlaces dentro de párrafos (p. ej. el correo): subrayados siempre, para
   distinguirlos del texto que los rodea (WCAG 1.4.1). Los menús del pie no
   lo necesitan. El correo no se parte en dos líneas. */
.cods-pie p:not(.wp-block-site-title) a:where(:not(.wp-element-button)) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.cods-pie p:not(.wp-block-site-title) a:where(:not(.wp-element-button)):hover,
.cods-pie p:not(.wp-block-site-title) a:where(:not(.wp-element-button)):focus-visible {
	text-decoration-thickness: 2px;
}

.cods-pie a[href^="mailto:"] {
	white-space: nowrap;
}

/* Entre 782 y 1099px las cuatro columnas del pie serían demasiado estrechas:
   se colocan en una rejilla de 2 × 2 (por debajo de 782px, ver la regla siguiente). */
@media (min-width: 782px) and (max-width: 1099.98px) {
	.cods-pie .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.cods-pie .wp-block-columns > .wp-block-column {
		flex: 1 1 40% !important;
	}
}

/* Por debajo de 782px: "La asociación" y "Qué hacemos" en dos columnas; el
   nombre del sitio y "Contacto" ocupan todo el ancho. */
@media (max-width: 781px) {
	.cods-pie .wp-block-columns {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cods-pie .wp-block-columns > .wp-block-column:first-child,
	.cods-pie .wp-block-columns > .wp-block-column:last-child {
		grid-column: 1 / -1;
	}
}

/* Enlaces legales de la barra inferior: separados solo por hueco, sin
   caracteres separadores que puedan quedar al principio de una línea. */
.cods-pie .cods-legal.wp-block-navigation {
	column-gap: var(--wp--preset--spacing--40);
	row-gap: var(--wp--preset--spacing--20);
}

/* ==========================================================================
   Últimas entradas (core/latest-posts) en modo rejilla: tarjetas
   ========================================================================== */
.wp-block-latest-posts.is-grid:not(.is-layout-grid) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 782px) {
	.wp-block-latest-posts.is-grid.columns-2:not(.is-layout-grid) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-latest-posts.is-grid.columns-3:not(.is-layout-grid) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

ul.wp-block-latest-posts.is-grid.wp-block-latest-posts__list > li {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: auto;
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: var(--cods-radio);
}

.wp-block-latest-posts.is-grid .wp-block-latest-posts__post-title {
	color: var(--wp--preset--color--azul-noche);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.wp-block-latest-posts.is-grid .wp-block-latest-posts__post-title:hover,
.wp-block-latest-posts.is-grid .wp-block-latest-posts__post-title:focus-visible {
	color: var(--wp--preset--color--accent-3);
	text-decoration: underline;
}

.wp-block-latest-posts.is-grid .wp-block-latest-posts__post-date {
	order: -1;
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-latest-posts.is-grid .wp-block-latest-posts__post-excerpt {
	margin: 0;
}

/* ==========================================================================
   Rejillas de entradas (Noticias, archivos y búsqueda): el enlace
   "Leer más" se alinea en la base de cada tarjeta.
   ========================================================================== */
.wp-block-post-template .tarjeta {
	display: flex;
	flex-direction: column;
}

.wp-block-post-template .tarjeta > .wp-block-post-excerpt {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.wp-block-post-template .wp-block-post-excerpt__more-text {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
}

/* ==========================================================================
   Paginación de consultas. core/query-pagination no admite márgenes, así
   que la separación con la rejilla se da aquí. Los números se muestran
   como botones con una zona pulsable de 44px.
   ========================================================================== */
.wp-block-query > .wp-block-query-pagination {
	margin-block-start: var(--wp--preset--spacing--60);
}

.wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.wp-block-query-pagination-numbers .page-numbers {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	margin: 0;
	padding-inline: 0.5rem;
	border: 1px solid var(--cods-borde-suave);
	border-radius: 6px;
	text-decoration: none;
}

.wp-block-query-pagination-numbers a.page-numbers:hover {
	border-color: var(--wp--preset--color--accent-3);
	background-color: var(--wp--preset--color--accent-5);
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background-color: var(--wp--preset--color--accent-3);
	border-color: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base);
	font-weight: 700;
}

.wp-block-query-pagination-numbers .page-numbers.dots {
	border-color: transparent;
}

/* ==========================================================================
   Ritmo vertical del contenido: los títulos de sección (H2) y subsección
   (H3) se separan más del bloque anterior que de su propio texto.
   Solo afecta a los hijos directos del contenido (no a las secciones de
   Inicio ni a las tarjetas).
   ========================================================================== */
.wp-block-post-content > h2.wp-block-heading:not(:first-child) {
	margin-block-start: max(var(--wp--preset--spacing--60), 2.5rem);
}

.wp-block-post-content > h3.wp-block-heading:not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Correos destacados: el correo en tamaño grande se ajusta al ancho en
   móviles estrechos y, como último recurso, cualquier correo largo puede
   partirse antes de desbordar su caja. */
.tarjeta .has-large-font-size > a[href^="mailto:"] {
	font-size: clamp(1rem, 5vw, 1.375rem);
}

.wp-block-post-content a[href^="mailto:"] {
	overflow-wrap: break-word;
}

/* ==========================================================================
   Tarjetas de columnas cuyo último párrafo es solo un enlace ("Conoce…"):
   en escritorio el enlace se alinea en la base de la tarjeta.
   ========================================================================== */
@media (min-width: 782px) {
	.wp-block-column.tarjeta:has(> p:last-child > a:only-child) {
		display: flex;
		flex-direction: column;
	}

	.wp-block-column.tarjeta > p:last-child:has(> a:only-child) {
		margin-top: auto;
		padding-top: var(--wp--preset--spacing--20);
	}
}

/* ==========================================================================
   Metas ODS de Inicio (.cods-metas): con 5 tarjetas en 3 columnas, las dos
   de la última fila se centran en lugar de dejar una celda vacía.
   ========================================================================== */
@media (min-width: 1100px) {
	.cods-metas.is-layout-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.cods-metas.is-layout-grid > * {
		grid-column: span 2;
	}

	.cods-metas.is-layout-grid > :nth-child(3n + 1):nth-last-child(2) {
		grid-column: 2 / span 2;
	}
}

/* ==========================================================================
   Tablas apiladas (.tabla-apilada, junto a .tabla-ods): en móvil cada fila
   se convierte en una ficha y cada celda lleva delante el nombre de su
   columna. Los nombres se definen por tabla (.tabla-metas, .tabla-cookies).
   ========================================================================== */
@media (max-width: 781px) {
	.wp-block-table.tabla-ods.tabla-apilada table {
		min-width: 0;
	}

	.wp-block-table.tabla-apilada thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.wp-block-table.tabla-apilada tbody tr {
		display: block;
		border-block-end: 1px solid var(--cods-borde-suave);
	}

	.wp-block-table.tabla-apilada tbody tr:last-child {
		border-block-end: 0;
	}

	.wp-block-table.tabla-ods.tabla-apilada tbody td {
		display: block;
		border: 0;
		padding-block: 0.35rem;
	}

	.wp-block-table.tabla-ods.tabla-apilada tbody td:first-child {
		padding-block-start: 0.9rem;
	}

	.wp-block-table.tabla-ods.tabla-apilada tbody td:last-child {
		padding-block-end: 0.9rem;
	}

	.wp-block-table.tabla-apilada tbody td:not(:first-child)::before {
		display: block;
		color: var(--wp--preset--color--accent-4);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.02em;
		text-transform: uppercase;
	}

	.tabla-metas tbody td:first-child::before {
		content: "Meta ";
	}

	.tabla-metas tbody td:nth-child(2)::before {
		content: "Indicador";
	}

	.tabla-metas tbody td:nth-child(3)::before {
		content: "Actividades de la asociación y su impacto";
	}

	.tabla-cookies tbody td:nth-child(2)::before {
		content: "Finalidad";
	}

	.tabla-cookies tbody td:nth-child(3)::before {
		content: "Duración";
	}

	.tabla-cookies tbody td:nth-child(4)::before {
		content: "Tipo";
	}
}

/* ==========================================================================
   Móvil (menos de 600px)
   ========================================================================== */
@media (max-width: 599.98px) {
	/* Tarjetas: menos relleno para ganar ancho de texto. */
	.tarjeta,
	.meta-ods {
		--cods-relleno: var(--wp--preset--spacing--30);
	}

	.tarjeta .wp-block-list.is-style-checkmark-list {
		padding-inline-start: 1.25em;
	}

	/* Botones apilados a todo el ancho, con el mismo tamaño y en una línea. */
	.wp-block-buttons > .wp-block-button {
		flex: 1 1 100%;
	}

	.wp-block-buttons > .wp-block-button > .wp-block-button__link {
		display: block;
		box-sizing: border-box;
		width: 100%;
		padding-inline: 1rem;
	}

	.wp-block-search__button {
		padding-inline: 1rem;
	}
}