/* Site-wide tweaks Blocksy and Elementor don't expose as settings. Uses tokens from brand.php (--nf-*). */

/* Footer widget headings sit on the green row. */
.ct-footer .wp-block-heading {
	color: var(--nf-crema);
	font-size: 20px;
	margin-bottom: 12px;
}

.ct-footer .nf-footer-logo {
	margin-bottom: 20px;
}

/* Header CTA: pill shape like the manual's buttons. */
.ct-header-cta .ct-button {
	border-radius: 999px;
}

/* Large isotype watermark, as on the manual's cover. Add the class to an Elementor container. */
.nf-watermark {
	position: relative;
	overflow: hidden;
	background-image: url('isotipo-marca-agua.svg');
	background-repeat: no-repeat;
	background-position: right 4% top -40px;
	background-size: auto 150%;
}

@media (max-width: 767px) {
	.nf-watermark {
		background-position: right -60px top -20px;
		background-size: auto 110%;
	}
}

/* Highlighted note (e.g. "No, nunca."). */
.nf-callout {
	background: var(--nf-blanco);
	border-left: 4px solid var(--nf-brote);
	border-radius: 8px;
	padding: 14px 18px;
}

.nf-callout p {
	margin: 0;
}

/* Program zone map (mapa-zona.svg). */
.nf-map {
	max-width: 360px;
	margin: 8px 0 0;
	padding: 18px 16px;
	border: 1px solid #E3E0D6;
	border-radius: 16px;
	background: var(--nf-blanco);
}

.nf-map .geo-map {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible; /* Inter is wider than the mockup font; let long labels use the figure padding. */
	font-family: var(--nf-font-body);
}

.nf-map .geo-label {
	font-size: 12px;
	font-weight: 700;
	fill: var(--nf-verde);
}

.nf-map .geo-off {
	font-weight: 400;
	fill: #8A8676;
}

.nf-map .geo-leader {
	stroke: #B5B1A4;
	stroke-width: 0.8;
}

.nf-map .geo-leader-dot {
	fill: var(--nf-blanco);
	stroke: var(--nf-verde);
	stroke-width: 1;
}

.nf-map .geo-city {
	fill: var(--nf-blanco);
	stroke: var(--nf-texto);
	stroke-width: 1.5;
}

.nf-map .geo-city-label {
	font-size: 11px;
	fill: var(--nf-texto);
	paint-order: stroke;
	stroke: var(--nf-blanco);
	stroke-width: 3px;
	stroke-linejoin: round;
}

.nf-map figcaption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.45;
	color: #6B675C;
}

/* Numbered steps with brand-colored counters. */
.nf-steps {
	list-style: none;
	counter-reset: nf-step;
	margin: 0;
	padding: 0;
}

.nf-steps li {
	counter-increment: nf-step;
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

.nf-steps li::before {
	content: counter(nf-step);
	flex: 0 0 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--nf-verde);
	color: var(--nf-crema);
	font: 500 17px/36px var(--nf-font-headings);
	text-align: center;
}

/* Home. */
.nf-eyebrow {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nf-verde);
}

.nf-hero-photo img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@media (max-width: 767px) {
	.nf-hero-photo img {
		aspect-ratio: 4 / 3;
	}
}

.nf-figures {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
	color: var(--nf-crema);
}

.nf-figures strong {
	display: block;
	font: 500 48px/1.1 var(--nf-font-headings);
	color: var(--nf-brote);
}

@media (max-width: 767px) {
	.nf-figures {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nf-figures strong {
		font-size: 38px;
	}
}

.nf-step-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nf-step-cards a {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 28px;
	border-radius: 16px;
	background: var(--nf-crema);
	color: var(--nf-texto);
	text-decoration: none;
	transition: transform 0.2s, box-shadow 0.2s;
}

.nf-step-cards a:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(64, 104, 60, 0.12);
}

.nf-step-cards strong {
	font: 500 21px/1.3 var(--nf-font-headings);
	color: var(--nf-verde);
}

.nf-step-n {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--nf-verde);
	color: var(--nf-crema);
	font: 500 18px/40px var(--nf-font-headings);
	text-align: center;
}

