/**
 * CrediTotal — Página "Impulsa tu Negocio" (ID 12638, slug impulsa-tu-negocio).
 * Diseño: Figma node 910-2. Maqueta editable en Elementor + este CSS de presentación.
 *
 * ESTÁNDAR RESPONSIVE DEL PROYECTO (aplica a todas las páginas de aquí en adelante):
 *  - Contenido de secciones: max-width ~1440px, centrado; tipografía fluida con clamp().
 *  - Breakpoints: tablet ≤1024px, móvil ≤767px. En móvil columnas apiladas.
 *  - Imágenes .webp (iconos en SVG); width:100%; height:auto; nunca ancho fijo que cause overflow.
 *  - Anti-overflow: min-width:0; max-width:100% en columnas/widgets.
 *
 * ESTÁNDAR DE ESPACIADO (regla aprendida en B3 — replicar las distancias EXACTAS del Figma):
 *  - Medir en el Figma la distancia px entre cada par de elementos (gap/padding) y trasladarla 1:1.
 *  - Fijar el margin en el WIDGET (margin-bottom del .elementor-widget-*), NO confiar en el espaciado
 *    por defecto de Elementor (≈20px) que infla los gaps. Poner margin:0 en .elementor-heading-title.
 *  - OJO con el margin de las tarjetas: usar SOLO margin horizontal (0 12px) en desktop; el margin
 *    vertical sumaría al gap superior. El gap vertical entre tarjetas apiladas se añade en ≤767px.
 *  - Valores del sistema (de este Figma, 1512): sección pad-top 80px · eyebrow/pill→título 16px ·
 *    título→subtítulo ~4px (lo demás lo da el line-height) · subtítulo→contenido 56px ·
 *    padding de tarjeta 32px · icono→título 20px · título→cuerpo 12px.
 */

/* El banner full-bleed no debe generar scroll horizontal en la página. */
body.page-id-12638 { overflow-x: hidden; }

/* ============================================================
   B1 — Banner hero (#impbanner): full-bleed (100vw) y pegado
   justo debajo del header (≈72px). La sección "stretched" de
   Elementor no rompe el contenedor en esta plantilla, así que
   forzamos el ancho completo por CSS.
   ============================================================ */
#impbanner {
	width: 100vw;
	max-width: 100vw;
	margin-left: 50%;                 /* full-bleed robusto: centra los 100vw */
	transform: translateX( -50% );    /* sin importar el padding del contenedor padre */
	padding-top: 72px !important;     /* alto del header → banner pegado al menú */
	padding-bottom: 0 !important;
	overflow: hidden;
}
#impbanner > .elementor-container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}
/* La columna de Elementor trae 10px de padding por defecto → quitarlo para full-bleed. */
#impbanner .elementor-column > .elementor-element-populated,
#impbanner .elementor-widget-wrap {
	padding: 0;
}
#impbanner .elementor-widget-image,
#impbanner .elementor-widget-image .elementor-widget-container,
#impbanner .elementor-widget-image figure {
	width: 100%;
	margin: 0;
}
#impbanner .elementor-widget-image img {
	display: block;
	width: 100%;
	height: auto;
}

@media ( max-width: 1024px ) {
	#impbanner { padding-top: 64px !important; }
}
@media ( max-width: 767px ) {
	#impbanner { padding-top: 56px !important; }
}

/* ====== Fuente Gilroy (woff2 en uploads/fonts) ====== */
@font-face {
	font-family: 'Gilroy-Heavy';
	src: url('../../../../uploads/fonts/Gilroy-Heavy.woff2') format('woff2');
	font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Gilroy-Regular';
	src: url('../../../../uploads/fonts/Gilroy-Regular.woff2') format('woff2');
	font-weight: 300 600; font-style: normal; font-display: swap;
}

/* ============================================================
   B2 — Sección oscura "El Impulso que tu Negocio necesita"
   ============================================================ */
#impulso {
	width: 100vw;
	max-width: 100vw;
	margin-left: 50%;
	transform: translateX( -50% );
	background: #1F2933;
	padding: clamp( 56px, 7vw, 104px ) 0 clamp( 48px, 6vw, 88px );
	overflow: hidden;
}
#impulso > .elementor-container {
	max-width: 1304px;
	padding-left: 24px;
	padding-right: 24px;
}
#impulso .elementor-column > .elementor-element-populated { padding: 0; }

