/**
 * CrediTotal — Página "Planes y Servicios" (ID 12646, slug planes-y-servicios).
 * Diseño: Figma node 29:769. Maqueta editable en Elementor + este CSS de presentación.
 *
 * Convenciones del proyecto:
 *  - Contenido cap ~1440 centrado, tipografía fluida con clamp(), breakpoints 1024/767.
 *  - Imágenes .webp (iconos SVG). Anti-overflow: min-width:0; max-width:100%.
 *  - Espaciado EXACTO del Figma (margin del widget, no defaults de Elementor).
 *  - Secciones con cards: en móvil (≤767) se vuelven carrusel horizontal autoplay
 *    (clases .ct-car-* añadidas por planes.js).
 */

body.page-id-12646 { overflow-x: hidden; }

/* El tema/Elementor pisa el border-radius de los <img> a 0 (con overflow:clip).
   Se restituye el radio de las fotos con especificidad fuerte. */
#plseguro-media .seg-img,
#plcamino-img .camino-img,
#plporque-img .porque-img { border-radius: 24px !important; }

/* Saltos de línea que replican el wrap EXACTO del Figma (se ocultan en móvil
   para que el texto refluya). */
.pl-br { display: inline; }
@media ( max-width: 767px ) { .pl-br { display: none; } }

/* ====== 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;
}

/* ============================================================
   Banner hero (#plbanner): imagen full-bleed pegada al header.
   Figma node 29:789 (imagen horneada 2560×504).
   ============================================================ */
#plbanner {
	width: 100vw; max-width: 100vw;
	margin-left: 50%; transform: translateX( -50% );
	padding-top: 72px !important;     /* alto del header */
	padding-bottom: 0 !important;
	overflow: hidden;
}
#plbanner > .elementor-container { max-width: 100%; padding-left: 0; padding-right: 0; }
#plbanner .elementor-column > .elementor-element-populated,
#plbanner .elementor-widget-wrap,
#plbanner .elementor-widget-html .elementor-widget-container { padding: 0; }
/* El banner es un <picture>: en desktop el completo (2560), en ≤767 una imagen
   ya recortada para móvil (texto + pareja). Solo se muestra a ancho completo. */
