/*
 * Página Afiliación — Figma PAGINA-TECSA-DESIGN (App desktop node 2181:31251).
 * Base de diseño: contenedor 1280px. Breakpoints del tema: tablet ≤1024, móvil ≤600.
 * Reutiliza tokens/reset/navbar/footer de landing.css. Prefijo BEM: .lp-afi-*.
 */

@import url('landing.css');

:root {
	--afi-cyan:       #3df5ff; /* acento brillante (títulos, precio, botón) */
	--afi-cyan-line:  rgba(24, 200, 245, 0.3);  /* bordes/hairlines */
	--afi-card-1:     #0d2448;
	--afi-card-2:     #081b3a;
	--afi-card-3:     #050f22;
	--afi-maxw:       1280px;
}

.lp-afi { font-family: var(--st-font); }

/* ====================================================================
   HERO
   ==================================================================== */
.lp-afi-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 374px;
	padding: 64px var(--st-pad-x);
	background: #050e1f url('../img/afi-hero-bg.webp') center center / cover no-repeat;
	overflow: hidden;
	text-align: center;
}
/* Overlay radial (Figma node 2181:31279): oscuro al centro, se abre a los lados. */
.lp-afi-hero__overlay {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 100% 190% at 50% 50%,
		rgba(5, 14, 31, 0.82) 51%,
		rgba(8, 27, 58, 0.65) 79%,
		rgba(8, 27, 58, 0.25) 100%);
	pointer-events: none;
}
.lp-afi-hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--afi-maxw);
	width: 100%;
}
.lp-afi-hero__title {
	margin: 0;
	font-weight: 900;
	font-size: clamp(28px, 3.3vw, 48px);
	line-height: 1.25;
	letter-spacing: -1.2px;
	text-transform: uppercase;
	color: #fff;
}
.lp-afi-hero__title span { color: var(--afi-cyan); }
.lp-afi-hero__subtitle {
	margin: 18px auto 0;
	max-width: 1185px;
	font-weight: 400;
	font-size: clamp(15px, 1.6vw, 24px);
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.7);
}

/* ====================================================================
   PLANES (3 tarjetas)
   ==================================================================== */
.lp-afi-planes {
	background: var(--st-bg);
	padding: 40px var(--st-pad-x) 72px;
}
.lp-afi-planes__inner {
	max-width: var(--afi-maxw);
	margin: 0 auto;
}
.lp-afi-planes__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch; /* tarjetas de igual altura (Figma: 852px las 3) */
}

/* ---- Tarjeta de nivel ---- */
.lp-afi-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 20px 20px;
	border-radius: 16px;
	background: linear-gradient(142.91deg, var(--afi-card-1) 8.49%, var(--afi-card-2) 58.3%, var(--afi-card-3) 91.51%);
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(24, 200, 245, 0.12);
	color: rgba(255, 255, 255, 0.85);
}
.lp-afi-card__emblem { line-height: 0; }
.lp-afi-card__emblem-ring {
	display: inline-flex;
	width: 112px;
	height: 112px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 0 3px rgba(24, 200, 245, 0.35), 0 0 0 6px rgba(24, 200, 245, 0.1), 0 6px 24px rgba(0, 0, 0, 0.6);
}
.lp-afi-card__emblem-ring img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.lp-afi-card__badge {
	margin-top: 14px;
	display: inline-block;
	padding: 5px 13px;
	border: 1px solid var(--afi-cyan-line);
	border-radius: 999px;
	background: rgba(24, 200, 245, 0.15);
	color: var(--afi-cyan);
	font-weight: 700;
	font-size: 10px;
	line-height: 15px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.lp-afi-card__title {
	margin: 16px 0 0;
	color: var(--afi-cyan);
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	text-align: center;
}
.lp-afi-card__sub {
	margin: 6px 0 0;
	color: var(--afi-cyan);
	font-weight: 700;
	font-size: 11px;
	line-height: 15px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
}

/* ---- Acordeón de beneficios ---- */
.lp-afi-acc {
	width: 100%;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}
.lp-afi-acc__item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.lp-afi-acc__btn {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 0;
	border: 0;
	background: none;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.lp-afi-acc__label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}
.lp-afi-acc__check {
	flex: 0 0 auto;
	color: var(--afi-cyan);
	font-weight: 700;
	font-size: 12.5px;
	line-height: 17.19px;
}
.lp-afi-acc__text {
	color: rgba(255, 255, 255, 0.85);
	font-weight: 500;
	font-size: 12.5px;
	line-height: 17.19px;
}
.lp-afi-acc__caret {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	margin-top: 3px;
	color: var(--afi-cyan);
	transition: transform 0.2s ease;
}
.lp-afi-acc__caret-svg { display: block; width: 13px; height: 13px; }
.lp-afi-acc__btn[aria-expanded="true"] .lp-afi-acc__caret { transform: rotate(180deg); }
.lp-afi-acc__panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.28s ease;
}
.lp-afi-acc__item.is-open .lp-afi-acc__panel { max-height: 260px; }
.lp-afi-acc__desc {
	margin: 0;
	padding: 0 4px 8px 20px;
	color: rgba(255, 255, 255, 0.55);
	font-weight: 400;
	font-size: 11.5px;
	line-height: 18.69px;
}