@media (max-width: 767px) {
	.nf-step-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Quotes ("La voz de los territorios"), on the green band. */
.nf-on-green h2 {
	color: var(--nf-crema) !important;
}

.nf-quotes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

@media (max-width: 767px) {
	.nf-quotes {
		grid-template-columns: minmax(0, 1fr);
	}
}

.nf-quote {
	margin: 0;
	padding: 28px;
	border-radius: 16px;
	background: rgba(242, 239, 230, 0.08);
	border-left: 4px solid var(--nf-brote);
}

.nf-quote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.nf-quote p {
	margin: 0;
	font: 400 20px/1.45 var(--nf-font-headings);
	color: var(--nf-crema);
}

.nf-quote p::before {
	content: '“';
}

.nf-quote p::after {
	content: '”';
}

.nf-quote figcaption {
	margin-top: 14px;
	font-size: 14px;
	color: var(--nf-brote);
}

/* Gallery ([nf_galeria]). */
/* Doubled class: .nf-pills (declared later) resets margin to 0. */
.nf-pills.nf-gallery-filters {
	margin-bottom: 32px;
}

.nf-pills a[aria-pressed='true'] {
	background: var(--nf-verde);
	color: var(--nf-crema);
}

.nf-gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

@media (max-width: 1024px) {
	.nf-gallery-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.nf-gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
}

.nf-gallery-item {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: 12px;
	background: var(--nf-marca-agua);
}

.nf-gallery-item[hidden] {
	display: none;
}

.nf-gallery-item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important; /* WP's height attribute and Elementor's img rules otherwise win. */
	object-fit: cover;
	transition: transform 0.3s;
}

.nf-gallery-item:hover img {
	transform: scale(1.04);
}

.nf-gallery-caption {
	position: absolute;
	inset: auto 0 0;
	padding: 24px 12px 10px;
	background: linear-gradient(transparent, rgba(26, 40, 24, 0.75));
	color: var(--nf-crema);
	font-size: 13px;
	line-height: 1.35;
	opacity: 0;
	transition: opacity 0.2s;
}

.nf-gallery-item:hover .nf-gallery-caption,
.nf-gallery-item:focus-visible .nf-gallery-caption {
	opacity: 1;
}

.nf-gallery-more-wrap {
	margin: 28px 0 0;
	text-align: center;
}

.nf-gallery-more {
	padding: 12px 28px;
	border: 1px solid var(--nf-verde);
	border-radius: 999px;
	background: transparent;
	font: 500 15px var(--nf-font-body);
	color: var(--nf-verde);
	cursor: pointer;
}

.nf-gallery-more:hover {
	background: var(--nf-verde);
	color: var(--nf-crema);
}

/* Program video. */
.nf-video {
	margin: 0;
}

.nf-video video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	background: #1B2A1A;
	object-fit: cover;
}

.nf-video figcaption {
	margin-top: 10px;
	font-size: 14px;
	color: #6B675C;
}

@media (min-width: 1025px) {
	.nf-sticky-col {
		position: sticky;
		top: 24px;
	}
}

/* Horizontal process steps ("Cómo funciona"); stack on small screens. */
.nf-steps-row {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
}

.nf-steps-row li {
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	font-weight: 500;
}

.nf-steps-row li::before {
	flex: none;
	width: 36px;
}

@media (max-width: 767px) {
	.nf-steps-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.nf-steps-row li {
		flex-direction: row;
		align-items: center;
	}
}

/* FAQ accordion. Doubled class beats Elementor's own widget selectors. */
.elementor-widget-accordion.nf-faq .elementor-accordion-item {
	border: 0;
	border-bottom: 1px solid #DDD8CB;
}

.elementor-widget-accordion.nf-faq .elementor-accordion-item:first-child {
	border-top: 1px solid #DDD8CB;
}

.elementor-widget-accordion.nf-faq .elementor-tab-title {
	padding: 18px 0;
	border: 0;
}

.elementor-widget-accordion.nf-faq .elementor-tab-title a,
.elementor-widget-accordion.nf-faq .elementor-accordion-icon {
	font-family: var(--nf-font-headings);
	font-size: 19px;
	font-weight: 500;
	color: var(--nf-verde);
}

.elementor-widget-accordion.nf-faq .elementor-accordion-icon svg {
	fill: var(--nf-verde);
}

.elementor-widget-accordion.nf-faq .elementor-tab-content {
	padding: 0 0 20px;
	border: 0;
}

/* Cards for [nf_noticias] and [nf_recursos]. */
.nf-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

@media (max-width: 1024px) {
	.nf-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.nf-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

.nf-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 16px;
	background: var(--nf-blanco);
}

.nf-card-media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--nf-crema); /* The placeholder isotype uses the watermark tone, so it needs crema behind it. */
}

.nf-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nf-resources .nf-card-media {
	aspect-ratio: 4 / 3;
}

.nf-card-placeholder {
	position: absolute;
	inset: 0;
	background: url('isotipo-marca-agua.svg') no-repeat center / auto 70%;
}

.nf-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 22px 24px 24px;
}

.nf-card-body time,
.nf-card-kind {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6B675C;
}

.nf-card-body h3 {
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
}

.nf-card-body h3 a {
	color: var(--nf-verde);
	text-decoration: none;
}

.nf-card-body h3 a:hover {
	color: var(--nf-verde-oscuro);
}

.nf-card-body p {
	margin: 0;
	font-size: 15px;
}

