:root {
	/* Brand palette */
	--clr-primary: #1a1613; /* volcano black */
	--clr-accent: #c5f048; /* lime */
	--clr-secondary: #6fa0be; /* sky blue */
	--clr-tertiary: #9c5233; /* clay */
	--clr-gold: #e9c46a; /* summit glow only (Método stage 3) — never a UI colour */
	--clr-neutral: #9ca3a0; /* grey */
	--clr-bg: #f3f6f7; /* ice white */
	--clr-text-main: #1a1613;

	/* Illustration tints: the soft fills the hand-drawn art uses (brand colours mixed toward ice
	   white). For stages and washes that should read as Nevado's own voice (the Showcase stage);
	   never for text or controls. Full ramp: docs/design-system.md -> Illustration guide. */
	--tint-sky: #bed4e0;
	--tint-sky-soft: #d9e5ec;
	--tint-lime: #e1f4b1;
	--tint-lime-soft: #eaf5d4;
	--tint-clay: #d0b4a9;
	--tint-gold: #efe2bf;
	--tint-gold-soft: #f1ecdb;

	/* Type — self-hosted via OMGF (see inc/enqueue.php), system fallback until the fonts load */
	--font-display: 'Bricolage Grotesque', system-ui, sans-serif;
	--font-body: 'Manrope', system-ui, sans-serif;
	--font-flourish: 'Caveat', cursive;

	/* Surfaces — every card is solid-light, solid-dark or glass. Glass only
	   over imagery (video, photos, the Método map); solid on flat grounds.
	   One black everywhere: brand volcanic, never neutral/cool black. */
	--radius-card: 1.5rem;
	--radius-media: 2rem;
	--border-subtle: 1px solid rgba( 26, 22, 19, 0.1 );
	--shadow-float: 0 24px 48px -24px rgba( 26, 22, 19, 0.3 );
	--shadow-media: 0 25px 50px -12px rgba( 26, 22, 19, 0.4 );
	--shadow-soft: 0 12px 36px -12px rgba( 26, 22, 19, 0.08 );
	--shadow-soft-hover: 0 24px 48px -12px rgba( 26, 22, 19, 0.12 );
	--glass-blur: blur( 18px ) saturate( 140% );
	--glass-light: rgba( 255, 255, 255, 0.58 );
	--glass-light-edge: rgba( 255, 255, 255, 0.7 );
	--glass-dark: rgba( 26, 22, 19, 0.38 );
	--glass-dark-edge: rgba( 255, 255, 255, 0.16 );
}

body {
	background: var( --clr-bg );
	color: var( --clr-text-main );
	font-family: var( --font-body );
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var( --font-display );
}

/* Links — the parent theme paints them royal blue, visited purple, hover navy. None of that
   belongs here: links take the colour of their surroundings in every state. */
a,
a:visited,
a:hover,
a:focus,
a:active {
	color: inherit;
}

/* Button system — single source of truth. Map every new button to one of these variants.
   Colours use two classes (.btn.btn-x) so no link-state rule can outrank them. */
