@font-face {
	font-family: 'Fredoka-Medium';
	src: url('../fonts/Fredoka-Regular.ttf') format('woff2');
}
@font-face {
	font-family: 'MerriweatherSans-regular';
	src: url('../fonts/MerriweatherSans-Regular.ttf') format('woff2');
}

/* ════════════════════════════════════════
   TOKENS
════════════════════════════════════════ */
:root {
	/* Marca */
	--ab-navy: #0a4ca3;
	--ab-blue: #7bd0ff;
	--ab-bright: #38bdf8;
	--ab-green: #85dc53;
	--ab-green-d: #6bbf3a;

	/* Fondos alternos */
	--bg-mid: #040e24;
	--bg-mid2: #071a40;
	--bg-abyss: #040f0c;
	--bg-abyss2: #092a1e;

	/* Superficies */
	--sf-1: #111b31;
	--sf-2: #151f36;
	--sf-3: #202a41;

	/* Texto */
	--tx: #d9e2ff;
	--tx-dim: rgba(217, 226, 255, 0.55);
	--tx-lo: rgba(217, 226, 255, 0.35);

	/* Glass */
	--glass: rgba(255, 255, 255, 0.055);
	--glass2: rgba(255, 255, 255, 0.1);
	--line: rgba(255, 255, 255, 0.08);

	/* Radios */
	--r-sm: 8px;
	--r-md: 12px;
	--r-card: 16px;
	--r-pill: 9999px;

	/* Motion */
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--t1: 120ms;
	--t2: 240ms;

	/* Tipografía */
	--font-d: 'Fredoka-Medium', sans-serif;
	--font-b: 'MerriweatherSans-Medium', sans-serif;
}

/* ════════════════════════════════════════
   RESET
════════════════════════════════════════ */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	scroll-behavior: smooth;
}
body {
	font-family: var(--font-b);
	background: var(--bg-mid);
	color: var(--tx);
	line-height: 1.6;
	overflow-x: hidden;
	font-size: 16px;
}
img {
	display: block;
	max-width: 100%;
}
a {
	color: inherit;
	text-decoration: none;
}
button {
	cursor: pointer;
	font-family: var(--font-b);
	border: none;
	background: none;
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ════════════════════════════════════════
   LOADER — blur sobre la web real
════════════════════════════════════════ */
#loader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(4, 14, 36, 0.6);
	backdrop-filter: blur(18px) saturate(1.3);
	-webkit-backdrop-filter: blur(18px) saturate(1.3);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	transition:
		opacity 0.4s var(--ease),
		visibility 0.4s;
}
#loader.hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.loader-logo {
	font-family: var(--font-d);
	font-size: 28px;
	font-weight: 600;
	color: var(--tx);
	opacity: 0;
	animation: fuA 0.5s var(--ease) 0.05s forwards;
}
.loader-logo b {
	color: var(--ab-bright);
	font-weight: 700;
}
.loader-track {
	width: 140px;
	height: 2px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: var(--r-pill);
	overflow: hidden;
	opacity: 0;
	animation: fuA 0.4s var(--ease) 0.15s forwards;
}
.loader-bar {
	height: 100%;
	background: linear-gradient(
		90deg,
		var(--ab-navy),
		var(--ab-bright),
		var(--ab-green)
	);
	border-radius: var(--r-pill);
	animation: loadBar 0.9s var(--ease) 0.2s forwards;
	width: 0%;
}
.loader-sub {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tx-dim);
	opacity: 0;
	animation: fuA 0.4s var(--ease) 0.25s forwards;
}
@keyframes loadBar {
	to {
		width: 100%;
	}
}
@keyframes fuA {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ════════════════════════════════════════
   FADE-UP HERO — escalonado
════════════════════════════════════════ */
@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.fu {
	opacity: 0;
	animation: fadeUp 0.8s var(--ease) forwards;
}
.fu-0 {
	animation-delay: 1.4s;
}
.fu-1 {
	animation-delay: 1.6s;
}
.fu-2 {
	animation-delay: 1.8s;
}
.fu-3 {
	animation-delay: 2s;
}
.fu-4 {
	animation-delay: 2.2s;
}

/* ════════════════════════════════════════
   NAVBAR — Dynamic Island
   Estado 1 (top):    ancha, transparente, sin pill visible
   Estado 2 (scroll): pill compacta, glass oscuro
════════════════════════════════════════ */
.navbar {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;

	/* Estado inicial: ancha y transparente como Dynamic Island abierta */
	width: 100%;
	padding: 18px 40px;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: 1px solid transparent;
	border-radius: 0;
	box-shadow: none;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;

	transition:
		top 0.35s var(--ease),
		width 0.35s var(--ease),
		padding 0.35s var(--ease),
		background 0.35s var(--ease),
		border-color 0.35s var(--ease),
		border-radius 0.35s var(--ease),
		box-shadow 0.35s var(--ease),
		backdrop-filter 0.35s var(--ease);
}

/* Estado scrolled: pill compacta, glass oscuro */
.navbar.scrolled {
	top: 12px;
	width: min(92%, 940px);
	padding: 9px 20px;
	background: rgba(6, 14, 32, 0.09);
	backdrop-filter: blur(20px) saturate(1.6);
	-webkit-backdrop-filter: blur(28px) saturate(1.7);
	border-color: rgba(255, 255, 255, 0.1);
	border-radius: var(--r-pill);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

/* En mobile, el estado inicial también tiene algo de fondo
   para que el logo sea legible sobre el video */
@media (max-width: 768px) {
	.navbar {
		padding: 14px 20px;
		background: rgba(4, 14, 36, 0.15);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
	}
	.navbar.scrolled {
		top: 10px;
		width: min(92%, 480px);
		padding: 8px 16px;
	}
}

/* Logo: referencia a archivo real */
.nav-brand {
	font-family: var(--font-d);
	font-size: 21px;
	font-weight: 700;
	color: var(--tx);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}
/* img.nav-logo { width: 32px; height: auto; } — pendiente assets/img/logo.png */
.nav-brand-placeholder {
	width: 32px;
	height: 32px;
	/* placeholder visual hasta tener logo PNG real */
	background:
		url('assets/img/logo.png') center/contain no-repeat,
		linear-gradient(135deg, var(--ab-navy), var(--ab-bright));
	border-radius: 6px;
	flex-shrink: 0;
}
.nav-brand span {
	color: var(--ab-bright);
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 28px;
	list-style: none;
}
.nav-links a {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--tx-dim);
	transition: color var(--t1) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
	.nav-links a:hover {
		color: var(--tx);
	}
}
.nav-links a.active {
	color: var(--ab-green);
}

.nav-cta {
	font-family: var(--font-b);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 8px 18px;
	border-radius: var(--r-pill);
	background: var(--ab-green-d);
	color: #061200;
	flex-shrink: 0;
	transition:
		filter var(--t1) var(--ease),
		transform var(--t1) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
	.nav-cta:hover {
		filter: brightness(1.1);
	}
}
.nav-cta:active {
	transform: scale(0.95);
}

/* Hamburger */
.nav-burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 4px;
	background: none;
}
.nav-burger span {
	display: block;
	height: 2px;
	background: var(--tx);
	border-radius: 2px;
	transition:
		transform var(--t2) var(--ease),
		opacity var(--t2) var(--ease),
		width var(--t2) var(--ease);
}
.nav-burger span:nth-child(1) {
	width: 22px;
}
.nav-burger span:nth-child(2) {
	width: 22px;
}
.nav-burger span:nth-child(3) {
	width: 14px;
}
.nav-burger.open span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
	width: 22px;
}
.nav-burger.open span:nth-child(2) {
	opacity: 0;
}
.nav-burger.open span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
	width: 22px;
}

