/* Griffex Brand Fonts */
@font-face {
	font-family: 'NeueHaasUnica';
	src: url('fonts/griffex/NeueHaasUnica-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'NeueHaasUnica';
	src: url('fonts/griffex/NeueHaasUnica-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Denton';
	src: url('fonts/griffex/DentonTextCondTest-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Denton';
	src: url('fonts/griffex/DentonTextCondTest-Bold.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DentonVariable';
	src: url('fonts/griffex/DentonVariableTest-VF.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* Func-desc cards — uniform height */
.func-desc {
	height: 100%;
}

.func-desc .card-body {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.func-desc .card-title {
	min-height: 3em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.func-desc .card-body > p {
	flex-grow: 1;
}

/* Font overrides — ensure Griffex fonts apply over theme defaults */
body {
	font-family: 'NeueHaasUnica', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.alternative-font-4,
.custom-font-secondary {
	font-family: 'Denton', serif !important;
}

/* ─── Hero Slide Images ──────────────────────────────────────────────────── */

/* Navy placeholder shown instantly while the image loads */
.owl-carousel-wrapper .background-image-wrapper {
	background-color: var(--secondary);
}

/* WebP with PNG fallback via image-set() */
.slide-1-bg {
	background-image: url(../img/slides/slide-1.png);
	background-image: image-set(
		url("../img/slides/slide-1.webp") type("image/webp"),
		url("../img/slides/slide-1.png") type("image/png")
	);
}

.slide-2-bg {
	background-image: url(../img/slides/slide-2.png);
	background-image: image-set(
		url("../img/slides/slide-2.webp") type("image/webp"),
		url("../img/slides/slide-2.png") type("image/png")
	);
}

.corridor-bg {
	background-image: url(../img/backgrounds/griffex-corridor.png);
	background-image: image-set(
		url("../img/backgrounds/griffex-corridor.webp") type("image/webp"),
		url("../img/backgrounds/griffex-corridor.png") type("image/png")
	);
}

/* ─── Mobile / Small-screen Fixes ───────────────────────────────────────── */

/* Fix 1: Hero slide — shift background-position left so the Griffex isotype
   (located on the left half of slide-1.png / slide-2.png) is visible on mobile. */
@media (max-width: 767px) {
	.owl-carousel-wrapper .background-image-wrapper {
		background-position: 25% center !important;
	}
}

/* Fix 2: Parallax quote section — reset the transform-based centering that
   overflows narrow viewports, and scale down the large quote font. */
@media (max-width: 767px) {
	/* Porto creates a .parallax-background div and sets background-image + cover
	   via JS but never sets background-position, so it defaults to 0% 0%.
	   Override it to left center so the full "Griffex" word is visible on mobile. */
	.section.parallax .parallax-background {
		background-position: 70% center !important;
	}

	.scrollable-parallax-wrapper {
		overflow: visible;
		width: 100%;
	}

	.custom-container-position-1 {
		transform: none !important;
		left: auto !important;
		position: static !important;
	}

	.custom-container-style-1 {
		min-width: unset !important;
		width: 100%;
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	/* text-9 (Porto utility) is too large on mobile for running quote text */
	.section.parallax .custom-font-secondary {
		font-size: 1.5rem !important;
		line-height: 1.6 !important;
	}
}

/* Fix 3: Func-desc carousel — collapse fixed height so no white space appears
   below the carousel dots on small screens; reduce the negative overlap margin. */
@media (max-width: 767px) {
	#func-desc-wrapper {
		height: auto !important;
		margin-top: -40px !important;
	}
}

/* ─── Pricing Plans ──────────────────────────────────────────────────────── */

/* Equal-height cards — stretch all cards in a row to the same height */
#plans-container > [class*="col"] {
	display: flex;
}

.pricing-table .plan {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* plan-features grows to fill remaining space, pinning the footer CTA to bottom */
.pricing-table .plan .plan-features {
	flex: 1;
}

/* "USD" currency badge — small caps in brand blue, before the price number */
.pricing-table .plan .plan-price .price .price-unit {
	font-size: 0.5rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.9;
	color: var(--primary);
	margin-right: 3px;
}

/* Section separator — calm blue-grey (slate-300), low visual weight */
.plan-section-sep {
	border: none;
	border-top: 1px solid #CBD5E1;
	margin: 0.55rem 0.5rem;
}

/* "Soporte" / "Notas" labels — uppercase, tracked, muted */
.plan-section-label {
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #94A3B8;
	padding: 0.3rem 0.5rem 0.1rem;
	text-align: left;
}

/* Support items — same rhythm as features, left-aligned for longer text */
.plan-support-list {
	padding: 0 0.5rem;
	margin-bottom: 0;
}

.plan-support-list li {
	list-style: none;
	font-size: 0.83em;
	line-height: 2.3;
	border-bottom: 1px solid #ededed;
	text-align: left;
	color: #334155;
}

.plan-support-list li:last-child {
	border-bottom: none;
}

/* Notes items — secondary/footnote treatment: smaller, italic, more muted */
.plan-notes-list {
	padding: 0 0.5rem;
	margin-bottom: 0;
}

.plan-notes-list li {
	list-style: none;
	font-size: 0.75em;
	line-height: 2.1;
	border-bottom: 1px solid #f1f5f9;
	text-align: left;
	color: #64748B;
	font-style: italic;
}

.plan-notes-list li:last-child {
	border-bottom: none;
}

/* Section-level footnotes — static disclaimers below all plan cards */
.plans-footnotes {
	border-top: 1px solid #CBD5E1;
	padding-top: 1.25rem;
	margin-top: 2rem;
	text-align: center;
}

.plans-footnotes p {
	font-size: 0.8rem;
	color: #64748B;
	font-style: italic;
	line-height: 1.6;
	margin-bottom: 0.2rem;
}

.plans-footnotes p:last-child {
	margin-bottom: 0;
}