/* --- Fila superior: tarjeta (izq) + intro (der) --- */
/* El resplandor teal (Figma node 1457:891) vive DETRÁS de la card, no en ella:
   elipse difuminada centrada en la card. La card es translúcida → el glow la
   atraviesa (la ilumina) y además asoma por sus bordes sobre el fondo oscuro.
   OJO: con el markup optimizado de Elementor NO existe .elementor-widget-container
   (la .imp-card10 cuelga directo del div del widget) → el ::before va en #imp-card. */
#imp-card { display: flex; justify-content: center; position: relative; }
#imp-card .elementor-widget-container { display: flex; justify-content: center; position: relative; flex: 1; }
#imp-card::before {
	content: '';
	position: absolute;
	/* Figma node 1457:891: elipse 438x267 rgba(58,173,202,0.25) layer-blur 48,
	   centrada EXACTAMENTE en la card (centro glow == centro card). OJO: el
	   layer-blur de Figma dispersa ~la mitad que filter:blur() de CSS, asi que
	   48 de Figma ~ blur(24px) en CSS — con 48px el glow se lava y desaparece. */
	left: 50%; top: 50%;
	transform: translate( -50%, -50% );
	width: 438px; height: 267px;
	background: rgba( 58, 173, 202, 0.25 );
	border-radius: 50%;
	filter: blur( 24px );
	z-index: 0;
	pointer-events: none;
}

/* Tarjeta "10%" glassmorphism (HTML, con contadores) */
.imp-card10 {
	position: relative;
	z-index: 1;   /* la card va por ENCIMA del resplandor (que asoma a su alrededor) */
	width: 100%; max-width: 360px; margin: 0 auto;
	/* Fondo translúcido blanco al 10% sobre el oscuro de la sección (Figma node
	   1457:892): NO lleva tinte teal ni resplandor; el tono "pizarra" sale de
	   dejar pasar el fondo de la página. */
	background: rgba( 255, 255, 255, 0.1 );
	border: 1px solid rgba( 255, 255, 255, 0.2 );
	border-radius: 24px;
	padding: 32px;
	text-align: center;
	-webkit-backdrop-filter: blur( 12px ); backdrop-filter: blur( 12px );
}
.imp-card10-ic {
	width: 64px; height: 64px; border-radius: 16px; background: #F5A302;
	display: flex; align-items: center; justify-content: center; margin: 0 auto 24px;
}
.imp-card10-ic img,
.imp-card10-ic svg { width: 32px; height: 32px; display: block; }
.imp-card10-label {
	color: rgba( 255, 255, 255, 0.6 ); font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
	font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; margin: 0 0 16px;
}
.imp-card10-big {
	color: #fff; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
	font-size: 48px; line-height: 1; margin: 0 0 16px;
}
.imp-card10-desc {
	color: rgba( 255, 255, 255, 0.7 ); font-family: 'Gilroy-Regular', sans-serif;
	font-size: 14px; line-height: 1.6; margin: 0 0 20px;
}
.imp-card10-stats { display: flex; border-top: 1px solid rgba( 255, 255, 255, 0.1 ); padding-top: 16px; }
.imp-card10-stat { flex: 1; display: flex; flex-direction: column; gap: 2px; position: relative; }
.imp-card10-stat + .imp-card10-stat::before {
	content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: rgba( 255, 255, 255, 0.1 );
}
.imp-stat-num { font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: 18px; }
.imp-stat-num.teal { color: #3AADCA; }
.imp-stat-num.amber { color: #F5A302; }
.imp-stat-lbl { color: rgba( 255, 255, 255, 0.5 ); font-family: 'Gilroy-Regular', sans-serif; font-size: 12px; }

#imp-intro-col > .elementor-element-populated { padding-left: clamp( 0px, 3vw, 48px ); display: flex; flex-direction: column; justify-content: center; }
#imp-pill .elementor-heading-title {
	display: inline-block;
	background: rgba( 58, 173, 202, 0.2 );
	color: #3AADCA;
	font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
	font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
	padding: 8px 16px; border-radius: 100px;
}
#imp-pill { margin-bottom: 24px; }
#imp-h1 .elementor-heading-title {
	color: #fff; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
	font-size: clamp( 32px, 4.1vw, 60px ); line-height: 1.08;
}
#imp-h1 { margin-bottom: 24px; }
#imp-intro-text {
	color: rgba( 255, 255, 255, 0.7 );
	font-family: 'Gilroy-Regular', sans-serif;
	font-size: clamp( 15px, 1.25vw, 18px ); line-height: 1.6;
	margin-bottom: 32px;
}
#imp-cta1 .elementor-button {
	background: #F5A302; color: #fff;
	border-radius: 14px;
	font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: 18px; line-height: 28px; letter-spacing: 0;
	padding: 16px 32px; display: inline-flex; align-items: center; gap: 10px;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