/* ════════════════════════════════════════
   MOBILE MENU — fullscreen overlay
════════════════════════════════════════ */
.mobile-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 98;
	background: rgba(4, 13, 35, 0.97);
	backdrop-filter: blur(24px);
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.4s var(--ease),
		visibility 0.4s;
}
.mobile-overlay.open {
	opacity: 1;
	visibility: visible;
}

.mobile-header {
	padding: 16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.mobile-brand {
	font-family: var(--font-d);
	font-size: 20px;
	font-weight: 700;
	color: var(--tx);
}
.mobile-brand span {
	color: var(--ab-bright);
}
.mobile-close {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: var(--tx);
	font-size: 18px;
	transition: background var(--t1) var(--ease);
}
.mobile-close:hover {
	background: rgba(255, 255, 255, 0.12);
}

.mobile-nav {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 32px 24px;
}
.mobile-nav a {
	font-family: var(--font-d);
	font-size: clamp(32px, 8vw, 48px);
	font-weight: 600;
	color: var(--tx);
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.4s var(--ease),
		transform 0.4s var(--ease),
		color var(--t1) var(--ease);
}
.mobile-nav a:hover {
	color: var(--ab-green);
}
.mobile-overlay.open .mobile-nav a:nth-child(1) {
	opacity: 1;
	transform: none;
	transition-delay: 0.08s;
}
.mobile-overlay.open .mobile-nav a:nth-child(2) {
	opacity: 1;
	transform: none;
	transition-delay: 0.14s;
}
.mobile-overlay.open .mobile-nav a:nth-child(3) {
	opacity: 1;
	transform: none;
	transition-delay: 0.2s;
}
.mobile-overlay.open .mobile-nav a:nth-child(4) {
	opacity: 1;
	transform: none;
	transition-delay: 0.26s;
}
.mobile-overlay.open .mobile-nav a:nth-child(5) {
	opacity: 1;
	transform: none;
	transition-delay: 0.32s;
}

.mobile-foot {
	padding: 24px;
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 0.4s var(--ease) 0.36s,
		transform 0.4s var(--ease) 0.36s;
}
.mobile-overlay.open .mobile-foot {
	opacity: 1;
	transform: none;
}
.mobile-wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px;
	border-radius: var(--r-pill);
	background: var(--ab-green-d);
	color: #061200;
	font-family: var(--font-b);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.mobile-wa svg {
	width: 18px;
	height: 18px;
}

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
.hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--bg-mid);
	padding: 120px 6vw 64px;
}
@media (min-width: 1024px) {
	.hero {
		padding: 100px 8vw 80px;
	}
}

