/*
 * CrediTotal — Home (page 109). Ajustes propios del home que NO viven en
 * hero-video.css / value-cards.css / stack-cards.css.
 *
 * Por ahora: carrusel horizontal en móvil (≤767px) para las cards de #forma,
 * con la misma estética .ct-car-* del resto de páginas (dots ámbar/teal de marca).
 */

/* ===================== Botón "Ver proceso completo" (Cómo funciona) =====================
   Estilo outline teal del Figma. Botón nativo de Elementor.
   Se targetea por CSS ID #cf-verproceso (en este sitio _css_classes por BD no siempre
   renderiza; _element_id sí) y también por .ct-vermas-btn por compatibilidad. */
#cf-verproceso { text-align: center; }

.ct-vermas-btn .elementor-button,
#cf-verproceso .elementor-button {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	background-color: #fff !important;
	background-image: none !important;
	color: #3AADCA !important;
	border: 1.5px solid #3AADCA !important;
	border-radius: 12px !important;
	padding: 17px 40px !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 1 !important;
	letter-spacing: 0.2px;
	box-shadow: 0 6px 16px rgba(58, 173, 202, 0.10);
	transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.ct-vermas-btn .elementor-button:hover,
.ct-vermas-btn .elementor-button:focus,
#cf-verproceso .elementor-button:hover,
#cf-verproceso .elementor-button:focus {
	background-color: #3AADCA !important;
	color: #fff !important;
	box-shadow: 0 10px 22px rgba(58, 173, 202, 0.22);
}
.ct-vermas-btn .elementor-button .elementor-button-icon,
.ct-vermas-btn .elementor-button .elementor-button-icon i,
.ct-vermas-btn .elementor-button .elementor-button-text,
#cf-verproceso .elementor-button .elementor-button-icon,
#cf-verproceso .elementor-button .elementor-button-icon i,
#cf-verproceso .elementor-button .elementor-button-text { color: inherit !important; }

/* ===================== Sección "Cómo funciona" (#funciona) → Figma =====================
   El widget stepbox imprime sólo el número (1,2,3) sin íconos. Aquí lo acercamos al Figma:
   numeración 01/02/03 (CSS counter) + ícono por paso (descarga / check / bolsa). */

/* Numeración con cero a la izquierda + círculo con GRADIENTE y SOMBRA (Figma 1:223) */
#funciona .xmoze-step-icon-wraper { counter-reset: ctstep; }
#funciona .xmoze-step-single-item { counter-increment: ctstep; }
#funciona .xmoze-step-text-box {
	width: 60px !important;
	height: 60px !important;
	min-width: 60px !important;
	border-radius: 50% !important;
	background: linear-gradient( 135deg, #3AADCA 0%, rgba( 58, 173, 202, 0.8 ) 100% ) !important;
	box-shadow: 0 10px 15px rgba( 0, 0, 0, 0.10 ), 0 4px 6px rgba( 0, 0, 0, 0.10 ) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative;
	z-index: 1;
}
#funciona .xmoze-step-text-box span { font-size: 0 !important; line-height: 0; }
#funciona .xmoze-step-text-box span::before {
	content: counter( ctstep, decimal-leading-zero );
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.3px;
	color: #fff;
}

/* Ícono por paso: CUADRADO REDONDEADO (16px) con fondo #F7F9FB (Figma 1:227), no círculo */
#funciona .xmoze-setp-content::before {
	content: "";
	display: block;
	width: 60px;
	height: 60px;
	border-radius: 16px;
	background-color: #F7F9FB;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 28px 28px;
	margin-bottom: 18px;
}
#funciona .xmoze-step-single-item:nth-child(1) .xmoze-setp-content::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233AADCA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}
#funciona .xmoze-step-single-item:nth-child(2) .xmoze-setp-content::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233AADCA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
#funciona .xmoze-step-single-item:nth-child(3) .xmoze-setp-content::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233AADCA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}