#imp-cta1 .elementor-button:hover { background: #e09600; }

/* Labels de las 4 stat-cards (más conversión / Aceleración de Ingresos /
   Ticket Promedio / Velocidad Imbatible) — estilo Figma. Scopeado a sus ids. */
#impk1-label .elementor-heading-title,
#impk2-label .elementor-heading-title,
#impk3-label .elementor-heading-title,
#impk4-label .elementor-heading-title {
	font-family: inherit !important;   /* fallback nítido (Gilroy-Heavy se veía borroso) */
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	letter-spacing: 0 !important;
	color: #FFFFFF !important;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* --- Etiqueta + 4 KPIs --- */
#imp-kpi-label .elementor-heading-title {
	color: rgba( 255, 255, 255, 0.5 );
	font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
	font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; text-align: center;
}
#imp-kpi-label {
	margin: clamp( 40px, 5vw, 64px ) 0 32px;
	padding-top: clamp( 36px, 4vw, 48px );
	border-top: 1px solid rgba( 255, 255, 255, 0.1 );
}
#imp-kpis .elementor-column > .elementor-element-populated {
	background: rgba( 255, 255, 255, 0.05 );
	border: 1px solid rgba( 255, 255, 255, 0.1 );
	border-radius: 16px;
	padding: 24px;
	height: 100%;
	margin: 10px;        /* gap ~20px entre tarjetas */
}
/* caja del icono (tinte teal/amber), alineada a la IZQUIERDA.
   El widget imagen no tiene .elementor-widget-container: el <img> es hijo directo,
   así que el propio <img> es la caja (48px con padding + fondo tinte). */
#imp-kpis .elementor-widget-image { text-align: left; margin-bottom: 24px; line-height: 0; }
#imp-kpis .elementor-widget-image img {
	width: 48px; height: 48px; padding: 13px; border-radius: 14px;
	box-sizing: border-box; display: inline-block;
}
#impk1-ic img, #impk3-ic img { background: rgba( 58, 173, 202, 0.14 ); }
#impk2-ic img, #impk4-ic img { background: rgba( 245, 163, 2, 0.14 ); }
/* número grande */
#imp-kpis .elementor-widget-heading .elementor-heading-title { font-family: 'Gilroy-Heavy', sans-serif; }
#impk1-num .elementor-heading-title, #impk2-num .elementor-heading-title,
#impk3-num .elementor-heading-title, #impk4-num .elementor-heading-title {
	font-size: 36px; font-weight: 800; line-height: 1; margin-bottom: 4px;
}
/* color por ID (el _element_class kpi-teal/kpi-amber no renderiza en este Elementor) */
#impk1-num .elementor-heading-title, #impk3-num .elementor-heading-title { color: #3AADCA; }
#impk2-num .elementor-heading-title, #impk4-num .elementor-heading-title { color: #F5A302; }
/* label del KPI */
#impk1-label .elementor-heading-title, #impk2-label .elementor-heading-title,
#impk3-label .elementor-heading-title, #impk4-label .elementor-heading-title {
	color: #fff; font-weight: 800; font-size: 14px; margin-bottom: 8px;
}
/* texto del KPI */
#imp-kpis .elementor-widget-text-editor {
	color: rgba( 255, 255, 255, 0.55 );
	font-family: 'Gilroy-Regular', sans-serif; font-size: 14px; line-height: 1.5;
	letter-spacing: -0.2px;   /* ajuste fino para que los segmentos del Figma entren por línea */
}

