/* Homepage — converted from the variant.ai Tailwind mockup to plain CSS against main.css tokens. */

.nvd-home {
	overflow-x: hidden;
	background-image: linear-gradient( to right, rgba( 26, 22, 19, 0.04 ) 1px, transparent 1px );
	background-size: 33.33% 100%;
}

/* Hero */
.nvd-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: min( 42rem, 78vh );
	padding: 2rem 1.5rem 3rem;
	max-width: none;
	margin: 0;
	color: #fff;
}

.nvd-hero__video,
.nvd-hero__scrim {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.nvd-hero__video {
	z-index: -2;
	object-fit: cover;
}

.nvd-hero__scrim {
	z-index: -1;
	background: linear-gradient( 90deg, rgba( 26, 22, 19, 0.78 ), rgba( 26, 22, 19, 0.42 ) 65%, rgba( 26, 22, 19, 0.55 ) );
}

.nvd-hero > :not( .nvd-hero__video ):not( .nvd-hero__scrim ) {
	position: relative;
	z-index: 1;
}

.nvd-hero .nvd-hero__badge {
	border-color: var( --glass-dark-edge );
	background: var( --glass-dark );
	-webkit-backdrop-filter: var( --glass-blur );
	backdrop-filter: var( --glass-blur );
}

.nvd-hero .nvd-hero__secondary-link {
	color: #fff;
}

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

.nvd-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 2.5rem;
	border: 1px solid rgba( 26, 22, 19, 0.1 );
	background: rgba( 255, 255, 255, 0.6 );
	padding: 0.5rem 1rem;
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba( 26, 22, 19, 0.04 );
}

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

@keyframes nvd-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

.nvd-hero__badge-text {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

.nvd-hero__title {
	font-size: clamp( 2.5rem, 5vw, 4.5rem );
	line-height: 0.98;
	letter-spacing: -0.02em;
	font-family: var( --font-body );
	font-weight: 800;
	margin-bottom: 3rem;
	max-width: 60rem;
	white-space: nowrap;
}

.nvd-hero__title span:not( .nvd-hero__caveat-word ) {
	color: rgba( 255, 255, 255, 0.72 );
}

.nvd-hero__caveat-word {
	font-family: var( --font-flourish );
	font-weight: 700;
	font-size: 1.25em;
	letter-spacing: 0;
}

.nvd-hero__row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2rem;
	justify-content: space-between;
}

.nvd-hero__actions {
	margin-top: 0;
}

@media ( min-width: 768px ) {
	.nvd-nav__logo-img {
		height: 5rem;
	}

	.nvd-hero__row {
		gap: 0;
	}

	.nvd-hero__actions {
		margin-top: 2rem;
	}
}

@media ( max-width: 767px ) {
	.nvd-hero {
		padding-top: 6rem;
	}

	.nvd-nav__logo-img {
		height: 4rem;
	}

	.nvd-hero__title {
		white-space: normal;
	}
}

@media ( max-width: 640px ) {
	.nvd-hero__title {
		margin-top: 0;
	}
}

@media ( min-width: 641px ) and ( max-width: 767px ) {
	.nvd-hero {
		padding-top: 6rem;
	}
}

@media ( min-width: 481px ) and ( max-width: 640px ) {
	.nvd-hero__title {
		font-size: 2rem;
		white-space: nowrap;
	}

}

@media ( max-width: 360px ) {
	.nvd-hero__title {
		font-size: 2rem;
	}
}

@media ( max-width: 480px ) {
	.nvd-hero__secondary-link {
		margin-left: 0.5rem;
	}
}

@media ( max-width: 480px ) {
	.nvd-hero__secondary-link {
		padding-top: 0.5rem;
	}
}

.nvd-hero__lede {
	font-size: 1.25rem;
	max-width: 42rem;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.9 );
}

@media ( prefers-reduced-motion: reduce ) {
	.nvd-hero__video {
		display: none;
	}

	.nvd-hero {
		background: var( --clr-primary );
	}
}

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

.nvd-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	flex-shrink: 0;
}

@media ( min-width: 640px ) {
	.nvd-hero__actions {
		flex-direction: row;
		align-items: center;
	}
}

@media ( min-width: 480px ) and ( max-width: 639px ) {
	.nvd-hero__actions {
		flex-direction: row;
		align-items: center;
	}
}

.nvd-hero__secondary-link {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: normal;
	color: var( --clr-text-main );
	border-bottom: 2px solid var( --clr-secondary );
	padding-bottom: 2px;
	text-decoration: none;
}

/* Industry shortcut: "¿Tu rubro?" + one outline pill per sector, each
   jumping to (and opening) its Soluciones card. Phones: one swipeable row. */
.nvd-hero__sectors {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	margin-top: 2.5rem;
}

.nvd-hero__sectors-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgba( 255, 255, 255, 0.7 );
}

.nvd-hero__sectors-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
}

.nvd-hero__sectors-list .btn {
	color: #fff;
	white-space: nowrap;
}

.nvd-hero__sectors-list .btn:focus-visible {
	outline: 2px solid var( --clr-accent );
	outline-offset: 2px;
}

/* Below 1024px the six pills don't reliably fit one line — one swipeable
   row that bleeds to the hero's edges (hero inset: 1.5rem phones, 4rem tablet). */
@media ( max-width: 1023.98px ) {
	.nvd-hero__sectors-list {
		--bleed: 1.5rem;
		flex-wrap: nowrap;
		width: calc( 100% + 2 * var( --bleed ) );
		margin: 0 calc( -1 * var( --bleed ) );
		padding: 0 var( --bleed );
		overflow-x: auto;
		scrollbar-width: none;
	}

	.nvd-hero__sectors-list::-webkit-scrollbar {
		display: none;
	}
}

@media ( min-width: 768px ) and ( max-width: 1023.98px ) {
	.nvd-hero__sectors-list {
		--bleed: 4rem;
	}
}

/* Phones: the pills are too long for the hero — the Soluciones carousel below is the shortcut. */
@media ( max-width: 767.98px ) {
	.nvd-hero__sectors {
		display: none;
	}
}

/* Section header (eyebrow + title + carousel nav) */
.nvd-section {
	padding: 6rem 0;
	position: relative;
	overflow: hidden;
}

.nvd-section--solutions {
	overflow: visible;
}

/* .nvd-section zeroes horizontal padding; restore the wrap inset for
   sections that also carry .nvd-wrap so they line up with .nvd-section__head. */