.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s var(--ease);
	filter: brightness(0.35) saturate(1.2);
}
.hero-video.loaded {
	opacity: 1;
}

/* Gradient fallback mientras carga el video */
.hero-grad {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			ellipse 70% 60% at 15% 50%,
			rgba(10, 76, 163, 0.5) 0%,
			transparent 60%
		),
		radial-gradient(
			ellipse 55% 65% at 85% 55%,
			rgba(107, 191, 58, 0.2) 0%,
			transparent 55%
		),
		var(--bg-mid);
	transition: opacity 1.5s ease;
}
.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		rgba(4, 14, 36, 0.75) 0%,
		rgba(4, 14, 36, 0.4) 50%,
		rgba(4, 14, 36, 0.1) 100%
	);
	pointer-events: none;
}
/* Fade bottom para transicion suave a siguiente seccion */
.hero-fade-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 180px;
	background: linear-gradient(to bottom, transparent, var(--bg-mid));
	pointer-events: none;
}

/* Glows ambientales */
.glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	pointer-events: none;
	animation: glowDrift 14s ease-in-out infinite;
}
.g1 {
	width: 500px;
	height: 500px;
	background: var(--ab-navy);
	opacity: 0.2;
	top: -80px;
	left: -120px;
	animation-delay: 0s;
}
.g2 {
	width: 380px;
	height: 380px;
	background: var(--ab-green-d);
	opacity: 0.14;
	bottom: -60px;
	right: -80px;
	animation-delay: -5s;
}
@keyframes glowDrift {
	0%,
	100% {
		transform: translate(0, 0);
	}
	40% {
		transform: translate(24px, -18px);
	}
	70% {
		transform: translate(-14px, 12px);
	}
}

/* Contenido hero — left-aligned */
.hero-content {
	position: relative;
	z-index: 10;
	max-width: 680px;
}

/* Tagline sin pill, sin punto */
.hero-tagline {
	font-family: var(--font-b);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tx-dim);
	margin-bottom: 24px;
}

/* Heading principal */
.hero-h1 {
	font-family: var(--font-d);
	font-size: clamp(42px, 7.5vw, 80px);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.01em;
	color: var(--tx);
	margin-bottom: 24px;
}
.hero-h1 .grad {
	background: linear-gradient(
		90deg,
		var(--ab-bright) 0%,
		var(--ab-green) 100%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Subtítulo */
.hero-sub {
	font-family: var(--font-b);
	font-size: clamp(15px, 2vw, 17px);
	font-weight: 300;
	line-height: 1.7;
	color: var(--tx-dim);
	max-width: 480px;
	margin-bottom: 36px;
}
.hero-sub strong {
	color: var(--tx);
	font-weight: 600;
}

/* Botones */
.hero-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-bottom: 52px;
}
.btn-p {
	font-family: var(--font-b);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 14px 30px;
	border-radius: var(--r-pill);
	background: var(--ab-green-d);
	color: #061200;
	transition:
		filter var(--t1) var(--ease),
		transform var(--t1) var(--ease),
		box-shadow var(--t1) var(--ease);
	box-shadow: 0 4px 24px rgba(107, 191, 58, 0.28);
}
@media (hover: hover) and (pointer: fine) {
	.btn-p:hover {
		filter: brightness(1.1);
		box-shadow: 0 6px 32px rgba(107, 191, 58, 0.42);
	}
}
.btn-p:active {
	transform: scale(0.96);
}

.btn-o {
	font-family: var(--font-b);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 13px 28px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: var(--tx);
	transition:
		background var(--t2) var(--ease),
		transform var(--t1) var(--ease);
	backdrop-filter: blur(10px);
}
@media (hover: hover) and (pointer: fine) {
	.btn-o:hover {
		background: rgba(255, 255, 255, 0.11);
	}
}
.btn-o:active {
	transform: scale(0.96);
}

/* Stats row */
.hero-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 28px 48px;
	padding-top: 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.stat-val {
	font-family: var(--font-d);
	font-size: clamp(30px, 4.5vw, 48px);
	font-weight: 700;
	line-height: 1;
	color: var(--tx);
	letter-spacing: -0.01em;
}
.stat-val b {
	color: var(--ab-green);
	font-weight: 700;
}
.stat-lbl {
	font-family: var(--font-b);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tx-lo);
	margin-top: 5px;
}

