/**
 * CrediTotal - Secciones finales de la pagina 1874 "Como pagar":
 *   #pagos-adelantados, #fechas-penalizaciones, #reactivacion-cupo.
 * Fuente Gilroy registrada en metodo-pago.css. Contenido editable desde Elementor.
 */

/* =========================================================
   A) PAGOS ADELANTADOS Y ABONOS  (#pagos-adelantados)
   Figma 50:808: seccion gris #F7F9FB + 2 tarjetas BLANCAS con
   sombra, icono outline en caja tintada 64px, titulo 20/28,
   parrafos 16/21.
   ========================================================= */
#pagos-adelantados {
	background: #F7F9FB;
}

#card-adelanto>.elementor-element-populated,
#card-abonos>.elementor-element-populated {
	background: #FFFFFF;
	border-radius: 16px;
	padding: 32px;
	height: 100%;
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.10);
}

@media (min-width: 1025px) {
	#card-adelanto>.elementor-element-populated {
		margin-right: 16px;
	}

	#card-abonos>.elementor-element-populated {
		margin-left: 16px;
	}
}

@media (max-width: 1024px) {
	#card-adelanto>.elementor-element-populated {
		margin-bottom: 24px;
	}
}

/* Caja del icono (64x64, tintada). El widget icon trae un FA solido que NO es
   el del diseño: se oculta y el icono outline del Figma va como background
   (assets/img/como-pagar/icono-billetera.svg / icono-tienda.svg). */
#card-adelanto .elementor-widget-icon .elementor-icon,
#card-abonos .elementor-widget-icon .elementor-icon {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

#card-adelanto .elementor-widget-icon .elementor-icon svg,
#card-adelanto .elementor-widget-icon .elementor-icon i,
#card-abonos .elementor-widget-icon .elementor-icon svg,
#card-abonos .elementor-widget-icon .elementor-icon i {
	display: none;
}

#card-adelanto .elementor-widget-icon .elementor-icon {
	background: rgba(58, 173, 202, 0.10) url('../img/como-pagar/icono-billetera.svg') no-repeat center / 32px 32px;
}

#card-abonos .elementor-widget-icon .elementor-icon {
	background: rgba(245, 163, 2, 0.10) url('../img/como-pagar/icono-tienda.svg') no-repeat center / 32px 32px;
}

#card-adelanto .elementor-widget-icon,
#card-abonos .elementor-widget-icon,
#card-adelanto .elementor-widget-icon .elementor-icon-wrapper,
#card-abonos .elementor-widget-icon .elementor-icon-wrapper {
	text-align: left; /* Figma: caja del icono pegada a la izquierda (x=32) */
}

#card-adelanto .elementor-widget-icon,
#card-abonos .elementor-widget-icon {
	margin: 0 0 24px;
}

/* Titulo de tarjeta: Figma 20/28 #1F2933 (Gilroy-Heavy via regla global h3) */
#card-adelanto .elementor-widget-heading,
#card-abonos .elementor-widget-heading {
	margin: 0 0 16px;
}

#card-adelanto .elementor-widget-heading .elementor-heading-title,
#card-abonos .elementor-widget-heading .elementor-heading-title {
	font-size: 20px;
	line-height: 28px;
	color: #1F2933;
}

/* Parrafos: Figma Gilroy-Regular 16/21 #1F2933, linea en blanco = 21px */
#card-adelanto .elementor-widget-text-editor,
#card-abonos .elementor-widget-text-editor {
	font-size: 16px;
	line-height: 21px;
	color: #1F2933;
}

#card-adelanto .elementor-widget-text-editor p,
#card-abonos .elementor-widget-text-editor p {
	margin: 0 0 21px;
}

#card-adelanto .elementor-widget-text-editor p:last-child,
#card-abonos .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* ---- Anti-overflow horizontal ---- */
#pagos-adelantados .elementor-column {
	min-width: 0;
	max-width: 100%;
}

#pagos-adelantados,
#pagos-adelantados .elementor-widget-wrap {
	min-width: 0;
	max-width: 100%;
}

@media (max-width: 767px) {

	#card-adelanto>.elementor-element-populated,
	#card-abonos>.elementor-element-populated {
		padding: 26px;
	}
}

/* =========================================================
   B) FECHAS Y PENALIZACIONES  (#fechas-penalizaciones)
   ========================================================= */
/* Callout (acciones inmediatas): caja crema con borde izq. ambar */
#fechas-callout>.elementor-element-populated {
	background: #FFF4E6;
	border-left: 4px solid #F5A302;
	border-radius: 16px 16px 16px 16px;
	padding: 30px 40px;
}

#fechas-callout .elementor-heading-title {
	display: flex;
	align-items: center;
}

