/*
Theme Name: Odon Solar
Description: A custom block theme.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: odon-solar
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* WordPress inserts margin-block-start: var(--wp--style--block-gap) between the
   template's top-level sections (header part, main, footer part) — a gap that
   exists even when no markup asks for it. Zero it so sections butt edge-to-edge
   and own their vertical rhythm via padding; this does not affect block gaps
   inside nested layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* === variables === */
:root {
	--os-orange: var(--wp--preset--color--primary-orange);
	--os-orange-dark: var(--wp--preset--color--primary-orange-dark);
	--os-green: var(--wp--preset--color--accent-green);
	--os-green-dark: var(--wp--preset--color--accent-green-dark);
	--os-deep-green: var(--wp--preset--color--deep-green);
	--os-deep-green-darker: var(--wp--preset--color--deep-green-darker);
	--os-yellow: var(--wp--preset--color--accent-yellow);
	--os-cream: var(--wp--preset--color--cream);
	--os-gray: var(--wp--preset--color--gray);

	/* Motion: natural-deceleration easing, no bounce/elastic. Reused by every
	   rule in the "=== motion ===" section below, plus anywhere else a
	   transition wants the same feel. */
	--os-ease-out: cubic-bezier(0.25, 1, 0.5, 1);
	--os-reveal-distance: 14px;
	--os-reveal-duration: 0.6s;
	--os-stagger-step: 60ms;
}

/* === base === */
html {
	overflow-x: hidden;
}

body {
	background: var(--os-cream);
}

/* Page-content sections (Inicio and every other migrated static page) sit
   inside a templateLock wrapper that must use layout:"constrained" —
   layout:"flow" crashes the block editor here (a real Gutenberg bug: a
   flow-layout group whose children declare align:"full", nested inside
   wp:post-content in the classic Page editor, throws on `getAlignments`).
   Constrained's own !important cap is fought back here so alignfull
   sections still bleed edge to edge on the front-end, exactly as they did
   before migration. Shared by every migrated page: give the page's wrapper
   group className "page-content-lock" and each of its full-bleed section
   groups className "page-section" (plus any wp:pattern-referenced band,
   e.g. .cta-band, listed alongside). */
.page-content-lock {
	--wp--style--block-gap: 0px;
}

.page-content-lock.is-layout-constrained > .page-section,
.page-content-lock.is-layout-constrained > .cta-band {
	max-width: none !important;
	width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	margin-top: 0 !important;
}

/* Same constrained-layout cap, one level deeper: any group inside page
   content that must itself hold a full-width row or list (e.g. docs__list's
   head/items/labels, org__list's items, project__steps' step rows) needs
   its OWN layout switched from "flow" to "constrained" too (same
   editor-crash reason as above), which caps+centers EVERY child that isn't
   itself block-level-full-width instead of letting them fill the row —
   including dynamic-block output and plain paragraphs, not just the
   obvious ones. Escape the whole child set with a wildcard rather than
   chasing each className by hand.
   NOT a blanket fix for every flow→constrained conversion in this file:
   content that's meant to stay centered (e.g. .funders__row, a deliberately
   centered row of logos) must NOT be added here, or you'll un-center it.
   Check each converted group's front-end rendering against the pre-fix
   design before deciding whether it needs this escape — see CLAUDE.md. */
.docs__list.is-layout-constrained > *,
.org__list.is-layout-constrained > *,
.project__steps.is-layout-constrained > *,
.pilot__card.is-layout-constrained > *,
.pilot__info.is-layout-constrained > *,
.pilot__flow.is-layout-constrained > *,
.lines__list.is-layout-constrained > *,
.lines__content.is-layout-constrained > *,
.benefits__list.is-layout-constrained > *,
.faq__list.is-layout-constrained > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* The margin-top side effect isn't the --wp--style--block-gap variable (that
   approach — proven for .page-content-lock's own direct children — does NOT
   work one level deeper): WordPress's global stylesheet carries
   `:root :where(.is-layout-constrained) > * { margin-block-start: 24px }`
   as a literal px value, not a var() reference, so zeroing the custom
   property on the parent has no effect on it. Fought back directly with
   !important instead — on both docs__list/org__list/project__steps
   THEMSELVES (each is itself a child of an is-layout-constrained
   page-section) and on their own children (same rule as the width escape
   above, since it's the same mechanism one level deeper again). */
.docs__list,
.org__list,
.project__steps,
.pilot__card,
.pilot__info,
.pilot__flow,
.lines__list,
.lines__content,
.benefits__list,
.faq__list,
.docs__list.is-layout-constrained > *,
.org__list.is-layout-constrained > *,
.project__steps.is-layout-constrained > *,
.pilot__card.is-layout-constrained > *,
.pilot__info.is-layout-constrained > *,
.pilot__flow.is-layout-constrained > *,
.lines__list.is-layout-constrained > *,
.lines__content.is-layout-constrained > *,
.benefits__list.is-layout-constrained > *,
.faq__list.is-layout-constrained > * {
	margin-top: 0 !important;
}

/* Theme ships no default img reset, so any image without an explicit
   width in this file renders at its native pixel size and can overflow
   a narrower container (e.g. project__image, history__image). */
img {
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4, h5, h6 {
	letter-spacing: -0.01em;
}

.eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	font-size: 0.8125rem;
}

/* === header === */
/* wp:template-part wraps the header in a <div class="wp-block-template-part">
   that's exactly as tall as the header itself. position:sticky can only
   "stick" for as much extra height as its containing block has beyond its
   own box — a snug wrapper gives it zero room, so the header just scrolled
   away with the page despite position:sticky being set (confirmed: a plain
   test element with sticky worked fine elsewhere on the same page). Taking
   this wrapper out of the box model with display:contents makes
   .site-header stick relative to .wp-site-blocks instead, which spans the
   full page height. */
.wp-site-blocks > .wp-block-template-part:first-child {
	display: contents;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	transition: box-shadow 0.3s var(--os-ease-out);
}

/* Logged-in visitors get WP's own fixed admin bar on top of the viewport
   (32px, or 46px below 782px) — without this, the sticky header parks
   itself at viewport top:0 and sits half-hidden under it while scrolled. */
body.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

/* .is-scrolled is toggled by assets/motion.js once the page has scrolled
   past the top; sticky positioning is what makes it visible at all (the
   header used to be position:relative and scrolled off with the page). */
.site-header.is-scrolled {
	box-shadow: 0 2px 16px rgba(22, 26, 22, 0.08);
}

@media (prefers-reduced-motion: reduce) {
	.site-header {
		transition: none;
	}
}

.site-header__brand {
	gap: 12px;
}

.site-header__title a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	line-height: 1.1;
	white-space: nowrap;
}