/* Scroll indicator — linea vertical sutil */
.scroll-ind {
	position: absolute;
	bottom: 40px;
	right: 6vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	opacity: 0;
	animation: fuA 0.6s var(--ease) 2.6s forwards;
}
.scroll-line {
	width: 1px;
	height: 48px;
	background: rgba(255, 255, 255, 0.12);
	position: relative;
	overflow: hidden;
}
.scroll-line::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 40%;
	background: var(--ab-bright);
	animation: scrollSlide 2.2s ease-in-out infinite;
}
@keyframes scrollSlide {
	0% {
		transform: translateY(-100%);
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	85% {
		opacity: 1;
	}
	100% {
		transform: translateY(280%);
		opacity: 0;
	}
}
.scroll-label {
	font-family: var(--font-b);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tx-lo);
	writing-mode: vertical-rl;
}

/* ════════════════════════════════════════
   SECCIONES COMUNES
════════════════════════════════════════ */
.section {
	padding: 88px 32px;
}
.section-inner {
	max-width: 1120px;
	margin: 0 auto;
}

.s-label {
	font-family: var(--font-b);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ab-green);
	margin-bottom: 10px;
}
.s-title {
	font-family: var(--font-d);
	font-size: clamp(26px, 4vw, 40px);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tx);
	margin-bottom: 12px;
	line-height: 1.12;
}
.s-desc {
	font-family: var(--font-b);
	font-size: 15px;
	font-weight: 300;
	color: var(--tx-dim);
	max-width: 500px;
	line-height: 1.7;
}

/* Glass card */
.gc {
	background: var(--glass);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--r-card);
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.22);
	transition:
		transform var(--t2) var(--ease),
		box-shadow var(--t2) var(--ease),
		border-color var(--t2) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
	.gc:hover {
		transform: translateY(-3px);
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
		border-color: rgba(255, 255, 255, 0.13);
	}
}

/* Reveal scroll */
.rv {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.6s var(--ease),
		transform 0.6s var(--ease);
}
.rv.in {
	opacity: 1;
	transform: none;
}

/* ════════════════════════════════════════
   BENEFICIOS
════════════════════════════════════════ */
#beneficios {
	background: var(--bg-mid2);
}
.ben-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
	margin-top: 44px;
}
.ben-card {
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.ben-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.ben-icon svg {
	width: 20px;
	height: 20px;
}
.ben-title {
	font-family: var(--font-d);
	font-size: 17px;
	font-weight: 600;
	color: var(--tx);
}
.ben-desc {
	font-family: var(--font-b);
	font-size: 13px;
	font-weight: 300;
	color: var(--tx-dim);
	line-height: 1.65;
}

/* ════════════════════════════════════════
   PLANES
════════════════════════════════════════ */
#planes {
	background: var(--tx) !important;
	position: relative;
	overflow: hidden;
	color: var(--bg-mid) !important;
}

#planes > * {
	color: var(--bg-mid2) !important;
}

/* Patrón de gotas — textura de fondo tileable (SVG data-URI, ~1KB)
   Gotas en azul-cielo a baja opacidad sobre el fondo oscuro.
   Se repite en mosaico y flota con un drift muy lento. */
#planes::before {
	content: '';
	position: absolute;
	inset: -60px 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='140' viewBox='0 0 120 140'%3E%3Cg fill='none' stroke='%235ba2d6' stroke-width='7'%3E%3Cpath d='M30 22 C30 22 10 42 10 55 C10 64 19 71 30 71 C41 71 50 64 50 55 C50 42 30 22 30 22 Z'/%3E%3Cpath d='M90 90 C90 90 70 110 70 123 C70 132 79 139 90 139 C101 139 110 132 110 123 C110 110 90 90 90 90 Z'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 120px 140px;
	opacity: 0.1;
	pointer-events: none;
	z-index: 0;
	animation: dropDrift 45s linear infinite;
}
/* El contenido va sobre el patrón */
#planes .section-inner {
	position: relative;
	z-index: 1;
}
@keyframes dropDrift {
	from {
		transform: translateY(-140px);
	}
	to {
		transform: translateY(0);
	}
}
@media (prefers-reduced-motion: reduce) {
	#planes::before {
		animation: none;
	}
}
.plans-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
	gap: 14px;
	margin-top: 44px;
}
.plan-card {
	padding: 22px 18px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
}
.plan-tier {
	font-family: var(--font-b);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ab-blue);
	margin-bottom: 2px;
}
.plan-name {
	font-family: var(--font-d);
	font-size: 18px;
	font-weight: 600;
	color: var(--tx);
}
.plan-price {
	font-family: var(--font-d);
	font-size: 28px;
	font-weight: 700;
	color: var(--ab-green);
	line-height: 1;
	margin: 10px 0 4px;
}
.plan-price sup {
	font-size: 14px;
}
.plan-price sub {
	font-family: var(--font-b);
	font-size: 11px;
	font-weight: 300;
	color: var(--tx-dim);
}
.plan-feats {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.plan-feats li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-b);
	font-size: 12px;
	font-weight: 300;
	color: var(--tx-dim);
}
.plan-feats li svg {
	width: 12px;
	height: 12px;
	color: var(--ab-green);
	flex-shrink: 0;
}
.plan-card.pop {
	border-color: rgba(107, 191, 58, 0.2);
	box-shadow:
		0 0 0 1px rgba(107, 191, 58, 0.1),
		0 4px 24px rgba(0, 0, 0, 0.28);
	position: relative;
}
.pop-badge {
	position: absolute;
	top: -9px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--ab-green-d);
	color: #061200;
	font-family: var(--font-b);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: var(--r-pill);
	white-space: nowrap;
}
.plan-btn {
	width: 100%;
	padding: 10px 0;
	border-radius: var(--r-pill);
	font-family: var(--font-b);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	background: var(--ab-green-d);
	color: #061200;
	transition:
		filter var(--t1) var(--ease),
		transform var(--t1) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
	.plan-btn:hover {
		filter: brightness(1.1);
	}
}
.plan-btn:active {
	transform: scale(0.97);
}

