/**
 * CrediTotal — Página "Cómo funciona" (ID 11559, slug como-funciona).
 * Diseño: Figma node 11:2. Maqueta editable en Elementor + este CSS.
 * Convenciones: contenido cap ~1304 centrado, tipografía fija (Figma) en desktop
 * y reducida en ≤767; imágenes .webp, iconos SVG; saltos .cf-br (ocultos en móvil);
 * secciones con cards → carrusel horizontal en móvil (.ct-car-*).
 */
body.page-id-11559 {
	overflow-x: hidden;
}

@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;
}

.cf-br {
	display: inline;
}

@media (max-width: 767px) {
	.cf-br {
		display: none;
	}
}

/* ============================ BANNER (#cfbanner) ============================ */
#cfbanner {
	width: 100vw;
	max-width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	padding-top: 72px !important;
	padding-bottom: 0 !important;
	overflow: hidden;
}

#cfbanner>.elementor-container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

#cfbanner .elementor-column>.elementor-element-populated,
#cfbanner .elementor-widget-html .elementor-widget-container {
	padding: 0;
}

#cfbanner .cf-pic,
#cfbanner .cf-pic img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

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

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

/* ============================ HERO (#cfhero) ============================ */
#cfhero {
	width: 100vw;
	max-width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	background: #fff;
	padding: clamp(48px, 6vw, 80px) 0;
	overflow: hidden;
}

#cfhero>.elementor-container {
	max-width: 1320px;
	padding-left: 24px;
	padding-right: 24px;
	align-items: center;
}

#cfhero .elementor-column>.elementor-element-populated {
	padding: 0;
}

#cfhero #cfhero-left>.elementor-element-populated {
	padding-right: clamp(0px, 4vw, 64px);
}

.cf-hero-h1 {
	margin: 0 0 24px;
	font-family: 'Gilroy-Heavy', sans-serif;
	font-weight: 400;
	font-size: 48px;
	line-height: 1.05;
	color: #1F2933;
}

.cf-hero-h1 .t {
	color: #3AADCA;
}

.cf-hero-p {
	margin: 0;
	font-family: 'Gilroy-Regular', sans-serif;
	font-size: 30px;
	line-height: 1.17;
	color: #1F2933;
}

.cf-hero-p+.cf-hero-p {
	margin-top: 24px;
}

/* Imagen del hero (iPhone) con animación: entrada (fade + rise + zoom) en el
   wrapper + flotado continuo sutil en la imagen. Sombra suave para profundidad. */
.cf-hero-anim {
	opacity: 0;
	transform: translateY(44px) scale(0.94);
	transition: opacity 1s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.cf-hero-anim.in-view {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.cf-hero-img {
	display: block;
	width: 100%;
	max-width: 560px;
	height: auto;
	margin: 0 auto;
	animation: cf-float 5.5s ease-in-out infinite;
	filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.10));
}

@keyframes cf-float {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-14px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cf-hero-anim {
		opacity: 1 !important;
		transform: none !important;
		transition: none;
	}

	.cf-hero-img {
		animation: none;
	}
}

/* ============================ REQUISITOS (#cfreq) ============================ */
#cfreq {
	width: 100vw;
	max-width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	background: #fff;
	padding: clamp(40px, 5vw, 64px) 0 clamp(56px, 7vw, 80px);
	overflow: hidden;
}

#cfreq>.elementor-container {
	max-width: 1304px;
	padding-left: 24px;
	padding-right: 24px;
}

#cfreq .elementor-column>.elementor-element-populated {
	padding: 0;
}

#cfreq-head {
	margin-bottom: clamp(40px, 5vw, 64px);
}

.cf-req-title {
	margin: 0;
	text-align: center;
	font-family: 'Gilroy-Heavy', sans-serif;
	font-weight: 800;
	font-size: 48px;
	line-height: 1.25;
	color: #1F2933;
}

.cf-req-title .t {
	color: #3AADCA;
}

.cf-req-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

.cf-req-card {
	width: 389px;
	max-width: 100%;
	background: #f7f9fb;
	border-radius: 16px;
	padding: 24px 32px;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 116px;
}

.cf-req-badge {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Gilroy-Heavy', sans-serif;
	font-weight: 800;
	font-size: 18px;
}

.cf-req-card.teal .cf-req-badge {
	background: #e6f7fb;
	color: #3AADCA;
}

.cf-req-card.amber .cf-req-badge {
	background: #fff4e6;
	color: #F5A302;
}

.cf-req-card p {
	margin: 0;
	font-family: 'Gilroy-Regular', sans-serif;
	font-size: 16px;
	line-height: 1.31;
	color: #1F2933;
}