/* LAYOUT: el stepbox trae flex-wrap:wrap y el contenido (con el ícono) se envolvía
   DEBAJO del número. Forzamos fila sin wrap y alineado arriba → número (izq) e
   ícono (arriba del contenido, der) quedan a la misma altura, como el Figma. */
#funciona .xmoze-step-single-item {
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	gap: 24px !important;
	position: relative;
}
#funciona .xmoze-step-text-box { flex: 0 0 60px !important; margin: 0 !important; }
#funciona .xmoze-setp-content { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }

/* CONECTOR: línea que arranca teal bajo el número y se DESVANECE hacia abajo
   (degradado a transparente), terminando ANTES del siguiente círculo (con gap). */
#funciona .xmoze-step-single-item::after {
	content: "" !important;
	position: absolute !important;
	left: 30px !important;
	top: 72px !important;
	bottom: 36px !important;
	width: 2px !important;
	height: auto !important;
	transform: translateX(-50%) !important;
	background: linear-gradient( to bottom, #3AADCA 0%, rgba( 58, 173, 202, 0 ) 100% ) !important;
	border: 0 !important;
	opacity: 1;
	z-index: 0;
}
#funciona .xmoze-step-single-item:last-child::after { display: none !important; }

/* Ancho del texto de los pasos ≈ Figma: el wrap de la columna izquierda traía un
   margin-right enorme (~185px) que angostaba el texto (~347px) y rompía los párrafos
   en más líneas. Lo reducimos para que el texto tenga ~530px (cabe la línea 1 del Figma). */
#funciona > .elementor-container > .elementor-column:first-child > .elementor-element-populated {
	margin-right: 24px !important;
}

/* Saltos de línea EXACTOS del Figma en las descripciones de los pasos (2 líneas c/u).
   En desktop se respetan; en móvil se ocultan para que el texto fluya natural. */
@media ( max-width: 767px ) {
	#funciona .cf-br-home { display: none; }
}

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

	.ct-car-track {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		width: 100%;
		will-change: transform;
	}

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

	/* Indicadores (dots) */
	.ct-car-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
		margin-top: 22px;
	}
	.ct-car-dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #d4dbe3;
		transition: width .3s ease, background-color .3s ease;
	}
	.ct-car-dot.is-active {
		width: 22px;
		border-radius: 4px;
		background: #3AADCA;
	}

	/* --- #forma en móvil: el carrusel controla la presentación ---
	   Neutralizamos el reveal con transform de value-cards (translateX/rotate/scale por
	   nth-child) para que las cards queden a ancho completo y el track las desplace limpio. */
	#forma.ct-vp-init .elementor-column,
	#forma.ct-vp-init.is-visible .elementor-column {
		transform: none !important;
		transition: none !important;
		opacity: 1 !important;
	}

	/* El viewport (#forma) recorta el desbordamiento horizontal del track. */
	#forma.ct-car-vp {
		overflow: hidden;
	}

	/* La columna-card ocupa el ancho; respiramos un poco a los lados dentro del slide. */
	#forma.ct-car-track > .elementor-column,
	#forma .ct-car-track > .elementor-column {
		padding-left: 6px;
		padding-right: 6px;
	}

	/* MISMA ALTURA: las slides estiran a la card más alta (align-items:stretch) y aquí
	   hacemos que la card glass RELLENE la slide → todas las cards quedan al mismo nivel
	   aunque una descripción ocupe 4 líneas y otra 3. El contenido queda alineado arriba. */
	#forma .ct-car-slide > .elementor-element-populated {
		height: 100%;
		display: flex !important;
		flex-direction: column !important;   /* venía en row → flex-grow crecía en horizontal */
	}
	#forma .ct-car-slide .elementor-widget-mas-addons-icon-box {
		flex-grow: 1 !important;             /* ahora crece en VERTICAL y rellena la slide */
		display: flex;
		flex-direction: column;
	}
	#forma .ct-car-slide .elementor-widget-mas-addons-icon-box > .elementor-widget-container {
		flex-grow: 1;
		display: flex;
	}
	#forma .ct-car-slide .mas-addons-feature-box-item {
		flex-grow: 1;
		width: 100%;
	}

	/* Anti-encogimiento: la columna-slide es flex y CENTRABA el populated a su ancho
	   natural (368px). La pasamos a block → el populated (bloque) llena el 100% del
	   slide. Y forzamos todo el árbol a ancho completo, sin transform. */
	#forma .ct-car-slide { display: block !important; }
	#forma .ct-car-slide,
	#forma .ct-car-slide > .elementor-element-populated,
	#forma .ct-car-slide .elementor-widget-mas-addons-icon-box,
	#forma .ct-car-slide .elementor-widget-mas-addons-icon-box > .elementor-widget-container,
	#forma .ct-car-slide .mas-addons-feature-box-item {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		transform: none !important;
	}
}