@media ( max-width: 1024px ) {
	#imp-kpis .elementor-column { width: 50% !important; }
	/* los quiebres del Figma son para escritorio; en pantallas chicas el texto reflúye */
	#impulso .imp-br { display: none; }
}
@media ( max-width: 767px ) {
	#imp-top .elementor-column { width: 100% !important; }
	#imp-kpis .elementor-column { width: 100% !important; }
	#imp-intro-col > .elementor-element-populated { padding-left: 0; }
}

/* ============================================================
   B3 — "Tecnología y Gestión sin Esfuerzo" (#imptec)
   Banda clara full-bleed (#f7f9fb) + 3 tarjetas blancas.
   Figma node 1457:977.
   ============================================================ */
#imptec {
	width: 100vw;
	max-width: 100vw;
	margin-left: 50%;
	transform: translateX( -50% );
	background: #f7f9fb;
	padding: clamp( 56px, 7vw, 80px ) 0;
	overflow: hidden;
}
#imptec > .elementor-container {
	max-width: 1304px;
	padding-left: 24px;
	padding-right: 24px;
}
#imptec .elementor-column > .elementor-element-populated { padding: 0; }

/* --- Cabecera centrada (distancias exactas del Figma 1457:977) --- */
#imptec-pill { margin-bottom: 16px; text-align: center; }   /* pill → título: 16px */
#imptec-pill .elementor-heading-title {
	display: inline-block;
	background: rgba( 58, 173, 202, 0.1 );
	color: #3AADCA;
	font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
	font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
	padding: 8px 16px; border-radius: 100px;
}
#imptec-h2 .elementor-heading-title {
	color: #1F2933; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
	font-size: clamp( 30px, 3.4vw, 48px ); line-height: 1.1;
}
#imptec-h2 { margin-bottom: 4px; }                          /* título → subtítulo: tight */
#imptec-sub .elementor-heading-title {
	color: #1F2933; font-family: 'Gilroy-Regular', sans-serif; font-weight: 400;
	font-size: clamp( 18px, 2.1vw, 30px ); line-height: 1.25;
}
#imptec-sub { margin-bottom: clamp( 40px, 4vw, 56px ); }    /* subtítulo → tarjetas: 56px */

/* --- Fila de 3 tarjetas --- */
#imptec-cards .elementor-column > .elementor-element-populated {
	background: #fff;
	border-radius: 16px;
	padding: 32px;
	height: 100%;
	margin: 0 12px;      /* gap ~24px SOLO horizontal (no infla el gap superior) */
	box-shadow: 0 1px 1.5px rgba( 0, 0, 0, 0.1 ), 0 1px 1px rgba( 0, 0, 0, 0.1 );
}
/* caja del icono 56px (tinte teal/amber), a la izquierda: el <img> es la caja.
   margin en el WIDGET (no en el <img>) para fijar la distancia exacta del Figma. */
#imptec-cards .elementor-widget-image { text-align: left; line-height: 0; margin-bottom: 20px; }  /* icono → título: 20px */
#imptec-cards .elementor-widget-image img {
	width: 56px; height: 56px; padding: 15px; border-radius: 14px;
	box-sizing: border-box; display: inline-block;
}
#imptec-ic1 img, #imptec-ic3 img { background: rgba( 58, 173, 202, 0.08 ); }
#imptec-ic2 img { background: rgba( 245, 163, 2, 0.08 ); }
/* título de tarjeta */
#imptec-cards .elementor-widget-heading { margin-bottom: 12px; }   /* título → párrafo: 12px */
#imptec-cards .elementor-widget-heading .elementor-heading-title {
	color: #1F2933; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
	font-size: 20px; line-height: 1.4; margin: 0;
}
/* párrafo de tarjeta */
#imptec-cards .elementor-widget-text-editor {
	color: #1F2933; font-family: 'Gilroy-Regular', sans-serif;
	font-size: 16px; line-height: 1.35; margin-bottom: 0;
}
#imptec-cards .elementor-widget-text-editor p { margin: 0; }
#imptec-cards .elementor-widget-text-editor strong {
	font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
}