@media (max-width: 1024px) {
	.cf-req-card {
		width: 320px;
	}
}

/* ============================ REGISTRO (#cfreg) ============================ */
#cfreg {
	width: 100vw;
	max-width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	background: #f7f9fb;
	padding: clamp(56px, 7vw, 80px) 0;
	overflow: hidden;
}

#cfreg>.elementor-container {
	max-width: 1304px;
	padding-left: 24px;
	padding-right: 24px;
	align-items: center;
}

#cfreg .elementor-column>.elementor-element-populated {
	padding: 0;
}

#cfreg #cfreg-left>.elementor-element-populated {
	padding-right: clamp(0px, 3vw, 40px);
}

.cf-reg-h2 {
	margin: 0 0 32px;
	font-family: 'Gilroy-Heavy', sans-serif;
	font-weight: 800;
	font-size: 48px;
	line-height: 1.25;
	color: #1F2933;
}

.cf-reg-lead {
	margin: 0 0 32px;
	font-family: 'Gilroy-Regular', sans-serif;
	font-size: 30px;
	line-height: 1.17;
	color: #1F2933;
}

.cf-reg-lead .t {
	color: #3AADCA;
	font-family: 'Gilroy-Heavy', sans-serif;
	font-weight: 700;
}

.cf-reg-sub {
	margin: 0 0 24px;
	font-family: 'Gilroy-Regular', sans-serif;
	font-size: 18px;
	line-height: 1.28;
	color: #1F2933;
}

.cf-reg-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cf-reg-list li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.cf-reg-num {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #3AADCA;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Gilroy-Heavy', sans-serif;
	font-weight: 800;
	font-size: 20px;
	box-shadow: 0 4px 3px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1);
}

.cf-reg-list p {
	margin: 0;
	padding-top: 8px;
	font-family: 'Gilroy-Regular', sans-serif;
	font-size: 18px;
	line-height: 1.28;
	color: #1F2933;
}

.cf-reg-close {
	margin: 0;
	font-family: 'Gilroy-Regular', sans-serif;
	font-size: 18px;
	line-height: 1.28;
	color: #1F2933;
}

.cf-reg-close .t {
	color: #3AADCA;
	font-family: 'Gilroy-Heavy', sans-serif;
	font-weight: 700;
}

.cf-reg-img {
	display: block;
	width: 100%;
	aspect-ratio: 612 / 522;
	object-fit: cover;
	border-radius: 24px;
}

/* ============================ DESCARGAR (#cfdesc) ============================ */
#cfdesc {
	width: 100vw;
	max-width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	background: #fff;
	padding: clamp(56px, 7vw, 80px) 0;
	overflow: hidden;
}

#cfdesc>.elementor-container {
	max-width: 1304px;
	padding-left: 24px;
	padding-right: 24px;
}

#cfdesc .elementor-column>.elementor-element-populated {
	padding: 0;
}

#cfdesc-head {
	text-align: center;
	margin-bottom: clamp(32px, 4vw, 48px);
}

.cf-desc-title {
	margin: 0 0 16px;
	font-family: 'Gilroy-Heavy', sans-serif;
	font-weight: 800;
	font-size: 48px;
	line-height: 1.1;
	color: #1F2933;
}

.cf-desc-title .t {
	color: #3AADCA;
}

.cf-desc-sub {
	margin: 0 auto;
	max-width: 1056px;
	font-family: 'Gilroy-Regular', sans-serif;
	font-size: 30px;
	line-height: 1.17;
	color: #1F2933;
}

.cf-desc-sub .t {
	color: #3AADCA;
}

.cf-desc-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
	max-width: 1104px;
	margin: 0 auto;
}

.cf-desc-card {
	width: 536px;
	max-width: 100%;
	background: linear-gradient(157deg, #f7f9fb 0%, #fafbfc 50%, #fff 100%);
	border: 1.5px solid rgba(58, 173, 202, 0.1);
	border-radius: 24px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
}

.cf-desc-badge {
	display: block;
	height: 70px;
	width: auto;
	filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}

.cf-desc-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	background: #fbfcfd;
	border: 1.5px solid #3AADCA;
	border-radius: 14px;
	padding: 16px;
	font-family: 'Gilroy-Heavy', sans-serif;
	font-weight: 800;
	font-size: 16px;
	letter-spacing: .2px;
	color: #3AADCA;
	text-decoration: none;
	box-shadow: 0 4px 3px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1);
}

.cf-desc-btn svg {
	width: 18px;
	height: 18px;
}

.cf-desc-btn:hover {
	background: #f0fafc;
}

/* ============================ LÍNEA DE CRÉDITO (#cflinea) ============================ */
#cflinea {
	width: 100vw;
	max-width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	background: #f7f9fb;
	padding: clamp(56px, 7vw, 80px) 0;
	overflow: hidden;
}

