/**
 * CrediTotal - Seccion "Domiciliacion de Pagos" (#domiciliacion) - pagina 1874.
 * Fuente Gilroy registrada en metodo-pago.css (todas cargan en la pagina 1874).
 */

/* ---- Tarjetas (¿Que es? / Beneficios) ---- */
#card-domiciliacion > .elementor-element-populated,
#card-beneficios > .elementor-element-populated {
	border-radius: 24px;
	padding: 34px;
	border-top: 1.53px solid transparent;
	height: 100%;
}
/* Gap entre las dos tarjetas (~32px) */
@media (min-width: 1025px) {
	#card-domiciliacion > .elementor-element-populated { margin-right: 16px; }
	#card-beneficios   > .elementor-element-populated { margin-left: 16px; }
}
@media (max-width: 1024px) {
	#card-domiciliacion > .elementor-element-populated { margin-bottom: 24px; }
}
#card-domiciliacion > .elementor-element-populated {
	background: linear-gradient(135deg, #F7F9FB 0%, #FAFBFC 33.33%, #FCFDFE 66.67%, #FFFFFF 100%);
	border-top-color: rgba(58, 173, 202, 0.10);
}
#card-beneficios > .elementor-element-populated {
	background: linear-gradient(135deg, #FFF4E6 0%, #FFF6EC 22.22%, #FFF9F1 44.44%, #FFFBF7 66.67%, #FFFEFC 88.89%, #FFFFFF 100%);
	border-top-color: rgba(245, 163, 2, 0.10);
}

/* ---- Caja del icono (64x64) ---- */
#card-domiciliacion .elementor-widget-image,
#card-beneficios .elementor-widget-image {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 24px 0;
}
#card-domiciliacion .elementor-widget-image { background: rgba(58, 173, 202, 0.10); }
#card-beneficios   .elementor-widget-image { background: rgba(245, 163, 2, 0.10); }
#card-domiciliacion .elementor-widget-image img,
#card-beneficios   .elementor-widget-image img {
	width: 32px;
	height: 32px;
	max-width: none;
}

/* ---- Lista de beneficios (icon-list): circulo ambar + check blanco ---- */
#card-beneficios .elementor-widget-icon-list .elementor-icon-list-items {
	margin: 0;
	padding: 0;
}
#card-beneficios .elementor-widget-icon-list .elementor-icon-list-item {
	align-items: flex-start;
	margin-bottom: 18px;
}
#card-beneficios .elementor-widget-icon-list .elementor-icon-list-text {
	line-height: 1.45;
}
#card-beneficios .elementor-widget-icon-list .elementor-icon-list-icon {
	background: #F5A302;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	min-width: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
	padding: 0;
}
#card-beneficios .elementor-widget-icon-list .elementor-icon-list-icon i,
#card-beneficios .elementor-widget-icon-list .elementor-icon-list-icon svg {
	color: #FFFFFF;
	fill: #FFFFFF;
	font-size: 12px;
	width: 12px;
	height: 12px;
}
#card-beneficios .elementor-widget-icon-list .elementor-icon-list-text {
	padding-left: 12px;
}

/* ---- Bancos afiliados (tarjeta gris) ---- */
#bancos-card > .elementor-element-populated {
	background: #F7F9FB;
	border-radius: 24px;
	padding: 48px;
}
/* Agrupar los logos hacia el centro (mas unidos) dentro de la tarjeta ancha */
#bancos-card .elementor-inner-section > .elementor-container {
	max-width: 580px;
	margin-left: auto;
	margin-right: auto;
}
#bancos-card .elementor-inner-section {
	margin-bottom: 14px !important;
}
#bancos-card .elementor-widget-image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
}
/* Altura uniforme => todos los logos al mismo tamano proporcional (sin deformar) */
#bancos-card .elementor-widget-image img {
	height: 40px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.65;
}

/* ---- Mi cuota vence: imagen redondeada con sombra sutil (como el Figma) ---- */
#micuota-img .elementor-widget-image img {
	border-radius: 24px;
	box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.20);
	width: 100%;
	height: auto;
}
/* Anchos del Figma: texto 592px (parrafo 568 = 592 - 24 inset der.) e imagen 592px,
   con el gap de 48px naturalmente entre ambas columnas (1232 = 592 + 48 + 592). */
@media (min-width: 1025px) {
	/* doble id para ganarle en especificidad a la regla anti-overflow
	   (#micuota-vence .elementor-widget-wrap{max-width:100%}) que apunta al mismo div */
	#micuota-vence #micuota-text > .elementor-element-populated {
		max-width: 592px;
	}
	#micuota-vence #micuota-text .elementor-widget-text-editor {
		padding-right: 24px;
	}
	#micuota-vence #micuota-img > .elementor-element-populated {
		max-width: 592px;
		margin-left: auto;
	}
}

/* ---- Anti-overflow horizontal (mismo patron que #metodo-pago) ----
   Las columnas de Elementor son flex-items con min-width:auto por defecto:
   no se encogen bajo el ancho de su contenido y desbordan en moviles.
   min-width:0 + max-width:100% permiten que se ajusten al viewport. */
#domiciliacion .elementor-column,
#bancos-afiliados .elementor-column,
#micuota-vence .elementor-column {
	min-width: 0;
	max-width: 100%;
}
#domiciliacion, #domiciliacion .elementor-widget-wrap,
#bancos-afiliados, #bancos-afiliados .elementor-widget-wrap,
#micuota-vence, #micuota-vence .elementor-widget-wrap {
	min-width: 0;
	max-width: 100%;
}
#domiciliacion img,
#bancos-afiliados img,
#micuota-vence img {
	max-width: 100%;
}

/* ---- Responsive ---- */
@media (max-width: 767px) {
	#card-domiciliacion > .elementor-element-populated,
	#card-beneficios > .elementor-element-populated {
		padding: 26px;
	}
	#bancos-card > .elementor-element-populated {
		padding: 28px 20px;
	}
	#bancos-card .elementor-inner-section > .elementor-container {
		max-width: 100%;
	}
	#bancos-card .elementor-widget-image {
		height: 44px;
	}
	#bancos-card .elementor-widget-image img {
		height: 32px;
		max-width: 130px;
	}
}