.nvd-section.nvd-wrap {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

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

.nvd-section__head {
	max-width: 1400px;
	margin: 0 auto 3rem;
	padding: 0 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

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

.nvd-section__nav {
	display: none;
	gap: 1rem;
}

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

/* Solutions section: below the desktop layout, stack the nav under the
   heading text instead of hiding it / floating it right. */
@media ( max-width: 899px ) {
	.nvd-section--solutions .nvd-section__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.nvd-section--solutions .nvd-section__nav {
		display: flex;
	}
}

.nvd-section__nav button {
	padding: 1rem;
	border-radius: 999px;
	border: 1px solid rgba( 26, 22, 19, 0.1 );
	background: transparent;
	cursor: pointer;
	transition: all 0.2s ease;
	line-height: 0;
}

.nvd-section__nav button:hover {
	background: var( --clr-primary );
	color: var( --clr-bg );
}

.nvd-section__nav svg {
	width: 1.25rem;
	height: 1.25rem;
	stroke: currentColor;
}

/* Carousel (shared scaffolding) */
.nvd-carousel {
	/* Positioned so the items' offsetLeft (home.js updateActive) is measured from the strip. */
	position: relative;
	display: flex;
	align-items: flex-start;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 3rem;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.nvd-carousel::-webkit-scrollbar {
	display: none;
}

.nvd-carousel__item {
	scroll-snap-align: center;
	flex-shrink: 0;
	cursor: pointer;
}

.nvd-carousel__item:focus-visible {
	outline: 2px solid var( --clr-secondary );
	outline-offset: 4px;
	border-radius: var( --radius-media );
}

.nvd-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.nvd-carousel__dot {
	width: 3rem;
	height: 0.25rem;
	border-radius: 999px;
	background: rgba( 26, 22, 19, 0.1 );
}

.nvd-carousel__dot.is-active {
	background: var( --clr-primary );
}

/* Sector cards (Soluciones a medida) */
.nvd-solutions-track {
	gap: 0.25rem;
	padding-left: 1.5rem;
	padding-right: 10%;
	/* The strip is a scroll container, so it clips the cards' big shadow. Give the shadow room
	   (top 1rem, bottom 4.5rem) and pull the space back with negative margins so the layout
	   stays tight. */
	padding-top: 1rem;
	padding-bottom: 4.5rem;
	margin-top: -1rem;
	margin-bottom: -2.5rem;
}

@media ( min-width: 768px ) {
	.nvd-solutions-track {
		padding-left: max( 4rem, calc( ( 100vw - 1400px ) / 2 + 4rem ) );
		padding-right: 15%;
	}
}

.nvd-sector-card {
	/* Phones: one large card dominates, swipe for the next. */
	width: min( 84vw, 34rem );
	max-width: none;
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: var( --radius-media );
	overflow: hidden;
	background: var( --clr-primary );
	box-shadow: var( --shadow-media );
	/* Layout containment: the expand animates layout inside the card; this keeps that from
	   dirtying the scroll-snap strip (iOS jank). */
	contain: layout;
	transform: scale( 0.95 );
	transition: transform 0.5s cubic-bezier( 0.23, 1, 0.32, 1 );
	will-change: transform;
}

.nvd-carousel__item.is-active .nvd-sector-card {
	transform: scale( 1 );
}

/* Expanded state keeps the exact same box — only the overlay content changes. */

.nvd-sector-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Colour reveal on the photo only (not the whole card, which holds the blur layer). */
	filter: grayscale( 100% ) brightness( 0.9 );
	transition: filter 0.5s cubic-bezier( 0.23, 1, 0.32, 1 );
}

.nvd-carousel__item.is-active .nvd-sector-card img {
	filter: none;
}

.nvd-sector-card__overlay {
	position: absolute;
	inset: 0;
	isolation: isolate;
}

/* Expanded: the photo frosts behind smoked dark glass (same glass family as the Método card).
   The blur is a static layer whose OPACITY fades in — animating backdrop-filter itself re-blurs
   every frame and stutters on iOS. It sits between the photo and the overlay (a sibling, not
   inside the isolated overlay, so it can see the photo). */
.nvd-sector-card__frost {
	position: absolute;
	inset: 0;
	-webkit-backdrop-filter: var( --glass-blur );
	backdrop-filter: var( --glass-blur );
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.45s ease;
}

.nvd-carousel__item.is-expanded .nvd-sector-card__frost {
	opacity: 1;
}

/* Two stacked gradient layers behind the content. The base is always on;
   the "deep" layer fades in when the card is selected, so the scrim
   animates gradient-to-gradient instead of snapping to a flat fill. */
.nvd-sector-card__overlay::before,
.nvd-sector-card__overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.nvd-sector-card__overlay::before {
	background: linear-gradient( 180deg, rgba( 26, 22, 19, 0 ) 0%, rgba( 26, 22, 19, 0.95 ) 100% );
}

.nvd-sector-card__overlay::after {
	background: linear-gradient( 180deg, rgba( 26, 22, 19, 0.3 ) 0%, rgba( 26, 22, 19, 0.6 ) 45%, rgba( 26, 22, 19, 0.85 ) 100% );
	opacity: 0;
	transition: opacity 0.45s ease;
}

.nvd-carousel__item.is-expanded .nvd-sector-card__overlay::after {
	opacity: 1;
}

/* Content is bottom-anchored at rest; on select the whole block slides to
   the top of the card (top 100%/translateY(-100%) -> top 0/translateY(0),
   self-adjusting to content height). */
.nvd-sector-card__content {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	transform: translateY( -100% );
	padding: 2rem;
	transition: top 0.45s cubic-bezier( 0.4, 0, 0.2, 1 ), transform 0.45s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.nvd-carousel__item.is-expanded .nvd-sector-card__content {
	top: 0;
	transform: translateY( 0 );
}

.nvd-sector-card__title {
	font-family: var( --font-display );
	font-size: 1.875rem;
	line-height: 1.1;
	font-weight: 700;
	color: var( --clr-bg );
	margin: 0;
}

.nvd-sector-card__desc {
	color: var( --clr-bg );
	font-size: 0.9375rem;
	line-height: 1.5;
	max-width: 20rem;
	margin: 0;
}

/* Reveal — grid-rows 0fr->1fr wipes open to the exact content height, so
   nothing clips mid-animation. */
.nvd-sector-card__reveal {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.45s cubic-bezier( 0.4, 0, 0.2, 1 ), opacity 0.3s ease;
}

/* Same duration and curve as the content slide, and no delay on the height: the block's
   position is a product of both, so mismatched timing made it wobble. Only the fade is delayed. */
.nvd-carousel__item.is-expanded .nvd-sector-card__reveal {
	grid-template-rows: 1fr;
	opacity: 1;
	transition: grid-template-rows 0.45s cubic-bezier( 0.4, 0, 0.2, 1 ), opacity 0.3s ease 0.1s;
}

.nvd-sector-card__reveal-inner {
	overflow: hidden;
	min-height: 0;
}

.nvd-sector-card__points {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.nvd-sector-card__points li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var( --clr-bg );
	font-size: 0.9375rem;
	line-height: 1.4;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.nvd-carousel__item.is-expanded .nvd-sector-card__points li {
	opacity: 1;
}

.nvd-carousel__item.is-expanded .nvd-sector-card__points li:nth-child( 1 ) { transition-delay: 0.12s; }
.nvd-carousel__item.is-expanded .nvd-sector-card__points li:nth-child( 2 ) { transition-delay: 0.17s; }
.nvd-carousel__item.is-expanded .nvd-sector-card__points li:nth-child( 3 ) { transition-delay: 0.22s; }
.nvd-carousel__item.is-expanded .nvd-sector-card__points li:nth-child( 4 ) { transition-delay: 0.27s; }

.nvd-sector-card__point-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	color: var( --clr-secondary );
}

.nvd-sector-card__cta {
	position: absolute;
	left: 2rem;
	bottom: 2rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.nvd-carousel__item.is-expanded .nvd-sector-card__cta {
	opacity: 1;
	pointer-events: auto;
	transition-delay: 0.25s, 0s, 0s;
}

/* Brand icon in the bottom-right of an open card: an ice-coloured mask at ~30% that shows through
   the frosted panel, bleeding off the corner. The icon files are normalised to one square box
   (docs/tools/industry-icons.py) so they all render at a consistent size; --icon-scale trims
   the odd one out, --icon-lift raises one that sits too low, --icon-shift moves one right. Purely decorative. */
.nvd-sector-card__icon {
	position: absolute;
	z-index: 1;
	right: calc( -7% - var( --icon-shift, 0% ) );
	bottom: calc( -9% + var( --icon-lift, 0% ) );
	width: calc( 62% * var( --icon-scale, 1 ) );
	aspect-ratio: 1;
	background: var( --clr-bg );
	-webkit-mask: var( --icon ) no-repeat center / contain;
	mask: var( --icon ) no-repeat center / contain;
	opacity: 0;
	transform: translateY( 1.5rem ) scale( 0.96 );
	transform-origin: 100% 100%;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.45s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.nvd-carousel__item.is-expanded .nvd-sector-card__icon {
	opacity: 0.3;
	transform: none;
	transition-delay: 0.15s;
}

.nvd-sector-card__content,
.nvd-sector-card__cta {
	z-index: 2;
}

/* "Ver más" hint on the first, collapsed card: pulsing blue rings around a glass
   plus, centred on the photo. Goes away for good on the first expand
   (home.js drops .is-hinted). Purely decorative: pointer-events none. */
.nvd-sector-card__hint {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	transform: translate( -50%, -50% );
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.nvd-carousel.is-hinted .nvd-carousel__item:not( .is-expanded ) .nvd-sector-card__hint {
	opacity: 1;
}

.nvd-sector-card__hint-dot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var( --glass-dark );
	border: 1px solid var( --glass-dark-edge );
	-webkit-backdrop-filter: var( --glass-blur );
	backdrop-filter: var( --glass-blur );
	color: #fff;
}

.nvd-sector-card__hint-dot svg {
	width: 1.5rem;
	height: 1.5rem;
}

.nvd-sector-card__hint-dot::before,
.nvd-sector-card__hint-dot::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 2px solid var( --clr-secondary );
	border-radius: 50%;
	animation: nvd-hint-ring 2.4s ease-out infinite;
}

.nvd-sector-card__hint-dot::after {
	animation-delay: 1.2s;
}

.nvd-sector-card__hint-label {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff;
}

@keyframes nvd-hint-ring {
	from {
		transform: scale( 1 );
		opacity: 0.8;
	}

	to {
		transform: scale( 1.9 );
		opacity: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.nvd-sector-card__hint,
	.nvd-sector-card__hint-dot::before,
	.nvd-sector-card__hint-dot::after {
		transition: none;
		animation: none;
	}

	.nvd-sector-card__hint-dot::before,
	.nvd-sector-card__hint-dot::after {
		display: none;
	}
}

/* --- Card width + internal scaling tiers ---
   These MUST come after the base .nvd-sector-card__* rules above: media queries
   add no specificity, so an earlier-in-source @media block loses to a later
   unconditional rule. (That bug silently killed every non-width override here.) */

/* Portrait tablets (601–899): card scales with viewport — ~490px at 768,
   ~544px at 820. Everything inside scales on a steep viewport slope pinned so
   ~820 (iPad Air, signed off) keeps its sizes while ~640 shrinks hard — a
   356px-wide card can't hold the sign-off sizes without clipping the CTA. */
@media ( min-width: 601px ) and ( max-width: 899px ) {
	.nvd-sector-card {
		width: clamp( 20rem, calc( 104vw - 309px ), 34rem );
	}

	.nvd-sector-card__content {
		padding: clamp( 1.3rem, calc( 5vw - 11.8px ), 2rem );
	}

	.nvd-sector-card__title {
		font-size: clamp( 1.25rem, calc( 4.7vw - 10.1px ), 1.875rem );
	}

	.nvd-sector-card__cta {
		left: clamp( 1.3rem, calc( 5vw - 11.8px ), 2rem );
		bottom: clamp( 1.3rem, calc( 5vw - 11.8px ), 2rem );
	}

	.nvd-sector-card__desc,
	.nvd-sector-card__points li {
		font-size: clamp( 0.84rem, calc( 0.33vw + 11.3px ), 0.9375rem );
		line-height: 1.4;
	}

	.nvd-sector-card__points {
		margin-top: clamp( 1.3rem, calc( 10.7vw - 47.7px ), 2.5rem );
		gap: clamp( 0.6rem, calc( 2.4vw - 5.8px ), 0.875rem );
	}

	.nvd-sector-card__point-icon {
		width: clamp( 1.05rem, calc( 1.8vw + 5.3px ), 1.25rem );
		height: clamp( 1.05rem, calc( 1.8vw + 5.3px ), 1.25rem );
	}
}

/* Landscape / laptop / desktop: card is fluid — full 480px on wide screens,
   scaling toward ~80% (384px) around the 1024 boundary so 2 cards breathe.
   Internal padding / title / CTA inset scale with it. */
@media ( min-width: 900px ) {
	.nvd-sector-card {
		width: clamp( 384px, 34vw, 480px );
	}

	.nvd-sector-card__content {
		padding: clamp( 1.5rem, 2.4vw, 2rem );
	}

	.nvd-sector-card__title {
		font-size: clamp( 1.5rem, 2vw, 1.875rem );
	}

	.nvd-sector-card__cta {
		left: clamp( 1.5rem, 2.4vw, 2rem );
		bottom: clamp( 1.5rem, 2.4vw, 2rem );
	}
}

/* Tighter spacing on genuinely small cards so the top content clears the pinned CTA */
@media ( max-width: 600px ) {
	.nvd-sector-card {
		/* Cap the card so it doesn't swallow the viewport near 600px — text stays
		   at a readable size instead of shrinking to fit an oversized card. */
		width: min( 78vw, 26rem );
	}

	/* Scales with viewport — pinned so ~412px keeps the signed-off sizes and
	   narrower phones (down to ~320px) shrink text/padding with the card. */
	.nvd-sector-card__content {
		padding: clamp( 1rem, calc( 6.6vw - 6.7px ), 1.3rem );
	}

	.nvd-sector-card__title {
		font-size: clamp( 1rem, calc( 6.1vw - 3.5px ), 1.35rem );
	}

	.nvd-sector-card__points {
		margin-top: clamp( 0.8rem, calc( 7.39vw - 9.6px ), 1.3rem );
		gap: clamp( 0.4rem, calc( 2.83vw - 2.05px ), 0.6rem );
	}

	.nvd-sector-card__desc,
	.nvd-sector-card__points li {
		font-size: clamp( 0.7rem, calc( 1.96vw + 4.93px ), 0.8125rem );
	}

	.nvd-sector-card__cta {
		left: clamp( 1rem, calc( 6.6vw - 6.7px ), 1.3rem );
		bottom: clamp( 1rem, calc( 6.6vw - 6.7px ), 1.3rem );
		font-size: clamp( 0.7rem, calc( 1.96vw + 4.93px ), 0.8125rem );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.nvd-sector-card__icon,
	.nvd-sector-card__content,
	.nvd-sector-card__reveal,
	.nvd-sector-card__points li,
	.nvd-sector-card__cta,
	.nvd-sector-card__frost,
	.nvd-sector-card__overlay::after {
		transition-duration: 0.01ms;
		transition-delay: 0s;
	}
}

/* Process cards (Método) */
/* Método Nevado — mountain journey.
   One static illustration; a JS "camera" pans/zooms the canvases between
   three stage frames (see home.js wireJourney). Canvases are laid out at the
   most-zoomed stage's size and only ever scaled DOWN, so the SVGs stay crisp
   instead of being upscaled from a small raster.
   Full-bleed on purpose (deliberate exception to the site inset standard):
   16px gutters on phones, 32px from 768px. The section head stays on the
   standard inset. */
.nvd-journey {
	--nvd-journey-gutter: 1rem;
	position: relative;
	width: calc( 100% - 2 * var( --nvd-journey-gutter ) );
	max-width: 1856px;
	margin: 0 auto;
}

@media ( min-width: 768px ) {
	.nvd-journey {
		--nvd-journey-gutter: 2rem;
	}
}

.nvd-journey__viewport {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var( --radius-card );
	border: 1px solid rgba( 26, 22, 19, 0.08 );
	background: #fff;
	isolation: isolate;
	touch-action: pan-y;
}

@media ( min-width: 768px ) {
	.nvd-journey__viewport {
		aspect-ratio: 16 / 10;
		border-radius: var( --radius-media );
	}
}

/* Barely-there volcanic fade along the bottom edge so the map reads as its
   own card against the page. Above the canvases, below the glass card. */
.nvd-journey__viewport::after {
	content: '';
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	height: 35%;
	background: linear-gradient( 0deg, rgba( 26, 22, 19, 0.1 ), rgba( 26, 22, 19, 0 ) );
	pointer-events: none;
}

/* Desktop: height follows the screen, not the width (a width-driven 2:1
   stage would be ~930px tall on a 1920px screen). The camera fits any
   shape. */
@media ( min-width: 1024px ) {
	.nvd-journey {
		height: clamp( 30rem, 72vh, 46rem );
	}

	.nvd-journey__viewport {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
	}
}

/* Night -> dawn -> day. Night is always the base; dawn and day fade in on
   top of it, so a crossfade never dips through white. Pale tints only —
   the black line art needs the contrast. */
.nvd-journey__sky {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	transition: opacity var( --nvd-pan, 1.4s ) ease;
}

.nvd-journey__sky--night {
	opacity: 1;
	background: linear-gradient( 180deg, color-mix( in srgb, color-mix( in srgb, var( --clr-secondary ) 35%, var( --clr-primary ) ) 20%, var( --clr-bg ) ) 0%, color-mix( in srgb, var( --clr-secondary ) 8%, var( --clr-bg ) ) 100% );
}

/* One tonal climb instead of three unrelated colours: stage 1 stays the cool, quiet blue-grey;
   stage 2 is the same sky lit up (brighter, clearer blue); stage 3 is a warm golden glow around
   the summit with faint rays, the one place gold is allowed. */
.nvd-journey__sky--day {
	background: linear-gradient( 180deg, color-mix( in srgb, var( --clr-secondary ) 36%, #fff ) 0%, color-mix( in srgb, var( --clr-secondary ) 12%, #fff ) 100% );
}

.nvd-journey__sky--glow {
	background: linear-gradient( 180deg, color-mix( in srgb, var( --clr-gold ) 16%, #fff ) 0%, color-mix( in srgb, var( --clr-gold ) 4%, #fff ) 100% );
}

.nvd-journey[data-stage="2"] .nvd-journey__sky--day,
.nvd-journey[data-stage="3"] .nvd-journey__sky--day,
.nvd-journey[data-stage="3"] .nvd-journey__sky--glow {
	opacity: 1;
}

/* The summit glow. A canvas like the art (so it moves with the camera and stays glued to the
   final trail dot — the "sun" at 3675,518 of 5630×3078), holding a soft gold halo and faint rays.
   It sits above the art but is masked by the art's own shapes (mask exclusion), so it only
   paints the open sky: clouds, rocks and the mountain stay solid and no ray crosses them. */
.nvd-journey__canvas--glow {
	opacity: 0;
	transition: opacity var( --nvd-pan, 1.4s ) ease, transform var( --nvd-pan, 1.4s ) var( --nvd-ease, cubic-bezier( 0.65, 0, 0.35, 1 ) );
	background: radial-gradient( ellipse 17% 31% at var( --sun-x, 65.3% ) var( --sun-y, 16.8% ), color-mix( in srgb, var( --clr-gold ) 46%, transparent ) 0%, color-mix( in srgb, var( --clr-gold ) 18%, transparent ) 45%, transparent 100% );
	-webkit-mask: linear-gradient( var( --clr-primary ) 0 0 ), url( ../img/metodologia/journey-solid.png ) center / 100% 100% no-repeat;
	-webkit-mask-composite: xor;
	mask: linear-gradient( var( --clr-primary ) 0 0 ), url( ../img/metodologia/journey-solid.png ) center / 100% 100% no-repeat;
	mask-composite: exclude;
}

/* ---- Full-colour art (.nvd-journey--color) ----------------------------------------------------
   The art carries its own colours and opaque fills, so the line-art tricks are off: normal blending
   instead of multiply/colour-burn, no snow layer, and the glow sits BEHIND the art (it is then covered
   by the mountain, plane and clouds for free — no silhouette mask). The sky layers still show through
   the open sky, so the tonal climb and the gold summit glow keep working. */
.nvd-journey--color .nvd-journey__canvas--art,
.nvd-journey--color .nvd-journey__canvas--ghost {
	mix-blend-mode: normal;
}

.nvd-journey--color .nvd-journey__canvas--glow {
	-webkit-mask: none;
	mask: none;
}

.nvd-journey[data-stage="3"] .nvd-journey__canvas--glow {
	opacity: 1;
}

/* Rays turning very slowly around the sun. */
.nvd-journey__canvas--glow::before {
	content: '';
	position: absolute;
	top: calc( var( --sun-y, 16.8% ) - 100% );
	left: calc( var( --sun-x, 65.3% ) - 100% );
	width: 200%;
	height: 200%;
	background: repeating-conic-gradient( from 0deg, color-mix( in srgb, var( --clr-gold ) 55%, transparent ) 0deg 2.5deg, transparent 2.5deg 15deg );
	-webkit-mask: radial-gradient( circle, var( --clr-primary ) 0%, transparent 34% );
	mask: radial-gradient( circle, var( --clr-primary ) 0%, transparent 34% );
	opacity: 0.35;
	animation: nvd-journey-rays 120s linear infinite;
}

@keyframes nvd-journey-rays {
	to {
		transform: rotate( 360deg );
	}
}

/* Three layers move together (JS gives them the same transform):
   art   — brand-ink line art, multiply: ink stays ink, every white fill
           (rocks, tent, clouds, snow) takes the sky tint while still hiding
           the ridge lines behind it;
   ghost — the grey trail + dot outlines, color-burn: reads as a richer
           shade of whatever sky is behind it (lavender / peach / blue);
   ink   — the walked trail + stage dots, normal blend so brand ink and lime
           stay true (color-burn would turn ink crimson/navy, multiply would
           turn lime olive). Must stay separate siblings: a blend mode only
           reaches what's below it in the viewport's stacking context. */
.nvd-journey__canvas {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	aspect-ratio: var( --nvd-art-ratio, 5630 / 3078 );
	transform-origin: 0 0;
	transition: transform var( --nvd-pan, 1.4s ) var( --nvd-ease, cubic-bezier( 0.65, 0, 0.35, 1 ) );
	will-change: transform;
}

/* Snow: the mountain's left flank below the cloud band is open line art, so it would take the sky
   colour. This layer paints it true white underneath the (multiplied) art. The polygon is the same
   one docs/tools/metodologia-solid.py adds to the glow mask. Percentages of the 5630x3078 canvas. */
.nvd-journey__canvas--snow {
	background: #fff;
	clip-path: polygon( 62.54% 35.48%, 65.31% 36.48%, 67.03% 36.84%, 67.14% 39.15%, 67.96% 40.68%, 69.48% 42.20%, 70.60% 43.47%, 70.76% 46.78%, 72.20% 48.77%, 63.93% 48.77%, 63.93% 38.14% );
}

.nvd-journey__canvas--art {
	mix-blend-mode: multiply;
}

.nvd-journey__canvas--ghost {
	mix-blend-mode: color-burn;
}

.nvd-journey__layer,
.nvd-journey__markers {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/* Walked trail: brand-ink dashes fade in one by one over the ghost trail as
   the camera travels a segment. The delay lives on .is-traveled only, so
   going back un-inks instantly. */
.nvd-journey__dash {
	fill: var( --clr-primary );
	opacity: 0;
	transition: opacity 0.35s ease;
}

.nvd-journey__segment.is-traveled .nvd-journey__dash {
	opacity: 1;
	transition-delay: calc( var( --nvd-dash-offset, 0ms ) + var( --i ) * var( --nvd-dash-step, 60ms ) );
}

/* Stage dots: upcoming = the ghost outline underneath; passed = solid brand ink;
   current = brand ink with a sky-blue ring and pulse. */
.nvd-journey__dot-core {
	fill: var( --clr-primary );
	stroke: var( --clr-primary );
	stroke-width: 10;
	opacity: 0;
	transform: scale( 0.4 );
	transform-box: fill-box;
	transform-origin: center;
	transition: opacity 0.3s ease, transform 0.5s cubic-bezier( 0.34, 1.56, 0.64, 1 ), stroke 0.4s ease;
}

.nvd-journey__dot.is-done .nvd-journey__dot-core,
.nvd-journey__dot.is-active .nvd-journey__dot-core {
	opacity: 1;
	transform: none;
}

.nvd-journey__dot.is-active .nvd-journey__dot-core {
	stroke: var( --clr-secondary );
}

.nvd-journey__dot-pulse {
	fill: var( --clr-secondary );
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

.nvd-journey__dot.is-active .nvd-journey__dot-pulse {
	animation: nvd-journey-pulse 1.8s ease-out infinite;
}

/* Stage 3: the current dot's ring and pulse turn gold, like the glow around it. */
.nvd-journey[data-stage="3"] .nvd-journey__dot.is-active .nvd-journey__dot-core {
	stroke: var( --clr-gold );
}

.nvd-journey[data-stage="3"] .nvd-journey__dot-pulse {
	fill: var( --clr-gold );
}

@keyframes nvd-journey-pulse {
	from {
		transform: scale( 1 );
		opacity: 0.75;
	}
	to {
		transform: scale( 3 );
		opacity: 0;
	}
}

/* Glass card. Phones/tablet: under the map, pulled up over its bottom edge
   so the blur has something to catch. Desktop: floats over the right ~35%
   of the map; the camera frames each stage in the uncovered left part. */
.nvd-journey__card {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin: -3rem 0.75rem 0;
	padding: 1.5rem;
	border-radius: var( --radius-card );
	border: 1px solid var( --glass-light-edge );
	background: var( --glass-light );
	-webkit-backdrop-filter: var( --glass-blur );
	backdrop-filter: var( --glass-blur );
	box-shadow: var( --shadow-float );
}

@supports not ( ( backdrop-filter: blur( 1px ) ) or ( -webkit-backdrop-filter: blur( 1px ) ) ) {
	.nvd-journey__card {
		background: rgba( 255, 255, 255, 0.94 );
	}
}

@media ( min-width: 1024px ) {
	.nvd-journey__card {
		position: absolute;
		top: 1.5rem;
		right: 1.5rem;
		bottom: 1.5rem;
		width: min( 36%, 30rem );
		margin: 0;
		padding: 2.25rem;
		gap: 1.5rem;
	}
}

/* Tight desktops (1024–1279): the glass card is ~370px wide, so three wrapping bullets used to
   push the arrows onto the card's bottom edge. Trim the card's type and spacing instead. */
@media ( min-width: 1024px ) and ( max-width: 1279.98px ) {
	.nvd-journey__card {
		width: min( 40%, 30rem );
		padding: 1.5rem;
		gap: 1rem;
	}

	.nvd-journey__panel-title {
		margin-bottom: 0.5rem;
		font-size: 1.45rem;
	}

	.nvd-journey__panel-text {
		margin-bottom: 0.9rem;
		font-size: 0.875rem;
		line-height: 1.5;
	}

	.nvd-journey__panel-list {
		gap: 0.4rem;
	}

	.nvd-journey__panel-list li {
		font-size: 0.8125rem;
	}
}

/* Step tabs: 01 · 02 · 03 joined by a dashed mini-trail that inks as you go. */
.nvd-journey__tabs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

.nvd-journey__tab-item {
	display: flex;
	align-items: center;
	flex: 1 1 0;
}

.nvd-journey__tab-item:last-child {
	flex: 0 0 auto;
}

.nvd-journey__tab-item:not( :last-child )::after {
	content: '';
	flex: 1;
	margin: 0 0.75rem;
	border-top: 2px dashed rgba( 26, 22, 19, 0.2 );
	transition: border-color 0.4s ease;
}

.nvd-journey__tab-item.is-done::after {
	border-top-color: var( --clr-primary );
}

.nvd-journey__tab {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.35rem 0.25rem;
	border: 0;
	border-radius: 999px;
	background: none;
	font: inherit;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.15em;
	color: rgba( 26, 22, 19, 0.45 );
	cursor: pointer;
	transition: color 0.3s ease;
}

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

.nvd-journey__tab-item.is-done .nvd-journey__tab,
.nvd-journey__tab-item.is-active .nvd-journey__tab,
.nvd-journey__tab:hover {
	color: var( --clr-primary );
}

/* Status dot — mirrors the dots on the illustration. */
.nvd-journey__tab-dot {
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 50%;
	background: rgba( 26, 22, 19, 0.18 );
	transition: background 0.4s ease, box-shadow 0.4s ease;
}

.nvd-journey__tab-item.is-done .nvd-journey__tab-dot,
.nvd-journey__tab-item.is-active .nvd-journey__tab-dot {
	background: var( --clr-primary );
}

/* Passed steps stay plain ink; the current one is a blue pulsing dot (same pulse as the hero badge dot). */
.nvd-journey__tab-item.is-active .nvd-journey__tab-dot {
	background: var( --clr-secondary );
	animation: nvd-pulse 2s ease-in-out infinite;
}


/* Panels: all three share one grid cell so the card never changes height
   between steps; only the active one is visible (visibility also takes the
   inactive ones out of the tab order and the accessibility tree). Only once
   JS is running — without it they simply stack. */
.nvd-journey__panels {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.nvd-journey.is-enhanced .nvd-journey__panels {
	display: grid;
	align-content: start;
}

@media ( min-width: 1024px ) {
	.nvd-journey.is-enhanced .nvd-journey__panels {
		align-content: center;
	}
}

.nvd-journey.is-enhanced .nvd-journey__panel {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY( 0.75rem );
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

.nvd-journey.is-enhanced .nvd-journey__panel.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.5s ease 0.15s, transform 0.6s cubic-bezier( 0.22, 1, 0.36, 1 ) 0.15s, visibility 0s;
}

.nvd-journey__panel-title {
	margin: 0 0 0.75rem;
	font-family: var( --font-body );
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

@media ( min-width: 1024px ) {
	.nvd-journey__panel-title {
		font-size: clamp( 1.6rem, 2.2vw, 2.1rem );
	}
}

.nvd-journey__panel-text {
	margin: 0 0 1.25rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: rgba( 26, 22, 19, 0.78 );
}

.nvd-journey__panel-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.nvd-journey__panel-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-size: 0.875rem;
	font-weight: 600;
}

.nvd-journey__controls {
	padding-top: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}

/* Small phones: the card is already tall — drop the bullets, keep title + text. */
@media ( max-width: 430px ) {
	.nvd-journey__panel-list {
		display: none;
	}

	.nvd-journey__panel-text {
		margin-bottom: 0;
	}

	.nvd-journey__controls {
		padding-top: 1.25rem;
	}
}

/* Phones: the CTA wraps under the arrows, and while it is hidden (before the last stage) it
   still reserved a row — the card looked too long. Collapse it and let it grow in at stage 3. */
@media ( max-width: 640px ) {
	.nvd-journey__controls {
		row-gap: 0;
	}

	.nvd-journey.is-enhanced .nvd-journey__cta {
		max-height: 0;
		margin-top: 0;
		padding-block: 0;
		border-width: 0;
		overflow: hidden;
		transition: opacity 0.3s ease, visibility 0s linear 0.3s, max-height 0.4s ease, margin-top 0.4s ease, padding 0.4s ease, border-width 0.4s ease, transform 0.2s ease, box-shadow 0.2s ease;
	}

	.nvd-journey.is-enhanced[data-stage="3"] .nvd-journey__cta {
		max-height: 4rem;
		margin-top: 1rem;
		padding-block: 0.75em;
		border-width: 2px;
		transition: opacity 0.5s ease 0.6s, visibility 0s linear 0.6s, max-height 0.4s ease 0.3s, margin-top 0.4s ease 0.3s, padding 0.4s ease 0.3s, border-width 0.4s ease 0.3s, transform 0.2s ease, box-shadow 0.2s ease;
	}
}

/* Reuses the section-head arrow buttons; they're hidden < 768px sitewide,
   but inside the card they're the controls, so always show them here. */
.nvd-journey .nvd-section__nav {
	display: flex;
	gap: 0.75rem;
}

/* CTA appears on the last stage only, once the camera has mostly arrived. */
.nvd-journey.is-enhanced .nvd-journey__cta {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s, transform 0.2s ease, box-shadow 0.2s ease;
}

.nvd-journey.is-enhanced[data-stage="3"] .nvd-journey__cta {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease 0.6s, visibility 0s linear 0.6s, transform 0.2s ease, box-shadow 0.2s ease;
}

.nvd-journey.is-settling .nvd-journey__panel,
.nvd-journey.is-settling .nvd-journey__cta {
	transition: none;
}

.nvd-section__nav button:disabled {
	opacity: 0.35;
	cursor: default;
}

.nvd-section__nav button:disabled:hover {
	background: transparent;
	color: inherit;
}

@media ( prefers-reduced-motion: reduce ) {
	.nvd-journey__sky,
	.nvd-journey__canvas,
	.nvd-journey__dash,
	.nvd-journey__dot-core,
	.nvd-journey.is-enhanced .nvd-journey__panel,
	.nvd-journey.is-enhanced .nvd-journey__panel.is-active,
	.nvd-journey.is-enhanced .nvd-journey__cta,
	.nvd-journey.is-enhanced[data-stage="3"] .nvd-journey__cta {
		transition: none;
	}

	.nvd-journey__dot.is-active .nvd-journey__dot-pulse,
	.nvd-journey__tab-item.is-active .nvd-journey__tab-dot,
	.nvd-journey__canvas--glow::before {
		animation: none;
	}
}

/* Divider */
.nvd-divider {
	width: 100%;
	height: 6rem;
	border-top: 1px solid rgba( 26, 22, 19, 0.1 );
}

/* Below 1024px the FAQ sat 12rem (divider + section padding) under the previous section. */
@media ( max-width: 1023.98px ) {
	.nvd-divider {
		height: 3rem;
	}

	.nvd-section.nvd-faq {
		padding-top: 1.5rem;
	}
}

/* Pricing */
/* The RECOMENDADO seal is absolutely positioned and deliberately overhangs the
   card's top-right corner; clip x so its overhang can never open a horizontal
   scrollbar on narrow viewports. overflow-x: clip (not hidden) leaves the top
   overhang visible. */
#precios {
	overflow-x: clip;
}

.nvd-pricing__head {
	margin-bottom: 1.5rem;
}

.nvd-pricing__trust {
	list-style: none;
	margin: 0 0 3rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.nvd-pricing__trust li {
	padding: 0.4rem 0.85rem;
	border: 1px solid rgba( 26, 22, 19, 0.15 );
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba( 26, 22, 19, 0.7 );
}

.nvd-pricing__grid {
	display: grid;
	gap: 2.5rem;
}

/* Two columns only from 1024px. Below that the cards get too narrow to hold
   the stacked content without going very tall (which crops the background
   animation) — single column instead, Pro on top. */
@media ( min-width: 1024px ) {
	.nvd-pricing__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media ( max-width: 1023.98px ) {
	.nvd-pricing__grid {
		gap: 2rem;
	}

	.nvd-price-card {
		width: 100%;
		max-width: 30rem;
		margin-inline: auto;
	}
}

/* Tablet / large-phone single column: let the card span the full wrap width so
   its edges line up with the left-aligned section title, eyebrow and subtitle,
   instead of a 30rem card floating centred with wide side gutters. Only the
   paragraph is capped for readability. The background animation crops a little
   more landscape here — acceptable at its ~0.08 opacity. Below 481px the 30rem
   card already fills the viewport, so that stays as-is. */
@media ( min-width: 481px ) and ( max-width: 1023.98px ) {
	.nvd-price-card {
		max-width: none;
		margin-inline: 0;
	}

	.nvd-price-card__desc {
		max-width: 42rem;
	}
}

.nvd-price-card {
	position: relative;
	overflow: visible;
	padding: 2.5rem;
	border-radius: var( --radius-card );
	box-shadow: var( --shadow-float );
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: transform 0.35s ease;
}

.nvd-price-card > *:not( .nvd-price-card__glow-clip ):not( .nvd-price-card__badge ) {
	position: relative;
	z-index: 1;
}

.nvd-price-card__foot {
	margin-top: auto;
}

.nvd-price-card__cta {
	margin-top: 1.5rem;
}

/* Decorative black-on-white line animation behind the card content —
   pricing-campsite (Esencial) / pricing-summit (Pro). Shows the poster
   still until hover, then JS plays the loop (see home.js wirePricingVideo).
   The clip wrapper keeps it inside the rounded corners while the card
   itself stays overflow:visible so the badge can bleed off the top.
   Blend modes drop the white ground: multiply on the light card, and
   invert + screen on the dark card (white lines on black). */
.nvd-price-card__glow-clip {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}

.nvd-price-card__glow {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 32%;
}

.nvd-price-card--light .nvd-price-card__glow {
	mix-blend-mode: multiply;
	opacity: 0.09;
}

.nvd-price-card--dark .nvd-price-card__glow {
	filter: invert( 1 );
	mix-blend-mode: screen;
	opacity: 0.08;
}

.nvd-price-card:hover,
.nvd-price-card:focus-within {
	transform: translateY( -6px );
}

/* Recommended tier — frosted spinning seal straddling the top-right corner.
   Two masked layers of flower-shape.svg (a crisp translucent seal + a
   blurred halo) spin behind a static label. */
/* Two classes so this wins over .nvd-price-card--light's grey border
   regardless of source order (the featured card is the light one).
   order: -1 puts Pro first everywhere — left column at >=1024px, top of the
   stack below — while the DOM keeps Esencial first.
   Border stays the plain grey from .nvd-price-card--light; the beam (below)
   is the only added treatment. */
.nvd-price-card.nvd-price-card--featured {
	order: -1;
	--nvd-beam-angle: 40deg;
}

.nvd-price-card__badge {
	position: absolute;
	top: -32px;
	right: -26px;
	z-index: 3;
	width: 132px;
	height: 132px;
	display: grid;
	place-items: center;
}

.nvd-price-card__badge-seal,
.nvd-price-card__badge-bloom {
	position: absolute;
	inset: 0;
	-webkit-mask: url( ../img/pricing/flower-shape.svg ) center / contain no-repeat;
	mask: url( ../img/pricing/flower-shape.svg ) center / contain no-repeat;
	animation: nvd-seal-spin 18s linear infinite;
}

.nvd-price-card__badge-seal {
	background: linear-gradient( 150deg, #2c2521, #1a1613 55%, #100c0a ); /* design-ok: seal's own lit-to-shadow shading around brand ink */
	filter:
		drop-shadow( 0 1px 1px rgba( 255, 255, 255, 0.6 ) )
		drop-shadow( 2px 5px 5px rgba( 26, 22, 19, 0.35 ) )
		drop-shadow( 0 13px 18px rgba( 26, 22, 19, 0.22 ) );
}

.nvd-price-card__badge-bloom {
	background: var( --clr-primary );
	filter: blur( 9px );
	opacity: 0.18;
}

.nvd-price-card__badge-text {
	position: relative;
	z-index: 2;
	white-space: nowrap;
	text-align: center;
	text-indent: 0.09em;
	font-family: var( --font-body );
	font-weight: 800;
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var( --clr-bg );
	text-shadow: 0 1px 2px rgba( 26, 22, 19, 0.45 );
}

@keyframes nvd-seal-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* Pro card border beam — twin blue comets orbit the grey border on a rotating
   conic gradient (plain-CSS rebuild of Motiq's Border Beam Panel). The whole
   conic fills ::after but a two-layer mask cuts everything except the 2px ring,
   so the effect lives strictly on the border — nothing shows through the card.
   Both comets are brand blue (--clr-secondary), ~198° apart. Toe stops use
   color-mix(... , transparent) not bare `transparent` so the conic ramp doesn't
   dip grey. --nvd-beam-angle animates via @property; without support it stays
   parked at 40deg (a static lit border). */
@property --nvd-beam-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

.nvd-price-card--featured::after {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	pointer-events: none;
	padding: 2px;
	background: conic-gradient(
		from var( --nvd-beam-angle ),
		transparent 0deg,
		color-mix( in srgb, var( --clr-secondary ) 4%, transparent ) 18deg,
		color-mix( in srgb, var( --clr-secondary ) 60%, transparent ) 46deg,
		var( --clr-secondary ) 56deg,
		color-mix( in srgb, var( --clr-secondary ) 25%, #ffffff ) 60deg,
		transparent 63deg,
		transparent 198deg,
		color-mix( in srgb, var( --clr-secondary ) 4%, transparent ) 216deg,
		color-mix( in srgb, var( --clr-secondary ) 55%, transparent ) 244deg,
		var( --clr-secondary ) 254deg,
		color-mix( in srgb, var( --clr-secondary ) 28%, #ffffff ) 258deg,
		transparent 261deg,
		transparent 360deg
	);
	-webkit-mask:
		linear-gradient( #fff 0 0 ) content-box,
		linear-gradient( #fff 0 0 );
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	animation: nvd-beam 8s linear infinite;
}

@keyframes nvd-beam {
	to {
		--nvd-beam-angle: 360deg;
	}
}

@media ( forced-colors: active ) {
	.nvd-price-card--featured::after {
		display: none;
	}
}

/* Pro card stands taller than its neighbour on desktop. */
@media ( min-width: 1024px ) {
	.nvd-price-card--featured {
		transform: scale( 1.03 );
	}

	.nvd-price-card--featured:hover,
	.nvd-price-card--featured:focus-within {
		transform: scale( 1.03 ) translateY( -6px );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.nvd-price-card {
		transition: none;
	}

	.nvd-price-card:hover,
	.nvd-price-card:focus-within {
		transform: none;
	}

	/* keep the desktop elevation, just drop the hover lift */
	.nvd-price-card--featured:hover,
	.nvd-price-card--featured:focus-within {
		transform: scale( 1.03 );
	}

	.nvd-price-card__badge-seal,
	.nvd-price-card__badge-bloom {
		animation: none;
	}

	/* park both comets — a static lit border */
	.nvd-price-card--featured::after {
		animation: none;
	}
}

@media ( min-width: 768px ) {
	.nvd-price-card {
		padding: 3rem;
	}
}

.nvd-price-card--light {
	background: #fff;
	border: var( --border-subtle );
	color: var( --clr-text-main );
}

.nvd-price-card--dark {
	background: var( --clr-primary );
	color: var( --clr-bg );
}

.nvd-price-card__kicker {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-bottom: 1.5rem;
	opacity: 0.7;
}

.nvd-price-card--dark .nvd-price-card__kicker {
	color: var( --clr-secondary );
	opacity: 1;
}

.nvd-price-card__title {
	font-size: 2.25rem;
	font-family: var( --font-body );
	font-weight: 700;
	margin-bottom: 1rem;
}

.nvd-price-card__desc {
	margin-bottom: 2rem;
	line-height: 1.6;
	opacity: 0.85;
}

.nvd-price-card__list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.nvd-price-card__list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.875rem;
	font-weight: 500;
}

.nvd-price-card__price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	margin-top: auto;
}

.nvd-price-card__price-amount {
	font-size: 3rem;
	font-family: var( --font-body );
	font-weight: 700;
	letter-spacing: -0.02em;
}

.nvd-price-card__price-unit {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0.6;
}

.nvd-pricing__note {
	margin: 2.5rem 0 0;
	max-width: 44rem;
	font-size: 0.9rem;
	line-height: 1.6;
	color: rgba( 26, 22, 19, 0.6 );
}

.nvd-pricing__note a {
	color: var( --clr-text-main );
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Desktop/tablet boundary: the 2-col grid is active (>=1024px) but each card is
   still narrow, so the stacked content makes the card very tall and the
   background animation (object-fit: cover) crops to a thin sliver, losing the
   effect. Compress the in-card type + padding here to keep the card closer to
   its natural ratio. Section head, subtitle and trust pills are untouched. */
@media ( min-width: 1024px ) and ( max-width: 1279px ) {
	.nvd-price-card {
		padding: 1.75rem;
	}

	.nvd-price-card__kicker {
		margin-bottom: 1rem;
	}

	.nvd-price-card__title {
		font-size: 1.75rem;
		margin-bottom: 0.75rem;
	}

	.nvd-price-card__desc {
		font-size: 0.85rem;
		line-height: 1.5;
		margin-bottom: 1.25rem;
	}

	.nvd-price-card__list {
		gap: 0.6rem;
		margin-bottom: 1rem;
	}

	.nvd-price-card__list li {
		font-size: 0.8rem;
	}

	.nvd-price-card__list li::before {
		width: 1.1rem;
		height: 1.1rem;
		font-size: 12px;
	}

	.nvd-price-card__price-amount {
		font-size: 2.25rem;
	}

	.nvd-price-card__cta {
		margin-top: 1rem;
	}
}

/* Phones: trim card padding and shrink the seal so it can't push past the
   viewport edge and cause a horizontal scroll. */
@media ( max-width: 480px ) {
	.nvd-price-card {
		padding: 1.75rem;
	}

	.nvd-price-card__badge {
		width: 120px;
		height: 120px;
		top: -22px;
		right: -18px;
	}

	.nvd-price-card__badge-text {
		font-size: 0.58rem;
	}
}

/* <=393px: shrink the in-card type so it isn't oversized on the narrowest
   phones. Kickers are already hidden (<=640px). */
@media ( max-width: 393px ) {
	.nvd-price-card {
		padding: 1.5rem;
	}

	.nvd-price-card__title {
		font-size: 1.6rem;
	}

	.nvd-price-card__desc {
		font-size: 0.85rem;
		line-height: 1.5;
	}

	.nvd-price-card__list {
		gap: 0.7rem;
	}

	.nvd-price-card__list li {
		font-size: 0.8rem;
	}

	.nvd-price-card__price-amount {
		font-size: 2.4rem;
	}
}

/* <=375px (iPhone mini / SE and down): one more step down on the card type. */
@media ( max-width: 375px ) {
	.nvd-price-card {
		padding: 1.25rem;
	}

	.nvd-price-card__title {
		font-size: 1.45rem;
	}

	.nvd-price-card__desc {
		font-size: 0.8rem;
	}

	.nvd-price-card__list {
		gap: 0.6rem;
	}

	.nvd-price-card__list li {
		font-size: 0.76rem;
	}

	.nvd-price-card__list li::before {
		width: 1rem;
		height: 1rem;
		font-size: 11px;
	}

	.nvd-price-card__price-amount {
		font-size: 2.1rem;
	}

	.nvd-price-card__price-unit {
		font-size: 0.7rem;
	}

	.nvd-price-card__cta {
		font-size: 0.85rem;
	}
}

/* Single-column view (<=1023.98px): the card is full-bleed, so let the seal
   overhang the top-right corner more for a sticker-on-the-corner look. Values
   step in as the wrap inset shrinks so the badge never crosses the viewport
   edge (which would cause a horizontal scroll). */
@media ( min-width: 768px ) and ( max-width: 1023.98px ) {
	.nvd-price-card__badge {
		right: -42px;
	}
}

@media ( min-width: 481px ) and ( max-width: 767px ) {
	.nvd-price-card__badge {
		right: -34px;
	}
}

/* <=600px: 4 trust pills wrap into an uneven second row — shrink type, padding
   and gap so they sit tidily. */
@media ( max-width: 600px ) {
	.nvd-pricing__trust {
		gap: 0.5rem;
	}

	.nvd-pricing__trust li {
		padding: 0.35rem 0.7rem;
		font-size: 0.68rem;
	}
}

/* <=640px: drop both card eyebrows ("El plan completo" / "Todo incluido al mes")
   — redundant with the title + description at this size — but keep their boxes
   so the space above each title stays clear (and the RECOMENDADO seal keeps its
   clearance on Pro). */
@media ( max-width: 640px ) {
	.nvd-price-card__kicker {
		visibility: hidden;
	}
}

/* Showcase — bento. 1 column on phones, 2 on tablet (lead + CTA span both), and from 1024px a
   12-column bento on a 10rem row unit: every tile sets its own size through --c (columns) and
   --r (rows) from the $showcase data, so tiles of different shapes interlock. Media tiles carry
   an HTML/CSS mock (template-parts/showcase-mock-*.php, styled in showcase-mocks.css) until a real
   image is set. Surfaces follow the system: media tiles --radius-media with a glass caption over
   the mock, text tiles solid white, CTA solid volcanic. */
.nvd-showcase__head {
	margin-bottom: 3rem;
}

.nvd-showcase__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 1.5rem;
	/* The bento sits on an illustration-tint "stage" (sky wash, gold glow top-right, lime
	   bottom-left) with the same ink outline the hand-drawn art uses. */
	padding: 0.75rem;
	background:
		radial-gradient( circle at 100% 0, var( --tint-gold ), transparent 55% ),
		radial-gradient( circle at 0 100%, var( --tint-lime ), transparent 55% ),
		var( --tint-sky );
	border: 2px solid var( --clr-primary );
	border-radius: var( --radius-media );
}

@media ( min-width: 768px ) {
	.nvd-showcase__grid {
		padding: 1.25rem;
	}
}

@media ( min-width: 768px ) {
	.nvd-showcase__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.nvd-showcase__tile--full {
		grid-column: span 2;
	}
}

@media ( min-width: 1024px ) {
	.nvd-showcase__grid {
		grid-template-columns: repeat( 12, minmax( 0, 1fr ) );
		grid-auto-rows: minmax( 10rem, auto );
		grid-auto-flow: dense;
	}

	.nvd-showcase__tile {
		grid-column: span var( --c, 4 );
		grid-row: span var( --r, 2 );
	}
}

.nvd-showcase__tile {
	position: relative;
	overflow: hidden;
	border-radius: var( --radius-card );
	border: 2px solid var( --clr-primary ); /* ink outline, like the illustrations */
	box-shadow: var( --shadow-float );
	transition: transform 0.5s cubic-bezier( 0.22, 1, 0.36, 1 ), box-shadow 0.5s ease;
}

@media ( hover: hover ) {
	.nvd-showcase__tile:hover {
		transform: translateY( -4px );
		box-shadow: var( --shadow-media );
	}

	.nvd-showcase__tile--media:hover .nvd-showcase__img {
		transform: scale( 1.04 );
	}
}

/* Media tiles */
.nvd-showcase__tile--media {
	border-radius: var( --radius-media );
	aspect-ratio: var( --ratio, 4 / 5 );
	background: var( --brand, var( --clr-primary ) );
	color: #fff;
	container-type: inline-size;
}


@media ( min-width: 1024px ) {
	.nvd-showcase__tile--media,
	.nvd-showcase__tile--media.nvd-showcase__tile--full {
		aspect-ratio: auto;
	}
}

.nvd-showcase__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transition: transform 0.7s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.nvd-showcase__img {
	object-fit: cover;
	object-position: var( --focus, 50% 50% );
}

.nvd-showcase__caption {
	position: absolute;
	z-index: 2;
	left: 1.5rem;
	right: 1.5rem;
	bottom: 1.5rem;
	padding: 1.1rem 1.4rem;
	border-radius: var( --radius-card );
	border: 1px solid var( --glass-dark-edge );
	background: var( --glass-dark );
	-webkit-backdrop-filter: var( --glass-blur );
	backdrop-filter: var( --glass-blur );
}

/* Light photography (ice backdrop): light glass with ink text — dark glass would read as mud. */
.nvd-showcase__tile--photo {
	background: transparent;
}

.nvd-showcase__tile--light {
	background: var( --clr-bg );
}

.nvd-showcase__tile--light .nvd-showcase__caption {
	background: var( --glass-light );
	border-color: var( --glass-light-edge );
}

/* Animated illustration tile. Sun rays turn while the tile is hovered and hold their angle when the
   pointer leaves (animation-play-state, not a reset); the steam wisps do the same. Touch screens have
   no hover: home.js adds .is-live while the tile is on screen instead. Reduced motion: nothing moves. */
.nvd-scene {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.nvd-scene__rays {
	animation: nvd-rays 60s linear infinite paused;
}

@keyframes nvd-rays {
	to {
		transform: rotate( 360deg );
	}
}

.nvd-scene__wisp {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

.nvd-scene__wisp {
	animation: nvd-steam 3.2s ease-in-out infinite paused;
}

.nvd-scene__wisp--b {
	animation-delay: -1.6s;
}

@keyframes nvd-steam {
	0% {
		opacity: 1;
		transform: translateY( 0 ) scaleY( 1 );
	}

	45% {
		opacity: 0;
		transform: translateY( -60px ) scaleY( 1.35 );
	}

	55% {
		opacity: 0;
		transform: translateY( 0 ) scaleY( 0.6 );
	}

	100% {
		opacity: 1;
		transform: translateY( 0 ) scaleY( 1 );
	}
}

@media ( hover: hover ) {
	.nvd-showcase__tile:hover .nvd-scene__rays,
	.nvd-showcase__tile:hover .nvd-scene__wisp {
		animation-play-state: running;
	}
}

.nvd-showcase__tile.is-live .nvd-scene__rays,
.nvd-showcase__tile.is-live .nvd-scene__wisp {
	animation-play-state: running;
}

.nvd-showcase__tile.is-live .nvd-scene__rays {
	animation-duration: 90s;
}

@media ( prefers-reduced-motion: reduce ) {
	.nvd-scene__rays,
	.nvd-scene__wisp {
		animation: none;
	}
}

/* The one line of copy in the section: over the illustration tile, top-right, in the sky. */
.nvd-showcase__quote {
	position: absolute;
	top: 1.5rem;
	right: 1.75rem;
	z-index: 2;
	max-width: 50%;
	margin: 0;
	font-family: var( --font-body );
	font-size: clamp( 1.25rem, 2.1vw, 1.875rem );
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-align: right;
	text-wrap: balance;
	color: var( --clr-primary );
}

.nvd-showcase__tile--light .nvd-showcase__caption-title {
	color: var( --clr-primary );
}

/* Short media tiles (2 rows): a slim caption so the mock above stays visible. */
.nvd-showcase__tile--compact .nvd-showcase__caption {
	right: auto;
	left: 1rem;
	bottom: 1rem;
	max-width: calc( 100% - 2rem );
	padding: 0.6rem 1rem;
}

.nvd-showcase__tile--compact .nvd-showcase__caption-title {
	font-size: 0.875rem;
}

.nvd-showcase__caption-title {
	margin: 0 0 0.2rem;
	font-family: var( --font-body );
	font-size: 1.125rem;
	font-weight: 700;
	color: #fff;
}

.nvd-showcase__tile--lead .nvd-showcase__caption-title {
	font-size: 1.375rem;
}

/* Case cards: typical problem -> proposal -> why it works. */
/* CTA tile */
.nvd-showcase__tile--cta {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	padding: 2rem;
	background: var( --clr-primary );
	color: #fff;
}

@media ( min-width: 768px ) {
	.nvd-showcase__tile--cta {
		padding: 2.5rem;
	}
}

/* Line-art backpack watermark in the CTA tile, bleeding off the bottom-right corner (same idea
   as the Precios line art). It sits behind the copy and button, and only shows when the tile is
   wide enough (container query) — narrow tiles, i.e. the bento collapsing, drop it. */
.nvd-showcase__tile--cta {
	container-type: inline-size;
}

.nvd-showcase__tile--cta > :not( .nvd-showcase__art ) {
	position: relative;
	z-index: 1;
}

.nvd-showcase__art {
	display: none;
	position: absolute;
	right: -2rem;
	bottom: -2.5rem;
	width: 19rem;
	height: auto;
	color: rgba( 255, 255, 255, 0.16 );
	transform: rotate( 8deg );
	pointer-events: none;
}

.nvd-showcase__art-badge {
	stroke: var( --clr-secondary );
	opacity: 0.8;
}

@container ( min-width: 24rem ) {
	.nvd-showcase__art {
		display: block;
	}
}

/* One-row CTA: title and button sit side by side; the backpack watermark would clash, so it goes. */
.nvd-showcase__tile--slim {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.5rem 2rem;
}

.nvd-showcase__tile--slim .nvd-showcase__cta-title {
	margin: 0;
	font-size: clamp( 1.25rem, 2vw, 1.75rem );
	line-height: 1.15;
}

.nvd-showcase__tile--slim .btn {
	display: inline-block;
	width: auto;
	flex-shrink: 0;
	white-space: nowrap;
}

.nvd-showcase__tile--slim .nvd-showcase__art {
	display: none;
}

@media ( max-width: 640px ) {
	.nvd-showcase__tile--slim {
		flex-direction: column;
		align-items: stretch;
	}

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

.nvd-showcase__cta-title {
	margin: 0 0 1rem;
	font-family: var( --font-body );
	font-size: clamp( 2rem, 3.2vw, 3.25rem );
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #fff;
}

@media ( prefers-reduced-motion: reduce ) {
	.nvd-showcase__tile,
	.nvd-showcase__img {
		transition: none;
	}
}

/* Nav/footer chrome lives in main.css (sitewide) — see header.php / footer.php */

/* Keep tablet hero content below the overlaid nav: from 768px the logo is
   5rem tall under 2.5rem of nav padding (bottom edge ~7.5rem), so the badge
   needs to start below that — 6rem let it slide under the logo. */
@media ( min-width: 768px ) and ( max-width: 819px ) {
	.nvd-hero {
		padding-top: 8.5rem;
	}
}