#cflinea>.elementor-container {
	max-width: 1304px;
	padding-left: 24px;
	padding-right: 24px;
}

#cflinea .elementor-column>.elementor-element-populated {
	padding: 0;
}

.cf-linea-card {
	max-width: 1008px;
	margin: 0 auto;
	background: #fff;
	border-radius: 24px;
	padding: 48px;
	box-shadow: 0 10px 7.5px rgba(0, 0, 0, 0.1), 0 4px 3px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	gap: 48px;
}

.cf-linea-img {
	flex: 0 0 236px;
	width: 236px;
	height: 216px;
	object-fit: cover;
	border-radius: 24px;
	box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.1);
}

.cf-linea-txt {
	flex: 1;
	min-width: 0;
}

.cf-linea-h2 {
	margin: 0 0 30px;
	font-family: 'Gilroy-Heavy', sans-serif;
	font-weight: 800;
	font-size: 48px;
	line-height: 1.1;
	color: #1F2933;
}

.cf-linea-h2 .t {
	color: #3AADCA;
}

.cf-linea-p {
	margin: 0;
	font-family: 'Gilroy-Regular', sans-serif;
	font-size: 18px;
	line-height: 1.28;
	color: #1F2933;
}

/* ============================ AUMENTAR (#cfaum) ============================ */
#cfaum {
	width: 100vw;
	max-width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	background: #fff;
	padding: clamp(56px, 7vw, 80px) 0;
	overflow: hidden;
}

#cfaum>.elementor-container {
	max-width: 1304px;
	padding-left: 24px;
	padding-right: 24px;
}

#cfaum .elementor-column>.elementor-element-populated {
	padding: 0;
}

#cfaum-head {
	margin-bottom: clamp(24px, 3vw, 33px);
}

.cf-aum-title {
	margin: 0;
	text-align: center;
	font-family: 'Gilroy-Heavy', sans-serif;
	font-weight: 400;
	font-size: 48px;
	line-height: 1.25;
	color: #1F2933;
	padding-bottom: 40px;
}

.cf-aum-title .t {
	color: #3AADCA;
}

.cf-aum-box {
	background: linear-gradient(90deg, #3AADCA 0%, #2a8dad 100%);
	border-radius: 16px;
	padding: 48px;
}

.cf-aum-box p {
	margin: 0;
	text-align: center;
	font-family: 'Gilroy-Regular', sans-serif;
	font-size: 24px;
	line-height: 1.21;
	color: #fff;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

.cf-aum-box p+p {
	margin-top: 8px;
}

/* ============================ Carrusel móvil (.ct-car-*) ============================ */
@media (max-width: 767px) {
	.ct-car-vp {
		overflow: hidden;
		position: relative;
	}

	.ct-car-track {
		display: flex !important;
		flex-wrap: nowrap !important;
		/* flex-start: si no, hereda justify-content:center de .cf-req-grid y, como
		   los slides suman 500% de ancho, centra el contenido desbordado -> se ve
		   el slide del medio (no el 1) y los dots quedan desincronizados. */
		justify-content: flex-start !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;
	}

	.ct-car-slide {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	.ct-car-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
		margin-top: 22px;
		padding: 0;
	}

	.ct-car-dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: rgba(31, 41, 51, 0.2);
		transition: width .3s ease, background .3s ease;
	}

	.ct-car-dot.is-active {
		width: 22px;
		border-radius: 4px;
		background: #3AADCA;
	}

	#cfreq .cf-req-grid {
		gap: 0;
	}

	#cfreq .cf-req-card {
		width: 100%;
	}

	/* Tipografía móvil */
	.cf-hero-h1,
	.cf-req-title,
	.cf-reg-h2,
	.cf-desc-title,
	.cf-linea-h2,
	.cf-aum-title {
		font-size: 30px;
		line-height: 1.2;
	}

	.cf-hero-p,
	.cf-reg-lead,
	.cf-desc-sub {
		font-size: 20px;
	}

	.cf-aum-box p {
		font-size: 18px;
	}

	/* Apilado de columnas */
	#cfhero .elementor-column,
	#cfreg .elementor-column {
		width: 100% !important;
	}

	#cfhero #cfhero-left>.elementor-element-populated,
	#cfreg #cfreg-left>.elementor-element-populated {
		padding: 0;
	}

	#cfhero-right {
		margin-top: 32px;
	}

	#cfreg-right {
		margin-top: 32px;
	}

	.cf-linea-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		padding: 28px;
	}

	.cf-linea-img {
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 16/12;
	}

	.cf-desc-card {
		width: 100%;
	}
}

