/**
 * CrediTotal - Seccion "Metodos de pago" (#metodo-pago).
 * Diseno de las tarjetas (fondo gris, caja ambar con logo, gaps) + fuente Gilroy.
 * El contenido (logos, titulos, descripciones) se edita desde Elementor.
 */

/* ---- Fuente Gilroy (ruta relativa: themes/xmoze-child/assets/css -> wp-content/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;
}

/* ---- Subtítulo "Nuestros Métodos de Pago son:" en peso NORMAL (Figma), no negrita ----
   Es el 2º heading consecutivo del bloque de cabecera. Lo targeteamos por hermano
   adyacente (.elementor-widget-heading + .elementor-widget-heading) para que sea robusto:
   NO depende del tag (h2/h3/h4) ni del element-id, así funciona aunque la BD del hosting
   tenga el subtítulo como otro nivel de heading. !important + ID le ganan a la regla
   global `h1,h2,h3,h5{font-family:'Gilroy Heavy'!important}`. */
#metodo-pago .elementor-widget-heading + .elementor-widget-heading .elementor-heading-title {
	font-family: 'Gilroy-Regular', sans-serif !important;
	font-weight: 400 !important;
}

/* ---- Tarjetas (filas con CSS id metodo-row-1 / metodo-row-2) ----
   Altura uniforme ~354px (como el Figma) + gaps de 32px. */
#metodo-row-1 .elementor-column > .elementor-element-populated,
#metodo-row-2 .elementor-column > .elementor-element-populated {
	background-color: #F7F9FB;
	border-radius: 16px;
	padding: 32px;
	margin: 16px;                /* 32px de gap entre tarjetas */
	min-height: 354px;           /* todas las tarjetas con la misma altura */
	height: calc(100% - 32px);   /* iguala alturas dentro de cada fila */
}

@media (max-width: 1024px) {
	#metodo-row-1 .elementor-column > .elementor-element-populated,
	#metodo-row-2 .elementor-column > .elementor-element-populated {
		padding: 28px;
		margin: 12px;
		min-height: 340px;
		height: calc(100% - 24px);
	}
}
@media (max-width: 767px) {
	#metodo-row-1 .elementor-column > .elementor-element-populated,
	#metodo-row-2 .elementor-column > .elementor-element-populated {
		padding: 24px;
		margin: 8px 0;
		min-height: 0;           /* apiladas: que se ajusten al contenido */
		height: auto;
	}
}

/* ---- Caja ambar con el logo/icono (el widget de imagen ES la caja) ---- */
#metodo-row-1 .elementor-widget-image,
#metodo-row-2 .elementor-widget-image {
	background-color: rgba(245, 163, 2, 0.10);
	border-radius: 16px;
	width: 240px;
	max-width: 100%;
	height: 64px;
	margin: 0 auto 24px auto;   /* centrada en la tarjeta */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
}
#metodo-row-1 .elementor-widget-image img,
#metodo-row-2 .elementor-widget-image img {
	width: auto;
	max-height: 40px;
	max-width: 100%;
	min-width: 0;          /* el img es flex-item: que NO imponga su ancho nativo */
	flex-shrink: 1;
	object-fit: contain;
}



/* ---- Anti-overflow horizontal (flex items deben poder encogerse) ---- */
#metodo-pago .elementor-column,
#metodo-row-1 .elementor-column,
#metodo-row-2 .elementor-column {
	min-width: 0;
	max-width: 100%;
}
#metodo-pago,
#metodo-pago .elementor-widget-wrap,
#metodo-pago .elementor-widget-text-editor,
#metodo-pago .elementor-widget-heading {
	max-width: 100%;
	min-width: 0;
}

@media (max-width: 767px) {
	/* la caja ambar no debe forzar un ancho minimo en pantallas angostas */
	#metodo-row-1 .elementor-widget-image,
	#metodo-row-2 .elementor-widget-image {
		width: 100%;
		max-width: 240px;
	}
}

/* ============================================================
   Carrusel autoplay de los Métodos de pago en MÓVIL (≤767px).
   Las clases .cp-car-* las añade como-pagar.js solo en móvil
   (fusiona las 2 filas en un track de 6 y rota el DOM en loop).
   Mismo patrón/estética que el carrusel de Impulsa tu Negocio.
   ============================================================ */
@media ( max-width: 767px ) {
	.cp-car-vp { overflow: hidden; position: relative; }
	.cp-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;
	}
	.cp-car-slide {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	/* la fila 2 queda vacía mientras el carrusel está activo */
	.cp-car-row-oculta { display: none !important; }
	/* puntos indicadores debajo del carrusel */
	.cp-car-dots {
		display: flex; justify-content: center; align-items: center;
		gap: 8px; margin-top: 22px; padding: 0;
	}
	.cp-car-dot {
		width: 8px; height: 8px; border-radius: 50%;
		background: rgba( 31, 41, 51, 0.2 );
		transition: width .3s ease, background .3s ease;
	}
	.cp-car-dot.is-active { width: 22px; border-radius: 4px; background: #3AADCA; }
}