.nf-card-more {
	margin-top: auto;
	padding-top: 6px;
	font-weight: 500;
	color: var(--nf-verde);
	text-decoration: none;
}

.nf-card-more:hover {
	color: var(--nf-verde-oscuro);
}

.nf-empty {
	padding: 28px;
	border: 1px dashed #CFCABC;
	border-radius: 16px;
	text-align: center;
	color: #6B675C;
}

/* News carousel ([nf_noticias carrusel="si"]): 3 cards visible on desktop, the next one peeking on mobile. */
.nf-carousel {
	position: relative;
}

.nf-carousel-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 56px) / 3);
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.nf-carousel-track::-webkit-scrollbar {
	display: none;
}

.nf-carousel-track .nf-card {
	scroll-snap-align: start;
}

.nf-carousel-track:focus-visible {
	outline: 2px solid var(--nf-verde);
	outline-offset: 4px;
}

@media (max-width: 1024px) {
	.nf-carousel-track {
		grid-auto-columns: calc((100% - 28px) / 2);
	}
}

@media (max-width: 640px) {
	.nf-carousel-track {
		grid-auto-columns: 85%;
		gap: 16px;
	}
}

/*
 * Arrows on the sides, half outside the track, vertically centred on the 16:9 card photo.
 * Percentage padding resolves against the carousel's width: card = (100% - gaps) / 3, photo
 * centre = card × 9/32. (Not container queries: size containment collapses the cards on phones.)
 */
.nf-carousel-nav {
	position: absolute;
	top: 0;
	padding-top: calc((100% - 56px) * 3 / 32 - 24px);
	left: -24px;
	right: -24px;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
}

/* Below ~1260px the section padding can't hold half an arrow: keep them inside the cards. */
@media (max-width: 1259px) {
	.nf-carousel-nav {
		left: 8px;
		right: 8px;
	}
}

@media (max-width: 1024px) {
	.nf-carousel-nav {
		padding-top: calc((100% - 28px) * 9 / 64 - 24px);
	}
}

.nf-carousel.is-static .nf-carousel-nav {
	display: none;
}

.nf-carousel-nav button {
	width: 48px;
	height: 48px;
	border: 1px solid var(--nf-verde);
	border-radius: 50%;
	background: var(--nf-crema); /* Solid: the arrows sit over the photos' edges. */
	box-shadow: 0 2px 10px rgba(27, 42, 26, 0.18);
	color: var(--nf-verde);
	font: 500 20px/1 var(--nf-font-body);
	cursor: pointer;
	pointer-events: auto;
	transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}

.nf-carousel-nav button:hover:not(:disabled) {
	background: var(--nf-verde);
	color: var(--nf-crema);
}

.nf-carousel-nav button:disabled {
	visibility: hidden; /* At either end only the useful arrow shows. */
}

@media (max-width: 640px) {
	/* On phones the swipe is the control (the next card peeks in). */
	.nf-carousel-nav {
		display: none;
	}
}

/* Section switcher (anchor pills). */
.nf-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nf-pills a {
	display: inline-block;
	padding: 9px 20px;
	border: 1px solid var(--nf-verde);
	border-radius: 999px;
	font-weight: 500;
	color: var(--nf-verde);
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

.nf-pills a:hover {
	background: var(--nf-verde);
	color: var(--nf-crema);
}

[id='noticias'],
[id='material'] {
	scroll-margin-top: 24px;
}

/* Fluent Forms in the brand style. */
.fluentform .ff-el-input--label label,
.fluentform .ff-el-form-control,
.fluentform .ff_t_c,
.fluentform .ff-el-form-check-label {
	font-family: var(--nf-font-body);
}

.fluentform .ff-el-input--label label {
	font-weight: 500;
	color: var(--nf-texto);
}

.fluentform .ff-el-form-control {
	border: 1px solid #D9D5CA;
	border-radius: 8px;
	background: #FDFCF9;
	padding: 12px 14px;
	font-size: 16px;
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--nf-verde);
	box-shadow: 0 0 0 3px rgba(64, 104, 60, 0.15);
	background: var(--nf-blanco);
}

.fluentform .ff-el-form-control::placeholder {
	color: #9A968C;
}

.fluentform input[type='radio'],
.fluentform input[type='checkbox'] {
	accent-color: var(--nf-verde);
}

.fluentform .ff-btn-submit {
	border-radius: 999px !important;
	padding: 14px 32px !important;
	font: 700 16px var(--nf-font-body) !important;
	background-color: var(--nf-verde) !important;
	transition: background-color 0.2s;
}

.fluentform .ff-btn-submit:hover {
	background-color: var(--nf-verde-oscuro) !important;
}

.fluentform .error.text-danger {
	color: #B42318;
	font-size: 14px;
}