/**
 * CrediTotal — Página "Políticas de Pago y Mora" (ID 12444, slug politicas-de-pago-y-mora).
 * Diseño: Figma node 155:133. Maqueta editable en Elementor (banner + un widget Text Editor
 * con el documento) + este CSS de presentación.
 *
 * Componentes: callout (cream/ámbar), tabla de penalizaciones (header gradiente cian),
 * nota "Importante" y sección "Reactivación del Cupo" (texto + imagen).
 * Assets en assets/img/mora/ (extraídos del Figma).
 */

body.ct-mora { overflow-x: hidden; }

/* ====== Fuente Gilroy (woff2 en 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;
}
/* El proyecto solo trae Heavy + Regular: los textos "Bold" del Figma usan Heavy. */

/* ============================================================
   Banner hero (#mora-banner): banda cian full-bleed, título centrado.
   Figma: fill #3AADCA, alto 298, título Gilroy-Heavy 60/65 blanco.
   ============================================================ */
#mora-banner { background-color: #3AADCA; }
#mora-banner > .elementor-container {
	min-height: 298px;
	align-content: center;
	align-items: center;
}
#mora-banner-title,
#mora-banner .elementor-heading-title {
	font-family: 'Gilroy-Heavy', sans-serif;
	font-weight: 400;
	font-size: clamp(34px, 6vw, 60px);
	line-height: 1.08;
	text-align: center;
	color: #FFFFFF;
	margin: 0;
}

/* ============================================================
   Documento (#mora-doc): columna ~1140px centrada.
   ============================================================ */
#mora-content > .elementor-container { justify-content: center; }
#mora-doc {
	max-width: 1168px;
	margin: 0 auto;
	padding: clamp(40px, 5vw, 70px) 20px clamp(56px, 8vw, 90px);
}
#mora-doc .elementor-widget-container { color: #1F2933; }

/* ---- Callout cream/ámbar (¿Qué sucede si me atraso?) ---- */
#mora-doc .mora-callout {
	display: flex;
	gap: 16px;
	background-color: #FFF4E6;
	border-left: 4px solid #F5A302;
	border-radius: 16px;
	padding: clamp(20px, 3vw, 32px);
	margin: 0 0 32px;
}
#mora-doc .mora-callout .mora-ico {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	margin-top: 2px;
}
#mora-doc .mora-callout h2,
#mora-doc .mora-callout h3 {
	font-family: 'Gilroy-Heavy', sans-serif;
	font-weight: 400;
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1.2;
	color: #1F2933;
	margin: 0 0 12px;
}
#mora-doc .mora-callout p {
	font-family: 'Gilroy-Regular', sans-serif;
	font-size: 18px;
	line-height: 26px;
	color: #1F2933;
	margin: 0;
}
#mora-doc .mora-callout p + p { margin-top: 16px; }

/* ---- Tabla de penalizaciones ---- */
#mora-doc .mora-table {
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 4px 6px -4px rgba(0,0,0,.1), 0 10px 15px -3px rgba(0,0,0,.1);
	margin: 0 0 32px;
	background-color: #F7F9FB;
}
#mora-doc .mora-table-title {
	background: linear-gradient(90deg, #3AADCA 0%, #2B8DAF 100%);
	color: #FFFFFF;
	font-family: 'Gilroy-Heavy', sans-serif;
	font-size: clamp(20px, 2.4vw, 24px);
	line-height: 32px;
	text-align: center;
	padding: 24px 16px;
}
#mora-doc .mora-table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: transparent;
	margin: 0;
}
#mora-doc .mora-table th {
	background-color: #F7F9FB;
	font-family: 'Gilroy-Heavy', sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 28px;
	color: #1F2933;
	text-align: left;
	padding: 20px 32px;
}
#mora-doc .mora-table td {
	font-family: 'Gilroy-Regular', sans-serif;
	font-size: 17px;
	line-height: 26px;
	color: #1F2933;
	padding: 26px 32px;
}
/* Zebra: fila 1 blanca, fila 2 gris (igual al header y al fondo del contenedor). */
#mora-doc .mora-table tbody tr:nth-child(odd) td { background-color: #FFFFFF; }
#mora-doc .mora-table tbody tr:nth-child(even) td { background-color: #F7F9FB; }
/* Montos de penalidad en ámbar. */
#mora-doc .mora-table td:last-child { color: #F5A302; }

/* ---- Nota "Importante": caja cream redondeada (igual al callout) ---- */
#mora-doc .mora-note {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background-color: #FFF4E6;
	border-radius: 16px;
	padding: 24px 28px;
	margin: 0 0 56px;
}
#mora-doc .mora-note .mora-ico {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin-top: 2px;
}
#mora-doc .mora-note p {
	font-family: 'Gilroy-Regular', sans-serif;
	font-size: 16px;
	line-height: 26px;
	color: #1F2933;
	margin: 0;
}
#mora-doc .mora-note strong { font-family: 'Gilroy-Heavy', sans-serif; font-weight: 600; }

/* ---- Sección "Reactivación del Cupo": banda gris full-bleed, imagen izq / texto der ---- */
#mora-doc .mora-react-band {
	background-color: #F7F9FB;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: clamp(36px, 5vw, 64px) max(20px, calc(50vw - 629px));
}
#mora-doc .mora-react {
	display: grid;
	grid-template-columns: minmax(0, 470px) 1fr;
	gap: clamp(40px, 9vw, 132px);
	align-items: center;
	max-width: 1258px;
	margin: 0 auto;
}
#mora-doc .mora-react h2 {
	font-family: 'Gilroy-Heavy', sans-serif;
	font-weight: 400;
	font-size: clamp(32px, 4.5vw, 48px);
	line-height: 1.1;
	color: #1F2933;
	margin: 0 0 24px;
}
#mora-doc .mora-react h2 .cy,
#mora-doc .mora-react .react-case .cy { color: #3AADCA; }
#mora-doc .mora-react .react-case { margin-bottom: 24px; }
#mora-doc .mora-react .react-case h3 {
	font-family: 'Gilroy-Heavy', sans-serif;
	font-weight: 400;
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.17;
	color: #1F2933;
	margin: 0 0 8px;
}
#mora-doc .mora-react .react-case p {
	font-family: 'Gilroy-Regular', sans-serif;
	font-size: 18px;
	line-height: 29px;
	color: #1F2933;
	margin: 0;
}
#mora-doc .mora-react img {
	width: 100%;
	height: auto;
	border-radius: 20px;
	display: block;
}

/* ====== Responsive ====== */
@media ( max-width: 1024px ) {
	#mora-doc .mora-react { grid-template-columns: 1fr; }
}
@media ( max-width: 767px ) {
	#mora-banner > .elementor-container { min-height: 200px; }
	#mora-doc { padding-left: 18px; padding-right: 18px; }
	#mora-doc .mora-table th,
	#mora-doc .mora-table td { padding: 16px 18px; }
}