@media ( max-width: 767px ) {
	#imptec { padding: clamp( 40px, 8vw, 56px ) 0; }
	#imptec-cards .elementor-column { width: 100% !important; }
	/* apiladas: gap vertical (ya no hay margin vertical en desktop) */
	#imptec-cards .elementor-column > .elementor-element-populated { margin: 0 0 16px; }
}

/* ============================================================
   B4 — "Resultados reales / CrediTotal transforma tu rentabilidad" (#imprr)
   Banda blanca full-bleed: izq texto + grid 2×2 de stats / der dashboard con glow.
   Figma node 1457:1014. Stats con .imp-count (cuentan igual que B2).
   ============================================================ */
#imprr {
	width: 100vw; max-width: 100vw;
	margin-left: 50%; transform: translateX( -50% );
	background: #fff;
	padding: clamp( 56px, 7vw, 80px ) 0;
	overflow: hidden;
}
#imprr > .elementor-container {
	max-width: 1304px;
	padding-left: 24px; padding-right: 24px;
	align-items: center;   /* centra verticalmente el bloque de texto vs la imagen */
}
#imprr .elementor-column > .elementor-element-populated { padding: 0; }
#imprr-left > .elementor-element-populated { padding-right: clamp( 0px, 3vw, 40px ); }
#imprr-right > .elementor-element-populated { padding-left: clamp( 0px, 3vw, 40px ); }

/* Cabecera izquierda (distancias exactas Figma) */
#imprr-eyebrow { margin-bottom: 12px; }                  /* eyebrow → título: 12px */
#imprr-eyebrow .elementor-heading-title {
	color: #3AADCA; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
	font-size: 14px; letter-spacing: 1.4px; text-transform: uppercase; line-height: 1.43; margin: 0;
}
#imprr-h2 { margin-bottom: 16px; }                       /* título → subtítulo: 16px */
#imprr-h2 .elementor-heading-title {
	color: #1F2933; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
	font-size: clamp( 30px, 3.4vw, 48px ); line-height: 1.25; margin: 0;
}
#imprr-sub { margin-bottom: 32px; }                      /* subtítulo → grid: 32px */
#imprr-sub .elementor-heading-title {
	color: rgba( 31, 41, 51, 0.7 ); font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
	font-size: 18px; line-height: 1.625; margin: 0;
}

/* Grid 2×2 de stats (borde lateral teal/amber) */
.imp-rr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.imp-rr-card {
	background: #f7f9fb; border-left: 4px solid; border-radius: 16px;
	padding: 20px 20px 20px 24px; display: flex; flex-direction: column; gap: 4px;
	min-width: 0;
}
.imp-rr-card.teal { border-color: #3AADCA; }
.imp-rr-card.amber { border-color: #F5A302; }
.imp-rr-num { font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: clamp( 34px, 3.4vw, 48px ); line-height: 1; }
.imp-rr-card.teal .imp-rr-num { color: #3AADCA; }
.imp-rr-card.amber .imp-rr-num { color: #F5A302; }
.imp-rr-lbl { font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: 14px; color: #1F2933; }

/* Dashboard derecha con glow teal + sombra */
#imprr-img img {
	width: 100%; aspect-ratio: 576 / 432; object-fit: cover;
	border-radius: 24px;
	box-shadow: 0 25px 50px -12px rgba( 0, 0, 0, 0.25 ), 0 0 70px 8px rgba( 58, 173, 202, 0.20 );
}

@media ( max-width: 767px ) {
	#imprr { padding: clamp( 40px, 8vw, 56px ) 0; }
	#imprr .elementor-column { width: 100% !important; }
	#imprr-left > .elementor-element-populated,
	#imprr-right > .elementor-element-populated { padding: 0; }
	#imprr-right { margin-top: 40px; }
	.imp-rr-num { font-size: 38px; }
}

/* ============================================================
   B5 — "Afíliate a CrediTotal en Tiempo Récord" (#impafi)
   izq foto / der título + subtítulo + 6 pasos numerados + CTA amber.
   Figma node 1457:1085.
   ============================================================ */
#impafi {
	width: 100vw; max-width: 100vw;
	margin-left: 50%; transform: translateX( -50% );
	background: #fff;
	padding: clamp( 56px, 7vw, 80px ) 0;
	overflow: hidden;
}
#impafi > .elementor-container {
	max-width: 1304px;
	padding-left: 24px; padding-right: 24px;
	align-items: center;   /* foto centrada verticalmente vs el contenido */
}
#impafi .elementor-column > .elementor-element-populated { padding: 0; }
/* Gap de 64px entre foto y contenido (Figma 1457:1085): 32px a cada lado.
   Doble #id para ganar especificidad al reset de arriba; antes lo pisaba y la
   foto quedaba pegada al texto (sin gap) y demasiado ancha. */
#impafi #impafi-left > .elementor-element-populated {
	padding: 0 clamp( 0px, 2.5vw, 32px ) 0 0;
	display: flex; flex-direction: column; justify-content: center;
}
#impafi #impafi-right > .elementor-element-populated { padding: 0 0 0 clamp( 0px, 2.5vw, 32px ); }

/* Foto izquierda: el widget define la caja con el aspect-ratio del Figma (584:461);
   el <img> (hijo directo, sin wrapper) la llena con object-fit cover. */
#impafi-img {
	width: 100%; aspect-ratio: 584 / 461;
	border-radius: 24px; overflow: hidden;
	border: 1px solid rgba( 0, 0, 0, 0.05 );
}
#impafi-img img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Cabecera derecha (distancias exactas Figma) */
#impafi-h2 { margin-bottom: 0; }
/* El gap título→subtítulo (16px Figma) va en el margen del propio título:
   el margin-bottom del widget no se estaba aplicando (quedaba en 0). */
