/*
Theme Name: New Greenwire
Theme URI: 
Author: Greenpeace
Author URI: 
Description: 
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 7.2
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: new-greenwire
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news


/*
 * IMPORTANT: This file is only served on the frontend when `SCRIPT_DEBUG` is enabled;
 * in most instances, the `style.min.css` file will be served. It is not recommended that you
 * use the Theme File Editor to modify this stylesheet. Instead, add the necessary style
 * overrides via "Additional CSS" in the Site Editor.
 */

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */

/* Fontello - Iconos Sociales */
@import url('assets/css/fontello.css');

a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
 */
.more-link {
	display: block;
}

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */
:where(pre) {
	overflow-x: auto;
}

/* Estilos de Bloque para Victoria */
/* Cuando el estilo es izquierda */
[class*="is-style-victory-left"] .gp-victory-label {
    left: 0 !important;
    right: auto !important;
}

[class*="is-style-victory-left"] .wp-block-heading,
[class*="is-style-victory-left"] p:not(.gp-victory-label) {
    text-align: left !important;
}

/* Cuando el estilo es derecha */
[class*="is-style-victory-right"] .gp-victory-label {
    right: 0 !important;
    left: auto !important;
}

[class*="is-style-victory-right"] .wp-block-heading,
[class*="is-style-victory-right"] p:not(.gp-victory-label) {
    text-align: right !important;
}

/* Forzar alineación a la izquierda en mobile para todos los estilos de victoria */
@media (max-width: 768px) {
    [class*="is-style-victory-left"], [class*="is-style-victory-right"] {
        padding-left: 15px;
        padding-right: 15px;
    }

    [class*="is-style-victory-right"] .gp-victory-label {
        left: 0 !important;
        right: auto !important;
    }

    [class*="is-style-victory-right"] .wp-block-heading,
    [class*="is-style-victory-right"] p:not(.gp-victory-label) {
        text-align: left !important;
    }
}

[class*="is-style-victory-left"], [class*="is-style-victory-right"] {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 1.5rem;
}

.gp-victory-image-container {
    position: relative !important;
    margin-bottom: 20px;
    display: block;
}

.gp-victory-label {
    position: absolute !important;
    top: 0 !important;
    z-index: 10;
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    /* Default position */
    left: 0;
}

/* Estilos Bloque Compartir */
.gp-social-share-container {
    text-align: center;
    padding: 20px 0;
}

.gp-social-share-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.gp-social-share-item a {
    font-size: 24px;
    color: var(--wp--preset--color--contrast);
    transition: transform 0.2s ease, opacity 0.2s ease;
    text-decoration: none !important;
}

.gp-social-share-item a:hover {
    transform: scale(1.2);
    opacity: 0.8;
}