/* ===================== "¿Listo para empezar?" — badges de tiendas =====================
   Los badges Google Play (#fa34ee8) y App Store (#06a5492) tenían distinto ancho y
   quedaban desalineados (bordes derechos sin coincidir). Se igualan al mismo ancho
   para que queden alineados en columna. */
/* SOLO MÓVIL (≤767px): en desktop se ve bien y no se toca. El badge es un <a> inline;
   Elementor pone text-align:start + margin lateral. En móvil centramos, igualamos ancho
   y separamos verticalmente los dos badges. */
@media ( max-width: 767px ) {
	.elementor-element-fa34ee8,
	.elementor-element-06a5492 {
		text-align: center !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.elementor-element-fa34ee8 .elementor-widget-container,
	.elementor-element-06a5492 .elementor-widget-container {
		text-align: center !important;
	}
	.elementor-element-fa34ee8 img,
	.elementor-element-06a5492 img {
		width: 200px !important;          /* mismo ancho los dos */
		max-width: 100% !important;
		height: auto !important;
		display: inline-block !important; /* centrado por el text-align del container */
	}
	/* Separación vertical entre los dos badges. */
	.elementor-element-fa34ee8 { margin-bottom: 18px !important; }
	.elementor-element-06a5492 { margin-top: 18px !important; }

	/* Texto "Si tienes una versión anterior..." (#96af65f): más separación abajo
	   en móvil (3rem en vez del 1rem global de .elementor p). */
	.elementor-element-96af65f p { margin-bottom: 3rem !important; }
}

/* ===================== Bancos Aliados (#bancos-aliados) → Figma 1:286 =====================
   5 logos: 3 en la fila superior (BDV / Mercantil / BBVA) + 2 en la inferior
   (Banco Plaza / Bancaribe). Tras quitar el 6º logo (seguromercantil), la fila 2
   queda con 2 columnas; centro las columnas de cada fila interior para que los 2
   logos de abajo queden centrados (y no alineados a la izquierda). */
#bancos-aliados .elementor-inner-section > .elementor-container {
	justify-content: center;
	align-items: center;
}

/* ===================== Nuestras Tiendas (#tiendas-nacional) → Figma 1:300 =====================
   Detalles ajustados al Figma:
   (1) Iconos de la lista en CUADRADO REDONDEADO (14px), no círculo: caja 48px,
       fondo teal #3AADCA al 10% + glifo teal 24px (Figma node 1:317).
   (2) Mapa de Google EN VIVO con esquinas redondeadas (16px). */

/* (1) Iconos de la lista (Presencia / Tiendas / Cobertura) */
#tiendas-nacional .elementor-icon-list-items .elementor-icon-list-item {
	align-items: center;
}
#tiendas-nacional .elementor-icon-list-items .elementor-icon-list-icon {
	width: 48px !important;
	height: 48px !important;
	min-width: 48px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	margin-right: 16px;
	background-color: rgba(58, 173, 202, 0.1) !important;
	border-radius: 14px !important;
}
#tiendas-nacional .elementor-icon-list-icon svg,
#tiendas-nacional .elementor-icon-list-icon i {
	width: 24px;
	height: 24px;
	font-size: 24px;
	line-height: 1;
	fill: #3AADCA !important;
	color: #3AADCA !important;
}