.btn {
	display: inline-block;
	padding: 0.75em 1.5em;
	border-radius: 999px;
	font-family: var( --font-body );
	font-weight: 600;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* One hover for every button: a small lift with a soft brand-ink shadow, and the arrow
   (↗ →) nudging forward. No colour change, so the label always keeps its contrast. */
.btn span[aria-hidden="true"] {
	display: inline-block;
	transition: transform 0.2s ease;
}

@media ( hover: hover ) {
	.btn:hover {
		transform: translateY( -2px );
		box-shadow: 0 10px 24px -10px rgba( 26, 22, 19, 0.45 );
	}

	.btn:hover span[aria-hidden="true"] {
		transform: translateX( 3px );
	}
}

.btn:focus-visible {
	outline: 2px solid var( --clr-secondary );
	outline-offset: 3px;
}

.btn.btn-primary {
	background: var( --clr-accent );
	color: var( --clr-primary );
}

.btn.btn-secondary {
	background: var( --clr-primary );
	color: var( --clr-bg );
}

.btn.btn-sky {
	background: var( --clr-secondary );
	color: var( --clr-primary );
}

.btn.btn-white {
	background: var( --clr-bg );
	color: var( --clr-primary );
}

.btn.btn-outline {
	background: transparent;
	color: inherit;
	border-color: currentColor;
}

.btn.btn-outline:hover {
	background: color-mix( in srgb, currentColor 12%, transparent );
}

.btn.btn-outline-muted {
	background: transparent;
	color: var( --clr-neutral );
	border-color: currentColor;
}

.btn-block {
	display: block;
	width: 100%;
	text-align: center;
}

/* Sitewide layout wrapper */
.nvd-wrap {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

@media ( min-width: 768px ) {
	.nvd-wrap {
		padding: 0 4rem;
	}
}

/* Nav — renders on every page via header.php */
.nvd-nav {
	position: relative;
	z-index: 50;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2.5rem 1.5rem;
	max-width: 1400px;
	margin: 0 auto;
}

/* Homepage navigation sits over the full-bleed hero video. */
.home .nvd-nav,
.nvd-industria .nvd-nav {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	max-width: none;
	color: #fff;
}

.home .nvd-nav__toggle,
.nvd-industria .nvd-nav__toggle,
.home .nvd-nav__links a:not( .btn ),
.nvd-industria .nvd-nav__links a:not( .btn ) {
	color: #fff;
}

@media ( min-width: 768px ) {
	.nvd-nav {
		padding: 2.5rem max( 4rem, calc( ( 100vw - 1400px ) / 2 + 4rem ) );
	}
}

.nvd-nav__logo {
	display: inline-flex;
	align-items: center;
}

.nvd-nav__logo-img {
	display: block;
	height: 5rem;
	width: auto;
}

/* Mobile nav toggle — checkbox hack, no JS needed */
.nvd-nav__toggle-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.nvd-nav__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: -0.5rem;
	cursor: pointer;
	color: var( --clr-text-main );
}

.nvd-nav__toggle svg {
	width: 1.5rem;
	height: 1.5rem;
	stroke: currentColor;
}

.nvd-nav__links {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	background: var( --clr-bg );
	padding: 1.5rem;
	border-top: 1px solid rgba( 26, 22, 19, 0.1 );
	box-shadow: 0 8px 16px rgba( 26, 22, 19, 0.08 );
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.home .nvd-nav__links,
.nvd-industria .nvd-nav__links {
	background: var( --glass-dark );
	border-top-color: var( --glass-dark-edge );
	-webkit-backdrop-filter: var( --glass-blur );
	backdrop-filter: var( --glass-blur );
}

.nvd-nav__toggle-input:checked ~ .nvd-nav__links {
	display: flex;
}

@media ( min-width: 768px ) {
	.nvd-nav__toggle {
		display: none;
	}

	.nvd-nav__links {
		display: flex;
		position: static;
		flex-direction: row;
		align-items: center;
		gap: 3rem;
		background: none;
		padding: 0;
		border: none;
		box-shadow: none;
	}

	.home .nvd-nav__links,
	.nvd-industria .nvd-nav__links {
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

.nvd-nav__links a:not( .btn ) {
	color: var( --clr-text-main );
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.nvd-nav__links a:not( .btn ):hover {
	opacity: 0.6;
}

.nvd-nav__links .btn {
	letter-spacing: normal;
}

.home .nvd-nav__cta,
.nvd-industria .nvd-nav__cta {
	background: #fff;
	color: var( --clr-primary );
}

.home .nvd-nav__cta:hover,
.nvd-industria .nvd-nav__cta:hover {
	background: var( --clr-secondary );
	color: var( --clr-primary );
	opacity: 1;
}

/* Bullet marker — one recipe sitewide: a blue disc with a white plus (Soluciones uses the
   same blue as a circle-check icon). Precios, the Método panel and the industry plans share it. */
.nvd-price-card__list li::before,
.nvd-journey__panel-list li::before,
.nvd-ind-plan__list li::before {
	content: '+';
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var( --clr-secondary );
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
}

/* Section headings — shared by the homepage and industry pages */
.nvd-section__eyebrow {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgba( 26, 22, 19, 0.5 );
	margin-bottom: 1rem;
}

.nvd-section__title {
	font-size: 2rem;
	line-height: 1.2;
	font-family: var( --font-body );
	font-weight: 700;
}

.nvd-section__subtitle {
	font-family: var( --font-body );
	font-size: 1rem;
	line-height: 1.5;
	color: rgba( 26, 22, 19, 0.6 );
	max-width: 32rem;
	margin: 0.75rem 0 0;
}

@media ( min-width: 768px ) {
	.nvd-section__title {
		font-size: 3rem;
	}
}

/* FAQ — sticky intro + WhatsApp card left, accordion right (stacked on mobile) */
.nvd-faq__eyebrow {
	margin-bottom: 1.5rem;
}

.nvd-faq__grid {
	display: grid;
	gap: 2rem;
}

.nvd-faq__aside {
	display: contents;
}

.nvd-faq__intro {
	order: 1;
}

.nvd-faq__intro .nvd-section__title {
	margin-top: 0;
}

.nvd-faq__list {
	order: 2;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.nvd-faq__cta {
	order: 3;
	background: var( --clr-primary );
	color: #fff;
	border-radius: var( --radius-card );
	padding: 1.75rem;
	box-shadow: 0 12px 36px -12px rgba( 26, 22, 19, 0.3 );
}

.nvd-faq__cta h3 {
	font-family: var( --font-body );
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 0.75rem;
}

.nvd-faq__cta p {
	color: rgba( 255, 255, 255, 0.7 );
	line-height: 1.6;
	margin: 0 0 2rem;
}

/* The label must stay on one line at every width. */
.nvd-faq__cta .btn {
	white-space: nowrap;
	padding-inline: 1rem;
}

@media ( max-width: 380px ) {
	.nvd-faq__cta {
		padding: 1.5rem;
	}

	.nvd-faq__cta .btn {
		font-size: 0.9375rem;
	}
}

.nvd-faq__item {
	background: #fff;
	border: var( --border-subtle );
	border-radius: var( --radius-card );
	box-shadow: var( --shadow-soft );
	overflow: hidden;
	transition: box-shadow 0.3s ease;
}

.nvd-faq__item:hover {
	box-shadow: var( --shadow-soft-hover );
}

.nvd-faq__question {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 3rem;
	padding: 1.5rem;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var( --font-body );
	font-weight: 700;
	font-size: 1rem;
	color: var( --clr-text-main );
}

.nvd-faq__question-text {
	position: relative;
	padding-right: 1.5rem;
}

/* lime "you are here" dot on the open question */
.nvd-faq__question-text::before {
	content: '';
	position: absolute;
	left: -0.9rem;
	top: 50%;
	width: 0.5rem;
	height: 0.5rem;
	margin-top: -0.25rem;
	border-radius: 50%;
	background: var( --clr-accent );
	opacity: 0;
	transition: opacity 0.3s ease;
}

.nvd-faq__item.is-open .nvd-faq__question-text::before {
	opacity: 1;
}

.nvd-faq__icon {
	font-size: 1.5rem;
	line-height: 1;
	color: rgba( 26, 22, 19, 0.4 );
	transition: transform 0.3s ease, color 0.3s ease;
	flex-shrink: 0;
}

.nvd-faq__item:hover .nvd-faq__icon,
.nvd-faq__item.is-open .nvd-faq__icon {
	color: var( --clr-text-main );
}

.nvd-faq__item.is-open .nvd-faq__icon {
	transform: rotate( 45deg );
}

.nvd-faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.nvd-faq__item.is-open .nvd-faq__answer {
	grid-template-rows: 1fr;
}

.nvd-faq__answer > div {
	overflow: hidden;
	min-height: 0;
}

.nvd-faq__answer p {
	color: rgba( 26, 22, 19, 0.75 );
	line-height: 1.6;
	padding: 0 1.5rem 1.5rem;
	margin: 0;
}

@media ( min-width: 768px ) {
	.nvd-faq__question {
		padding: 2rem;
		font-size: 1.125rem;
	}

	.nvd-faq__answer p {
		padding: 0 2rem 2rem;
	}
}

/* Desktop: intro + card in the left column, accordion right. Both columns start at the same
   line (the title lines up with the first question) and nothing is sticky, so expanding an
   item never moves the left column. */
@media ( min-width: 1024px ) {
	.nvd-faq__grid {
		grid-template-columns: minmax( 20rem, 2fr ) 3fr;
		gap: clamp( 2.5rem, 5vw, 5rem );
		align-items: start;
	}

	.nvd-faq__aside {
		display: block;
	}

	.nvd-faq__intro {
		margin-bottom: 2.5rem;
	}

	.nvd-faq__cta {
		max-width: 24rem;
		padding: 2rem;
	}

}

@media ( min-width: 1280px ) {
	.nvd-faq__cta {
		padding: 2.5rem;
	}

	.nvd-faq__cta .btn {
		padding-inline: 1.5rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.nvd-faq__answer,
	.nvd-faq__icon,
	.nvd-faq__item,
	.nvd-faq__question-text::before {
		transition: none;
	}
}

/* Footer — renders on every page via footer.php */
.nvd-footer {
	position: relative;
	overflow: hidden;
	padding: 4rem 0 2rem;
	background: var( --clr-primary );
	color: var( --clr-bg );
	border-radius: var( --radius-media ) var( --radius-media ) 0 0;
}

/* Soft snow-blue glow from the top corner. */
.nvd-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient( circle at 50% 0, color-mix( in srgb, var( --clr-secondary ) 28%, transparent ), transparent 55% );
	pointer-events: none;
}

/* Reserved for the mountain-range illustration (empty for now). */
.nvd-footer__art {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 300px;
	overflow: hidden;
	pointer-events: none;
}

.nvd-footer .nvd-wrap {
	position: relative;
	z-index: 1;
}

.nvd-footer__grid {
	display: grid;
	gap: 3rem;
	margin-bottom: 3rem;
}

.nvd-footer__title {
	margin: 0 0 1.25rem;
	font-family: var( --font-body );
	font-size: clamp( 2.5rem, 6vw, 4rem );
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var( --clr-bg );
}

.nvd-footer__lede {
	max-width: 24rem;
	margin: 0 0 2.5rem;
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.6;
	color: rgba( 243, 246, 247, 0.75 );
}

.nvd-footer__actions {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.nvd-footer__actions .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: 100%;
	min-height: 3.5rem;
	padding-inline: 2rem;
	white-space: nowrap;
}

.nvd-footer__cols {
	display: grid;
	gap: 2.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid rgba( 243, 246, 247, 0.1 );
}

.nvd-footer__label {
	margin: 0 0 0.75rem;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba( 243, 246, 247, 0.4 );
}

.nvd-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nvd-footer__list--split {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	column-gap: 1rem;
}

.nvd-footer__list a {
	display: block;
	padding: 0.6rem 0;
	font-size: 1.0625rem;
	font-weight: 500;
	text-decoration: none;
	color: rgba( 243, 246, 247, 0.8 );
	transition: color 0.2s ease;
}

.nvd-footer__list a:hover,
.nvd-footer__list a:focus-visible {
	color: var( --clr-secondary );
}

.nvd-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding-top: 2rem;
	border-top: 1px solid rgba( 243, 246, 247, 0.1 );
}

.nvd-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}

.nvd-footer__logo {
	display: block;
	height: 2.75rem;
	width: auto;
}

.nvd-footer__status {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 1rem 0.5rem 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgba( 243, 246, 247, 0.8 );
	background: rgba( 243, 246, 247, 0.05 );
	border: 1px solid rgba( 243, 246, 247, 0.1 );
	border-radius: 999px;
}

.nvd-footer__status-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var( --clr-accent );
	animation: nvd-footer-pulse 2s ease-in-out infinite;
}

@keyframes nvd-footer-pulse {
	50% {
		opacity: 0.4;
	}
}

.nvd-footer__copyright {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba( 243, 246, 247, 0.4 );
}

@media ( min-width: 640px ) {
	.nvd-footer__actions {
		flex-direction: row;
	}

	.nvd-footer__actions .btn {
		width: auto;
	}
}

@media ( min-width: 768px ) {
	.nvd-footer__cols {
		grid-template-columns: repeat( 3, 1fr );
		padding-top: 0;
		border-top: 0;
	}

	.nvd-footer__list--split {
		display: block;
	}

	.nvd-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-top: 2rem;
	}

	.nvd-footer__brand {
		flex-direction: row;
		align-items: center;
		gap: 1.25rem;
	}

	.nvd-footer__status {
		padding: 0;
		background: none;
		border: 0;
	}
}

@media ( min-width: 1024px ) {
	.nvd-footer {
		padding-top: 8rem;
		border-radius: 0;
	}

	.nvd-footer__grid {
		grid-template-columns: repeat( 12, 1fr );
		gap: 2rem;
		margin-bottom: 6rem;
	}

	.nvd-footer__main {
		grid-column: span 5;
	}

	.nvd-footer__cols {
		grid-column: 7 / span 6;
		padding-top: 0.5rem;
	}

	.nvd-footer__list a {
		padding: 0.4rem 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.nvd-footer__status-dot {
		animation: none;
	}
}