/* ============================================================
   AJUSTES (revisión cliente 2026-06-08)
   ============================================================ */

/* #8 Hero: título en 1 línea (como el Figma) + columna izquierda más ancha */
.cf-hero-h1 {
	font-size: 44px;
}

@media (min-width: 768px) {
	#cfhero #cfhero-left {
		width: 56% !important;
	}

	#cfhero #cfhero-right {
		width: 44% !important;
	}

	#cfhero #cfhero-left>.elementor-element-populated {
		padding-right: clamp(0px, 2vw, 24px);
	}

	.cf-hero-h1 {
		white-space: nowrap;
	}
}

/* #9 Requisitos: contenido arriba del card y badge+texto centrados ENTRE SÍ */
.cf-req-card {
	align-items: flex-start;
}

.cf-req-row {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
}

/* #10 Registro: columna izquierda más ancha (lead a 3 líneas como el Figma)
   + restituir el border-radius de la foto (el tema lo pisa a 0) */
@media (min-width: 768px) {
	#cfreg #cfreg-left {
		width: 56% !important;
	}

	#cfreg #cfreg-right {
		width: 44% !important;
	}
}

#cfreg-media .cf-reg-img {
	border-radius: 24px !important;
}

/* #11 Descargar: los badges estaban enormes (el tema forzaba width:100%) */
.cf-desc-card .cf-desc-badge {
	height: 70px !important;
	width: auto !important;
	max-width: 100%;
}

/* #12 Línea de crédito: imagen con más altura + border-radius */
.cf-linea-card .cf-linea-img {
	flex: 0 0 260px !important;
	width: 260px !important;
	height: 290px !important;
	border-radius: 24px !important;
}

@media (max-width: 767px) {
	.cf-hero-h1 {
		white-space: normal;
		font-size: 30px;
	}

	.cf-linea-card .cf-linea-img {
		flex: none !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 16 / 11;
	}

	/* El título de Requisitos es el más largo: a 30px se desbordaba (>390px). */
	.cf-req-title {
		font-size: 23px;
		line-height: 1.22;
	}
}

/* ============================================================
   AJUSTES (revisión cliente 2026-06-19)
   ============================================================ */

/* Requisitos (#cfreq) y Registro (#cfreg): alinear el NÚMERO con el TEXTO.
   El círculo (48px) se centra con la PRIMERA línea del texto, en vez de flotar
   en el medio del bloque (se notaba en las cards de varias líneas, p. ej. la 03
   de Requisitos, donde el "03" quedaba a mitad del párrafo). Desktop + móvil. */
.cf-req-row {
	align-items: flex-start;     /* el badge va arriba */
}
/* Texto alineado al círculo SEGÚN SU LARGO, sin detectar líneas por JS:
   min-height = alto del círculo (48px) + contenido centrado verticalmente.
   → 1–2 líneas (alto ≤ 48px): el texto queda CENTRADO con el círculo (como antes).
   → 3+ líneas (alto > 48px): el bloque crece, el centrado deja de aplicar y el
     texto ARRANCA arriba, al inicio del círculo. Requisitos y Registro. */
.cf-req-card p,
.cf-reg-list p {
	padding-top: 0;
	min-height: 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Descargar (#cfdesc): se quitaron los botones; ahora el badge ES el enlace a la
   tienda. El <a> envuelve la imagen sin subrayado ni espacios extra. */
.cf-desc-store {
	display: inline-flex;
	line-height: 0;
	text-decoration: none;
}
.cf-desc-store .cf-desc-badge {
	transition: transform .2s ease;
}
.cf-desc-store:hover .cf-desc-badge {
	transform: translateY(-2px);
}

/* "¿Cómo me registro?": el párrafo lead va al MISMO tamaño que los textos de abajo
   (18px) y fluye continuo (se ocultan sus saltos .cf-br, pensados para 30px, que a
   18px dejaban líneas muy cortas). Desktop + móvil. */
.cf-reg-lead {
	font-size: 18px;
	line-height: 1.28;
}
.cf-reg-lead .cf-br { display: none; }

/* Requisitos en MÓVIL: SEPARAR las cards del carrusel (20px de aire entre cards).
   El slide ES la card; la achicamos 20px + 10px de margen a cada lado → la suma
   slide+márgenes sigue siendo 100% del viewport, así el translateX(-100%) del
   carrusel sigue alineando exacto (no toca como-funciona.js). */
@media ( max-width: 767px ) {
	.ct-car-slide {
		flex: 0 0 calc( 100% - 20px ) !important;
		width: calc( 100% - 20px ) !important;
		margin-left: 10px !important;
		margin-right: 10px !important;
	}
}