.site-header__tagline {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--os-green-dark);
	margin: 0;
}

.site-header__nav {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.9375rem;
}

/* nowrap/no-shrink is a full-desktop-row concern (≥981px, where the header
   fits brand+nav+CTA on one line). Below that: 600-980px is the tablet
   "dead zone" below which the nav wraps to its own centered row (see the
   dead-zone media query further down) — bounding this at 981px instead of
   leaving it open-ended keeps the two rules from fighting over the same
   .site-header__nav element (nav and .wp-block-navigation__container are
   the same element here, so this rule's !important was winning over the
   dead-zone's flex-wrap:wrap even inside 600-980px). Below 600px this same
   element renders inside the hamburger's modal overlay instead, where WP
   core already stacks it into a full-width vertical column, so forcing
   nowrap there squeezed all 7 links into one ~105px-wide row and pushed
   most of them off the right edge of the screen. */
@media (min-width: 981px) {
	.site-header__nav {
		flex-wrap: nowrap !important;
		flex-shrink: 1;
	}

	.site-header__nav .wp-block-navigation__container {
		flex-wrap: nowrap;
	}
}

/* The nav block's own layout attr (justifyContent:"right", for the desktop
   inline row) generates an "items-justified-right" class with align-items:
   flex-end that WP also applies inside the mobile modal, right-aligning and
   shrink-wrapping the link column to ~100px instead of filling the overlay.
   Override it specifically for the open-modal state; the desktop row is
   unaffected since it isn't wrapped in .is-menu-open. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: stretch !important;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content {
	width: 100%;
	text-align: left;
	padding-left: 0;
}

.wp-block-navigation__responsive-dialog {
	padding-left: 32px;
	padding-right: 32px;
	box-sizing: border-box;
}

.site-header__nav .wp-block-navigation-item > a,
.site-header__nav .wp-block-navigation-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	padding: 8px 10px;
	white-space: nowrap;
}

.site-header__nav .wp-block-navigation-item > a:hover {
	color: var(--os-green);
}

.site-header__nav .wp-block-navigation-item.current-menu-item > a,
.site-header__nav .wp-block-navigation-item > a[aria-current="page"] {
	color: var(--os-green);
}

.site-header__cta {
	flex-shrink: 0;
}

.site-header__cta .wp-block-button.is-style-fill .wp-element-button {
	background: var(--os-yellow);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	padding: 10px 26px;
	border-radius: 999px;
	white-space: nowrap;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.site-header__cta .wp-element-button:hover {
	background: var(--os-orange);
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.site-header__cta .wp-element-button {
		transition: none;
	}
}

/* === buttons === */
.wp-block-button .wp-element-button {
	padding: 14px 30px;
	font-family: var(--wp--preset--font-family--heading);
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.wp-block-button.is-style-fill .wp-element-button {
	background: var(--os-yellow);
	color: var(--os-deep-green-darker);
}

.wp-block-button.is-style-fill .wp-element-button:hover {
	background: var(--os-orange);
	transform: translateY(-1px);
}

.wp-block-button.is-style-outline .wp-element-button {
	background: transparent;
	color: var(--os-deep-green-darker);
	box-shadow: inset 0 0 0 2px var(--os-deep-green-darker);
}

.wp-block-button.is-style-outline .wp-element-button:hover {
	background: var(--os-deep-green-darker);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-dark .wp-element-button {
	background: var(--os-deep-green-darker);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-dark .wp-element-button:hover {
	background: var(--os-deep-green);
}

.wp-block-button.is-style-dark-green .wp-element-button {
	background: var(--os-deep-green);
	color: var(--wp--preset--color--base);
	text-transform: uppercase;
	border-radius: 999px;
}

.wp-block-button.is-style-dark-green .wp-element-button:hover {
	background: var(--os-deep-green-darker);
}

.wp-block-button.is-style-outline-green .wp-element-button {
	background: transparent;
	color: var(--os-green);
	box-shadow: inset 0 0 0 2px var(--os-green);
}

.wp-block-button.is-style-outline-green .wp-element-button:hover {
	background: var(--os-green);
	color: var(--wp--preset--color--base);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button .wp-element-button {
		transition: none;
	}
}

/* === hero === */
.hero__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 1.05;
	color: var(--wp--preset--color--contrast);
	margin-bottom: 20px;
}

.hero__title-orange {
	color: var(--os-orange);
}

.hero__lead {
	font-size: 1.125rem;
	color: var(--wp--preset--color--contrast);
	max-width: 480px;
	margin-bottom: 28px;
}

.hero__buttons {
	gap: 16px;
}

/* These two inherited the site-wide default button size (14px 30px padding,
   ~18px font) meant for CTA bands and other full-width sections — oversized
   for a hero next to a title that's already the biggest text on the page. */
.hero__buttons .wp-element-button {
	border-radius: 999px;
	padding: 12px 26px;
	font-size: 0.9375rem;
}

.hero__image {
	margin: 0;
}

.hero__image img {
	display: block;
	width: 100%;
	height: clamp(280px, 32vw, 520px);
	object-fit: cover;
}

/* === sections === */
.eyebrow {
	color: var(--os-green-dark);
}

.funders {
	text-align: center;
}

.funders__row {
	gap: clamp(4px, 1.5vw, 24px);
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	width: 100%;
	max-width: 100%;
}

.funders__logo {
	margin: 0;
	padding: 0 clamp(4px, 1vw, 24px);
	position: relative;
	flex-shrink: 1;
	min-width: 0;
}

.funders__logo:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 1px;
	height: 24px;
	background: rgba(255, 255, 255, 0.25);
}

.funders__logo img {
	display: block;
	height: clamp(16px, 2.5vw, 32px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.project__row {
	gap: 56px;
	align-items: flex-start;
}

.about__row {
	gap: 56px;
	align-items: center;
}

.project__title {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	color: var(--wp--preset--color--contrast);
	margin: 0 0 20px;
}

.about__title {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	color: var(--wp--preset--color--contrast);
	margin: 0 0 20px;
}

.project__lead {
	color: var(--wp--preset--color--contrast);
	font-size: 1.0625rem;
	margin-bottom: 28px;
}

.about__lead {
	color: var(--wp--preset--color--contrast);
	font-size: 1.0625rem;
	margin-bottom: 20px;
}

.project__steps {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 28px;
}

.project__step {
	gap: 16px;
	align-items: center;
}

.project__step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--os-cream);
	color: var(--os-orange);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.125rem;
	margin: 0;
}

.project__step-label {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	margin: 0;
}

.project__step-arrow {
	width: 48px;
	margin: 0;
	text-align: center;
	color: var(--os-orange);
	opacity: 0.5;
	line-height: 1;
}

.project__link a {
	color: var(--os-orange);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.project__link a:hover {
	color: var(--os-orange-dark);
}

.about__link a {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.about__link a:hover {
	color: var(--os-green-dark);
}

.project__image img {
	border-radius: 20px;
}

.about__image-wrap {
	position: relative;
	max-width: 480px;
	margin-left: auto;
}

.about__image-wrap .about__image {
	margin: 0;
}

.about__image-wrap .about__image img {
	border-radius: 20px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

.about__badge {
	position: absolute;
	left: -16px;
	bottom: -16px;
	border-radius: 8px;
	max-width: 200px;
}

.about__badge-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.25rem;
	margin: 0;
}

.about__badge-sub {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 4px 0 0;
}

.why__title {
	color: var(--wp--preset--color--contrast);
	margin-bottom: 40px;
}

.why__row {
	gap: 32px;
}

.why__number {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 12px;
}

.why__divider {
	margin: 0 0 16px;
	opacity: 0.25;
}

.why__icon {
	margin-bottom: 12px;
}

.why__icon .icon-container {
	color: var(--wp--preset--color--contrast);
}

.why__item-title {
	color: var(--wp--preset--color--contrast);
	font-size: 1.125rem;
	margin-bottom: 8px;
}

.why__item p:last-child {
	color: rgba(22,26,22,0.7);
	font-size: 0.9375rem;
}
/* === cards === */
/* === cta === */
.cta-band {
	text-align: center;
}

.cta-band__title {
	color: var(--wp--preset--color--base);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	margin-bottom: 12px;
}

.cta-band__lead {
	color: rgba(255,255,255,0.9);
	max-width: 34em;
	margin: 0 auto 28px;
}

.cta-band--green .cta-band__title,
.cta-band--green .cta-band__lead {
	color: var(--wp--preset--color--contrast);
}

/* === footer === */
.site-footer__top {
	margin-bottom: 48px;
}

.site-footer__title a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.site-footer__tagline {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--os-green);
	margin: 0;
}

.site-footer__desc {
	margin-top: 16px;
	color: rgba(255,255,255,0.75);
	max-width: 26em;
}

.site-footer__nav .wp-block-navigation-item > a {
	color: rgba(255,255,255,0.85);
	padding: 4px 0;
	font-size: 0.9375rem;
}

.site-footer__nav .wp-block-navigation-item > a:hover {
	color: var(--os-yellow);
}

.site-footer__label {
	color: var(--os-green);
	margin-bottom: 8px;
}

.site-footer__label:nth-of-type(2) {
	margin-top: 24px;
}

.site-footer__email-row {
	gap: 10px;
	align-items: center;
	margin-bottom: 20px;
}

.site-footer__email-icon .icon-container {
	background: var(--wp--preset--color--base);
	color: var(--os-deep-green-darker);
	border-radius: 999px;
	padding: 8px !important;
	box-sizing: content-box !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-footer__email a {
	color: rgba(255,255,255,0.9);
}

.site-footer__social {
	margin-top: 4px;
}

.site-footer__social .wp-block-social-link {
	background: rgba(255,255,255,0.12);
}

.site-footer__social .wp-block-social-link:hover {
	background: var(--os-green);
}

.site-footer__legal {
	border-top: 1px solid rgba(255,255,255,0.15);
	padding-top: 24px;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.site-footer__copy,
.site-footer__copy a {
	color: rgba(255,255,255,0.6);
	font-size: 0.8125rem;
	margin: 0;
}

/* === news single === */
.single-hero {
	align-items: flex-end;
}

.single-hero__back a {
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
}

.single-hero__back a:hover {
	color: var(--os-orange);
}

.single-meta__pills {
	margin-bottom: 16px;
}

.single-meta__pills a {
	display: inline-block;
	background: var(--os-cream);
	color: var(--os-orange-dark);
	border: 1px solid var(--os-orange);
	border-radius: 999px;
	padding: 4px 14px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	margin: 0 6px 6px 0;
}

.single-meta__row {
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.single-meta__eyebrow {
	color: var(--os-green-dark);
	margin: 0;
}

.single-meta__dot {
	color: var(--os-gray);
	margin: 0;
}

.single-meta__date {
	color: var(--os-gray);
	font-size: 0.875rem;
}

.single-meta__title {
	font-size: clamp(2rem, 4vw, 2.75rem);
	color: var(--os-deep-green-darker);
	margin: 0 0 16px;
}

.single-meta__lead {
	font-size: 1.125rem;
	color: var(--os-deep-green-darker);
	font-weight: 500;
}

.single-meta__divider {
	max-width: 120px;
	margin: 32px auto 0;
}

.single-post__content {
	padding-top: 48px;
	padding-bottom: 0;
}

/* Below ~640px the post-content column (contentSize:640px) no longer has
   room to auto-center with margin, so it fills the full viewport edge to
   edge with zero side padding — text touches the screen edges. .single-meta
   (title/lead) already has its own 32px side padding at every width; give
   the article body the same so text doesn't run flush to the screen. */
@media (max-width: 639px) {
	.single-post__content {
		padding-left: 32px;
		padding-right: 32px;
		box-sizing: border-box;
	}
}

.single-post__content p {
	color: var(--os-gray);
	font-size: 1.0625rem;
	margin-top: 0;
	margin-bottom: 24px;
}

.single-post__content p:last-child {
	margin-bottom: 0;
}

.single-post__content h2 {
	margin-top: 2em;
	color: var(--os-deep-green-darker);
}

.single-post__content img {
	border-radius: 12px;
}

.related__divider {
	margin-bottom: 32px;
}

.related__title {
	margin-bottom: 32px;
}

.related__grid {
	gap: 32px;
}

.related__card {
	--wp--style--block-gap: 0px;
}

.related__image img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	border-radius: 16px;
}

.related__category {
	margin: 16px 0 8px;
	color: var(--os-orange);
}

.related__category a {
	text-decoration: none;
}

.related__card-title {
	margin: 0 0 8px;
	font-size: 1.125rem;
}

.related__card-title a {
	color: var(--os-deep-green-darker);
	text-decoration: none;
}

.related__card-title a:hover {
	color: var(--os-green-dark);
}

.related__excerpt {
	color: var(--os-gray);
	font-size: 0.9375rem;
	margin: 0 0 12px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.related__card.is-layout-constrained > .related__link {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.related__link {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-decoration: none;
	margin: 0;
}

.related__link:hover {
	color: var(--os-orange);
}

.news-cta__title {
	color: var(--wp--preset--color--contrast);
	margin-bottom: 12px;
}

.news-cta__lead {
	text-align: center;
	color: var(--wp--preset--color--contrast);
	opacity: 0.75;
	max-width: 560px;
	margin: 0 auto 32px;
}

.news-cta__form-row {
	flex-wrap: wrap;
	width: 100%;
}

.news-cta__form {
	width: 100%;
	max-width: 480px;
	box-sizing: border-box;
}

.news-cta__form .wp-block-search__inside-wrapper {
	border-radius: 8px;
	overflow: hidden;
	gap: 12px;
	width: 100%;
	flex-wrap: wrap;
	box-sizing: border-box;
}

.news-cta__form .wp-block-search__input {
	border: none;
	border-radius: 999px;
	padding: 14px 22px;
	flex: 0 1 260px;
	width: auto;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	background: rgba(255,255,255,0.4);
	color: var(--wp--preset--color--contrast);
}

.news-cta__form .wp-block-search__input::placeholder {
	color: rgba(22,26,22,0.5);
}

.news-cta__form .wp-block-search__button {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: 999px;
	padding: 14px 26px;
	text-transform: uppercase;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	font-weight: 700;
	border: none;
	flex-shrink: 0;
	white-space: nowrap;
}

.news-cta__form .wp-block-search__button:hover {
	background: var(--os-deep-green-darker);
}

/* === legal pages (Privacidad, Aviso Legal) === */
/* These are plain-text pages sharing templates/page.html with Contacto,
   which already has its own full-width hero and doesn't want extra padding
   or a narrower column — so the fix lives on a .legal-content wrapper
   inside just these two pages' content, not on the shared template. Reading
   width capped well below the sitewide 1200px contentSize; long legal text
   at full width is hard to read. */
.legal-content {
	padding: 80px 32px 96px;
}

.legal-content h2 {
	margin-top: 2em;
}

.legal-content h2:first-child {
	margin-top: 0;
}

/* === forms === */
.contact-hero__eyebrow {
	color: var(--os-green);
}

.contact-hero__title {
	color: var(--wp--preset--color--base);
	font-size: clamp(2.5rem, 5vw, 4rem);
	margin-top: 12px;
}

.contact__title {
	color: var(--os-deep-green-darker);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	max-width: 12em;
	margin-bottom: 32px;
}

.contact__address {
	border-left: 3px solid var(--os-green);
	padding-left: 20px;
}

.contact__label {
	color: var(--os-orange-dark);
	margin-bottom: 8px;
}

.contact__place {
	color: var(--os-deep-green-darker);
	font-weight: 700;
	font-size: 1.25rem;
	margin: 0;
}

.contact__region {
	color: var(--os-green-dark);
	font-weight: 700;
	font-size: 1.25rem;
	margin: 0;
}

.contact__form {
	border: 1px solid var(--os-green);
	border-radius: 4px;
	padding: 32px;
}

.contact__form {
	width: 100%;
	box-sizing: border-box;
	flex-direction: column;
	border: none !important;
	padding: 0 !important;
}

.jetpack-contact-form-container {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--os-green);
	border-radius: 4px;
	padding: 32px;
}

.contact-form {
	width: 100%;
}

.contact-submit {
	margin: 24px 0 0;
}

.contact__form .grunion-field-label {
	color: var(--os-gray);
	font-weight: 600;
	font-size: 0.9375rem;
	margin-bottom: 8px;
}

.contact__form .grunion-label-required {
	font-weight: 400;
	color: rgba(22,26,22,0.45);
	font-size: 0.8125rem;
	margin-left: 4px;
}

.contact__form input.grunion-field,
.contact__form textarea.grunion-field {
	border: none !important;
	border-bottom: 1px solid rgba(22,26,22,0.2) !important;
	border-radius: 0 !important;
	padding: 8px 0;
	width: 100%;
	background: transparent;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--os-deep-green-darker);
}

.contact__form textarea.grunion-field {
	min-height: 96px;
	resize: vertical;
}

.contact__form input.grunion-field:focus,
.contact__form textarea.grunion-field:focus {
	outline: none;
	border-bottom-color: var(--os-green) !important;
}

.contact__form .contact-submit {
	margin: 0;
}

.pushbutton-wide {
	background: var(--os-orange);
	color: var(--os-deep-green-darker);
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	border: none;
	border-radius: 8px;
	padding: 16px 32px;
	width: 100%;
	box-sizing: border-box;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.pushbutton-wide:hover {
	background: var(--os-orange-dark);
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.pushbutton-wide {
		transition: none;
	}
}

/* === news hero === */
.news-hero__eyebrow {
	color: var(--os-green);
}

.news-hero__title {
	color: var(--wp--preset--color--base);
	font-size: clamp(2.5rem, 5vw, 4rem);
	margin-top: 12px;
}

/* === news filters === */
.news-filters__row {
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	align-items: center;
}

.news-filters__pills {
	gap: var(--wp--preset--spacing--60);
	align-items: center;
}

.news-filters__pill .wp-element-button {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.news-filters__pill.is-style-outline .wp-element-button {
	background: transparent;
	border: none;
	box-shadow: none;
	color: var(--wp--preset--color--contrast);
}

.news-filters__pill.is-style-outline .wp-element-button:hover {
	color: var(--os-green-dark);
}

.news-filters__pill.is-style-fill .wp-element-button {
	background: var(--os-yellow);
	color: var(--wp--preset--color--contrast);
	border-radius: 999px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

.news-filters__search {
	flex-grow: 0;
	box-sizing: border-box;
	max-width: 100%;
}

.news-filters__search .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	border: none;
	border-radius: 999px;
	background: var(--os-cream);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20) var(--wp--preset--spacing--10) var(--wp--preset--spacing--50);
	box-sizing: border-box;
	max-width: 100%;
}

.news-filters__search .wp-block-search__input {
	border: none;
	border-radius: 0;
	background: transparent;
	padding: var(--wp--preset--spacing--30) 0;
	width: 220px;
	max-width: 100%;
	box-sizing: border-box;
	color: var(--wp--preset--color--contrast);
	font-size: 0.8125rem;
}

.news-filters__search .wp-block-search__input::placeholder {
	color: var(--os-gray);
	opacity: 1;
}

.news-filters__search .wp-block-search__button {
	border-radius: 50%;
	background: transparent;
	color: var(--os-orange);
	fill: var(--os-orange);
	width: 36px;
	height: 36px;
	padding: 0;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.news-filters__search .wp-block-search__button svg {
	width: 18px;
	height: 18px;
}

/* === news list === */
.news-list__grid {
	gap: var(--wp--preset--spacing--80);
}

.news-list__load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--40);
}

.news-list__load-more {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 14px 30px;
	border-radius: 999px;
	border: none;
	background: transparent;
	color: var(--os-deep-green-darker);
	box-shadow: inset 0 0 0 2px var(--os-deep-green-darker);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.news-list__load-more:hover:not(:disabled) {
	background: var(--os-deep-green-darker);
	color: var(--wp--preset--color--base);
}

.news-list__load-more:disabled {
	cursor: wait;
	opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
	.news-list__load-more {
		transition: none;
	}
}

.news-card {
	--wp--style--block-gap: 0px;
}

.news-card__meta {
	align-items: baseline;
	margin-bottom: var(--wp--preset--spacing--30);
}

.news-card__category {
	color: var(--os-green-dark);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
}

.news-card__category a {
	color: inherit;
	text-decoration: none;
}

.news-card__date {
	color: rgba(22,26,22,0.5);
	font-size: 0.875rem;
}

.news-card__divider {
	border-top: 1px solid rgba(22,26,22,0.12);
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--50);
}

.news-card__row {
	gap: var(--wp--preset--spacing--50);
	margin-top: 0;
}

.news-card__title {
	color: var(--os-deep-green-darker);
	font-size: 1.375rem;
	line-height: 1.25;
	margin-bottom: var(--wp--preset--spacing--30);
}

.news-card__title a {
	color: inherit;
	text-decoration: none;
}

.news-card__title a:hover {
	color: var(--os-green-dark);
}

/* No hover/focus background box on the article title on request — just the
   browser's default tap-highlight (a flat grey rectangle glued to the text)
   disabled, so tapping doesn't flash an unstyled box; the colour-only hover
   below is the only feedback left. */
.news-card__title a,
.related__card-title a {
	-webkit-tap-highlight-color: transparent;
}

.news-card__excerpt {
	color: var(--os-gray);
	font-size: 0.9375rem;
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--40);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.news-card__link {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-decoration: none;
	margin-top: 0;
}

.news-card__link:hover {
	color: var(--os-orange);
}

.news-card__image img {
	border-radius: 12px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

/* === participa hero === */
/* Matched to the other page heroes (Qué hacemos: minHeight 480, the tallest
   of the wp:cover-style heroes) — this one was a flat 520px plus 96px of
   vertical panel padding, taller than any other page's hero band. */
.participa-hero__row {
	min-height: 480px;
}

.participa-hero__panel {
	padding: 64px 64px;
}

.participa-hero__eyebrow {
	color: rgba(255, 255, 255, 0.8);
}

.participa-hero__title {
	color: var(--wp--preset--color--base);
	font-weight: 800;
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	margin: 12px 0 16px;
}

.participa-hero__lead {
	color: rgba(255,255,255,0.85);
	max-width: 32em;
	margin-bottom: 24px;
}

.participa-hero__buttons .wp-block-button.is-style-fill .wp-element-button {
	color: var(--wp--preset--color--contrast);
	border-radius: 999px;
}

/* height:100% here was resolving via the placeholder's own (portrait, 663x717)
   aspect ratio rather than the row's min-height, since percentage heights on
   a flex child of an auto-sized row fall back to intrinsic sizing — that's
   what was actually stretching the whole hero to 623px regardless of the
   panel-padding trim above. Pin it to the same 480px target directly;
   object-fit:cover already handles cropping whatever image ends up here. */
.participa-hero__image {
	position: relative;
	height: 480px;
}

.participa-hero__image::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 15%;
	background: linear-gradient(to right, var(--os-deep-green), transparent);
	z-index: 1;
	pointer-events: none;
}

/* wp:columns stacks below 782px (WP core default): the green panel moves
   above the image instead of beside it, so the fusion gradient needs to
   fade from the TOP of the image (where it now borders the panel) instead
   of the left edge. */
@media (max-width: 781px) {
	.participa-hero__image::before {
		top: 0;
		left: 0;
		right: 0;
		bottom: auto;
		width: auto;
		height: 15%;
		background: linear-gradient(to bottom, var(--os-deep-green), transparent);
	}
}

.participa-hero__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* === benefits === */
.benefits__title {
	color: var(--wp--preset--color--contrast);
	margin-bottom: 40px;
}

.benefits__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: stretch;
}

.benefits__list > .benefits__item {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.benefits__item {
	gap: 16px;
	align-items: flex-start;
}

.benefits__arrow-icon {
	margin-top: 4px;
}

.benefits__arrow-icon .icon-container {
	color: var(--os-orange);
}

.benefits__item p:last-child {
	color: var(--wp--preset--color--contrast);
	font-size: 1.0625rem;
	margin: 0;
}

/* === faq === */
.faq__title {
	color: var(--wp--preset--color--contrast);
	margin-bottom: 40px;
}

.faq__list {
	display: flex;
	flex-direction: column;
}

.faq__item {
	border-bottom: 1px solid rgba(22,26,22,0.12);
	padding: 20px 0;
}

.faq__item:first-child {
	border-top: 1px solid rgba(22,26,22,0.12);
}

.faq__item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

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

.faq__item summary::after {
	content: "";
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	margin-left: 16px;
	border-right: 2px solid var(--wp--preset--color--contrast);
	border-bottom: 2px solid var(--wp--preset--color--contrast);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.faq__item[open] summary::after {
	transform: rotate(-135deg);
}

.faq__item p {
	color: var(--os-gray);
	margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
	.faq__item summary::after {
		transition: none;
	}
}

/* === pilot === */
.pilot__eyebrow {
	color: var(--wp--preset--color--base);
	margin-bottom: 20px;
}

.pilot__card {
	background: var(--os-deep-green);
	border-radius: 24px;
	padding: 40px;
}

.pilot__card-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 24px;
	padding-bottom: 32px;
	margin-bottom: 32px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
}

.pilot__title {
	color: var(--wp--preset--color--base);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	margin: 0;
}

.pilot__status {
	display: inline-block;
	flex-shrink: 0;
	background: rgba(255,255,255,0.4);
	color: var(--os-deep-green-darker);
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 10px 20px;
	border-radius: 999px;
	white-space: nowrap;
}

.pilot__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 56px;
}

.pilot__info {
	flex: 1 1 480px;
}

.pilot__lead {
	color: rgba(255,255,255,0.75);
	font-size: 1.0625rem;
	max-width: 38em;
	margin: 0 0 24px;
}

.pilot__benefits-title {
	color: var(--wp--preset--color--base);
	font-weight: 700;
	font-size: 1.0625rem;
	margin: 0 0 12px;
}

.pilot__benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pilot__benefits li {
	display: flex;
	gap: 8px;
	color: rgba(255,255,255,0.75);
	font-size: 0.9375rem;
}

.pilot__benefits li::before {
	content: "→";
	flex-shrink: 0;
	color: var(--os-green);
}

.pilot__benefits li.is-highlighted {
	color: var(--wp--preset--color--base);
	font-weight: 700;
}

.pilot__flow {
	flex: 0 1 320px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.pilot__flow-item {
	width: 100%;
	background: var(--os-deep-green-darker);
	color: var(--wp--preset--color--base);
	font-weight: 700;
	text-align: center;
	border-radius: 12px;
	padding: 20px 24px;
}

.pilot__flow-item--highlight {
	background: var(--os-green);
	color: var(--wp--preset--color--contrast);
}

.pilot__flow-arrow {
	width: 100%;
	margin: 0;
	color: var(--os-green);
	text-align: center;
	line-height: 1;
	opacity: 0.6;
}

/* === install === */
.install__row {
	gap: 56px;
}

.install__title {
	color: var(--wp--preset--color--contrast);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	margin-bottom: 20px;
}

.install__divider {
	margin: 0 0 40px;
}

.install__lead {
	color: var(--os-gray);
	font-size: 1.0625rem;
	margin: 0 0 20px;
}

/* === objectives === */
.objectives__title {
	margin-bottom: 20px;
}

.objectives__divider {
	margin: 0 0 40px;
}

/* Real CSS grid, unconditionally — .objectives__row is a single wp:group
   with all 6 .objectives__card as DIRECT children (previously two separate
   wp:columns of 3 cards each; splitting them meant each 3-card grid left an
   empty cell next to the odd one out, a gap flex-wrap couldn't fix either
   since it's a structural problem, not a stretching one). One flat grid
   container with 6 children tiles cleanly into whole rows at any column
   count. !important beats the theme's global `.is-layout-flex { display:
   flex }` rule, which this block's own layout:"flex" JSON attr triggers. */
.objectives__row {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	align-items: stretch !important;
	gap: 24px;
}

@media (max-width: 781px) {
	.objectives__row {
		grid-template-columns: repeat(2, 1fr);
	}
}

.objectives__card {
	background: var(--os-deep-green);
	border-radius: 16px;
	padding: 32px 24px;
	min-width: 0;
}

.objectives__icon {
	margin-bottom: 32px;
}

.objectives__icon .icon-container {
	color: var(--os-green);
}

.objectives__card-title {
	color: var(--wp--preset--color--base);
	font-weight: 700;
	font-size: 1.125rem;
	margin: 0;
}

.install__lead:last-child {
	margin-bottom: 0;
}

.install__image img {
	border-radius: 20px;
}

/* === lines === */
.lines__eyebrow {
	margin-bottom: 32px;
}

.lines__list {
	display: flex;
	flex-direction: column;
}

.lines__row {
	align-items: flex-start;
	gap: 24px;
	padding: 32px 0;
	border-bottom: 1px solid rgba(22,26,22,0.08);
	width: 100%;
}

.lines__row:first-child {
	border-top: 1px solid rgba(22,26,22,0.08);
}

.lines__dash {
	margin: 20px 0 0;
	color: var(--os-green);
	flex-shrink: 0;
	width: 32px;
}

.lines__content {
	flex-grow: 1;
}

.lines__name {
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	margin: 0 0 12px;
	color: var(--os-green);
}

.lines__desc {
	color: var(--os-green-dark);
	text-transform: uppercase;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	margin: 0;
	max-width: 520px;
}

.lines__status {
	flex-shrink: 0;
	width: 200px;
	margin: 24px 0 0;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--os-green);
}

.lines__row--progress .lines__dash,
.lines__row--progress .lines__name {
	color: var(--os-deep-green);
}

.lines__row--progress .lines__desc {
	color: var(--os-gray);
}

.lines__row--progress .lines__status {
	color: var(--os-deep-green);
}

.lines__row--inactive .lines__dash,
.lines__row--inactive .lines__name {
	color: var(--os-gray);
}

.lines__row--inactive .lines__desc {
	color: var(--os-gray);
}

.lines__row--inactive .lines__status {
	color: var(--os-gray);
}

.lines__row--started .lines__desc {
	color: var(--os-green);
}

@media (max-width: 600px) {
	.lines__row {
		flex-wrap: wrap;
	}

	.lines__status {
		width: 100%;
		margin-top: 4px;
	}
}

/* === area === */
.area__title {
	color: var(--wp--preset--color--contrast);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	margin: 0;
}

.area__row {
	gap: 24px;
	align-items: flex-end;
	margin-bottom: 32px;
}

.area__subtitle {
	flex-shrink: 0;
	color: rgba(22,26,22,0.75);
	font-size: 1rem;
	text-align: right;
	margin: 0;
}

.area__image img {
	display: block;
	width: 100%;
	border-radius: 20px;
}

/* === page hero === */
.page-hero__eyebrow {
	color: rgba(255, 255, 255, 0.8);
}

.page-hero--green .page-hero__eyebrow {
	color: var(--os-green);
}

.page-hero__title {
	color: var(--wp--preset--color--base);
	font-weight: 800;
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	margin-top: 12px;
}

.page-hero__lead {
	color: var(--wp--preset--color--base);
	font-size: 1.125rem;
	max-width: 640px;
	margin-top: 20px;
}

/* === history === */
.history__row {
	gap: 56px;
}

.history__title {
	color: var(--wp--preset--color--contrast);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	margin-bottom: 20px;
}

.history__text {
	color: var(--os-gray);
	font-size: 1.0625rem;
	margin-bottom: 16px;
}

.history__image {
	background: var(--wp--preset--color--base);
	padding: 12px 12px 32px;
	box-shadow: 0 16px 32px rgba(22,26,22,0.18);
	transform: rotate(2deg);
	max-width: 420px;
	margin: 0 auto;
}

.history__image img {
	display: block;
	width: 100%;
	border-radius: 2px;
}

/* === values === */
.values__title {
	margin-bottom: 40px;
}

.values__row {
	gap: 32px;
	margin-bottom: 32px;
}

.values__row:last-child {
	margin-bottom: 0;
}

/* Considered the same 2-column override as .objectives__row, but each value
   card carries an image + icon + title + a full sentence of body copy —
   at ~140px wide that text wraps into 8-10 lines per card (measured), a
   readability regression worse than the single tall column it would
   replace. Objetivos only has an icon + 2-4 word title, so 2-up works there
   but not here; left stacked 1-up on purpose. */

.values__item-title {
	font-size: 1.125rem;
	margin-bottom: 8px;
	color: var(--wp--preset--color--base);
}

.values__icon {
	margin-bottom: 12px;
}

.values__icon .icon-container {
	color: var(--os-green);
}

.values__item p:last-child {
	color: rgba(255,255,255,0.75);
	font-size: 0.9375rem;
}

.values__card {
	background: rgba(255,255,255,0.06);
	border-radius: 16px;
	overflow: hidden;
}

.values__card-image {
	margin: 0;
}

.values__card-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 11;
	object-fit: cover;
}

.values__card-body {
	padding: 20px 24px 24px;
}

/* === org === */
.org__title {
	color: var(--wp--preset--color--contrast);
	margin-bottom: 32px;
}

.org__list {
	display: flex;
	flex-direction: column;
}

.org__item {
	padding: 24px 0;
	border-bottom: 1px solid rgba(22,26,22,0.1);
}

.org__item-title {
	color: var(--wp--preset--color--contrast);
	font-size: 1.125rem;
	margin-bottom: 8px;
}

.org__item p:last-child {
	color: var(--os-gray);
	font-size: 0.9375rem;
}

/* === docs === */
.docs__title {
	margin: 0;
}

.docs__head {
	align-items: center;
	gap: 16px 24px;
	margin-bottom: 24px;
}

.docs__search .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
}

.docs__search .wp-block-search__input {
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: 999px;
	background: rgba(21, 55, 41, 0.5);
	color: var(--wp--preset--color--base);
	font-size: 0.9375rem;
	padding: 10px 20px;
	width: 300px;
	max-width: 100%;
}

.docs__search .wp-block-search__input::placeholder {
	color: rgba(255,255,255,0.6);
}

.docs__search .wp-block-search__button {
	background: transparent;
	border: none;
	flex-shrink: 0;
	color: var(--wp--preset--color--base);
	fill: var(--wp--preset--color--base);
	padding: 8px;
}

.docs__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.docs__soon-label {
	color: var(--os-green);
	margin: 4px 0 -2px;
}

.docs__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: 8px;
	padding: 18px 24px;
}