/* ════════════════════════════════════════
   DISPENSADORES
════════════════════════════════════════ */
#dispensadores {
	background: var(--bg-mid);
}
.disp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 22px;
	margin-top: 44px;
}
.disp-card {
	overflow: hidden;
}
.disp-img {
	height: 300px;
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--sf-2), var(--sf-3));
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Reemplazar con <img src="assets/img/dispensador-[modelo]-[color].jpg"> */
.disp-img svg {
	width: 52px;
	height: 52px;
	opacity: 0.22;
}
.disp-img-note {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-b);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.25);
	background: rgba(0, 0, 0, 0.3);
	padding: 3px 10px;
	border-radius: var(--r-pill);
	white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
	.disp-card:hover .disp-img svg {
		opacity: 0.32;
	}
}
.disp-body {
	padding: 22px;
}
.disp-tier {
	font-family: var(--font-b);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ab-blue);
	margin-bottom: 4px;
}
.disp-name {
	font-family: var(--font-d);
	font-size: 18px;
	font-weight: 600;
	color: var(--tx);
	margin-bottom: 2px;
}

/* Selector color */
.color-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}
.color-lbl {
	font-family: var(--font-b);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tx-dim);
}
.color-opts {
	display: flex;
	gap: 7px;
}
.cdot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	cursor: pointer;
	border: 2px solid transparent;
	outline: 2px solid transparent;
	transition:
		transform var(--t1) var(--ease),
		outline-color var(--t1) var(--ease);
}
.cdot.on {
	outline-color: rgba(255, 255, 255, 0.55);
}
.cdot:hover {
	transform: scale(1.18);
}
.color-name {
	font-family: var(--font-b);
	font-size: 10px;
	color: var(--tx-dim);
}

.disp-specs {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 18px;
}
.spec-r {
	display: flex;
	justify-content: space-between;
	font-family: var(--font-b);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.spec-k {
	color: var(--tx-dim);
}
.spec-v {
	color: var(--ab-blue);
}

.disp-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 10px;
	border-radius: var(--r-pill);
	background: var(--glass);
	border: 1px solid rgba(255, 255, 255, 0.1);
	font-family: var(--font-b);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--tx);
	transition:
		background var(--t2) var(--ease),
		transform var(--t1) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
	.disp-btn:hover {
		background: var(--glass2);
	}
}
.disp-btn:active {
	transform: scale(0.97);
}
.disp-btn svg {
	width: 14px;
	height: 14px;
}

/* ════════════════════════════════════════
   COMO FUNCIONA
════════════════════════════════════════ */
#como-funciona {
	background: var(--bg-abyss2);
}
.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 32px;
	margin-top: 52px;
}
.step {
	text-align: center;
}
.step-n {
	font-family: var(--font-d);
	font-size: 64px;
	font-weight: 700;
	line-height: 1;
	color: var(--ab-bright);
	opacity: 0.85;
	letter-spacing: -0.03em;
	margin-bottom: 14px;
}
.step-t {
	font-family: var(--font-d);
	font-size: 16px;
	font-weight: 600;
	color: var(--tx);
	margin-bottom: 8px;
}
.step-d {
	font-family: var(--font-b);
	font-size: 13px;
	font-weight: 300;
	color: var(--tx-dim);
	line-height: 1.65;
}