#impafi-h2 .elementor-heading-title {
	color: #1F2933; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
	font-size: clamp( 30px, 3.4vw, 48px ); line-height: 1.25; margin: 0 0 16px;
}
#impafi-sub { margin-bottom: 32px; }                 /* subtítulo → lista: ~32px */
#impafi-sub p {
	color: #1F2933; font-family: 'Gilroy-Regular', sans-serif;
	font-size: clamp( 20px, 2.1vw, 30px ); line-height: 1.17; margin: 0;
}

/* Lista de 6 pasos numerados */
/* lista de 6 pasos → CTA: separación forzada (gana el margen del widget Elementor). */
#impafi #impafi-steps { margin-bottom: 40px !important; }
.imp-afi-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.imp-afi-step { display: flex; align-items: center; gap: 12px; }
.imp-afi-num {
	flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
	background: rgba( 58, 173, 202, 0.2 ); color: #3AADCA;
	font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: 12px;
	display: flex; align-items: center; justify-content: center;
}
/* margin: 0 !important scopeado a #impafi para ganar el `.elementor p { margin-bottom:1rem }`
   (misma especificidad, ganaba por orden de carga y descentraba el texto). Solo afecta esta sección. */
#impafi .imp-afi-step p { margin: 0 !important; font-family: 'Gilroy-Regular', sans-serif; font-size: 16px; line-height: 1.31; color: #1F2933; }

/* CTA amber con flecha a la derecha (mismo estilo que B2).
   line-height 28 + padding 16 → alto 60px exacto como el Figma. */
#impafi-cta .elementor-button {
	background: #F5A302; color: #fff; border-radius: 14px;
	font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
	font-size: 18px; line-height: 28px; letter-spacing: 0;
	padding: 16px 40px;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* El texto del botón NO fuerza Gilroy-Heavy (se veía borroso); usa el mismo fallback
   nítido que #imp-cta1. Solo el peso, igual que el botón de arriba. */
#impafi-cta .elementor-button .elementor-button-text { font-weight: 800; }
#impafi-cta .elementor-button .elementor-button-content-wrapper { display: flex; align-items: center; gap: 12px; }
#impafi-cta .elementor-button:hover { background: #e09600; }

@media ( max-width: 767px ) {
	#impafi { padding: clamp( 40px, 8vw, 56px ) 0; }
	#impafi .elementor-column { width: 100% !important; }
	/* doble #id para pisar el padding del gap (también con doble #id) en apilado */
	#impafi #impafi-left > .elementor-element-populated,
	#impafi #impafi-right > .elementor-element-populated { padding: 0; }
	#impafi-left { margin-bottom: 32px; }   /* foto arriba del contenido */
	#impafi .imp-br { display: none; }
}