.docs__empty {
	color: rgba(255,255,255,0.6);
	font-style: italic;
	margin-top: 12px;
}

.docs__item-title {
	font-weight: 700;
	margin: 0;
}

.docs__item-action {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.docs__item-action a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.docs__item--soon {
	opacity: 0.4;
}

.cta-band--light .cta-band__title {
	color: var(--wp--preset--color--contrast);
}

.cta-band--light .cta-band__lead {
	color: var(--wp--preset--color--contrast);
}

.cta-band--light .wp-block-button.is-style-fill .wp-element-button {
	color: var(--wp--preset--color--contrast);
	text-transform: uppercase;
	border-radius: 999px;
}

.is-style-outline-light .wp-element-button {
	background: transparent;
	color: var(--wp--preset--color--base);
	box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5);
	padding: 8px 20px;
	font-size: 0.8125rem;
}

.is-style-outline-light .wp-element-button:hover {
	background: var(--wp--preset--color--base);
	color: var(--os-deep-green-darker);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--base);
}

/* === responsive === */

/* Header overflows between 600-980px: the nav's own hamburger breakpoint
   (600px, fixed by WP core) doesn't account for this header's actual
   content width, so brand + nav + CTA stop fitting on one row before the
   hamburger kicks in. Let the row wrap instead of forcing nowrap. Scoped to
   NOT reach below 600px, where the hamburger is already active and the
   header must stay a single logo+toggle row (see the <600px block below). */