#fechas-callout .elementor-widget-text-editor ol {
	list-style: decimal;
	padding-left: 1.35em;
	margin: 12px 0 0;
}

#fechas-callout .elementor-widget-text-editor li {
	margin-bottom: 10px;
}

#fechas-callout .elementor-widget-text-editor li:last-child {
	margin-bottom: 0;
}

/* Tabla de Penalizaciones (widget HTML .ct-pen-table) */
.ct-pen-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 16px 36px -22px rgba(15, 23, 42, 0.20);
}

.ct-pen-table td {
	padding: 18px 32px;
	font-family: 'Gilroy-Regular';
	font-size: 16px;
	color: #1F2933;
}

.ct-pen-table .ct-pen-title td {
	background: linear-gradient(90deg, #3AADCA 0%, #2E94AE 100%);
	color: #FFFFFF;
	text-align: center;
	font-family: 'Gilroy-Heavy';
	font-size: 20px;
	padding: 20px;
}

.ct-pen-table .ct-pen-head td {
	background: #EEF2F6;
	font-family: 'Gilroy-Heavy';
}

.ct-pen-table .ct-zebra td {
	background: #F7F9FB;
}

.ct-pen-table .ct-amount {
	color: #F5A302;
	font-family: 'Gilroy-Heavy';
}

/* Nota final (caja crema) — Figma 50:869: icono triángulo outline 24px en
   columna izquierda + TODO el texto a su derecha (gap 16). El icono va por CSS
   (decorativo) para que el contenido del widget siga siendo texto plano
   editable en Elementor. */
#fechas-nota>.elementor-element-populated {
	background: #FFF4E6;
	border-radius: 16px;
	padding: 24px;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	/* Elementor trae flex-wrap:wrap en el widget-wrap y width:100% en los
	   widgets → sin esto el texto saltaba DEBAJO del icono. */
	flex-wrap: nowrap;
}

#fechas-nota>.elementor-element-populated::before {
	content: '';
	flex: 0 0 24px;
	height: 24px;
	margin-top: 1px; /* centrado óptico con la primera línea (line-height 26) */
	background: url('../img/mora/icono-importante.svg') no-repeat center / contain;
}

#fechas-nota .elementor-widget-text-editor {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	/* Figma 50:875: Gilroy-Regular 16px / line-height 26 / #1F2933 */
	font-size: 16px;
	line-height: 26px;
	color: #1F2933;
}

#fechas-nota .elementor-widget-text-editor p {
	margin: 0 0 6px;
}

#fechas-nota .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* ---- Anti-overflow ---- */
#fechas-penalizaciones .elementor-column {
	min-width: 0;
	max-width: 100%;
}

#fechas-penalizaciones,
#fechas-penalizaciones .elementor-widget-wrap {
	min-width: 0;
	max-width: 100%;
}

@media (max-width: 767px) {
	#fechas-callout>.elementor-element-populated {
		padding: 24px 22px;
	}

	.ct-pen-table td {
		padding: 14px 16px;
		font-size: 14px;
	}

	.ct-pen-table .ct-pen-title td {
		font-size: 17px;
	}

	#fechas-nota>.elementor-element-populated {
		padding: 20px 18px;
	}
}

/* =========================================================
   C) REACTIVACION DEL CUPO  (#reactivacion-cupo)
   Imagen izquierda (recorte vertical) + texto derecha.
   ========================================================= */
/* doble id para ganarle en especificidad a la regla anti-overflow */
@media (min-width: 1025px) {
	#reactivacion-cupo #reactivacion-text > .elementor-element-populated {
		max-width: 592px;
		margin-left: auto;
	}
	#reactivacion-cupo #reactivacion-img > .elementor-element-populated {
		max-width: 470px;
	}
}
#reactivacion-img .elementor-widget-image img {
	width: 100%;
	aspect-ratio: 0.92;
	object-fit: cover;
	object-position: center;
	border-radius: 20px;
	box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.20);
}
/* Subtitulos (Si tu atraso es...) y nota Recuerda */
#reactivacion-text .elementor-widget-text-editor p { margin: 0; }

/* ---- Anti-overflow ---- */
#reactivacion-cupo .elementor-column { min-width: 0; max-width: 100%; }
#reactivacion-cupo, #reactivacion-cupo .elementor-widget-wrap { min-width: 0; max-width: 100%; }

@media (max-width: 1024px) {
	/* al apilar: imagen primero pero no gigante, centrada */
	#reactivacion-img > .elementor-element-populated { max-width: 470px; margin: 0 auto 24px; }
	#reactivacion-img .elementor-widget-image img { aspect-ratio: 1.3; }
}