.share_facebook { color: #1877F2 !important; }
.share_twitter { color: #0085ff !important; } /* Bluesky blue */
.share_email { color: var(--wp--preset--color--primary) !important; }

.whatsapp-icon {
    width: 28px;
    height: 28px;
    vertical-align: middle;
}

.gp-social-share-title {
    font-family: var(--wp--preset--font-family--rubik);
    font-weight: 500;
    color: var(--wp--preset--color--accent-4);
}

/* Author Box Style Overrides */
.gp-author-post-count {
    color: var(--wp--preset--color--primary);
    margin: 0 !important;
    font-weight: 500;
}

.wp-block-post-author-biography.has-accent-4-color {
    color: var(--wp--preset--color--accent-4) !important;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .wp-block-columns:has(.gp-author-post-count) {
        flex-direction: column;
        text-align: center;
    }
    .wp-block-column {
        flex-basis: 100% !important;
        margin-bottom: 1rem;
    }
    .wp-block-group:has(> .gp-author-post-count) {
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }
}

/* ==========================================================================
   Cabeceras Greenpeace — patterns/cabecera-*.php
   ==========================================================================
   Estilo de bloque "Cabecera" de core/cover (`is-style-cabecera`), calcado del
   hero de es.greenpeace.org medido a 1440 y a 390: foto a pantalla completa y
   sin velo; texto en una columna de 824 dentro de 1108, a media altura; titular
   y subtítulo EN LÍNEA sobre negro al 60%, una caja por renglón, como su
   `h1.new.title > a` y su `label.bg-semiblack`.

   Son atributos, y se ven en el editor: colores, rellenos y márgenes a 0, el
   peso del subtítulo, el ancho de la columna y el tamaño del botón. Aquí queda
   lo que no puede serlo: que titular y subtítulo vayan en línea, los tamaños
   fuera de la escala (22 y 60; en móvil, los del Figma), el alto y los rellenos,
   que cambian con el ancho, y el botón de bajar.

   El marcado lo escribe new_greenwire_cabecera() en inc/heros.php; de ahí salen
   las clases gp-cabecera__*.
   ========================================================================== */

.wp-block-cover.is-style-cabecera {
	min-height: 100vh;
	padding-block: 0;
}

/* El contenedor interno, a todo el alto y con el texto centrado dentro: así el
   botón de bajar se ancla al pie sin tocar el `position: relative` del core. Ese
   relative es lo que hace efectivo su `z-index: 1`; sin él la foto se pinta
   ENCIMA del texto (le pasó al hero anterior, hero-scroll).
   Sin relleno lateral: en las plantillas (page-grupo, page-hero) el core le
   pone el global (`has-global-padding`) y se sumaba a los 16 del cover. */
.is-style-cabecera .wp-block-cover__inner-container,
.is-style-banda-foto .wp-block-cover__inner-container {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-inline: 0;
}

/* Item flex con los `margin: auto` del layout `constrained`: sin el 100% la
   fila se encoge al ancho del texto y los márgenes la centran. */
.is-style-cabecera .wp-block-cover__inner-container > .wp-block-columns,
.is-style-banda-foto .wp-block-cover__inner-container > .wp-block-columns {
	width: 100%;
}

@media (min-width: 1024px) {
	/* 110 arriba —la barra, 48 + 62— y 98 abajo, la franja de su botón de bajar:
	   el texto queda centrado donde el suyo. */
	.is-style-cabecera .wp-block-cover__inner-container {
		padding-block: 110px 98px;
	}
}

@media (max-width: 1023px) {
	/* Los 574 del Figma (1 · Campaña principal). A pantalla completa quedaba
	   demasiado alto, sobre todo en tablet. */
	.wp-block-cover.is-style-cabecera {
		min-height: 574px;
	}

	/* La cabecera de una página, sin botón: 440 y el texto a 48 del pie ("1 ·
	   Cabecera de página (foto)" de "Espacios de activismo · 390"). */
	.wp-block-cover.is-style-cabecera:not(:has(.gp-cabecera__cta)) {
		min-height: 440px;
	}

	.is-style-cabecera:not(:has(.gp-cabecera__cta)) .wp-block-cover__inner-container {
		padding-bottom: 48px;
	}
}

.is-style-cabecera h1,
.is-style-cabecera .gp-cabecera__subtitulo {
	display: inline;
	line-height: normal;
}

.is-style-cabecera h1 {
	font-size: 60px;
}

.is-style-cabecera .gp-cabecera__subtitulo {
	font-size: 22px;
}

/* La etiqueta ("Campaña") mide lo que su texto, no toda la columna. */
.is-style-cabecera .gp-cabecera__etiqueta,
.is-style-banda-foto .gp-cabecera__etiqueta {
	width: fit-content;
}

/* Si el titular lleva enlace, blanco y sin subrayar, como el suyo. */
.is-style-cabecera h1 a {
	color: inherit;
	text-decoration: none;
}

/* El botón es su `.button-2.button-square`: verde, Rubik 700 y mayúsculas salen
   de theme.json. Aquí el 14, el relleno de 15 (fuera de la escala), sus 5 de
   margen y el verde claro al pasar, que no está en la paleta. */
.is-style-cabecera .gp-cabecera__cta {
	margin-top: 5px;
}

.is-style-cabecera .gp-cabecera__cta .wp-block-button__link {
	font-size: var(--wp--preset--font-size--small);
	line-height: normal;
	padding: 8px 15px;
}

.is-style-cabecera .gp-cabecera__cta .wp-block-button__link:hover,
.is-style-banda-foto .gp-cabecera__cta .wp-block-button__link:hover {
	background-color: #78c866;
}

/* Móvil, del Figma "Red de Voluntarios" (1 · Campaña principal, a 390): el
   texto abajo, a 40 del pie; titular Rubik 700 de 38 con una caja por renglón;
   entradilla en una sola caja de 4/8, Rubik 600 de 17; botón de 15 con 15/20
   de relleno, a 20 del texto. Los rellenos llevan `!important` porque sus
   atributos los escriben en línea (el 0 que anula el 1.25em 2.375em del core),
   también en el contenido ya guardado. Vale también para tablet, hasta 1023,
   el mismo corte que la barra móvil: el Figma no tiene tablet. */
@media (max-width: 1023px) {
	.is-style-cabecera .wp-block-cover__inner-container {
		justify-content: flex-end;
		padding-block: 64px 40px;
	}

	/* La caja de letra de Rubik a 38 mide 46: con 3 arriba y abajo llega a los
	   52 del paso de línea y los renglones se tocan sin solaparse (el Figma dice
	   51; con 51, Chrome redondea el medio interlineado y deja medio píxel de
	   foto entre el titular y la entradilla). */
	.is-style-cabecera h1 {
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
		font-size: 38px;
		font-weight: 700;
		letter-spacing: -0.005em;
		line-height: 52px;
		padding: 3px 8px !important;
	}

	.is-style-cabecera .gp-cabecera__subtitulo {
		display: block;
		font-family: var(--wp--preset--font-family--rubik);
		font-size: 17px;
		letter-spacing: 0.01em;
		line-height: 1.6;
		padding-block: 4px !important;
	}

	.is-style-cabecera .gp-cabecera__cta {
		margin-top: 20px;
	}

	.is-style-cabecera .gp-cabecera__cta .wp-block-button__link {
		font-size: 15px;
		letter-spacing: 0.02em;
		line-height: 1.1;
		padding: 15px 20px;
	}
}

/* El botón de bajar, su #header-scroll-btn: 50 × 50 verde, pegado al pie y al
   borde derecho de los 1110 de la barra, con el chevrón de Fontello. El texto
   del botón sigue ahí para el lector de pantalla, a tamaño 0. Solo escritorio;
   el clic lo escucha assets/js/theme.js. */
.is-style-cabecera .gp-cabecera__bajar {
	bottom: 0;
	position: absolute;
	right: calc((100% - 1110px) / 2);
}

.gp-scroll-down-btn .wp-block-button__link,
.gp-scroll-down-btn .wp-block-button__link:hover {
	align-items: center;
	background-color: var(--wp--preset--color--primary);
	display: flex;
	font-size: 0;
	height: 50px;
	justify-content: center;
	padding: 0;
	width: 50px;
}

.gp-scroll-down-btn .wp-block-button__link::before {
	content: "\e836";
	font-family: "fontello";
	font-size: 20px;
	line-height: 1;
}

@media (max-width: 1023px) {
	.is-style-cabecera .gp-cabecera__bajar {
		display: none;
	}
}

/* ==========================================================================
   Banda con foto — patterns/banda-foto.php
   ==========================================================================
   La cabecera a media página: "4 · Espacios de activismo" del Figma de la Red
   de Voluntarios, medida a 390. Misma estructura (new_greenwire_cabecera() con
   `banda`) y estas medidas: 560 de alto con el texto abajo, a 36 del pie;
   titular h2 de 32 con una caja por renglón (40 desde 1024: a lo ancho de
   escritorio, 32 se queda corto); subtítulo en una sola caja de 4/8, Rubik 500
   de 16/1,6; botón de 15 con 15/20, a 20. Los rellenos llevan `!important`
   por lo mismo que en la cabecera: el atributo los escribe en línea.
   ========================================================================== */

.wp-block-cover.is-style-banda-foto {
	min-height: 560px;
	padding-block: 0;
}

.is-style-banda-foto .wp-block-cover__inner-container {
	justify-content: flex-end;
	padding-block: 64px 36px;
}

/* La caja de letra de Rubik a 32 mide 38: con 3 arriba y abajo, los 44 del
   paso de línea, y los renglones se tocan sin solaparse. El h1 es el de las
   páginas de gracias, donde la banda hace de cabecera. */
.is-style-banda-foto h1,
.is-style-banda-foto h2 {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	display: inline;
	font-size: 32px;
	line-height: 44px;
	padding: 3px 8px !important;
}

.is-style-banda-foto .gp-cabecera__subtitulo {
	display: block;
	font-family: var(--wp--preset--font-family--rubik);
	font-size: 16px;
	letter-spacing: 0.01em;
	line-height: 1.6;
	padding-block: 4px !important;
}

.is-style-banda-foto .gp-cabecera__cta {
	margin-top: 20px;
}

.is-style-banda-foto .gp-cabecera__cta .wp-block-button__link {
	font-size: 15px;
	letter-spacing: 0.02em;
	line-height: 1.1;
	padding: 15px 20px;
}

@media (min-width: 1024px) {
	/* A 40 la caja de letra mide 47: con 4 arriba y abajo, 55 (1,26 × 40 + 4). */
	.is-style-banda-foto h1,
	.is-style-banda-foto h2 {
		font-size: 40px;
		line-height: 55px;
		padding-block: 4px !important;
	}
}

/* Bienvenida (patterns/introduccion.php): las negritas del Figma son Work Sans
   SemiBold, no el 700 de <strong>. */
.gp-introduccion__texto strong {
	font-weight: 600;
}

/* El "Botón Sticky" del Figma: pasado su sitio, "Hazte voluntari@" se queda
   abajo en la pantalla hasta que asoma el pie, que ya trae su llamada a unirse.
   La clase `is-fijo` la pone assets/js/theme.js. Móvil y tablet; la caja guarda
   su alto para que la banda no encoja al soltarse el botón. */
@media (max-width: 1023px) {
	.gp-introduccion__boton {
		min-height: 47px;
	}

	.gp-introduccion__boton.is-fijo > .wp-block-button.wp-block-button__width-100 {
		bottom: var(--wp--preset--spacing--40);
		left: var(--wp--preset--spacing--40);
		position: fixed;
		right: var(--wp--preset--spacing--40);
		width: auto;
		z-index: 900;
	}
}

/* Los saltos del titular son del Figma móvil. En tablet y escritorio corre a
   lo ancho de su columna. */
@media (min-width: 700px) {
	.gp-introduccion h2 br {
		display: none;
	}
}

/* Agenda (patterns/agenda-proxima.php): en escritorio las actividades van en
   tres columnas y un botón a todo el ancho pesaría demasiado; se queda a su
   ancho, centrado. El 100 del atributo es el de móvil y tablet (Figma). */
@media (min-width: 1024px) {
	.gp-agenda-banda .wp-block-buttons > .wp-block-button.wp-block-button__width-100,
	.gp-historias-banda .wp-block-buttons > .wp-block-button.wp-block-button__width-100,
	.gp-recursos-banda .wp-block-buttons > .wp-block-button.wp-block-button__width-100,
	.gp-boletin .wp-block-buttons > .wp-block-button.wp-block-button__width-100,
	.gp-grupo__contacta > .wp-block-button.wp-block-button__width-100 {
		flex-basis: auto;
		width: auto;
	}
}

/* Recursos (patterns/recursos.php): la fila del Figma con la raya encima, el
   chevrón verde oscuro a la derecha y la fila entera clicable (el enlace del
   título la cubre). Los 17 del título no están en la escala. Desde 1024, las
   tres en fila, como la agenda. */
.gp-recurso {
	border-top: 1px solid #dedfdb;
	position: relative;
}

.gp-recurso::after {
	background-color: var(--wp--preset--color--primary-dark);
	content: "";
	flex: none;
	height: 20px;
	-webkit-mask: url(assets/images/iconos/chevron.svg) center / contain no-repeat;
	mask: url(assets/images/iconos/chevron.svg) center / contain no-repeat;
	transition: transform 0.2s ease;
	width: 20px;
}

.gp-recurso:hover::after {
	transform: translateX(3px);
}

.gp-recurso .gp-recurso__texto {
	flex: 1;
	min-width: 0;
}

.gp-recurso__titulo {
	font-size: 17px;
}

.gp-recurso__titulo a {
	color: inherit;
	text-decoration: none;
}

.gp-recurso__titulo a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.gp-recurso:hover .gp-recurso__titulo a,
.gp-recurso__titulo a:focus-visible {
	text-decoration: underline;
}

@media (min-width: 1024px) {
	.gp-recursos {
		column-gap: var(--wp--preset--spacing--60);
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Botón con borde (estilo "Contorno" del core, el Ghost del Figma): el core le
   quita el fondo y el color del tema también al pasar, así que no cambiaba. Se
   rellena de `contrast`, como el botón del tema. */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):not(.has-text-color):hover {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Enlace con flecha ("Publica tu historia"): la flecha del Figma como máscara,
   del color del enlace. */
.gp-enlace-flecha a {
	align-items: center;
	display: inline-flex;
	gap: 4px;
	text-decoration: none;
}

.gp-enlace-flecha a::after {
	background-color: currentColor;
	content: "";
	height: 16px;
	-webkit-mask: url(assets/images/iconos/flecha.svg) center / contain no-repeat;
	mask: url(assets/images/iconos/flecha.svg) center / contain no-repeat;
	width: 16px;
}

.gp-enlace-flecha a:hover,
.gp-enlace-flecha a:focus-visible {
	text-decoration: underline;
}

/* ==========================================================================
   Historias, el listado — patterns/historias-archivo.php (/historias/)
   ==========================================================================
   Tarjetas en `tertiary`: foto 3/2 con la etiqueta amarilla del tipo encima,
   título, extracto y autoría abajo del todo. La tarjeta entera es el enlace del
   título. En la primera página la primera va en grande: a todo el ancho y,
   desde 700, con la foto a la izquierda. El degradado de la foto que falta es
   el de la banda de historias de la portada. */

.gp-historia {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
}

/* Sin foto, el hueco del Figma, para que la rejilla no baile. */
.gp-historia:not(:has(.gp-historia__foto))::before {
	aspect-ratio: 3 / 2;
	background: linear-gradient(180deg, #5e6159 0%, #1c1f1c 100%);
	content: "";
	display: block;
}

.gp-historia .gp-historia__foto {
	margin: 0;
	overflow: hidden;
}

.gp-historia__foto img {
	transition: transform 0.3s ease;
}

.gp-historia:hover .gp-historia__foto img {
	transform: scale(1.03);
}

.gp-historia .gp-historia__texto {
	display: flex;
	flex: 1;
	flex-direction: column;
}

/* La etiqueta del tipo, encima de la foto, como el "Tag" del Figma. */
.gp-historia .gp-historia__tipo {
	left: var(--wp--preset--spacing--40);
	margin: 0;
	pointer-events: none;
	position: absolute;
	top: var(--wp--preset--spacing--40);
	width: fit-content;
	z-index: 1;
}

.gp-historia__titulo {
	font-size: var(--wp--preset--font-size--x-large);
}

.gp-historia__titulo a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.gp-historia__titulo a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.gp-historia:hover .gp-historia__titulo a,
.gp-historia__titulo a:focus-visible {
	text-decoration: underline;
}

.gp-historia__extracto .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* La autoría, al pie de la tarjeta aunque el título ocupe menos. */
.gp-historia .gp-historia__autoria {
	color: var(--wp--preset--color--text-mute);
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

/* La primera, en grande, solo en la primera página (`paged` es de la 2 en adelante). */
body:not(.paged) .gp-historias-lista .wp-block-post-template > li:first-child {
	grid-column: 1 / -1;
}

body:not(.paged) .gp-historias-lista .wp-block-post-template > li:first-child .gp-historia__titulo {
	font-size: var(--wp--preset--font-size--4-x-large);
	line-height: 1.2;
}

@media (min-width: 700px) {
	body:not(.paged) .gp-historias-lista .wp-block-post-template > li:first-child .gp-historia {
		display: grid;
		grid-template-columns: 3fr 2fr;
	}

	body:not(.paged) .gp-historias-lista .wp-block-post-template > li:first-child .gp-historia__texto {
		justify-content: center;
		padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	}

	body:not(.paged) .gp-historias-lista .wp-block-post-template > li:first-child .gp-historia__autoria {
		margin-top: 0;
	}
}

/* La paginación: números en cajas de 40, la actual en verde. */
.gp-paginacion {
	font-family: var(--wp--preset--font-family--rubik);
	font-weight: 600;
	gap: var(--wp--preset--spacing--20);
}

.gp-paginacion a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.gp-paginacion .page-numbers {
	align-items: center;
	display: inline-flex;
	height: 40px;
	justify-content: center;
	min-width: 40px;
	padding-inline: var(--wp--preset--spacing--20);
}

.gp-paginacion .page-numbers.current {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.gp-paginacion a.page-numbers:hover {
	background-color: var(--wp--preset--color--tertiary);
}

.gp-paginacion .wp-block-query-pagination-previous,
.gp-paginacion .wp-block-query-pagination-next {
	color: var(--wp--preset--color--primary);
}

/* Embred Youtube */
.wp-block-embed__wrapper::before {
    padding-top: 0 !important;
}

/* Visibility Utilities */
@media (max-width: 991px) {
    .hide-on-mobile {
        display: none !important;
    }
}
@media (min-width: 992px) {
    .hide-on-desktop {
        display: none !important;
    }
}

/* Equal heights for Columns with flexible inner groups */
.wp-block-columns.are-vertically-aligned-stretch > .wp-block-column {
    display: flex;
    flex-direction: column;
}

.wp-block-columns.are-vertically-aligned-stretch > .wp-block-column > .wp-block-group {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Enlace destacado — estilo de bloque de core/paragraph (tres columnas con
   icono). Sin subrayado; al pasar, subrayado y en el color del texto. Sin
   !important: las reglas de enlace de theme.json van con :where() y pesan cero. */
.is-style-enlace-destacado a {
	text-decoration: none;
}

.is-style-enlace-destacado a:hover {
	text-decoration: underline;
	color: var(--wp--preset--color--contrast);
}

/* Tarjeta enlazada — estilo de bloque de core/group (cajas de campañas,
   inc/cajas-campanas.php). Fondo, color, relleno, hueco y tipografía son
   atributos en el patrón. Aquí solo lo que el editor no sabe: el enlace del
   texto se estira sobre toda la caja, sin subrayado, y el hover la eleva a
   partir de 768. */
.is-style-tarjeta-enlace {
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.is-style-tarjeta-enlace a {
	text-decoration: none;
}

.is-style-tarjeta-enlace a::after {
	content: "";
	position: absolute;
	inset: 0;
}

@media (min-width: 768px) {
	.is-style-tarjeta-enlace:hover {
		transform: translateY(-5px);
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
	}
}

/* Video Embeds Mobile Padding */
@media (max-width: 768px) {
    .wp-block-embed-youtube,
    .wp-block-embed,
    .wp-block-video {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Simple Header Logo */
.gp-header-simple-logo {
    margin: 0 !important;
}

.gp-header-simple-logo img {
    height: 28px;
    width: auto;
}

@media (max-width: 782px) {
    .gp-header-simple-logo img {
        height: 22px;
    }
}

.gp-header-simple-logo a:focus:not(:focus-visible) {
    outline: none;
}

/* Footer links — sin subrayado */
footer a {
    text-decoration: none !important;
}

/* Footer — líneas divisorias entre secciones en móvil */
@media (max-width: 782px) {
    footer .is-layout-flex > .wp-block-group {
        width: 100%;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    footer .is-layout-flex > .wp-block-group + .wp-block-group {
        border-top: 1px solid rgba(255, 255, 255, 0.25);
        padding-top: 24px;
        margin-top: 8px;
    }
}

/* Utility: alinear bloque al fondo en contenedor flex */
.gp-align-bottom {
    align-self: flex-end;
}

/* Imagen + texto — ajustes responsive */
@media (max-width: 768px) {
    .gp-cover-equal-height > .wp-block-column > .wp-block-cover {
        flex: none;
        aspect-ratio: 16 / 9 !important;
        min-height: unset !important;
        width: 100%;
    }

    .gp-cover-equal-height .wp-block-heading {
        font-size: 22px !important;
        font-weight: 500 !important;
    }

    .gp-cover-equal-height .wp-block-column p {
        font-size: 16px !important;
    }

    /* Aqui habia dos reglas heredadas del tema viejo, `footer h2,h3,h4` a 18px
       y `footer p` a 15px, las dos con !important. Pisaban en movil CUALQUIER
       tamano puesto desde el editor dentro del pie: los paises del selector
       internacional salian a 15 en vez de a los 16 de su atributo, y la barra
       legal tambien, en vez de a sus 12. Fuera: los tamanos del pie son
       atributos de bloque, no reglas de una hoja global. */
}

/* Imagen que iguala la altura de la columna de texto */
.gp-cover-equal-height {
    align-items: stretch !important;
}

.gp-cover-equal-height > .wp-block-column {
    display: flex;
    flex-direction: column;
    align-self: stretch !important;
}

.gp-cover-equal-height > .wp-block-column > .wp-block-cover {
    flex: 1;
    min-height: unset !important;
}

/* Sticky header — solo móvil */
@media (max-width: 991px) {
    .header-sticky {
        position: sticky;
        top: 0;
        z-index: 100;
    }
}

/* Accordion / FAQ Style */
.gp-accordion-wrapper {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .gp-accordion-wrapper {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

.gp-accordion {
    border-top: 1px solid #ddd;
}

.gp-accordion summary {
    list-style: none;
    padding: 1.2rem 0;
    cursor: pointer;
    font-family: var(--wp--preset--font-family--rubik);
    font-weight: 500;
    font-size: 20px;
    color: var(--wp--preset--color--contrast);
    position: relative;
    transition: color 0.3s ease;
}

/* Sin recuadro al pulsar con ratón; con teclado se queda (WCAG 2.4.7). */
.gp-accordion summary:focus:not(:focus-visible) {
    outline: none;
}

.gp-accordion summary::-webkit-details-marker {
    display: none;
}

.gp-accordion summary:hover {
    color: var(--wp--preset--color--primary);
    text-decoration: underline;
}

.gp-accordion[open] summary {
    margin-bottom: 1rem;
    text-decoration: underline;
}

.gp-accordion .wp-block-details__content {
    padding-bottom: 1.5rem;
    line-height: 1.6;
    font-size: 16px;
}

/* Quitar el margin-block-start de 24px que WordPress inyecta entre bloques raíz */
:where(.wp-site-blocks) > * {
	margin-block-start: 0;
	margin-block-end:   0;
}

/* Mostrar siempre el testimonio salvo cuando se está mostrando el resultado */
.gp-formulario--sin-datos .gp-testimonio {
	display: block !important;
}

/* Ocultar el wrapper padre cuando su único hijo trigger-hidden está oculto */
.wp-block-group:has(> .trigger-hidden[style*="display: none"]) {
    display: none !important;
}

/* Quitar min-height del post-content en móvil */
@media (max-width: 782px) {
    .entry-content.wp-block-post-content {
        min-height: unset !important;
    }
}

/* Quitar padding-top en móvil del bloque de columnas alignfull (desktop lo mantiene) */
@media (max-width: 899px) {
	.alignfull.has-global-padding:has(> .wp-block-group > .wp-block-columns.alignwide) {
		padding-top: 0 !important;
	}
}

/* Footer: aumentar títulos en móvil */
@media (max-width: 899px) {
	footer .has-rubik-font-family.has-medium-font-size {
		font-size: 1.1rem !important;
	}
}

/* ==========================================================================
   Cabecera — patterns/header-custom.php
   ==========================================================================
   Solo bloques del core: core/group flex + core/image + core/navigation +
   core/search. Sustituye a los bloques gp/mega-menu, gp/menu-item y
   gp/submenu-item, que se borraron.

   Medidas del Figma "Web Greenpeace", nodos 242:526 (barra + mega-panel) y
   242:451 (la barra sobre el hero de Historia):

     barra          1067 x 62, absolute, top 40, centrada
     celda logo     203 ancho, logo 143x22 con 30 a la izquierda
     celdas de menú 22 de padding, texto 14px Rubik 500
     celda naranja  130 ancho, texto 12px Rubik 700 en mayúsculas
     celda buscador 59 ancho, icono de 15, separador de 1px a la izquierda
     mega-panel     1067 x 126, pegado bajo la barra (nodo 242:531)
     columnas       paso de 173,25 entre centros, centradas (nodo 242:606).
                    Con flex:1 + max-width:173 salen exactos los 100px de
                    margen del diseño cuando hay 5 columnas, y se estrechan
                    solas cuando hay 8, que es lo que hace el sitio real
     columna        etiqueta de 90 de ancho —por eso "Cómo nos organizamos"
                    parte en dos líneas—, icono de ~40x38 a 20 del borde
                    superior del panel y a 22 del texto

   PELEA DE ESPECIFICIDAD CON EL CORE. Está medido en
   wp-includes/blocks/navigation/style.min.css, no adivinado:

     - Al abrir el submenú, el core aplica
       `.wp-block-navigation .has-child:not(.open-on-click):hover > .submenu-container
        { width:auto; min-width:200px }`
       que son 0,5,0. Cualquier `width:100%` con menos pierde y el panel sale
       estrecho. Por eso las reglas del panel abierto llevan `.gp-header`
       doblado: 0,6,0.
     - El core pone `flex-direction: column` en el submenú. Hay que decir `row`
       explícitamente; con poner `display:flex` no basta.
     - `.wp-block-navigation__container` envuelve por defecto
       (`--navigation-layout-wrap: wrap`). Se cambia por la propia variable del
       core, no peleando con la regla.
   BREAKPOINT: 1024. Por debajo, cabecera movil con hamburguesa; a partir de ahi,
   la barra de 1067 con el menu horizontal. El core cambia el overlay a los 600,
   asi que hay que devolverle el comportamiento movil entre 600 y 1023 —ver
   "menu movil" mas abajo—. Un breakpoint no puede ser atributo de bloque.
   ========================================================================== */

/* --- barra ---------------------------------------------------------------- */

/* El hueco entre celdas (blockGap 0) y el `align-items: stretch` son ATRIBUTOS
   del bloque; el alto NO, porque cambia entre móvil y escritorio y un estilo en
   línea no lo tumba ninguna regla: se ven y se editan en la
   barra lateral. Aquí solo queda lo que no puede ser atributo.

   En escritorio este blanco se apaga: lo pintan las celdas una a una, para
   que la celda activa NO tenga blanco debajo. Ver "el hueco blanco" abajo. */
.gp-header.gp-header {
	background-color: var(--wp--preset--color--base);
	min-height: 62px;
	position: relative;
	z-index: 1000;
}

.gp-header *,
.gp-header *::before,
.gp-header *::after {
	box-sizing: border-box;
}

/* El `:where(.wp-site-blocks *:focus)` de arriba pinta el recuadro también al
   pulsar con el ratón o el dedo —y el core mueve el foco al aspa al abrir el
   menú móvil—. En su cabecera no sale ninguno. Se queda solo para el teclado. */
.gp-header :focus:not(:focus-visible) {
	outline: none;
}

@media (min-width: 1024px) {
	/* Absolute: la barra se pinta ENCIMA del hero, no lo empuja. El <header>
	   que la envuelve se queda a cero de alto y la imagen empieza arriba del
	   todo, con 48px de foto asomando por encima de la barra.

	   Lo hacen igual en es.greenpeace.org: su hero es el fondo del <header> y
	   la barra flota dentro, a 48 del borde. De ahí salen los dos números —48
	   de separación y 1110 de ancho, que es su contenedor de Bootstrap de 1140
	   menos los 15 de relleno—. El Figma decía 40 y 1067.

	   Sin imagen a sangre debajo no hay nada que tapar y la barra se comería
	   lo primero de la página (migas de pan, foto destacada): ahí la cabecera
	   ocupa su sitio, ver la regla siguiente. */
	.gp-header.gp-header {
		background-color: transparent;
		left: 0;
		margin-inline: auto;
		max-width: 1110px;
		position: absolute;
		right: 0;
		top: var(--wp--preset--spacing--70);
	}

	/* Sin hero, el <header> reserva los 48 + 62 de la barra. Ver "páginas sin
	   hero" justo debajo. */
	.wp-site-blocks:has(> header > .gp-header):not(:has(> main > .wp-block-cover:first-child, > main > .wp-block-post-content > .wp-block-cover:first-child)) > header {
		min-height: calc(var(--wp--preset--spacing--70) + 62px);
	}
}

/* Páginas sin hero: enteras sobre gris, como las suyas (Contacto, Preguntas
   frecuentes), en los dos anchos. "Con hero" es que lo primero de <main>, o de
   su contenido, sea un cover: así vale para cualquier plantilla sin listarlas.
   El gris va en .wp-site-blocks y no en <main> porque <main> trae un margen
   superior en línea, y un margen no pinta fondo: quedaría una raya blanca. */
.wp-site-blocks:has(> header > .gp-header):not(:has(> main > .wp-block-cover:first-child, > main > .wp-block-post-content > .wp-block-cover:first-child)) {
	background-color: var(--wp--preset--color--tertiary);
}

/* En móvil, la barra del Figma de la Red de Voluntarios: 55 y 1 de raya, fija
   al hacer scroll ("Cabecera fija al hacer scroll"). La que se pega es el
   <header>: en la barra no valía, porque su padre mide lo mismo que ella y se
   iba con él. La barra se queda relative, que es contra lo que se miden el
   desplegable y la banda del buscador. Sticky y no fixed: nada que compensar
   con padding en el body, que es de donde salían los saltos. */
@media (max-width: 1023px) {
	.wp-site-blocks > header:has(> .gp-header) {
		position: sticky;
		top: 0;
		z-index: 1000;
	}

	.gp-header.gp-header {
		border-bottom: 1px solid #dedfdb;
		min-height: 56px;
		padding-inline: 4px;
	}
}

/* --- logos ---------------------------------------------------------------- */

.gp-header__logo {
	align-items: center;
	align-self: stretch;
	display: flex;
	margin: 0;
}

.gp-header__logo a {
	align-items: center;
	display: flex;
	height: 100%;
}

.gp-header__logo img {
	display: block;
	height: auto;
}

@media (min-width: 1024px) {
	/* 182 = 150 de logo + 16 de relleno a cada lado. Los 203 con 30 a la
	   izquierda eran los del Figma. */
	.gp-header__logo--desktop {
		background-color: var(--wp--preset--color--primary);
		flex: 0 0 182px;
		justify-content: center;
		padding-inline: var(--wp--preset--spacing--40);
	}

	.gp-header__logo--movil,
	.gp-header__etiqueta {
		display: none;
	}
}

@media (max-width: 1023px) {
	.gp-header__logo--desktop {
		display: none;
	}

	/* Logo y etiqueta juntos, centrados entre la lupa y la hamburguesa, que
	   miden lo mismo. El logo baja de 150 a 120 (menos en pantallas de 320)
	   para que quepa la etiqueta: con `max-width`, porque el ancho es un estilo
	   en línea del bloque. */
	.gp-header .gp-header__logo--movil {
		margin-left: auto;
	}

	.gp-header__logo--movil img {
		max-width: min(120px, 100vw - 216px);
	}

	.gp-header .gp-header__etiqueta {
		align-self: center;
		color: var(--wp--preset--color--primary-dark);
		font-family: var(--wp--preset--font-family--rubik);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.09em;
		line-height: normal;
		margin: 0 auto 0 8px;
		text-transform: uppercase;
		white-space: nowrap;
	}
}

/* --- menú ----------------------------------------------------------------- */

/* Las dos variables son del propio core: es su forma de configurar el layout
   del menú, y sale más barato que pelearse con las reglas que las leen.
   stretch = las celdas ocupan los 62px de alto, y dentro el core ya centra.

   OJO: hay que declararlas TAMBIÉN en el <ul>. El core copia la className del
   bloque a los dos nodos, así que el <ul> lleva `wp-block-navigation` y vuelve
   a declarar `--navigation-layout-wrap: wrap` sobre sí mismo, pisando lo que
   heredaría del <nav>. Ponerlas solo arriba no sirve de nada. */
/* `--navigation-layout-align` no tiene control en el editor, así que se queda.
   El de envolver sí: sale del `no-wrap` que pone el atributo `layout.flexWrap`,
   y el core lo copia al <nav> y al <ul>. */
nav.gp-header__nav {
	--navigation-layout-align: stretch;
	align-self: stretch;
	flex: 1;
}

.gp-header .wp-block-navigation__container {
	--navigation-layout-align: stretch;
}

/* El <ul> del menú cuelga de cuatro divs del overlay responsive; si no se les
   da altura, las celdas no llegan a los 62px y el texto queda arriba. */
@media (min-width: 1024px) {
	.gp-header .wp-block-navigation__responsive-container,
	.gp-header .wp-block-navigation__responsive-close,
	.gp-header .wp-block-navigation__responsive-dialog,
	.gp-header .wp-block-navigation__responsive-container-content,
	.gp-header .wp-block-navigation__container {
		height: 100%;
		width: 100%;
	}
}

.gp-header .wp-block-navigation__container {
	gap: 0;
}

/* El hueco blanco entre el logo y el primer enlace. Es un item flex más del
   <ul>, así no hace falta meter un bloque vacío en el patrón. Tiene que ser
   un elemento aparte —y no el fondo de la barra— porque la celda activa se
   pinta con negro al 60%: si tuviera blanco detrás saldría gris medio en vez
   del mismo tono que el mega-panel, que se compone sobre la foto. En el
   Figma la banda blanca son literalmente dos rectángulos con un hueco. */
.gp-header .wp-block-navigation__container::before {
	background-color: var(--wp--preset--color--base);
	content: "";
	flex: 1;
}

/* Cada elemento de primer nivel es una celda de la barra. */
.gp-header .wp-block-navigation__container > .wp-block-navigation-item {
	align-items: center;
	background-color: var(--wp--preset--color--base);
	/* Negro puro, como su barra: `contrast` es #212529. */
	color: #000;
	display: flex;
	transition: background-color 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

/* El enlace llena la celda: se pulsa entera, y el recuadro del foco va por
   dentro de su borde y no encima del texto. Los 16 de relleno, los de
   es.greenpeace.org (el Figma decía 22). Ojo si el menú crece:
   `--navigation-layout-wrap: nowrap` hace que la fila no envuelva, así que
   con etiquetas largas se sale por la derecha. */
.gp-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	align-items: center;
	align-self: stretch;
	display: flex;
	padding-inline: var(--wp--preset--spacing--40);
}

.gp-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible,
.gp-header__idiomas a:focus-visible,
.gp-menu-movil a:focus-visible,
.gp-header__buscador .wp-block-search__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -6px;
}

/* El campo del buscador va sobre la banda oscura: el recuadro, en blanco y
   separado de su borde, o se confunde con él. */
.gp-header__buscador .wp-block-search__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 2px;
}

/* La sección en la que estás, en gris: su `.nav-item.active`. Va antes del
   hover, que la vuelve blanca sobre el velo. `text-mute` y no su `muted`
   (#909090), que sobre blanco se queda en 3,2:1 y no llega al 4,5 de WCAG. */
.gp-header .wp-block-navigation__container > .current-menu-item,
.gp-header .wp-block-navigation__container > .current-menu-ancestor {
	color: var(--wp--preset--color--text-mute);
}

.gp-header .wp-block-navigation__container > .wp-block-navigation-item:hover,
.gp-header .wp-block-navigation__container > .wp-block-navigation-item:focus-within {
	background-color: var(--wp--preset--color--overlay-strong);
	color: var(--wp--preset--color--base);
}

.gp-header .wp-block-navigation-item__content {
	color: inherit;
}

/* La flecha del submenú no está en el diseño, pero ese <button> es lo que
   abre el panel con el teclado: si se pone display:none, el mega-menú vuelve
   a ser inaccesible. Se esconde a la manera de screen-reader-text: sigue
   recibiendo foco y sigue disparando aria-expanded, pero no se ve.
   Lleva .gp-header dos veces (0,4,1) para recuperar el position que le quita
   la regla de arriba que manda todo el menú a static. */
.gp-header.gp-header nav.wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-icon {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* En el primer nivel no hay iconos: el Figma es solo texto. El ::before de
   Fontello se apaga aquí y en el <ul> del submenú, al que el core le copia la
   clase del elemento padre. */
.gp-header .wp-block-navigation__container > .wp-block-navigation-item::before,
.gp-header .wp-block-navigation__submenu-container::before {
	content: none;
}

/* La celda naranja. En el Figma va dentro de la barra, entre dos elementos del
   menú, así que es un elemento más con la clase is-cta: no un botón aparte. */
.gp-header .wp-block-navigation-item.is-cta,
.gp-header .wp-block-navigation-item.is-cta:hover,
.gp-header .wp-block-navigation-item.is-cta:focus-within {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
}

/* Al pasar por encima se aclara: su `.outstanding-link:hover`. Ese tono no está
   en la paleta. */
.gp-header .wp-block-navigation-item.is-cta:hover,
.gp-header .wp-block-navigation-item.is-cta:focus-within {
	background-color: #ff6737;
}

/* --- mega-panel ----------------------------------------------------------- */

@media (min-width: 1024px) {
	/* El panel tiene que medirse contra la barra, que es la que vale 1067. Para
	   eso, dentro del menú NO puede quedar ningún ancestro posicionado.

	   Apagarlos uno a uno no funciona: el bloque navigation del core tiene cinco
	   `position: relative` repartidos (el <nav>, el <li> por dos clases distintas,
	   el contenedor responsive y el dialog), es fácil dejarse uno —pasó dos
	   veces— y basta con que el core añada otro para romperlo otra vez.

	   Así que van TODOS a static de una vez, y se le devuelve el absolute solo al
	   panel. `nav.wp-block-navigation *` son 0,3,1 y le gana a lo más específico
	   que tiene el core aquí (0,3,0); la regla del panel, 0,4,1, le gana a esa.
	   En este breakpoint no hay nada más dentro del menú que necesite
	   posicionarse: el overlay móvil y su aspa viven por debajo de 992. */
	.gp-header.gp-header nav.wp-block-navigation,
	.gp-header.gp-header nav.wp-block-navigation * {
		position: static;
	}

	.gp-header.gp-header nav.wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
		position: absolute;
	}

	/* Aspecto: 0,4,0 basta, el core pinta el fondo con 0,3,0. */
	.gp-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
		/* stretch: todas las columnas miden lo que la más alta, y una etiqueta
		   de una línea queda centrada en el hueco de las de dos. */
		align-items: stretch;
		background-color: var(--wp--preset--color--overlay-strong);
		border: 0;
		color: var(--wp--preset--color--base);
		flex-direction: row;
		/* gap 0: la separación entre columnas ya va dentro de los 173 de paso. */
		gap: 0;
		justify-content: center;
		left: 0;
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
		right: auto;
		top: 100%;
		/* white-space se hereda, y las celdas de arriba llevan nowrap: sin esto
		   "Cómo nos financiamos" no parte y se come a la columna de al lado. */
		white-space: normal;
	}

	/* Geometría del panel abierto: aquí hace falta 0,6,0 para ganarle al
	   width:auto / min-width:200px que el core mete al abrir. Las dos formas de
	   abrirlo: el ratón por encima, y el botón de la flecha con el teclado. */
	.gp-header.gp-header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
	.gp-header.gp-header .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		min-width: 0;
		width: 100%;
	}

	/* Dos cosas no evidentes aquí:

	   - `background-color: transparent` es obligatorio. El core le pone
	     `inherit` a todo .wp-block-navigation-item, así que cada columna volvía
	     a pintar encima el rgba(0,0,0,.6) del panel y salían recuadros oscuros.
	   - `flex: 1` con tope de 140, el de sus `.sub-item`. Con 5 columnas son
	     700 centrados; con 8 el tope no llega y se reparten lo que hay. */
	.gp-header .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		align-items: center;
		background-color: transparent;
		display: flex;
		flex: 1;
		flex-direction: column;
		/* Rubik Medium 14. Ojo al detalle: en es.greenpeace.org la barra va a
		   13px y el panel a 14, no heredan. Estaba en 700 y ni el Figma ni su
		   web lo ponen en negrita: los dos usan 500. */
		font-size: var(--wp--preset--font-size--small);
		font-weight: 500;
		justify-content: flex-start;
		line-height: normal;
		max-width: 140px;
		/* 8 arriba y abajo, 16 a los lados: ellos lo reparten entre el <li> (8)
		   y el enlace (8). La etiqueta se queda en 108. */
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
		text-align: center;
		transition: color 0.2s ease;
	}

	/* El core le mete .5em 1em al enlace del submenú con 0,4,0; el padding lo
	   pone el <li>, que es lo que se ilumina al pasar por encima. */
	.gp-header.gp-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		/* Ocupa lo que deja el icono y centra el texto dentro: es su
		   `flex: 1 0 auto` con un `.m-auto` dentro. */
		align-items: center;
		display: flex;
		flex: 1 0 auto;
		justify-content: center;
		padding: 0;
		width: 100%;
	}

	/* Icono encima del texto. El glifo lo pone fontello.css a partir de la
	   clase del elemento; esto solo le da tamaño y caja: 40 de letra en una
	   caja de 47 y sin hueco hasta la etiqueta, que es su <i> de 40px con el
	   line-height normal de Rubik. Los glifos de nuestra fontello.woff2 miden
	   lo mismo que los suyos (comparados los 79), así que el número es el suyo. */
	.gp-header .wp-block-navigation__submenu-container > .wp-block-navigation-item::before {
		font-size: 40px;
		line-height: 47px;
		margin-bottom: 0;
	}

	/* Al pasar por encima solo cambia el color, texto e icono a verde. En la
	   referencia no hay recuadro blanco detrás. */
	.gp-header .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover,
	.gp-header .wp-block-navigation__submenu-container > .wp-block-navigation-item:focus-within {
		color: var(--wp--preset--color--primary);
	}
}

/* --- menú móvil: overlay propio ------------------------------------------- */

/* El desplegable es una template part —`parts/menu-movil.html`— a la que apunta
   el atributo `overlay` del bloque de navegación. Con eso el core marca el
   contenedor con `disable-default-overlay` y DEJA DE VESTIRLO: su relleno, el
   hueco para su aspa, los sangrados por nivel, el ancho de las celdas y el
   margen que añade cuando hay barra de administración están todos escritos con
   `:not(.disable-default-overlay)`, así que dejan de aplicarse solos.

   Esto sustituye a catorce reglas que deshacían cada una de esas cosas a mano.
   Lo que queda aquí es lo estructural, que no tiene atributo: dónde cambia el
   breakpoint, que el panel cuelgue de la barra en vez de ocupar la pantalla, y
   dónde cae la ✕. El aspecto de las filas vive en la part, editable. */

@media (max-width: 1023px) {

	/* El core cambia a hamburguesa a los 600px y este diseño a los 1024: entre
	   esos dos anchos hay que devolverle el comportamiento de móvil. */
	.gp-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.gp-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	/* La hamburguesa es el glifo de Fontello, a los 24 del Figma, no el SVG del
	   core. Con el menú abierto sigue siendo la hamburguesa, sobre gris. */
	.gp-header .wp-block-navigation__responsive-container-open svg,
	.gp-header .wp-block-navigation-overlay-close svg {
		display: none;
	}

	.gp-header .wp-block-navigation__responsive-container-open::before,
	.gp-header .wp-block-navigation-overlay-close::before {
		color: #000;
		content: "\f0c9";
		font-family: "fontello";
		font-size: 24px;
		line-height: 1;
	}

	/* --- reparto de la barra: lupa · logo · hamburguesa ------------------- */

	/* En el marcado la lupa va la última, porque en escritorio es la celda de
	   la derecha. Aquí va la primera, y eso es una línea de `order`: no hace
	   falta duplicar bloques en el patrón. */
	.gp-header__buscador {
		flex: 0 0 48px;
		order: -1;
	}

	/* El <nav> lleva `flex: 1` para rellenar el hueco EN ESCRITORIO. Aquí no
	   debe crecer: si crece, se reparte el ancho con el logo a la mitad y la
	   hamburguesa acaba en el centro.

	   50 fijos, los mismos que la lupa, y por dos razones:

	   - Con `auto` la celda medía lo que el botón, 24. Al abrir el menú el core
	     esconde ese botón, la celda se iba a 0 y el logo —que está centrado en
	     lo que sobra— daba un salto de 12px a la derecha.
	   - Con la lupa y la hamburguesa midiendo lo mismo, el logo queda centrado
	     de verdad en la pantalla. Con 24 se iba 13px a la derecha. */
	nav.gp-header__nav {
		align-items: center;
		display: flex;
		flex: 0 0 48px;
		justify-content: center;
	}

	/* El <nav> a static para que el panel se ancle a la barra —que es sticky, y
	   por tanto contenedor de posicionamiento— y salga a todo su ancho. Y el
	   diálogo también, para que la ✕ se mida contra el panel. */
	.gp-header nav.wp-block-navigation,
	.gp-header .wp-block-navigation__responsive-dialog {
		position: static;
	}

	/* El panel cuelga de la barra en vez de ocupar la pantalla. `overflow` a
	   visible porque la ✕ va colocada por encima de él. */
	.gp-header .wp-block-navigation__responsive-container.is-menu-open {
		bottom: auto;
		left: 0;
		overflow: visible;
		position: absolute;
		right: 0;
		top: 100%;
		z-index: 1030;
	}

	/* El core bloquea el scroll porque su overlay es un modal. Este ya no lo es. */
	html.has-modal-open.has-modal-open {
		overflow: visible;
	}

	/* La ✕ ocupa el mismo cuadrado que la hamburguesa, y la hamburguesa se
	   esconde mientras está abierto: el mismo sitio abre y cierra. */
	.gp-header nav.wp-block-navigation:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open {
		display: none;
	}

	/* El cuadrado de 48 de la hamburguesa, en gris mientras el menú está
	   abierto (el "Menú (activo)" del Figma). */
	.gp-header .wp-block-navigation-overlay-close {
		align-items: center;
		background-color: var(--wp--preset--color--tertiary);
		border: 0;
		display: flex;
		height: 48px;
		justify-content: center;
		position: absolute;
		right: 4px;
		top: -52px;
		width: 48px;
	}

	/* --- las filas del desplegable --------------------------------------- */

	/* El menu se renderiza DOS VECES dentro del panel: el <ul> por defecto del
	   core y, dentro de .overlay-container, el de nuestra part. El core esconde
	   el primero con una regla suya de 0,4,0; aqui se hace explicito con 0,5,0,
	   porque si esa falla se ven los dos menus superpuestos y encima el primero
	   no recibe ninguna de las reglas del acordeon —no cuelga de .gp-menu-movil—. */
	.gp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > :not(.wp-block-navigation__overlay-container) {
		display: none;
	}

	/* --- las filas del desplegable ---------------------------------------- */

	/* El desplegable NO usa core/navigation: usa core/details, el desplegable
	   nativo del navegador. El motivo está medido, no supuesto —
	   wp-includes/js/dist/script-modules/block-library/navigation/view.js:

	       get isSubmenuOpen() { return isOverlayOpen || state.isMenuOpen; }

	   Con el overlay abierto, `state.isMenuOpen` es true y el core declara
	   TODOS los submenús abiertos. Es su diseño: en móvil enseña los niveles
	   desplegados. Un acordeón con core/navigation ahí dentro es imposible, y
	   `submenuVisibility: "click"` no lo cambia porque solo gobierna el hover.

	   La part la genera `tools/generar-menu-movil.php` desde el menú #4. */

	/* Los <p> anidados dentro de los <details> conservan su margen y las filas
	   se hinchan: el selector tiene que llegar a todos, no solo a los hijos
	   directos. Y el enlace hereda el color: el verde del tema es para el
	   contenido, no para una fila de menu. */
	.gp-menu-movil p {
		margin: 0;
	}

	/* Los enlaces son una lista (core/list): sin topos ni sangría. */
	.gp-menu-movil__lista {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.gp-menu-movil a,
	.gp-menu-movil__nivel > summary {
		color: var(--wp--preset--color--contrast);
	}

	/* El desplegable del Figma de la Red de Voluntarios: blanco con sombra bajo
	   la barra. */
	.gp-menu-movil {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	}

	/* Sus filas: Rubik 600 de 15, 48 de alto con la raya debajo. */
	.gp-menu-movil__enlace,
	.gp-menu-movil__nivel > summary {
		border-bottom: 1px solid #e3e3e3;
		font-family: var(--wp--preset--font-family--rubik);
		font-size: 15px;
		font-weight: 600;
		line-height: 47px;
		padding-block: 0;
		text-align: center;
	}

	.gp-menu-movil__enlace a {
		display: block;
	}

	/* El <summary> es la fila con flecha. Fuera el triángulo nativo, y en su
	   sitio el chevrón de Fontello (\e836), que gira al abrir. */
	.gp-menu-movil__nivel > summary {
		align-items: center;
		cursor: pointer;
		display: flex;
		justify-content: center;
		list-style: none;
		position: relative;
	}

	.gp-menu-movil__nivel > summary::-webkit-details-marker {
		display: none;
	}

	.gp-menu-movil__nivel > summary::after {
		content: "\e836";
		font-family: "fontello";
		font-style: normal;
		font-weight: normal;
		position: absolute;
		right: var(--wp--preset--spacing--50);
		transition: transform 0.3s ease;
	}

	.gp-menu-movil__nivel[open] > summary::after {
		transform: rotate(180deg);
	}

	/* Cada nivel entra un poco, para que se vea de quién cuelga. */
	.gp-menu-movil__nivel > .gp-menu-movil__lista > .gp-menu-movil__enlace,
	.gp-menu-movil__nivel > .gp-menu-movil__nivel > summary {
		padding-left: var(--wp--preset--spacing--60);
	}

	/* La celda naranja. */
	/* Solo cambian fondo y mayúsculas: en su menú el texto sigue a 13 y 500,
	   porque su regla de `.nav-item a` pisa la de `.button-3`. */
	.gp-menu-movil__enlace.is-cta {
		background-color: var(--wp--preset--color--secondary);
		border-bottom: 0;
		font-weight: 700;
		letter-spacing: 0.02em;
		line-height: 48px;
		text-transform: uppercase;
	}

	.gp-menu-movil__enlace.is-cta a {
		color: var(--wp--preset--color--base);
	}
}

/* --- buscador ------------------------------------------------------------- */

/* El buscador NO se estira dentro de la barra: al pulsar baja una banda gris a
   todo el ancho, con el campo dentro, y la celda se pone oscura con una ✕.

   Todo con CSS sobre core/search. La Interactivity API del core marca el estado
   quitando y poniendo la clase `wp-block-search__searchfield-hidden` en el
   <form>, así que `:not(.wp-block-search__searchfield-hidden)` es "abierto".
   No hace falta ni una línea de JS.

   El <form> se deja en `position: static` a propósito: así la banda y el campo
   se posicionan contra `.gp-header`, que es lo que mide 1067. */

.gp-header__buscador {
	align-items: center;
	align-self: stretch;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	display: flex;
	justify-content: center;
	margin: 0;
}

.gp-header__buscador .wp-block-search__inside-wrapper {
	align-items: center;
	align-self: stretch;
	justify-content: center;
}

/* Iconos de Fontello en vez del SVG del core: es la forma de cambiar la lupa
   por la ✕ sin tocar JS. Los codepoints salen de assets/css/fontello.css
   (.icon-search y .icon-close); van en crudo porque aquí no hay una clase
   donde colgarlos, el <button> lo pinta el core. */
.gp-header__buscador .wp-block-search__button {
	align-items: center;
	background: none;
	border: 0;
	color: inherit;
	display: flex;
	height: 100%;
	justify-content: center;
	padding: 0;
	width: 100%;
}

.gp-header__buscador .wp-block-search__button svg {
	display: none;
}

.gp-header__buscador .wp-block-search__button::before {
	content: "\e810";
	font-family: "fontello";
	/* 24 en móvil, lupa y aspa (Figma); en escritorio 13 y 12, más abajo. */
	font-size: 24px;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
}

.gp-header__buscador:not(.wp-block-search__searchfield-hidden) .wp-block-search__button::before {
	content: "\e806";
}

/* Celda oscura mientras está abierto. */
.gp-header__buscador:not(.wp-block-search__searchfield-hidden) {
	background-color: var(--wp--preset--color--overlay-strong);
	color: var(--wp--preset--color--base);
}

/* La banda y el campo valen en los dos tamanos: la barra es contenedor de
   posicionamiento en los dos anchos (relative en escritorio, sticky en movil),
   asi que el panel cuelga igual. Solo el ancho de la celda y el separador son
   de escritorio.

   62 de ancho y raya gris al 20%: las medidas de es.greenpeace.org. El Figma
   decia 59 y una raya negra al 10%. El gris no tiene token —la paleta no lleva
   ningun gris translucido— y el motor de estilos descarta el color de un borde
   al serializarlo, asi que tampoco podria ser un atributo. */
@media (min-width: 1024px) {
	.gp-header__buscador {
		border-left: 1px solid rgba(128, 128, 128, 0.2);
		color: #000;
		flex: 0 0 62px;
	}

	.gp-header__buscador .wp-block-search__button::before {
		font-size: 13px;
	}

	.gp-header__buscador:not(.wp-block-search__searchfield-hidden) .wp-block-search__button::before {
		font-size: 12px;
	}
}


	/* La banda gris, del mismo ancho que la barra y que el mega-panel. */
.gp-header__buscador:not(.wp-block-search__searchfield-hidden)::before {
	background-color: var(--wp--preset--color--overlay-strong);
	content: "";
	/* 24 + 36 del campo + 24. */
	height: 84px;
	left: 0;
	position: absolute;
	top: 100%;
	width: 100%;
}

/* El campo, encima de la banda. Al cerrarse, el core le mete
   `width: 0 !important` y se va solo; visibility es el cinturón. */
.gp-header__buscador .wp-block-search__input {
	background-color: var(--wp--preset--color--base);
	/* Su campo va sin estilar: el borde es el de fábrica de Chrome y la letra
	   la pila de sistema de Bootstrap. Se copian tal cual. */
	border: 2px inset #767676;
	color: #000;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: var(--wp--preset--font-size--medium);
	height: 36px;
	left: var(--wp--preset--spacing--50);
	padding: 4px 16px;
	position: absolute;
	top: calc(100% + var(--wp--preset--spacing--50));
	width: calc(100% - var(--wp--preset--spacing--50) * 2);
}

.gp-header__buscador .wp-block-search__input::placeholder {
	text-align: center;
}

/* En escritorio su campo guarda 48 a la derecha (su `pr-5`); en móvil, 16. */
@media (min-width: 1024px) {
	.gp-header__buscador .wp-block-search__input {
		padding-right: 48px;
	}
}

.gp-header__buscador.wp-block-search__searchfield-hidden .wp-block-search__input {
	visibility: hidden;
}

/* --- selector de idioma --------------------------------------------------- */

/* Es el bloque de Polylang, que pinta
   <nav><ul class="gp-header__idiomas"><li class="lang-item current-lang"><a>es</a>…
   y no tiene atributos de estilo: todo va aquí. Medidas de es.greenpeace.org.

   Escritorio: celda de 62 junto a la lupa, con su misma raya, y el idioma
   actual dentro. Al pasar por encima cuelgan debajo los demás, en filas de 61.
   Allí lo abre su jQuery en hover; aquí es CSS, y `:focus-within` lo abre
   también con el teclado.
   Móvil: la celda no está; los idiomas van en fila al final del desplegable
   (la part menu-movil, que los lleva con la clase gp-menu-movil__idiomas). */
.gp-header__idiomas,
.gp-menu-movil__idiomas {
	font-family: var(--wp--preset--font-family--rubik);
	font-size: var(--wp--preset--font-size--nav);
	font-weight: 500;
	line-height: normal;
	list-style: none;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

/* `text-mute`: el `muted` de su web y el #858585 del Figma no llegan a 4,5:1. */
.gp-header__idiomas a,
.gp-menu-movil__idiomas a {
	color: var(--wp--preset--color--text-mute);
	display: block;
	text-align: center;
	text-decoration: none;
}

.gp-header__idiomas .current-lang a,
.gp-menu-movil__idiomas .current-lang a {
	color: #000;
}

.gp-header nav:has(> .gp-header__idiomas) {
	display: none;
}

@media (min-width: 1024px) {
	/* Alto fijo y no `align-self: stretch`: con stretch, al desplegar, la fila
	   flex crece hasta lo que miden los idiomas colgando y arrastra la barra. */
	.gp-header nav:has(> .gp-header__idiomas) {
		background-color: var(--wp--preset--color--base);
		border-left: 1px solid rgba(128, 128, 128, 0.2);
		display: block;
		flex: 0 0 62px;
		height: 62px;
	}

	/* Columna de 62 de alto: la celda la llena y el resto se sale por debajo. */
	.gp-header__idiomas {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	/* La celda es el idioma actual, vaya donde vaya en la lista. */
	.gp-header__idiomas .current-lang {
		align-items: center;
		display: flex;
		flex: 0 0 100%;
		order: -1;
	}

	/* Llena la celda, como los enlaces del menú: el foco va por dentro. */
	.gp-header__idiomas .current-lang a {
		align-self: stretch;
		align-content: center;
		width: 100%;
	}

	.gp-header__idiomas li:not(.current-lang) {
		background-color: var(--wp--preset--color--base);
		display: none;
		flex: 0 0 auto;
	}

	/* Esc lo cierra aunque el ratón siga encima (WCAG 1.4.13): theme.js pone
	   `is-cerrado` hasta que el ratón sale. */
	.gp-header__idiomas:is(:hover, :focus-within):not(.is-cerrado) li:not(.current-lang) {
		display: block;
	}

	.gp-header__idiomas li:not(.current-lang) a {
		border-top: 1px solid rgba(128, 128, 128, 0.2);
		height: 61px;
		line-height: 61px;
	}
}

/* Su fila, la del Figma: celdas blancas de 50 × 48 centradas sobre banda gris,
   con raya a la izquierda; el actual en Rubik 700, los demás en gris. Los grises
   (#e1e1e1, #e3e3e3, #858585) no son de la paleta: son los del Figma. */
.gp-menu-movil__idiomas {
	background-color: #e1e1e1;
	display: flex;
	font-size: 14px;
	justify-content: center;
}

.gp-menu-movil__idiomas li {
	flex: 0 0 50px;
}

.gp-menu-movil__idiomas a {
	background-color: var(--wp--preset--color--base);
	border-left: 1px solid #e3e3e3;
	color: #858585;
	line-height: 48px;
}

.gp-menu-movil__idiomas .current-lang a {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

/* ==========================================================================
   Pie — patterns/footer-custom.php
   ==========================================================================
   Calco del pie de es.greenpeace.org, contenido incluido, medido a 1440 y a
   390. Como el suyo son dos pies: escritorio (redes · columnas · barra legal
   con el selector de webs internacionales) y móvil (lista · redes · lista). Las
   redes son un solo bloque que en móvil se recoloca con `order`.

   Colores de banda, rellenos, tipografía de los titulares y anchos son
   atributos. Aquí queda lo que no puede serlo: qué pie se ve en cada ancho,
   los glifos de Fontello sobre core/social-links, las rayas y los verdes que
   no son tokens, el selector y su panel, y todo lo que cambia con el ancho.
   Los menús los crea tools/crear-menus-pie.php.
   ========================================================================== */

.gp-footer a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	transition: color 0.2s ease;
}

.gp-footer a:hover,
.gp-footer a:focus {
	color: var(--wp--preset--color--primary);
}

/* Las listas de menú, a todo el ancho de su columna. El core le vuelve a poner
   `--navigation-layout-align: flex-start` al <ul> por su `.is-vertical`: se
   cambia la variable, con la clase doblada. */
.gp-footer__movil-enlaces.gp-footer__movil-enlaces,
.gp-footer__movil-legal.gp-footer__movil-legal {
	--navigation-layout-align: stretch;
}

/* --- banda "¡Únete!" -------------------------------------------------------- */

/* La del Figma de la Red de Voluntarios, encima del pie en los dos anchos. Los
   34 del titular y los 17 del enlace no están en la escala. */
.gp-footer .gp-footer__unete-mano {
	margin: 0 auto;
}

.gp-footer .gp-footer__unete-titulo {
	font-size: 34px;
}

.gp-footer .gp-footer__unete-enlace {
	font-size: 17px;
}

/* !important por el `footer a { text-decoration: none !important }` heredado,
   que sigue haciendo falta para footer-simple. */
.gp-footer .gp-footer__unete-enlace a {
	text-decoration: underline !important;
}

.gp-footer .gp-footer__unete-enlace a:hover,
.gp-footer .gp-footer__unete-enlace a:focus {
	color: var(--wp--preset--color--base);
	text-decoration: none !important;
}

/* --- redes: core/social-links con los glifos de Fontello ------------------- */

/* Llevan el nombre (`showLabels`) porque en móvil el Figma lo pone en texto; en
   escritorio el nombre se esconde y queda el icono, como antes. */
.gp-footer__redes .wp-block-social-link-label {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Sus iconos: 22px con 16 de aire alrededor y 4 entre uno y otro, que es el
   espacio en blanco entre sus <li> inline-block. Fuera el SVG del core; el
   glifo lo pinta un ::before, en blanco: le gana al color de marca del estilo
   "Solo logos". Codepoints de assets/css/fontello.css. */
.gp-footer .gp-footer__redes.gp-footer__redes {
	gap: 4px;
	margin: 0;
	padding-block: var(--wp--preset--spacing--50);
}

.gp-footer .gp-footer__redes.is-style-logos-only .wp-social-link {
	color: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--40);
}

.gp-footer .gp-footer__redes .wp-social-link .wp-block-social-link-anchor {
	padding: 0;
}

.gp-footer__redes .wp-block-social-link-anchor svg {
	display: none;
}

.gp-footer__redes .wp-block-social-link-anchor::before {
	font-family: "fontello";
	font-size: 22px;
	font-style: normal;
	font-weight: normal;
	line-height: 33px;
}

.gp-footer__redes .wp-social-link-youtube .wp-block-social-link-anchor::before {
	content: "\e803";
}

.gp-footer__redes .wp-social-link-instagram .wp-block-social-link-anchor::before {
	content: "\e801";
}

.gp-footer__redes .wp-social-link-facebook .wp-block-social-link-anchor::before {
	content: "\e804";
}

.gp-footer__redes .wp-social-link-bluesky .wp-block-social-link-anchor::before {
	content: "\e826";
}

/* --- barra legal ---------------------------------------------------------- */

/* Tres columnas de 350 con el texto de 14 en líneas de 24, como las suyas. */
.gp-footer__barra {
	position: relative;
}

.gp-footer__barra p {
	line-height: 24px;
	margin: 0;
}

.gp-footer__copyright {
	text-align: right;
}

/* --- selector de webs internacionales ------------------------------------- */

/* Es un core/details: abrir y cerrar lo hace el navegador. El <summary> es su
   #show-countries: el mundo a 20, el texto a 16 en la letra del sistema —su
   botón no hereda la del tema— y el chevrón a 15, sin borde ni fondo. */
.gp-footer__internacional {
	position: static;
}

.gp-footer__internacional > summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	gap: var(--wp--preset--spacing--40);
	justify-content: center;
	line-height: 24px;
	list-style: none;
}

.gp-footer__internacional > summary::-webkit-details-marker {
	display: none;
}

.gp-footer__internacional > summary::before,
.gp-footer__internacional > summary::after {
	font-family: "fontello";
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	text-align: center;
	width: 20px;
}

.gp-footer__internacional > summary::before {
	content: "\e84e";
	font-size: 20px;
}

/* Cerrado apunta arriba y abierto abajo: su icon-down-open va girado hasta que
   se abre. */
.gp-footer__internacional > summary::after {
	content: "\e836";
	font-size: 15px;
	transform: rotate(180deg);
	transition: transform 0.2s linear;
}

.gp-footer__internacional[open] > summary::after {
	transform: none;
}

/* Abierto, la barra se pone verde, como su .row-3.active. El !important es para
   ganarle a la clase del fondo del grupo, que lo lleva. */
.gp-footer__barra:has(.gp-footer__internacional[open]) {
	background-color: var(--wp--preset--color--primary) !important;
}

.gp-footer__barra:has(.gp-footer__internacional[open]) a:hover {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

/* El panel, su #countries: a todo el ancho, pegado encima de la barra y con 279
   de alto —su 55% del pie— y la barra de scroll siempre a la vista. Su verde es
   #1da20c, no el primary: no está en la paleta. */
.gp-footer__paises {
	background-color: #1da20c;
	bottom: 100%;
	left: 0;
	max-height: 279px;
	overflow-y: scroll;
	position: absolute;
	right: 0;
	text-align: center;
	/* Los menús de las columnas son elementos posicionados del core y se
	   pintaban por encima del panel. */
	z-index: 2;
}

.gp-footer__paises p {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	margin: 0;
	padding-block: 5px;
}

.gp-footer__paises a:hover,
.gp-footer__paises a:focus {
	color: inherit;
	text-decoration: underline;
}

.gp-footer__paises::-webkit-scrollbar {
	background-color: #1f910c;
	width: 10px;
}

.gp-footer__paises::-webkit-scrollbar-track {
	background-color: #1f910c;
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.gp-footer__paises::-webkit-scrollbar-thumb {
	background-color: #fff;
}

/* --- qué pie se ve en cada ancho ------------------------------------------ */

@media (min-width: 992px) {
	.gp-footer__movil-legal {
		display: none;
	}

	/* Los enlaces del sitio, los del menú, en una fila centrada entre las redes
	   y la barra legal. El core pone el menú vertical en columna con dos clases
	   (`.is-vertical .wp-block-navigation__container`): la regla va con tres. */
	.gp-footer__movil {
		border-top: 1px solid rgba(255, 255, 255, 0.2);
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}

	.gp-footer__movil-enlaces.is-vertical .wp-block-navigation__container {
		column-gap: var(--wp--preset--spacing--60);
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	.gp-footer__movil-enlaces .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--rubik);
		font-size: 15px;
		font-weight: 500;
	}
}

@media (max-width: 991px) {
	/* El pie móvil del Figma de la Red de Voluntarios: ¡Únete!, lista, redes en
	   texto y la barra legal. */
	.gp-footer {
		display: flex;
		flex-direction: column;
		text-align: center;
	}

	.gp-footer__barra {
		display: none;
	}

	.gp-footer__movil {
		order: 1;
	}

	/* Las redes con su nombre y sin icono: Work Sans 14, 22 entre ellas. */
	.gp-footer .gp-footer__redes.gp-footer__redes {
		gap: 22px;
		order: 2;
		padding: 22px var(--wp--preset--spacing--40);
	}

	.gp-footer .gp-footer__redes.is-style-logos-only .wp-social-link {
		padding: 0;
	}

	.gp-footer .gp-footer__redes .wp-social-link .wp-block-social-link-anchor {
		gap: 0;
	}

	/* Con .gp-footer y .wp-social-link: el glifo de cada red va en una regla de
	   tres clases. */
	.gp-footer .gp-footer__redes .wp-social-link .wp-block-social-link-anchor::before {
		content: none;
	}

	/* Cuatro clases: el core le pone margen y 0,65em con
	   `.wp-block-social-links .wp-social-link span:not(.screen-reader-text)`. */
	.gp-footer .gp-footer__redes .wp-social-link .wp-block-social-link-label {
		clip-path: none;
		letter-spacing: 0;
		margin: 0;
		font-size: 14px;
		height: auto;
		line-height: normal;
		overflow: visible;
		padding: 0;
		position: static;
		width: auto;
	}

	/* Contacto y Política sobre `footer-dark`: 24 arriba, 40 abajo y 12 entre
	   ellas. Con .gp-footer delante porque el layout de flujo del core, que va
	   con :root, le quitaba el margen; y solo al <nav>, porque el core le copia
	   la clase también al <ul>. */
	.gp-footer nav.gp-footer__movil-legal {
		margin-block: 0;
		order: 3;
		padding: 24px var(--wp--preset--spacing--40) 40px;
	}

	/* Filas del Figma: Work Sans 15, 18 arriba y abajo y raya blanca debajo. */
	.gp-footer__movil-enlaces .wp-block-navigation-item {
		border-bottom: 1px solid var(--wp--preset--color--base);
		/* El <li> del core es flex: sin esto el enlace se queda a la izquierda
		   aunque el pie vaya centrado. */
		justify-content: center;
		padding-block: 18px;
	}

	.gp-footer__movil-enlaces .wp-block-navigation-item__content {
		display: block;
		font-size: 15px;
		letter-spacing: 0.02em;
		line-height: normal;
		padding: 0 var(--wp--preset--spacing--40);
	}

	.gp-footer__movil-legal .wp-block-navigation-item {
		font-size: 15px;
		justify-content: center;
		line-height: normal;
	}

	.gp-footer__movil-legal .wp-block-navigation-item + .wp-block-navigation-item {
		margin-top: 12px;
	}
}

/* ==========================================================================
   Heros — inc/heros.php (hero-overlay, hero-botones, hero-small, hero-small-cta)
   ==========================================================================
   Imagen, degradado, altura, columna de 620 y anclaje abajo son atributos del
   cover. Aquí solo la sombra del titular, que el editor no ofrece. Todos los
   heros llevan la clase `gp-hero`.
   ========================================================================== */
.gp-hero .wp-block-post-title,
.gp-hero .wp-block-heading {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Fichas de grupos — patterns/fichas-grupos.php
   ==========================================================================
   Banda, rejilla, ficha, rellenos, colores y tamaños son atributos. Aquí solo
   lo que el editor no ofrece: que la ficha entera sea clicable. El único
   enlace de la ficha es "Leer más"; su ::after se estira sobre .gp-ficha, que
   es el contexto posicionado. Sigue siendo un solo <a> con texto visible, así
   que lector de pantalla y teclado ven un enlace normal.
   ========================================================================== */
.gp-ficha {
	position: relative;
}

.gp-ficha .gp-ficha__enlace a::after {
	content: "";
	inset: 0;
	position: absolute;
}

/* Las fichas de una fila no se estiran a la más alta: en Greenwire cada una
   mide lo suyo. El core no expone align-items en la rejilla. */
.gp-fichas > .gp-ficha {
	align-self: start;
}

/* Aire entre el glifo de Fontello y el texto de las líneas de lugar y
   miembros de la ficha. fontello.css lo pinta pegado; Greenwire deja 12px. */
.gp-ficha p[class*="icon-"]::before {
	margin-right: var(--wp--preset--spacing--30);
}

/* ==========================================================================
   Página de grupo — templates/page-grupo.html
   ==========================================================================
   El Figma de la Red de Voluntarios ("Grupo local · 390"); tablet y escritorio
   no están en el Figma. Casi todo son atributos de la plantilla; aquí, lo que
   cambia con el ancho y lo que el core no sabe hacer. */

/* 1 · Foto de portada. En móvil, 420 con el nombre centrado en vertical y en
   UNA caja (no una por renglón, como la cabecera de campaña): Rubik 700 de 32,
   4/10 de relleno. */
@media (max-width: 1023px) {
	.wp-block-cover.is-style-cabecera.gp-cabecera--grupo {
		min-height: 420px;
	}

	.is-style-cabecera.gp-cabecera--grupo .wp-block-cover__inner-container {
		justify-content: center;
		padding-block: 56px 40px;
	}

	.is-style-cabecera.gp-cabecera--grupo h1 {
		-webkit-box-decoration-break: slice;
		box-decoration-break: slice;
		display: inline-block;
		font-size: 32px;
		line-height: 1.26;
		padding: 4px 10px !important;
	}
}

/* 2 · Descripción: el texto, "Contacta" y la galería, del contenido. */
.gp-grupo__contenido > :first-child {
	margin-top: 0;
}

/* 3 · Fotogalería: una galería del core con el estilo Carrusel. Una foto por
   pantalla en móvil (240 de alto, a sangre, el Figma), dos en tablet y tres en
   escritorio (320), con la activa en el centro; se desliza con el dedo, con
   los puntos o pulsando una foto, en bucle (assets/js/theme.js). */
.wp-block-gallery.is-style-carrusel.is-style-carrusel {
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--30);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.wp-block-gallery.is-style-carrusel::-webkit-scrollbar {
	display: none;
}

.wp-block-gallery.is-style-carrusel.is-style-carrusel > .wp-block-image {
	flex: 0 0 100%;
	height: 240px;
	margin: 0;
	scroll-snap-align: center;
	width: 100%;
}

.wp-block-gallery.is-style-carrusel > .wp-block-image img {
	cursor: pointer;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.gp-carrusel__puntos {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	justify-content: center;
	margin-top: var(--wp--preset--spacing--40);
}

.gp-carrusel__puntos button {
	background-color: #dedfdb;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	height: 10px;
	padding: 0;
	width: 10px;
}

.gp-carrusel__puntos button[aria-current="true"] {
	background-color: var(--wp--preset--color--primary);
}

@media (min-width: 700px) {
	.wp-block-gallery.is-style-carrusel.is-style-carrusel > .wp-block-image {
		flex-basis: calc((100% - var(--wp--preset--spacing--30)) / 2);
	}
}

/* En escritorio, a sangre pesaba demasiado: al ancho del contenido (1067), como
   la agenda y las historias de debajo. La galería es alignfull (móvil a sangre,
   como el Figma) y eso no se toca con un atributo por ancho: aquí se anula. */
@media (min-width: 1024px) {
	.wp-block-gallery.is-style-carrusel.is-style-carrusel.alignfull {
		margin-left: auto !important;
		margin-right: auto !important;
		max-width: var(--wp--style--global--content-size);
	}

	.wp-block-gallery.is-style-carrusel.is-style-carrusel > .wp-block-image {
		flex-basis: calc((100% - 2 * var(--wp--preset--spacing--30)) / 3);
		height: 320px;
	}
}

/* 6 · Canales del grupo: desde 700, los dos botones en fila y a su ancho. */
@media (min-width: 700px) {
	.gp-grupo__canales-botones.gp-grupo__canales-botones {
		flex-direction: row;
		justify-content: center;
	}

	.gp-grupo__canales-botones > .wp-block-button.wp-block-button__width-100 {
		flex-basis: auto;
		width: auto;
	}
}

/* ==========================================================================
   Evento — templates/single-evento.html
   ==========================================================================
   Texto a la izquierda y la ficha (cuándo, dónde, quién, plazas, botones y
   calendarios) a la derecha, fija al bajar (atributo `position` del grupo).
   Aquí solo el hueco del icono de Fontello y, en móvil, la ficha antes que el
   texto: al apilarse las columnas se iría debajo del formulario. */

.gp-evento__ficha p[class*="icon-"] {
	display: flex;
	gap: var(--wp--preset--spacing--30);
}

.gp-evento__ficha p[class*="icon-"]::before {
	color: var(--wp--preset--color--primary);
	margin: 0.15em 0 0;
}

@media (max-width: 781px) {
	.gp-evento .wp-block-column:last-child {
		order: -1;
	}
}

/* Migas: la página actual en gris, como el Figma ("Inicio / Espacios de
   activismo"). El core no tiene control para ese color. `text-mute` y no el
   #7d7d7d del Figma, que no está en la paleta. */
.wp-block-breadcrumbs [aria-current="page"] {
	color: var(--wp--preset--color--text-mute);
}

/* ==========================================================================
   Sin hueco entre cabecera, main y pie
   ==========================================================================
   El core separa los bloques raíz con `margin-block-start` igual al blockGap
   global (24px por defecto). No hay atributo para tocar solo ese hueco:
   `styles.spacing.blockGap` de theme.json es también el hueco por defecto
   entre párrafos, así que bajarlo a 0 rompería todo el contenido. El espacio
   antes del pie lo decide cada página (page.html lleva su relleno); una banda
   a sangre como último bloque se apoya en el pie, como en Greenwire. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Lo mismo entre dos bandas a sangre seguidas del contenido (la portada, como
   en el Figma): pegadas, sin la franja blanca de 24 entre una y otra. */
.wp-block-post-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* ==========================================================================
   404 (patterns/hidden-404.php)
   ==========================================================================
   Calco de es.greenpeace.org: sus dos tamaños no están en la escala y solo
   salen aquí. Lo demás (color, familia, márgenes, mayúsculas) son atributos. */
.gp-404__numero {
	font-size: 132px;
	line-height: normal;
}

.gp-404__titulo {
	font-size: 26px;
	line-height: normal;
}

/* ==========================================================================
   Movimiento reducido
   Quien lo pide en su sistema no ve transiciones ni desplazamientos suaves.
   Vale también para el CSS de los bloques; el desplazamiento por JS lo mira
   theme.js.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   Más contraste
   Quien lo pide en su sistema (prefers-contrast: more) ve los colores de marca
   que no llegan a AA cambiados por otros de la paleta que sí. Sin esa
   preferencia, nada cambia: el verde y el naranja de marca se quedan.
   - Verdes (2,8:1 con blanco) → primary-dark (10,8:1).
   - Gris suave (3,2:1) → text-mute (5,4:1).
   - Naranja: se queda, pero el texto encima pasa de blanco (3,2:1) a
     contrast (4,8:1).
   :root doblado para ganar a las variables que imprime theme.json.
   ========================================================================== */

@media (prefers-contrast: more) {
	:root:root {
		--wp--preset--color--primary: var(--wp--preset--color--primary-dark);
		--wp--preset--color--primary-link: var(--wp--preset--color--primary-dark);
		--wp--preset--color--primary-active: var(--wp--preset--color--primary-dark);
		--wp--preset--color--muted: var(--wp--preset--color--text-mute);
	}

	.gp-header .wp-block-navigation-item.is-cta,
	.gp-header .wp-block-navigation-item.is-cta:hover,
	.gp-header .wp-block-navigation-item.is-cta:focus-within,
	.gp-menu-movil__enlace.is-cta,
	.gp-agenda__fecha,
	.has-secondary-background-color.has-secondary-background-color {
		color: var(--wp--preset--color--contrast) !important;
	}

	/* Sobre fondo oscuro el verde oscuro no se vería: al pasar, subrayado. */
	.gp-footer a:hover,
	.gp-footer a:focus,
	.gp-header .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover,
	.gp-header .wp-block-navigation__submenu-container > .wp-block-navigation-item:focus-within {
		color: var(--wp--preset--color--base);
		text-decoration: underline;
	}
}