@media (min-width: 600px) and (max-width: 980px) {
	.site-header {
		flex-wrap: wrap !important;
		row-gap: 12px;
	}

	.site-header__nav {
		flex-basis: 100%;
		justify-content: center !important;
	}

	.site-header__nav .wp-block-navigation__container {
		flex-wrap: wrap;
		justify-content: center;
	}

	.site-header__cta {
		margin-left: auto;
	}
}

/* Mobile (<600px, hamburger active): logo + toggle stay on one row. The
   standalone yellow CTA is hidden here and replaced by .site-header__nav-cta,
   a nav link rendered inside the overlay menu (see .site-header__nav-cta
   rules below and the extra wp:navigation-link in parts/header.html). */
@media (max-width: 599px) {
	.site-header {
		flex-wrap: nowrap;
		align-items: center;
	}

	.site-header__cta {
		display: none !important;
	}
}

.site-header__nav-cta {
	display: none !important;
}

@media (max-width: 599px) {
	.site-header__nav-cta {
		display: flex !important;
	}
}

.site-header__nav-cta > a {
	background: var(--os-yellow);
	color: var(--wp--preset--color--contrast);
	padding: 10px 26px !important;
	border-radius: 999px;
	margin-top: 8px;
	box-sizing: border-box;
	text-align: center;
}

