/*
 * CrediTotal — Sección #planes (page 109): tarjetas de plan + efecto "Stack Cards".
 * Tema hijo xmoze-child.  Plan: plans/affirm-stack-cards-planes.md
 *
 * DISEÑO DE LA TARJETA — Figma node 1:127 ("PlansSection"):
 *   tarjeta horizontal, fondo blanco, esquinas 16px, sombra suave.
 *     [ panel con degradado del tier + "Plan X" ] | [ 50% inicial + checklist ]
 *       | divisor vertical | [ descripción + botón "Ver más →" ]
 *   El color del tier (degradado del panel, número %, check y borde del botón)
 *   se define por modificador .ct-plan--<tier>; editable en 1 línea más abajo.
 *
 * EFECTO — apilado estilo Affirm (se conserva): cada columna es sticky y, al
 *   hacer scroll, las tarjetas se apilan; la de atrás se escala/desenfoca/atenúa
 *   (lo aplica stack-cards.js sobre la .elementor-column). Count-agnostic: el JS
 *   pone --ct-index en cada columna y el top sticky se calcula con calc().
 *
 * Markup de cada tarjeta (widget HTML de Elementor dentro de #planes-cards):
 *   .ct-plan.ct-plan--<tier>
 *     .ct-plan__panel  > .ct-plan__name
 *     .ct-plan__mid    > .ct-plan__pct (.ct-plan__pctnum + .ct-plan__pcttxt)
 *                      > .ct-plan__list > li > .ct-plan__chkwrap > svg.ct-plan__chk
 *     .ct-plan__right  > .ct-plan__desc + a.ct-plan__btn > svg.ct-plan__arrow
 *
 * DOM Elementor:
 *   #planes  section
 *     section#planes-cards   (CSS ID — hook estable)
 *       .elementor-container
 *         .elementor-column x5   -> TARJETAS (sticky + escala por scroll)
 *           .elementor-widget-wrap  -> transparente (la tarjeta es .ct-plan)
 *
 * Nota: el hook es un CSS ID (#planes-cards), no una clase — en este sitio la
 * inyección de _css_classes vía datos de Elementor no se renderiza, pero
 * _element_id sí.
 */

/* =======================================================================
   Variables del COMPORTAMIENTO (apilado). Los breakpoints (más abajo) solo
   reescriben estas. Los colores de cada tier viven en los modificadores.
   ======================================================================= */
#planes-cards {
	--ct-stack-top: 110px;    /* offset sticky de la 1ª tarjeta */
	--ct-stack-step: 26px;    /* incremento por tarjeta (la de atrás "asoma") */
	--ct-card-gap: 70px;      /* separación entre tarjetas = recorrido de scroll */
	--ct-card-max: 856px;     /* ancho máximo de la tarjeta (Figma) */
	--ct-card-min-h: 327px;   /* altura mínima de la tarjeta (Figma) */
}

/* =======================================================================
   APILADO STICKY (count-agnostic) — regla base, todos los anchos.
   El JS pone --ct-index (0,1,2,…) en cada columna; el top se calcula.
   ======================================================================= */

/* contenedor: de fila flex de N columnas -> stack vertical */
#planes-cards > .elementor-container {
	display: block;
}

/* cada columna Elementor pasa a ser una tarjeta apilable */
#planes-cards > .elementor-container > .elementor-column {
	width: 100%;
	max-width: var(--ct-card-max);
	margin: 0 auto var(--ct-card-gap);
	position: sticky;
	top: calc(var(--ct-stack-top) + var(--ct-index, 0) * var(--ct-stack-step));
	transform-origin: center top;       /* escala desde el borde superior */
	will-change: transform, filter;

	/* neutraliza la animación de entrada (fadeIn / elementor-invisible) de
	   Elementor: interfiere con el control de opacidad por scroll */
	opacity: 1;
	animation-name: none;
}

/* la última tarjeta no necesita recorrido extra debajo */
#planes-cards > .elementor-container > .elementor-column:last-child {
	margin-bottom: 0;
}