/* ════════════════════════════════════════
   FAQ
════════════════════════════════════════ */
#faq {
	background: var(--bg-mid2);
}
.faq-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 40px;
}
.faq-item {
	border-radius: var(--r-md);
	overflow: hidden;
}
.faq-q {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 17px 20px;
	background: rgba(255, 255, 255, 0.04);
	font-family: var(--font-d);
	font-size: 15px;
	font-weight: 500;
	color: var(--tx);
	text-align: left;
	gap: 12px;
	cursor: pointer;
	transition: background var(--t1) var(--ease);
}
.faq-q:hover {
	background: rgba(255, 255, 255, 0.07);
}
.faq-ico {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--ab-green);
	transition: transform var(--t2) var(--ease);
}
.faq-item.open .faq-ico {
	transform: rotate(45deg);
}
.faq-a {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s var(--ease);
}
.faq-a-in {
	padding: 0 20px 16px;
	font-family: var(--font-b);
	font-size: 13px;
	font-weight: 300;
	color: var(--tx-dim);
	line-height: 1.7;
}
.faq-item.open .faq-a {
	max-height: 200px;
}

/* ════════════════════════════════════════
   CONTACTO
════════════════════════════════════════ */
#contacto {
	background: var(--bg-mid);
}
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	margin-top: 40px;
	align-items: start;
}
@media (max-width: 720px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}
}
.contact-l {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.contact-l p {
	font-family: var(--font-b);
	font-size: 14px;
	font-weight: 300;
	color: var(--tx-dim);
	line-height: 1.75;
}
.contact-det {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-b);
	font-size: 13px;
	color: var(--tx-dim);
}
.contact-det svg {
	width: 15px;
	height: 15px;
	color: var(--ab-green);
	flex-shrink: 0;
}
.wa-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #25d366;
	color: white;
	font-family: var(--font-b);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 13px 26px;
	border-radius: var(--r-pill);
	transition:
		filter var(--t1) var(--ease),
		box-shadow var(--t1) var(--ease),
		transform var(--t1) var(--ease);
	box-shadow: 0 4px 20px rgba(37, 211, 102, 0.25);
	width: fit-content;
}
@media (hover: hover) and (pointer: fine) {
	.wa-btn:hover {
		filter: brightness(1.08);
		box-shadow: 0 6px 28px rgba(37, 211, 102, 0.38);
	}
}
.wa-btn:active {
	transform: scale(0.96);
}
.wa-btn svg {
	width: 18px;
	height: 18px;
}
.contact-form {
	padding: 26px;
}
.f-label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--font-b);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--tx-dim);
}
.f-input {
	width: 100%;
	background: rgba(4, 13, 35, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--r-sm);
	padding: 10px 14px;
	font-family: var(--font-b);
	font-size: 14px;
	font-weight: 300;
	color: var(--tx);
	outline: none;
	margin-bottom: 14px;
	transition:
		border-color var(--t2) var(--ease),
		box-shadow var(--t2) var(--ease);
}
.f-input:focus {
	border-color: var(--ab-bright);
	box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.14);
}
.f-input::placeholder {
	color: var(--tx-dim);
	opacity: 0.55;
}
textarea.f-input {
	resize: vertical;
	min-height: 88px;
}
.f-submit {
	width: 100%;
	padding: 12px;
	border-radius: var(--r-pill);
	background: var(--ab-navy);
	color: white;
	font-family: var(--font-b);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	margin-top: 4px;
	transition:
		filter var(--t1) var(--ease),
		transform var(--t1) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
	.f-submit:hover {
		filter: brightness(1.1);
	}
}
.f-submit:active {
	transform: scale(0.98);
}

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
footer {
	background: var(--bg-mid);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding: 28px 32px;
}
.ft-inner {
	max-width: 1120px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}
.ft-brand {
	font-family: var(--font-d);
	font-size: 17px;
	font-weight: 700;
	color: var(--tx);
}
.ft-brand span {
	color: var(--ab-bright);
}
.ft-links {
	display: flex;
	gap: 22px;
}
.ft-links a {
	font-family: var(--font-b);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--tx-dim);
	transition: color var(--t1) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
	.ft-links a:hover {
		color: var(--ab-green);
	}
}
.ft-copy {
	font-family: var(--font-b);
	font-size: 10px;
	color: var(--tx-dim);
	opacity: 0.5;
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 768px) {
	.nav-links,
	.nav-cta {
		display: none;
	}
	.nav-burger {
		display: flex;
	}
	.mobile-overlay {
		display: flex;
	}
	.scroll-ind {
		display: none;
	}
	.section {
		padding: 64px 20px;
	}
	.hero {
		padding: 100px 24px 60px;
	}
	.hero-stats {
		gap: 20px 32px;
	}
}

/* ════════════════════════════════════════
   BIDON STICKY SCENE
════════════════════════════════════════ */

.bidon-scene {
	position: relative;
	height: 300vh;
}

.bidon-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 84px 16px 28px;
}

/* Fondo */
.bidon-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.bidon-bg img {
	position: absolute;
	/* inset: -10%; */
	width: 120%;
	height: 120%;
	object-fit: cover;
	object-position: center;
}
.bidon-bg-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(4, 14, 36, 0.45) 0%,
		rgba(4, 14, 36, 0.25) 40%,
		rgba(4, 14, 36, 0.7) 85%,
		rgba(4, 14, 36, 1) 100%
	);
}