.site-header__nav-cta > a:hover {
	background: var(--os-orange);
}

/* Decorative section icons (48px) read as oversized next to 18px item
   titles once columns stack on narrower screens. Bring them closer to the
   footer icon's 18-24px scale below tablet width. */
@media (max-width: 782px) {
	.why__icon .icon-container,
	.values__icon .icon-container,
	.benefits__arrow-icon .icon-container,
	.docs__icon .icon-container {
		width: 32px !important;
		height: 32px !important;
	}
}

/* === hover transitions === */
/* These interactive text links had color changes with no transition,
   which felt abrupt next to the buttons/CTAs that already animate. */
.site-header__nav .wp-block-navigation-item > a,
.site-footer__nav .wp-block-navigation-item > a,
.project__link a,
.about__link a,
.news-card__title a,
.news-card__link,
.related__card-title a {
	transition: color 0.2s ease;
}

.wp-block-social-link {
	transition: background-color 0.2s ease, transform 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
	.site-header__nav .wp-block-navigation-item > a,
	.site-footer__nav .wp-block-navigation-item > a,
	.project__link a,
	.about__link a,
	.news-card__title a,
	.news-card__link,
	.related__card-title a,
	.wp-block-social-link {
		transition: none;
	}
}

/* === motion === */
/* Reusable utility classes for the animation layer added by assets/motion.js.
   Nothing here hides content by default: .js-reveal and .js-reveal--stagger
   only ever exist on an element because JS put them there (after checking
   prefers-reduced-motion itself), so a no-JS visitor never has anything
   hidden from them. The hero-entrance rules below are the one exception —
   they target classes that already exist in static markup (.hero__title,
   .page-hero__title, etc.) — so those are gated behind the JS-added
   .js-animations class on <html> instead, for the same guarantee. */