/* ============================================================
   B6 — "Convierte en un aliado de CrediTotal." (#impalia)
   Banda blanca full-bleed: título centrado (split teal/oscuro) +
   grid 2×2 de tarjetas (#f7f9fb, ilustración .webp + stat + texto).
   Figma node 914:1160. Ilustraciones #12866–12869.
   ============================================================ */
#impalia {
	width: 100vw; max-width: 100vw;
	margin-left: 50%; transform: translateX( -50% );
	background: #fff;
	padding: clamp( 56px, 7vw, 80px ) 0 clamp( 64px, 8vw, 104px );
	overflow: hidden;
}
#impalia > .elementor-container {
	max-width: 1304px;
	padding-left: 24px; padding-right: 24px;
}
#impalia .elementor-column > .elementor-element-populated { padding: 0; }

/* Título centrado 48px: "Convierte en un aliado" teal + "de CrediTotal." oscuro */
#impalia-title { margin-bottom: clamp( 40px, 5vw, 64px ); }   /* título → grid: 64px (Figma) */
.imp-alia-title {
	margin: 0; text-align: center;
	font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
	font-size: clamp( 30px, 3.4vw, 48px ); line-height: 1.1; color: #1F2933;
}
.imp-alia-title .t { color: #3AADCA; }

/* Grid 2×2 (cards 496, gap 41px Figma) centrado dentro del contenido */
.imp-alia-grid {
	display: grid; grid-template-columns: repeat( 2, 1fr );
	gap: 41px; max-width: 1033px; margin: 0 auto;
}
.imp-alia-card {
	background: #f7f9fb; border-radius: 16px; padding: 32px;
	min-height: 451px;   /* las 4 tarjetas con la misma altura (Figma 451px) */
	display: flex; flex-direction: column; align-items: flex-start;
}
.imp-alia-ill {
	width: 100%; height: 237px; margin-bottom: 28px;
	display: flex; align-items: center; justify-content: center;
}
.imp-alia-ill img { max-width: 92%; max-height: 215px; width: auto; height: auto; display: block; }
.imp-alia-card h3 {
	margin: 0 0 10px;
	font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
	font-size: clamp( 24px, 2vw, 30px ); line-height: 1.2; color: #1F2933;
}
.imp-alia-card p {
	margin: 0;
	font-family: 'Gilroy-Regular', sans-serif;
	font-size: 18px; line-height: 1.31; color: #1F2933;
}

@media ( max-width: 1024px ) {
	.imp-alia-grid { gap: 24px; }
	.imp-alia-card { padding: 24px; }
}
@media ( max-width: 767px ) {
	#impalia { padding: clamp( 40px, 8vw, 56px ) 0; }
	.imp-alia-grid { grid-template-columns: 1fr; gap: 20px; max-width: 496px; }
	.imp-alia-card { min-height: auto; }
	.imp-alia-ill { height: 200px; }
	.imp-alia-card h3 { font-size: 24px; }
}

/* ============================================================
   Carrusel autoplay horizontal en MÓVIL (≤767px) para:
   #imp-kpis (KPIs B2) · #imptec-cards (B3) · #impalia-grid (B6).
   Las clases .imp-car-* las añade impulsa.js solo en móvil (loop
   infinito rotando el DOM). Transición de transform = 1.5s.
   ============================================================ */
@media ( max-width: 767px ) {
	.imp-car-vp { overflow: hidden; position: relative; }
	.imp-car-track {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		gap: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		transition: transform 1.5s ease;
		will-change: transform;
	}
	.imp-car-slide {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	/* puntos indicadores debajo del carrusel */
	.imp-car-dots {
		display: flex; justify-content: center; align-items: center;
		gap: 8px; margin-top: 22px; padding: 0;
	}
	.imp-car-dot {
		width: 8px; height: 8px; border-radius: 50%;
		background: rgba( 31, 41, 51, 0.2 );
		transition: width .3s ease, background .3s ease;
	}
	.imp-car-dot.is-active { width: 22px; border-radius: 4px; background: #3AADCA; }
	/* la banda KPIs es oscura → puntos claros */
	#imp-kpis .imp-car-dot { background: rgba( 255, 255, 255, 0.3 ); }
	#imp-kpis .imp-car-dot.is-active { background: #3AADCA; }
}