/* (2) Mapa de Google: esquinas redondeadas (se mantiene en vivo/interactivo) */
#tiendas-nacional .elementor-widget-google_maps .elementor-widget-container {
	border-radius: 16px;
	overflow: hidden;
}
#tiendas-nacional .elementor-widget-google_maps iframe {
	border-radius: 16px;
}

/* (3) "+86 tiendas" (widget Counter) — se renderizaba MAL: una regla global
   `.elementor-counter{ height:26px !important; align-items:anchor-center !important;
   justify-content:center }` RECORTABA el texto de 48-60px y lo desalineaba.
   Lo corregimos solo en esta sección y lo igualamos al heading "a nivel nacional."
   (mismo tamaño/peso/interlineado) pero en cian, para que se lea como un solo título.
   DOM del counter: [.elementor-counter-title "tiendas"][.elementor-counter-number-wrapper "+86"]
   -> con row-reverse se muestra "+86 tiendas" y con flex-end queda pegado a la IZQUIERDA. */
#tiendas-nacional .elementor-widget-counter .elementor-counter {
	display: flex !important;
	flex-direction: row-reverse !important;
	justify-content: flex-end !important;   /* row-reverse: flex-end = izquierda */
	align-items: baseline !important;
	height: auto !important;
	gap: 14px;
}
#tiendas-nacional .elementor-counter-number-wrapper,
#tiendas-nacional .elementor-counter-number-prefix,
#tiendas-nacional .elementor-counter-number,
#tiendas-nacional .elementor-counter-title {
	font-size: 60px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: #3AADCA !important;
}
@media (max-width: 1024px) {
	#tiendas-nacional .elementor-counter-number-wrapper,
	#tiendas-nacional .elementor-counter-number-prefix,
	#tiendas-nacional .elementor-counter-number,
	#tiendas-nacional .elementor-counter-title { font-size: 48px !important; }
}
@media (max-width: 767px) {
	/* Título "+86 tiendas a nivel nacional." centrado en móvil. */
	/* Widget a 100% + texto centrado → el bloque "+86 tiendas" se centra. */
	#tiendas-nacional .elementor-element-5e56f18,
	#tiendas-nacional .elementor-widget-counter {
		width: 100% !important;
		max-width: 100% !important;
		text-align: center !important;
	}
	/* inline-flex: el counter se encoge al contenido → "+86" y "tiendas" JUNTOS
	   (no separados a los extremos), y el text-align del widget los centra. */
	#tiendas-nacional .elementor-widget-counter .elementor-counter {
		display: inline-flex !important;
		width: auto !important;
		justify-content: center !important;
		gap: 10px !important;
		overflow: visible !important;               /* el "+" no se recorta */
	}
	#tiendas-nacional .elementor-counter-number-wrapper { overflow: visible !important; }
	.elementor-element-0814a10 .elementor-heading-title { text-align: center !important; }
	#tiendas-nacional .elementor-counter-number-wrapper,
	#tiendas-nacional .elementor-counter-number-prefix,
	#tiendas-nacional .elementor-counter-number,
	#tiendas-nacional .elementor-counter-title { font-size: 30px !important; }

	/* Botón "Ver todas las tiendas" centrado. */
	#tiendas-nacional .elementor-element-8dbab91,
	#tiendas-nacional .elementor-element-8dbab91 .elementor-widget-container {
		text-align: center !important;
	}

	/* Card "+86 tiendas afiliadas": ancho completo (como el botón) y centrada,
	   para que no se vea pequeña con espacio sobrante a los lados. */
	#tiendas-nacional .elementor-element-6b920d8 {
		width: 100% !important;
		max-width: 100% !important;
		text-align: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	#tiendas-nacional .elementor-element-6b920d8 .elementor-icon-list-items {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center !important;
		align-items: center !important;
		gap: 6px;
	}
	#tiendas-nacional .elementor-element-6b920d8 .elementor-icon-list-item {
		justify-content: center !important;
		width: auto !important;
	}
}