/* el wrapper del widget es transparente: la superficie visible es .ct-plan
   (con su propio fondo blanco, radio y sombra). Sin glass ni overflow que
   recorte la sombra de la tarjeta. */
#planes-cards > .elementor-container > .elementor-column > .elementor-widget-wrap {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	min-height: 0;
	overflow: visible;
}
#planes-cards .elementor-widget-html,
#planes-cards .elementor-widget-html > .elementor-widget-container {
	margin: 0;
}

/* =======================================================================
   TARJETA DE PLAN — Figma 1:127
   ======================================================================= */
.ct-plan {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: var(--ct-card-max);
	min-height: var(--ct-card-min-h);
	margin: 0 auto;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	overflow: hidden;            /* el degradado del panel recorta a las esquinas */
	box-sizing: border-box;
	color: #1F2933;
	font-family: 'Gilroy Regular', sans-serif;

	/* --- color del tier (lo sobrescribe cada .ct-plan--<tier>) --- */
	--plan-accent: #B8732D;
	--plan-soft: rgba(205, 127, 50, 0.12);
	--plan-grad: linear-gradient(to right, #CA7E31, #8D602C);
}

/* ---- panel izquierdo (degradado + nombre del plan) ---- */
.ct-plan__panel {
	flex: 0 0 238px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--plan-grad);
	box-sizing: border-box;
}
.ct-plan__name {
	margin: 0;
	font-family: 'Gilroy Heavy', sans-serif;
	font-weight: 800;
	font-size: 24px;
	line-height: 1.25;
	text-align: center;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);   /* legibilidad en tiers claros */
}

/* ---- columna central (% inicial + checklist) ----
   Ancho AUTO + nowrap: la columna se ajusta al ítem más largo y la lista
   nunca parte en 2 líneas (la fuente Gilroy local es más ancha que en Figma).
   El divisor de la derecha cae justo después. */
.ct-plan__mid {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px 44px 24px 45px;
	box-sizing: border-box;
}
.ct-plan__pct {
	margin: 0 0 26px;
	line-height: 1;
}
.ct-plan__pctnum {
	display: block;
	font-family: 'Gilroy Heavy', sans-serif;
	font-weight: 800;
	font-size: 44px;
	line-height: 1;
	color: var(--plan-accent);
}
.ct-plan__pcttxt {
	display: block;
	margin-top: 6px;
	font-family: 'Gilroy Heavy', sans-serif;
	font-weight: 800;
	font-size: 32px;
	line-height: 1;
	color: #1F2933;
}
.ct-plan__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ct-plan__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	font-family: 'Gilroy Heavy', sans-serif;
	font-weight: 800;
	font-size: 18px;
	line-height: 1.33;
	color: #1F2933;
}
.ct-plan__chkwrap {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--plan-soft);
	color: var(--plan-accent);
}
.ct-plan__chk {
	width: 15px;
	height: 15px;
	display: block;
}

/* ---- columna derecha (descripción + botón) + divisor vertical ---- */
.ct-plan__right {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	padding: 24px 50px 24px 54px;
	text-align: center;
	box-sizing: border-box;
}
.ct-plan__right::before {            /* divisor vertical (Figma: inset arriba/abajo) */
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 73%;
	background: #E3E7EC;
}
.ct-plan__desc {
	margin: 0;
	max-width: 185px;
	font-family: 'Gilroy Regular', sans-serif;
	font-size: 18px;
	line-height: 1.2;
	color: #1F2933;
}
.ct-plan__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 22px;
	border: 1.5px solid var(--plan-accent);
	border-radius: 6px;
	background: #fff;
	font-family: 'Gilroy Heavy', sans-serif;
	font-weight: 800;
	font-size: 18px;
	line-height: 1.33;
	color: var(--plan-accent);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease;
}
.ct-plan__btn:hover,
.ct-plan__btn:focus {
	background: var(--plan-accent);
	color: #fff;
}
.ct-plan__arrow {
	width: 18px;
	height: 18px;
	display: block;
}