/* -- scroll reveal (sections + grid cards) -- */
.js-reveal {
	opacity: 0;
	transform: translateY(var(--os-reveal-distance));
	transition: opacity var(--os-reveal-duration) var(--os-ease-out),
		transform var(--os-reveal-duration) var(--os-ease-out);
}

.js-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger step for cards inside a grid; motion.js sets --i per card
   (capped so a long grid doesn't end in a multi-second last delay). */
.js-reveal--stagger {
	transition-delay: calc(var(--i, 0) * var(--os-stagger-step));
}

/* -- hero entrance on load (fade + rise, small stagger per element) -- */
@keyframes os-hero-in {
	from {
		opacity: 0;
		transform: translateY(var(--os-reveal-distance));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.js-animations .hero__title,
.js-animations .page-hero__eyebrow,
.js-animations .participa-hero__eyebrow,
.js-animations .news-hero__eyebrow,
.js-animations .hero__lead,
.js-animations .page-hero__title,
.js-animations .participa-hero__title,
.js-animations .news-hero__title,
.js-animations .hero__buttons,
.js-animations .page-hero__lead,
.js-animations .participa-hero__lead,
.js-animations .participa-hero__buttons {
	animation-name: os-hero-in;
	animation-duration: 0.7s;
	animation-timing-function: var(--os-ease-out);
	animation-fill-mode: both;
}

/* var() inside the `animation` shorthand's timing-function slot doesn't
   parse reliably (verified in-browser: it silently resolved to "linear"
   instead of the custom easing) — split into longhands above instead, only
   animation-delay stays per selector group below. */
.js-animations .hero__title,
.js-animations .page-hero__eyebrow,
.js-animations .participa-hero__eyebrow,
.js-animations .news-hero__eyebrow {
	animation-delay: 0.05s;
}

.js-animations .hero__lead,
.js-animations .page-hero__title,
.js-animations .participa-hero__title,
.js-animations .news-hero__title {
	animation-delay: 0.15s;
}

.js-animations .hero__buttons,
.js-animations .page-hero__lead,
.js-animations .participa-hero__lead {
	animation-delay: 0.25s;
}

.js-animations .participa-hero__buttons {
	animation-delay: 0.35s;
}

/* -- hover-lift utility: cards in the values / objectives grids. News cards
   (.news-card, .related__card) deliberately don't get this — the card-level
   shadow/lift read as an unwanted box appearing around the whole article
   card; removed on request. The "Leer más" link keeps its own plain
   color-only hover (see .news-card__link:hover / .related__link:hover). -- */
.hover-lift,
.values__card,
.objectives__card {
	transition: transform 0.25s var(--os-ease-out), box-shadow 0.25s var(--os-ease-out);
}

.hover-lift:hover,
.values__card:hover,
.objectives__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(22, 26, 22, 0.1);
}

@media (prefers-reduced-motion: reduce) {
	.js-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.js-animations .hero__title,
	.js-animations .hero__lead,
	.js-animations .hero__buttons,
	.js-animations .page-hero__eyebrow,
	.js-animations .page-hero__title,
	.js-animations .page-hero__lead,
	.js-animations .participa-hero__eyebrow,
	.js-animations .participa-hero__title,
	.js-animations .participa-hero__lead,
	.js-animations .participa-hero__buttons,
	.js-animations .news-hero__eyebrow,
	.js-animations .news-hero__title {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.hover-lift,
	.values__card,
	.objectives__card {
		transition: none;
	}

	.hover-lift:hover,
	.values__card:hover,
	.objectives__card:hover {
		transform: none;
		box-shadow: none;
	}
}