/* Header */
.bidon-header {
	position: relative;
	z-index: 10;
	text-align: center;
	padding: 0 24px;
	margin-bottom: clamp(12px, 2vh, 24px);
}
.bidon-header .s-title {
	font-size: clamp(20px, 3.6vh, 48px);
}
.bidon-header .s-desc {
	font-size: clamp(12px, 1.6vh, 16px);
}

/* Bidones */
.bidon-bottles {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 16px;
	margin-bottom: clamp(14px, 2.4vh, 32px);
	will-change: transform, opacity;
	transform-origin: bottom center;
}
.bidon-img {
	height: clamp(110px, 17vh, 200px);
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 12px 28px rgba(56, 189, 248, 0.22));
	transform: scale(0.88);
	transform-origin: bottom center;
}
.bidon-img.bidon-center {
	height: clamp(140px, 22vh, 250px);
	transform: scale(1);
	filter: drop-shadow(0 14px 11px rgb(0, 0, 0, 0.6));
}

/* Glass Cards */
.bidon-cards {
	position: relative;
	z-index: 10;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	width: min(96%, 1100px);
	padding: 0 16px;
}
.glass-ben-card {
	background: rgba(255, 255, 255, 0.07);
	backdrop-filter: blur(20px) saturate(1.5);
	-webkit-backdrop-filter: blur(20px) saturate(1.5);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 20px;
	padding: clamp(12px, 1.8vh, 22px) 16px;
	display: flex;
	flex-direction: column;
	gap: clamp(6px, 1vh, 12px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		inset 0 -1px 0 rgba(0, 0, 0, 0.12),
		0 4px 24px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transform: translateY(28px);
	will-change: opacity, transform;
	transition:
		border-color 200ms ease,
		box-shadow 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
	.glass-ben-card:hover {
		border-color: rgba(255, 255, 255, 0.22);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.28),
			inset 0 -1px 0 rgba(0, 0, 0, 0.12),
			0 8px 32px rgba(0, 0, 0, 0.38);
	}
}
.gbc-icon {
	width: clamp(32px, 4.4vh, 42px);
	height: clamp(32px, 4.4vh, 42px);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.gbc-icon svg {
	width: 20px;
	height: 20px;
}
.gbc-title {
	font-family: var(--font-d);
	font-size: clamp(12px, 1.7vh, 15px);
	font-weight: 600;
	color: #ffffff;
}
.gbc-desc {
	font-family: var(--font-b);
	font-size: clamp(10px, 1.4vh, 12px);
	font-weight: 300;
	color: rgba(217, 226, 255, 0.7);
	line-height: 1.5;
}

/* Responsive tablet */
@media (max-width: 900px) {
	.bidon-cards {
		grid-template-columns: repeat(2, 1fr);
	}
	.bidon-img {
		height: 180px;
	}
	.bidon-img.bidon-center {
		height: 230px;
	}
}

/* Mobile — diseño condensado */
@media (max-width: 600px) {
	/* Escena más corta: 250vh en vez de 300vh */
	.bidon-scene {
		height: 250vh;
	}

	.bidon-sticky {
		justify-content: flex-start;
		padding: 72px 12px 20px;
	}

	/* Header compacto */
	.bidon-header {
		margin-bottom: clamp(8px, 1.6vh, 16px);
		padding: 0 16px;
	}
	.bidon-header .s-title {
		font-size: clamp(18px, 3.2vh, 26px);
	}
	.bidon-header .s-desc {
		font-size: clamp(11px, 1.5vh, 13px);
	}

	/* Solo el bidón central visible en mobile */
	.bidon-bottles {
		gap: 0;
		margin-bottom: clamp(10px, 2vh, 20px);
	}
	.bidon-img {
		display: none; /* ocultar laterales */
		height: clamp(90px, 14vh, 140px);
	}
	.bidon-img.bidon-center {
		display: block;
		height: clamp(115px, 18vh, 180px);
	}

	/* Cards en grid 2x2 compacto */
	.bidon-cards {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		padding: 0 12px;
		width: 100%;
	}
	.glass-ben-card {
		padding: clamp(10px, 1.6vh, 14px) 12px;
		border-radius: 14px;
		gap: 6px;
	}
	.gbc-icon {
		width: clamp(26px, 3.6vh, 34px);
		height: clamp(26px, 3.6vh, 34px);
		border-radius: 8px;
	}
	.gbc-icon svg {
		width: 16px;
		height: 16px;
	}
	.gbc-title {
		font-size: clamp(11px, 1.5vh, 12px);
	}
	.gbc-desc {
		font-size: clamp(10px, 1.3vh, 11px);
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* ════════════════════════════════════════
   PROMO BANNER (estilo Waterplus, administrable)
════════════════════════════════════════ */
.promo-banner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 380px;
	border-radius: 24px;
	overflow: hidden;
	border: 2px solid var(--ab-green-d);
	background: linear-gradient(
		120deg,
		var(--ab-navy) 0%,
		#0a2a6e 55%,
		var(--bg-mid2) 100%
	);
	margin-bottom: 20px;
}
.promo-content {
	padding: 56px 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
}
.promo-titular {
	font-family: var(--font-d);
	font-size: clamp(30px, 4.5vw, 52px);
	font-weight: 700;
	line-height: 1.08;
	color: #ffffff;
	letter-spacing: -0.01em;
}
.promo-titular em {
	font-style: normal;
	color: var(--ab-green);
}
.promo-sub {
	font-family: var(--font-b);
	font-size: 17px;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.75);
}
.promo-btn {
	margin-top: 10px;
	width: fit-content;
}
.promo-img {
	position: relative;
	overflow: hidden;
}
.promo-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 768px) {
	.promo-banner {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.promo-content {
		padding: 36px 24px;
	}
	.promo-img {
		height: 220px;
		order: -1;
	}
}

/* ════════════════════════════════════════
   MÁQUINAS: precio por variante
════════════════════════════════════════ */
.disp-desc {
	font-family: var(--font-b);
	font-size: 13px;
	font-weight: 300;
	color: var(--tx-dim);
	line-height: 1.6;
	margin-bottom: 14px;
}
.mq-precio-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.mq-precio {
	font-family: var(--font-d);
	font-size: 30px;
	font-weight: 700;
	color: var(--ab-green);
	line-height: 1;
}
.mq-precio sup {
	font-size: 15px;
}
.mq-cuotas {
	font-family: var(--font-b);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ab-blue);
}