/* =======================================================================
   COLORES POR TIER — EDITAR AQUÍ (1 línea por plan).
   Orden de las tarjetas: 1 Bronce · 2 Plata · 3 Oro · 4 Titanium · 5 Diamante.
   --plan-accent: número %, check y borde/texto del botón.
   --plan-soft:   fondo del círculo del check (mismo tono al 12%).
   --plan-grad:   degradado del panel izquierdo.
   ======================================================================= */
.ct-plan--bronce {
	--plan-accent: #B8732D;
	--plan-soft: rgba(205, 127, 50, 0.12);
	--plan-grad: linear-gradient(to right, #CA7E31, #8D602C);
}
.ct-plan--plata {
	--plan-accent: #6B7D8D;
	--plan-soft: rgba(107, 125, 141, 0.14);
	--plan-grad: linear-gradient(to right, #8E9EAD, #5E6E7C);
}
.ct-plan--oro {
	--plan-accent: #CF8A00;
	--plan-soft: rgba(207, 138, 0, 0.12);
	--plan-grad: linear-gradient(to right, #E0A81C, #B07700);
}
.ct-plan--titanium {
	--plan-accent: #2A8DA8;
	--plan-soft: rgba(58, 173, 202, 0.14);
	--plan-grad: linear-gradient(to right, #45BCD8, #2A8DA8);
}
.ct-plan--diamante {
	--plan-accent: #2C4A7A;
	--plan-soft: rgba(15, 52, 96, 0.12);
	--plan-grad: linear-gradient(to right, #16213E, #0F3460);
}

/* =======================================================================
   RESPONSIVE — layout de la tarjeta
   ≤900px: la tarjeta no cabe en horizontal -> se reordena en VERTICAL
   (panel arriba, luego % + checklist, luego descripción + botón).
   ======================================================================= */
@media (max-width: 900px) {
	.ct-plan {
		flex-direction: column;
		max-width: 520px;
		min-height: 0;
	}
	.ct-plan__panel {
		flex: 0 0 auto;
		padding: 26px 24px;
	}
	.ct-plan__mid {
		flex: none;
		width: 100%;
		align-items: center;
		text-align: center;
		padding: 28px 24px 4px;
	}
	.ct-plan__list {
		align-items: flex-start;
	}
	.ct-plan__right {
		flex: none;
		width: 100%;
		padding: 20px 24px 30px;
	}
	.ct-plan__right::before {       /* el divisor vertical no aplica en vertical */
		left: 50%;
		top: 0;
		transform: translateX(-50%);
		width: 56px;
		height: 1px;
	}
	.ct-plan__desc {
		max-width: 280px;
	}
}

/* =======================================================================
   RESPONSIVE — variables del apilado por breakpoint.
   El efecto es variable-driven: el responsive = reescribir variables
   (offsets sticky menores en pantallas chicas). Medir el header móvil (F6.2).
   ======================================================================= */
@media (max-width: 1023px) {   /* tablet */
	#planes-cards {
		--ct-stack-top: 96px;
		--ct-stack-step: 20px;
		--ct-card-gap: 56px;
	}
}

@media (max-width: 767px) {    /* móvil */
	#planes-cards {
		--ct-stack-top: 80px;
		--ct-stack-step: 16px;
		--ct-card-gap: 44px;
	}
}

/* prefers-reduced-motion: sin apilado sticky (tarjetas en flujo normal). */
@media (prefers-reduced-motion: reduce) {
	#planes-cards > .elementor-container > .elementor-column {
		position: static;
		transform: none;
		filter: none;
	}
}

/* =======================================================================
   Fix de ancestro para position: sticky
   El tema (xmoze/assets/css/theme-style.css) aplica body{overflow-x:hidden},
   lo que convierte a <body> en contenedor de scroll y rompe el sticky.
   overflow-x: clip evita el scroll horizontal SIN crear contenedor de scroll.
   ======================================================================= */
body {
	overflow-x: clip;
}