/* ---- Pie de tarjeta (divisor + precio + CTA): anclado al fondo para alinear
   los tres precios/botones aunque las tarjetas tengan distinto nº de beneficios ---- */
.lp-afi-card__foot {
	width: 100%;
	margin-top: auto; /* empuja precio+botón al fondo → los 3 se alinean */
	padding-top: 20px;
}

/* ---- Divisor con acento + precio ---- */
.lp-afi-card__divider {
	width: 100%;
	height: 1px;
	margin: 0 0 16px;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(24, 200, 245, 0.3), rgba(0, 0, 0, 0));
}
.lp-afi-card__price { text-align: center; }
.lp-afi-card__price-label {
	margin: 0;
	color: var(--afi-cyan);
	font-size: 11px;
	line-height: 16.5px;
}
.lp-afi-card__price-old {
	margin: 4px 0 0;
	color: #fff;
	font-size: 14px;
	line-height: 20px;
	text-decoration: line-through;
}
.lp-afi-card__price-now { margin: 4px 0 0; }
.lp-afi-card__price-amt {
	color: var(--afi-cyan);
	font-weight: 900;
	font-size: 38px;
	line-height: 38px;
}
.lp-afi-card__price-cur {
	margin-left: 4px;
	color: rgba(255, 255, 255, 0.5);
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
}

/* ---- CTA AFILIARME ---- */
.lp-afi-card__cta {
	display: block;
	width: 100%;
	margin-top: 20px;
	padding: 12px;
	border-radius: 10px;
	background: var(--afi-cyan);
	color: #081b3a !important; /* vence a .lp a { color: inherit } */
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	text-align: center;
	box-shadow: 0 4px 10px rgba(24, 200, 245, 0.35);
	transition: filter 0.15s ease;
}
.lp-afi-card__cta:hover { filter: brightness(1.06); }

/* ====================================================================
   RESPONSIVE — tablet ≤1024, móvil ≤600
   ==================================================================== */
@media (max-width: 1024px) {
	.lp-afi-planes__grid {
		grid-template-columns: 1fr;
		max-width: 460px;
		margin: 0 auto;
		gap: 20px;
	}
}
@media (max-width: 600px) {
	.lp-afi-hero { min-height: 320px; padding: 48px var(--st-pad-x); }
	.lp-afi-hero__title { letter-spacing: -0.6px; }
	.lp-afi-planes { padding-top: 28px; }
	.lp-afi-card { padding: 36px 16px 18px; }
}
@media (max-width: 420px) {
	.lp-afi-acc__text { font-size: 12px; }
}