/* ════════════════════════════════════════
   COMPRA MÁQUINA
════════════════════════════════════════ */
.compra-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 33px;
	align-items: center;
}
.compra-feats {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0;
}
.compra-feats li {
	font-family: var(--font-b);
	font-size: 15px;
	font-weight: 300;
	color: var(--tx-dim);
	padding-left: 24px;
	position: relative;
}
.compra-feats li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ab-green-d);
}
.compra-feats li strong {
	color: var(--tx);
	font-weight: 600;
}
.compra-visual img {
	width: 100%;
	border-radius: 20px;
}
@media (max-width: 768px) {
	.compra-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* ════════════════════════════════════════
   EMPRESAS: DEMO GRATIS
════════════════════════════════════════ */
.s-title-xl {
	font-size: clamp(30px, 5vw, 52px);
}
.empresas-nota {
	font-family: var(--font-b);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tx-lo);
	margin-bottom: 28px;
}
.btn-xl {
	font-size: 15px;
	padding: 18px 44px;
}

/* ════════════════════════════════════════
   TRAZABILIDAD
════════════════════════════════════════ */
.traza-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 48px;
	align-items: center;
}
@media (max-width: 768px) {
	.traza-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

#planes .s-label {
	color: #4a9a25;
}
#planes .s-title {
	color: var(--ab-navy);
}
#planes .s-desc {
	color: #40506b;
}

#planes .plan-card {
	background: #ffffff;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: 1px solid rgba(10, 76, 163, 0.12);
	box-shadow: 0 4px 18px rgba(10, 76, 163, 0.1);
}
@media (hover: hover) and (pointer: fine) {
	#planes .plan-card:hover {
		box-shadow: 0 10px 28px rgba(10, 76, 163, 0.16);
		border-color: rgba(10, 76, 163, 0.22);
	}
}
#planes .plan-tier {
	color: var(--ab-navy);
}
#planes .plan-name {
	color: #12244a;
}
#planes .plan-price {
	color: #4a9a25;
}
#planes .plan-price sub {
	color: #7a879c;
}
#planes .plan-feats li {
	color: #40506b;
}
#planes .plan-feats li svg {
	color: #4a9a25;
}
#planes .plan-card.pop {
	border-color: rgba(107, 191, 58, 0.45);
	box-shadow:
		0 0 0 1px rgba(107, 191, 58, 0.25),
		0 6px 24px rgba(10, 76, 163, 0.12);
}
.custom-shape-divider-top-1784132816 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	transform: rotate(180deg);
}

.custom-shape-divider-top-1784132816 svg {
	position: relative;
	display: block;
	width: calc(100% + 1.3px);
	height: 53px;
}

.custom-shape-divider-top-1784132816 .shape-fill {
	fill: #071a40;
}
/* ════════════════════════════════════════
   HERO GRID — contenido + foto al lado
════════════════════════════════════════ */
.hero-grid {
	position: relative;
	z-index: 10;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	align-items: center;
	gap: 32px;
	width: 100%;
	max-width: 1180px;
}

.hero-photo {
	display: flex;
	align-items: center;
	justify-content: center;
}
.hero-photo img {
	width: 100%;
	max-width: 473px;
	height: auto;
	filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.35));
}

/* Mobile: se oculta la foto, el contenido ocupa todo el ancho */
@media (max-width: 768px) {
	.hero-grid {
		grid-template-columns: 1fr;
	}
	.hero-photo {
		display: none;
	}
}