#plbanner .plbanner-pic,
#plbanner .plbanner-pic img { display: block; width: 100%; height: auto; margin: 0; }
@media ( max-width: 1024px ) { #plbanner { padding-top: 64px !important; } }
@media ( max-width: 767px )  { #plbanner { padding-top: 56px !important; } }

/* ============================================================
   S1 — Planes de financiamiento (#planes): banda blanca,
   cabecera centrada + 5 cards (3+2) con gradiente por plan.
   Figma node 29:791.
   ============================================================ */
#planes {
	width: 100vw; max-width: 100vw;
	margin-left: 50%; transform: translateX( -50% );
	background: #fff;
	padding: clamp( 56px, 7vw, 80px ) 0 clamp( 56px, 7vw, 80px );
	overflow: hidden;
}
#planes > .elementor-container { max-width: 1304px; padding-left: 24px; padding-right: 24px; }
#planes .elementor-column > .elementor-element-populated { padding: 0; }

/* Cabecera centrada (eyebrow 30px + H2 48px split teal) */
/* Cabecera → cards: 40px de separación (gana el margen propio del widget Elementor). */
#planes #planes-head { margin-bottom: 40px !important; }
.planes-eyebrow {
	margin: 0 0 8px; text-align: center;
	font-family: 'Gilroy-Regular', sans-serif;
	font-size: 30px; line-height: 1.1; color: #1F2933;
}
.planes-title {
	margin: 0; text-align: center;
	font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
	font-size: 48px; line-height: 1.05; color: #1F2933;
}
.planes-title .t { color: #3AADCA; }

/* Grid de 5 cards (3+2 centrado) */
.planes-grid {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 32px; max-width: 1232px; margin: 0 auto;
}
.plan-card {
	width: 389px; max-width: 100%;
	border: 1.5px solid #f3f4f6; border-radius: 24px;
	background: #fff; overflow: hidden;
	box-shadow: 0 10px 15px -3px rgba( 0,0,0,0.1 ), 0 4px 6px -4px rgba( 0,0,0,0.1 );
	display: flex; flex-direction: column;
}
/* Plata = card destacada (sombra fuerte, sin borde) */
.plan-card.plan-plata {
	border: none;
	box-shadow: 0 25px 50px -12px rgba( 0,0,0,0.25 );
}
.plan-head {
	padding: 32px; background: var( --grad );
}
.plan-head h3 {
	margin: 0; text-align: center;
	font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
	font-size: 30px; line-height: 1.2; color: #fff;
}
.plan-body { padding: 32px; display: flex; flex-direction: column; gap: 32px; flex: 1; }
.plan-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.plan-feats li { display: flex; align-items: center; gap: 12px; }
.plan-check {
	flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
	background: rgba( var( --plan-rgb ), 0.12 ); color: var( --plan );
	display: flex; align-items: center; justify-content: center;
}
.plan-check svg { width: 15px; height: 15px; display: block; }
.plan-feats li span:last-child {
	font-family: 'Gilroy-Regular', sans-serif; font-size: 18px; line-height: 1.33; color: #1F2933;
}
.plan-desc {
	margin: 0; font-family: 'Gilroy-Regular', sans-serif;
	font-size: 18px; line-height: 1.17; color: #1F2933;
}
/* Paletas por plan (gradiente de cabecera + color de los checks) */
.plan-bronce   { --plan: #b8732d; --plan-rgb: 205,127,50;  --grad: linear-gradient( 90deg, #cd7f32 0%, #b8732d 50%, #8b5e2b 100% ); }
.plan-plata    { --plan: #8e9ead; --plan-rgb: 142,158,173; --grad: linear-gradient( 90deg, #a8b4c0 0%, #8e9ead 50%, #6b7d8d 100% ); }
.plan-oro      { --plan: #cf8a00; --plan-rgb: 232,168,0;   --grad: linear-gradient( 90deg, #ecc52c 0%, #cf8a00 50%, #dfa01a 100% ); }
.plan-titanium { --plan: #3aadca; --plan-rgb: 58,173,202;  --grad: linear-gradient( 90deg, #cbf5ff 0%, #58cfec 26%, #3aadca 50%, #58cfec 74%, #cbf5ff 100% ); }
.plan-diamante { --plan: #16213e; --plan-rgb: 22,33,62;    --grad: linear-gradient( 90deg, #1a1a2e 0%, #16213e 50%, #0f3460 100% ); }
.plan-titanium .plan-head h3 { color: #fff; }

@media ( max-width: 1024px ) {
	.planes-grid { gap: 20px; }
	.plan-card { width: 320px; }
}

/* ============================================================
   Carrusel autoplay horizontal en MÓVIL (≤767) — genérico.
   Clases .ct-car-* añadidas por planes.js. Transición 1.5s.
   ============================================================ */
@media ( max-width: 767px ) {
	.ct-car-vp { overflow: hidden; position: relative; }
	.ct-car-track {
		display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important;
		/* flex-start: si no, hereda justify-content:center del grid y centra el
		   contenido desbordado (slides al 500%) -> se ve el slide del medio, no el 1. */
		justify-content: flex-start !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;
	}
	.ct-car-slide { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
	.ct-car-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 22px; padding: 0; }
	.ct-car-dot {
		width: 8px; height: 8px; border-radius: 50%;
		background: rgba( 31, 41, 51, 0.2 ); transition: width .3s ease, background .3s ease;
	}
	.ct-car-dot.is-active { width: 22px; border-radius: 4px; background: #3AADCA; }

	/* S1 Planes en carrusel: cada card ocupa el ancho */
	#planes .planes-grid { gap: 0; }
	#planes .plan-card { width: 100%; }
}

/* ============================================================
   S2 — "El seguro perfecto para ti" (#plseguro): texto izq + foto der.
   Figma node 1442:349.
   ============================================================ */
#plseguro {
	width: 100vw; max-width: 100vw;
	margin-left: 50%; transform: translateX( -50% );
	background: #fff;
	padding: clamp( 64px, 9vw, 128px ) 0 clamp( 56px, 7vw, 88px );
	overflow: hidden;
}
#plseguro > .elementor-container {
	max-width: 1304px; padding-left: 24px; padding-right: 24px;
	align-items: center;
}
#plseguro .elementor-column > .elementor-element-populated { padding: 0; }
#plseguro #plseguro-left > .elementor-element-populated { padding: 0 clamp( 0px, 3vw, 40px ) 0 0; }
#plseguro #plseguro-right > .elementor-element-populated { padding: 0 0 0 clamp( 0px, 3vw, 40px ); }

.seg-pill {
	display: inline-block; margin-bottom: 24px;
	background: rgba( 58,173,202, 0.1 ); color: #3AADCA;
	font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
	font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
	padding: 8px 16px; border-radius: 100px;
}
.seg-h1 {
	margin: 0 0 28px; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
	font-size: 48px; line-height: 1.25; color: #1F2933;
}
.seg-h1 .t { color: #3AADCA; }
.seg-sub {
	margin: 0 0 24px; font-family: 'Gilroy-Regular', sans-serif;
	font-size: 30px; line-height: 1.17; color: #1F2933;
}
.seg-quote {
	margin: 0 0 28px; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
	font-size: 18px; line-height: 1.55; color: #3AADCA;
}
.seg-box { border-left: 3.85px solid #f5a302; padding-left: 28px; }
.seg-box-t { margin: 0 0 8px; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: 16px; line-height: 1.4; color: #1F2933; }
.seg-box-p { margin: 0; font-family: 'Gilroy-Regular', sans-serif; font-size: 16px; line-height: 1.625; color: #1F2933; }

/* Media derecha: foto con glow + badge flotante */
.seg-media { position: relative; }
.seg-glow { position: absolute; inset: -16px; background: rgba( 58,173,202, 0.1 ); filter: blur( 40px ); border-radius: 24px; z-index: 0; }
.seg-img {
	position: relative; z-index: 1; display: block;
	width: 100%; aspect-ratio: 576 / 432; object-fit: cover;
	border-radius: 24px; box-shadow: 0 25px 50px -12px rgba( 0,0,0,0.25 );
}
.seg-badge {
	position: absolute; z-index: 2; left: -22px; bottom: -28px;
	background: #fff; border-radius: 16px; padding: 16px 20px;
	display: flex; align-items: center; gap: 12px;
	box-shadow: 0 20px 12.5px rgba( 0,0,0,0.1 ), 0 8px 5px rgba( 0,0,0,0.1 );
}
.seg-badge-ic {
	flex: 0 0 40px; width: 40px; height: 40px; border-radius: 14px;
	background: rgba( 245,163,2, 0.15 ); color: #F5A302;
	display: flex; align-items: center; justify-content: center;
}
.seg-badge-ic svg { width: 20px; height: 20px; display: block; }
.seg-badge-txt { display: flex; flex-direction: column; line-height: 1.2; }
.seg-badge-txt b { font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: 14px; color: #000; }
.seg-badge-txt i { font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: 12px; font-style: normal; color: rgba( 31,41,51, 0.6 ); }

@media ( max-width: 767px ) {
	#plseguro .elementor-column { width: 100% !important; }
	#plseguro #plseguro-left > .elementor-element-populated,
	#plseguro #plseguro-right > .elementor-element-populated { padding: 0; }
	#plseguro-right { margin-top: 48px; }
	.seg-badge { left: 12px; }
}

/* ============================================================
   S3 — "Protección Personal y Familiar" (#plprot): banda oscura,
   header centrado + 3 cards (carrusel en móvil) + barra CTA.
   Figma node 1442:378.
   ============================================================ */
#plprot {
	width: 100vw; max-width: 100vw;
	margin-left: 50%; transform: translateX( -50% );
	background: #1F2933;
	padding: clamp( 56px, 7vw, 80px ) 0;
	overflow: hidden;
}
#plprot > .elementor-container { max-width: 1304px; padding-left: 24px; padding-right: 24px; }
#plprot .elementor-column > .elementor-element-populated { padding: 0; }

#plprot-head { text-align: center; margin-bottom: clamp( 32px, 4vw, 48px ); }
.prot-eyebrow {
	margin: 0 0 12px; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
	font-size: 14px; letter-spacing: 1.4px; text-transform: uppercase; color: #3AADCA;
}
.prot-title {
	margin: 0 0 16px; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800;
	font-size: 48px; line-height: 1.25; color: #fff;
}
.prot-sub {
	margin: 0 auto; max-width: 672px;
	font-family: 'Gilroy-Regular', sans-serif; font-size: 18px; line-height: 1.62; color: rgba( 255,255,255, 0.7 );
}

.prot-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.prot-card {
	position: relative; width: 394px; max-width: 100%;
	background: #fff; border-radius: 16px; overflow: hidden;
	padding: 40px 32px 24px; display: flex; flex-direction: column;
}
.prot-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: var( --acc ); }
.prot-vida, .prot-accid { --acc: #3AADCA; --acc-rgb: 58,173,202; }
.prot-funer { --acc: #F5A302; --acc-rgb: 245,163,2; }
.prot-ic {
	width: 56px; height: 56px; border-radius: 14px; margin-bottom: 16px;
	background: rgba( var( --acc-rgb ), 0.1 ); color: var( --acc );
	display: flex; align-items: center; justify-content: center;
}
.prot-ic svg { width: 26px; height: 26px; display: block; }
.prot-card h3 { margin: 0 0 12px; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: 24px; line-height: 1.33; color: #000; }
.prot-card p { margin: 0 0 20px; font-family: 'Gilroy-Regular', sans-serif; font-size: 16px; line-height: 1.625; color: rgba( 31,41,51, 0.7 ); letter-spacing: -0.3px; }
.prot-foot { margin-top: auto; border-top: 1px solid #f3f4f6; padding-top: 16px; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; color: #3AADCA; }

/* Barra CTA inferior */
#plprot-cta { margin-top: clamp( 32px, 4vw, 48px ); }
.prot-bar {
	background: rgba( 255,255,255, 0.05 ); border: 1px solid rgba( 255,255,255, 0.1 );
	border-radius: 16px; padding: 24px;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.prot-bar-txt { margin: 0; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: 14px; line-height: 1.6; color: #fff; }
.prot-bar-pill {
	flex: 0 0 auto; background: #F5A302; color: #fff; border-radius: 14px;
	padding: 12px 24px; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: 14px; white-space: nowrap;
}

@media ( max-width: 1024px ) {
	.prot-grid { gap: 16px; }
	.prot-card { width: 320px; }
}
@media ( max-width: 767px ) {
	#plprot .prot-grid { gap: 0; }
	#plprot .prot-card { width: 100%; }
	.prot-bar { flex-direction: column; align-items: stretch; text-align: center; }
	.prot-bar-pill { white-space: normal; text-align: center; }
}

/* ============================================================
   S4 — "Protección en el Camino" (#plcamino): fila (título+sub /
   párrafo+caja) + foto ancha. Figma node 1443:495.
   ============================================================ */
#plcamino {
	width: 100vw; max-width: 100vw;
	margin-left: 50%; transform: translateX( -50% );
	background: #fff;
	padding: clamp( 56px, 7vw, 80px ) 0;
	overflow: hidden;
}
#plcamino > .elementor-container { max-width: 1304px; padding-left: 24px; padding-right: 24px; }
#plcamino .elementor-column > .elementor-element-populated { padding: 0; }

.camino-top { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.camino-title { margin: 0 0 12px; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: 48px; line-height: 1.25; color: #000; }
.camino-eyebrow { margin: 0; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: 18px; line-height: 1.55; color: #F5A302; }
.camino-lead { margin: 0 0 16px; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: 24px; line-height: 1.22; color: #1F2933; }
.camino-box { background: #f7f9fb; border-left: 3.85px solid #3AADCA; border-radius: 16px; padding: 24px; padding-left: 28px; display: flex; gap: 12px; }
.camino-box-ic { flex: 0 0 22px; color: #3AADCA; margin-top: 3px; }
.camino-box-ic svg { width: 22px; height: 22px; display: block; }
.camino-box-t { margin: 0 0 4px; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: 16px; line-height: 1.5; color: #000; }
.camino-box-p { margin: 0; font-family: 'Gilroy-Regular', sans-serif; font-size: 14px; line-height: 1.625; color: rgba( 31,41,51, 0.8 ); }

/* Negrita garantizada para eyebrow ("En Alianza con Seguros Caracas") y lead
   ("Conduce con respaldo legal..."): gana cualquier override de fuente/peso del tema. */
#plcamino .camino-eyebrow,
#plcamino .camino-lead {
	font-family: 'Gilroy-Heavy', sans-serif !important;
	font-weight: 800 !important;
}

#plcamino-img { margin-top: 40px; }
.camino-img {
	display: block; width: 100%; aspect-ratio: 1232 / 411; object-fit: cover;
	border-radius: 24px; box-shadow: 0 20px 25px -5px rgba( 0,0,0,0.1 ), 0 8px 10px -6px rgba( 0,0,0,0.1 );
}

@media ( max-width: 767px ) {
	.camino-top { grid-template-columns: 1fr; gap: 28px; }
	.camino-img { aspect-ratio: 16 / 11; }
}

/* ============================================================
   S5 — "Activa tu Seguro en 3 pasos" (#plpasos): banda gris,
   título centrado + 3 cards numeradas (carrusel en móvil).
   Figma node 1443:526.
   ============================================================ */
#plpasos {
	width: 100vw; max-width: 100vw;
	margin-left: 50%; transform: translateX( -50% );
	background: #f7f9fb;
	padding: clamp( 56px, 7vw, 80px ) 0;
	overflow: hidden;
}
#plpasos > .elementor-container { max-width: 1304px; padding-left: 24px; padding-right: 24px; }
#plpasos .elementor-column > .elementor-element-populated { padding: 0; }

#plpasos-head { margin-bottom: clamp( 36px, 4.5vw, 56px ); }
.pasos-title { margin: 0; text-align: center; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: 48px; line-height: 1.25; color: #000; }

.pasos-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.paso-card {
	position: relative; width: 394px; max-width: 100%;
	background: #fff; border-radius: 16px; overflow: hidden;
	padding: 32px; min-height: 188px;
	box-shadow: 0 1px 3px rgba( 0,0,0,0.1 ), 0 1px 2px -1px rgba( 0,0,0,0.1 );
	display: flex; flex-direction: column;
}
.paso-bignum {
	position: absolute; top: 12px; right: 24px;
	font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: 72px; line-height: 1;
	color: rgba( 58,173,202, 0.08 ); pointer-events: none;
}
.paso-ic {
	width: 56px; height: 56px; border-radius: 14px; margin-bottom: 16px;
	background: rgba( 58,173,202, 0.1 ); color: #3AADCA;
	display: flex; align-items: center; justify-content: center;
}
.paso-ic svg { width: 26px; height: 26px; display: block; }
.paso-row { display: flex; gap: 8px; align-items: flex-start; }
.paso-num { flex: 0 0 auto; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: 14px; line-height: 1.6; color: #3AADCA; }
.paso-row p { margin: 0; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: 16px; line-height: 1.625; color: #1F2933; }
/* conector entre cards (Figma) */
.paso-card:not(:last-child)::after { content: ''; position: absolute; right: -24px; top: 88px; width: 24px; height: 2px; background: rgba( 58,173,202, 0.3 ); }

@media ( max-width: 1024px ) { .pasos-grid { gap: 16px; } .paso-card { width: 300px; } }
@media ( max-width: 767px ) {
	#plpasos .pasos-grid { gap: 0; }
	#plpasos .paso-card { width: 100%; }
	.paso-card::after { display: none; }
}

/* ============================================================
   S6 — "¿Por qué contratar tus seguros con CrediTotal?" (#plporque):
   foto familia (glow ámbar) izq + H2 + acordeón FAQ + caja der.
   Figma node 1444:608.
   ============================================================ */
#plporque {
	width: 100vw; max-width: 100vw;
	margin-left: 50%; transform: translateX( -50% );
	background: #fff;
	padding: clamp( 56px, 7vw, 80px ) 0;
	overflow: hidden;
}
#plporque > .elementor-container { max-width: 1304px; padding-left: 24px; padding-right: 24px; align-items: center; }
#plporque .elementor-column > .elementor-element-populated { padding: 0; }
#plporque #plporque-left > .elementor-element-populated { padding: 0 clamp( 0px, 3vw, 40px ) 0 0; }
#plporque #plporque-right > .elementor-element-populated { padding: 0 0 0 clamp( 0px, 3vw, 40px ); }

.porque-media { position: relative; }
.porque-glow { position: absolute; inset: -12px; background: rgba( 245,163,2, 0.1 ); filter: blur( 24px ); border-radius: 24px; z-index: 0; }
.porque-img {
	position: relative; z-index: 1; display: block;
	width: 100%; aspect-ratio: 584 / 438; object-fit: cover;
	border-radius: 24px; box-shadow: 0 20px 25px -5px rgba( 0,0,0,0.1 ), 0 8px 10px -6px rgba( 0,0,0,0.1 );
}

.porque-title { margin: 0 0 24px; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: 48px; line-height: 1.25; color: #000; }
.porque-title .t { color: #3AADCA; }

.porque-acc { margin: 0; }
.porque-item { border-bottom: 0.77px solid rgba( 31,41,51, 0.2 ); padding: 22px 0; }
.porque-item:last-child { border-bottom: none; }
.porque-qrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.porque-q { font-family: 'Gilroy-Heavy', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.4; color: #1F2933; }
.porque-chev { flex: 0 0 28px; color: #3AADCA; display: flex; }
.porque-chev svg { width: 28px; height: 28px; display: block; }
.porque-a { margin: 8px 0 0; padding: 0; font-family: 'Gilroy-Regular', sans-serif; font-size: 16px; line-height: 1.5; color: rgba( 31,41,51, 0.7 ); max-width: 512px; }

.porque-box { margin-top: 24px; background: #f7f9fb; border-radius: 16px; padding: 24px; }
.porque-box-q { margin: 0 0 8px; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: 16px; line-height: 1.5; color: #3AADCA; }
.porque-box-p { margin: 0; font-family: 'Gilroy-Heavy', sans-serif; font-weight: 800; font-size: 14px; line-height: 1.43; color: rgba( 31,41,51, 0.8 ); }

@media ( max-width: 767px ) {
	#plporque .elementor-column { width: 100% !important; }
	#plporque #plporque-left > .elementor-element-populated,
	#plporque #plporque-right > .elementor-element-populated { padding: 0; }
	#plporque-right { margin-top: 40px; }
}

/* ====== Tipografía en móvil (los títulos van fijos a 48px en desktop;
   se reducen aquí para que no se desborden en celular) ====== */
@media ( max-width: 767px ) {
	.planes-title, .seg-h1, .prot-title, .camino-title, .pasos-title, .porque-title { font-size: 30px; line-height: 1.2; }
	.planes-eyebrow, .seg-sub { font-size: 22px; }
	.camino-lead { font-size: 20px; }
	.prot-sub { font-size: 16px; }
	.plan-head h3, .prot-card h3 { font-size: 22px; }
}