/*
 * Archive: Hub /empresas/
 *
 * Estructura modular: section > container > elementos
 * - Sections (.fe-section): padding y estilos generales
 * - Containers (.fe-container): layout y estructura
 * - Elementos internos: clases específicas con estilos personalizados
 *
 * BEM: .fe-{component}__element--modifier
 *
 * Variables CSS reutilizables para mantener coherencia visual
 */

/* ────────────────────────────────────────────────────────────────────────────
   VARIABLES CSS (reutilizables en toda la plantilla)
   ──────────────────────────────────────────────────────────────────────────── */

:root {
	/* ─── Colores corporativos ─── */
	--fe-color-primary: #265ff1;          /* Azul Fluyez principal */
	--fe-color-dark: #1f2a37;             /* Gris oscuro para textos */
	--fe-color-text: #4a5568;             /* Gris medio para párrafos */
	--fe-color-text-muted: rgba(31, 42, 55, 0.5); /* Gris claro para detalles */
	--fe-color-white: #fff;               /* Blanco */
	--fe-color-light-gray: #f5f7fa;       /* Gris muy claro para fondos */

	/* ─── Tipografía ─── */
	--fe-font-display: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--fe-font-body: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* ─── Espaciado ─── */
	--fe-spacing-xs: 0.5rem;
	--fe-spacing-sm: 1rem;
	--fe-spacing-md: 1.5rem;
	--fe-spacing-lg: 2rem;
	--fe-spacing-xl: 2rem;
	--fe-spacing-2xl: 2rem;

	/* ─── Border radius ─── */
	--fe-radius-sm: 8px;
	--fe-radius-md: 12px;
	--fe-radius-lg: 20px;

	/* ─── Sombras ─── */
	--fe-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
	--fe-shadow-md: 0 8px 16px rgba(78, 96, 141, 0.2);
	--fe-shadow-lg: 0 20px 60px rgba(0, 13, 89, 0.08);

	/* ─── Gradientes para backgrounds ─── */
	--fe-gradient-light: linear-gradient(180deg, rgba(244, 247, 250, 0) 0%, rgba(244, 247, 250, 0.49) 100%);
	--fe-gradient-blue: linear-gradient(180deg, rgba(240, 247, 255, 0) 0%, rgba(240, 247, 255, 0.5) 100%);
}

/* ────────────────────────────────────────────────────────────────────────────
   ESTILOS GLOBALES REUTILIZABLES
   ──────────────────────────────────────────────────────────────────────────── */

/**
 * .fe-section-label: Etiquetas de sección (EL PROBLEMA, LA SOLUCIÓN, etc.)
 * Reutilizable en todas las secciones. Color azul, pequeño, mayúsculas.
 */
.fe-section-label {
	color: var(--fe-color-primary);
	font-family: var(--fe-font-body);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	text-align: center;
	display: block;
	margin-bottom: var(--fe-spacing-md);
}

/**
 * .fe-section-heading: Títulos principales de secciones (H2)
 * Reutilizable. Color gris oscuro, Poppins, 28px.
 */
.fe-section-heading {
	color: var(--fe-color-dark);
	font-family: var(--fe-font-display);
	font-size: 28px;
	font-weight: 600;
	line-height: 36px;
	text-align: center;
	margin: 0 0 var(--fe-spacing-md) 0;
}

/**
 * .fe-section-text: Textos descriptivos de secciones
 * Reutilizable. Color gris medio, Inter, 16px.
 */
.fe-section-text {
	color: var(--fe-color-text);
	font-family: var(--fe-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	text-align: center;
	max-width: 600px;

}

/* ────────────────────────────────────────────────────────────────────────────
   SECTION REUTILIZABLE (base para todas las secciones)
   ──────────────────────────────────────────────────────────────────────────── */

.fe-section {
	width: 100%;
	padding: 0;
	margin: 0;
}

/* ────────────────────────────────────────────────────────────────────────────
   HERO SECTION
   ──────────────────────────────────────────────────────────────────────────── */

.fe-section--hero {
	background: var(--fe-color-white);
	background-image: 
		radial-gradient(ellipse 600px 600px at 15% 50%, rgba(114, 179, 239, 0.15) 0%, rgba(114, 179, 239, 0) 70%),
		radial-gradient(ellipse 500px 500px at 85% 30%, rgba(114, 134, 239, 0.12) 0%, rgba(114, 134, 239, 0) 70%);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding: 4rem 0;
}

@media (max-width: 768px) {
	.fe-section--hero {
		background-attachment: scroll;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   PROBLEMA SECTION
   ──────────────────────────────────────────────────────────────────────────── */

/**
 * Sección "El Problema" con estructura vertical
 * Padding: 80px 134px 60px 134px (ajustable en responsive)
 * Background: Gradient diagonal dinámico (Bitso/Ripio inspired)
 */
.fe-section--problema {
	background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 35%, #e8effe 70%, #ffffff 100%);
	padding: 80px 134px 60px 134px;
	position: relative;
	overflow: hidden;
}

/* Elementos decorativos dinámicos en el fondo */
.fe-section--problema::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -10%;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(38, 95, 241, 0.08) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

.fe-section--problema::after {
	content: '';
	position: absolute;
	bottom: -30%;
	left: -5%;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(38, 95, 241, 0.05) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

@media (max-width: 1024px) {
	.fe-section--problema {
		padding: 60px 80px 50px 80px;
	}
}

@media (max-width: 768px) {
	.fe-section--problema {
		padding: 50px 20px 40px 20px;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   CONTAINER BASE (reutilizable)
   ──────────────────────────────────────────────────────────────────────────── */

.fe-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* ────────────────────────────────────────────────────────────────────────────
   CONTAINER HERO (dos columnas: 50% / 50%)
   ──────────────────────────────────────────────────────────────────────────── */

.fe-container--hero {
	display: flex;
	flex-direction: row;
	gap: 3rem;
	align-items: center;
	min-height: 600px;
}

@media (max-width: 1024px) {
	.fe-container--hero {
		flex-direction: column;
		gap: 2rem;
		min-height: auto;
		padding: 2rem;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   CONTAINER PROBLEMA (estructura vertical con dos sub-contenedores)
   ──────────────────────────────────────────────────────────────────────────── */

.fe-container--problema {
	display: flex;
	flex-direction: column;
	gap: var(--fe-spacing-2xl);
	max-width: 100%;
	padding: 0;
	margin: 0;
	position: relative;
	z-index: 1;
}

/* ────────────────────────────────────────────────────────────────────────────
   AHORRO CALCULADORA SECTION
   ──────────────────────────────────────────────────────────────────────────── */

.fe-section--ahorro-calc {
	padding: 0 2rem 80px;
	background: #ffffff;
}

.fe-container--ahorro-calc {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0;
}

.fe-ahorro-calc {
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: space-around;
	gap: 40px;
	align-items: center;
	padding: 40px;
	border-radius: 40px;
	background: linear-gradient(251deg, #0a2ca6 0%, #265ff1 100%);
	box-shadow: 0 24px 48px rgba(10, 44, 166, 0.18);
	isolation: isolate;
}

.fe-ahorro-calc::before,
.fe-ahorro-calc::after {
	content: '';
	position: absolute;
	width: 276px;
	height: 296px;
	background-image: url('../images/logo-bg.svg');
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.5;
	pointer-events: none;
	z-index: -1;
}

.fe-ahorro-calc::before {
	top: -18px;
	left: 34%;
	transform: translateX(-50%);
}

.fe-ahorro-calc::after {
	left: -6px;
	bottom: -82px;
}

.fe-ahorro-calc__content {
	flex: 1 1 0;
	min-width: 280px;
	max-width: 420px;
	padding: 8px 0 8px 4px;
	color: #ffffff;
	position: relative;
	z-index: 1;
}

.fe-ahorro-calc__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	font-family: var(--fe-font-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.96);
}

.fe-ahorro-calc__eyebrow-logo {
	display: block;
	width: 72px;
	height: auto;
	flex: 0 0 auto;
}

.fe-ahorro-calc__title {
	margin: 0 0 16px;
	font-family: var(--fe-font-display);
	font-size: 48px;
	font-weight: 600;
	line-height: 1.08;
	color: #ffffff;
}

.fe-ahorro-calc__text {
	margin: 0 0 26px;
	max-width: 320px;
	font-family: var(--fe-font-body);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.92);
}

.fe-ahorro-calc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fe-ahorro-calc__item {
	position: relative;
	padding-left: 42px;
	font-family: var(--fe-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
}

.fe-ahorro-calc__item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 2px;
	width: 24px;
	height: 24px;
	border-radius: 8px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.14) 100%),
		url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7.1L5.4 9.5L11 4' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.fe-ahorro-calc__calculator {
/* 	flex: 0 1 486px;
 */	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 600px;
}

.fe-ahorro-calc__calculator .fe-calc-pagos__inner {
	box-shadow: none;
}

@media (max-width: 1024px) {
	.fe-section--ahorro-calc {
		padding: 0 1.5rem 64px;
	}

	.fe-ahorro-calc {
		flex-direction: column;
		gap: 28px;
		padding: 32px;
	}

	.fe-ahorro-calc::before {
		left: auto;
		right: -32px;
		transform: none;
	}

	.fe-ahorro-calc__content,
	.fe-ahorro-calc__calculator {
		max-width: 100%;
	}

	.fe-ahorro-calc__calculator {
		flex-basis: auto;
	}

	.fe-ahorro-calc__title {
		font-size: 40px;
	}

	.fe-ahorro-calc__text {
		font-size: 20px;
		max-width: 520px;
	}
}

@media (max-width: 768px) {
	.fe-section--ahorro-calc {
		padding: 0 1rem 52px;
	}

	.fe-ahorro-calc {
		padding: 24px;
		border-radius: 28px;
		gap: 24px;
	}

	.fe-ahorro-calc::before,
	.fe-ahorro-calc::after {
		width: 180px;
		height: 194px;
	}

	.fe-ahorro-calc::before {
		top: -24px;
		right: -14px;
	}

	.fe-ahorro-calc::after {
		left: -32px;
		bottom: -90px;
	}

	.fe-ahorro-calc__title {
		font-size: 32px;
	}

	.fe-ahorro-calc__text {
		font-size: 18px;
		margin-bottom: 20px;
	}

	.fe-ahorro-calc__item {
		font-size: 15px;
		padding-left: 38px;
	}
}

@media (max-width: 640px) {
	.fe-section--ahorro-calc {
		padding: 0 0.75rem 40px;
	}

	.fe-ahorro-calc {
		padding: 20px;
		border-radius: 24px;
	}

	.fe-ahorro-calc__eyebrow {
		font-size: 14px;
		margin-bottom: 16px;
	}

	.fe-ahorro-calc__title {
		font-size: 28px;
		line-height: 1.15;
	}

	.fe-ahorro-calc__text {
		font-size: 16px;
		line-height: 1.5;
	}

	.fe-ahorro-calc__item::before {
		top: 0;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   HERO CONTENT (columna izquierda: 50%)
   ──────────────────────────────────────────────────────────────────────────── */

.fe-hero-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--fe-spacing-md);
	justify-content: center;
}

/* Título H1 */
.fe-hero-content__title {
	font-family: var(--fe-font-display);
	font-size: 40px;
	font-weight: 600;
	line-height: 56px;
	color: #000;
	margin: 0;
}

@media (max-width: 768px) {
	.fe-hero-content__title {
		font-size: 28px;
		line-height: 40px;
	}
}

/* Subtítulo / descripción */
.fe-hero-content__subtitle {
	font-family: var(--fe-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--fe-color-dark);
	margin: 0;
}

/* Botón CTA "Ver servicios" */
.fe-hero-content__cta-btn {
	display: inline-flex;
	padding: 10px 24px;
	justify-content: center;
	align-items: center;
	gap: 16px;
	border-radius: var(--fe-radius-sm);
	border: 1px solid var(--fe-color-primary);
	background: transparent;
	color: var(--fe-color-primary);
	font-family: var(--fe-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease;
	width: fit-content;
}

.fe-hero-content__cta-btn:hover {
	background: var(--fe-color-primary);
	color: var(--fe-color-white);
	box-shadow: var(--fe-shadow-md);
	transform: translateY(-2px);
}

.fe-hero-content__cta-btn:active {
	transform: translateY(0);
}

/* Lista de beneficios (3 items horizontales) */
.fe-hero-content__benefits {
	list-style: none;
	margin: var(--fe-spacing-sm) 0 0 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	gap: var(--fe-spacing-lg);
	flex-wrap: wrap;
}

.fe-hero-content__benefit-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--fe-font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--fe-color-dark);
}

.fe-hero-content__benefit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--fe-color-primary);
	color: var(--fe-color-white);
	font-size: 12px;
	font-weight: bold;
	flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────────────────────
   HERO FORM (columna derecha: 50%)
   ──────────────────────────────────────────────────────────────────────────── */

.fe-hero-form-container {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

/* Card contenedor del formulario */
.fe-hero-form-card {
	display: flex;
	width: 540px;
	padding: 40px 36px;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	border-radius: var(--fe-radius-lg);
	border: 1px solid rgba(38, 95, 241, 0.15);
	background: var(--fe-color-white);
	box-shadow: var(--fe-shadow-lg);
}

@media (max-width: 768px) {
	.fe-hero-form-card {
		width: 100%;
		max-width: 100%;
		padding: 30px 24px;
	}
}

/* Header del form (texto azul) */
.fe-hero-form-card__header {
	color: var(--fe-color-primary);
	font-family: var(--fe-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	margin: 0;
	text-align: center;
	width: 100%;
	letter-spacing: 0.3px;
}

/* Contenedor del formulario */
.fe-hero-form-card__form {
	width: 100%;
	margin: 12px 0;
}

/* Estilos del shortcode Brevo dentro del card */
.fe-hero-form-card__form .fy-brevo-form {
	width: 100%;
}

.fe-hero-form-card__form .fy-brevo-form form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.fe-hero-form-card__form .fy-brevo-form input[type="text"],
.fe-hero-form-card__form .fy-brevo-form input[type="email"],
.fe-hero-form-card__form .fy-brevo-form input[type="tel"],
.fe-hero-form-card__form .fy-brevo-form select {
	width: 100%;
	padding: 12px 16px;
	border-radius: var(--fe-radius-sm);
	border: 1px solid #e5e7eb;
	background: var(--fe-color-white);
	font-family: var(--fe-font-body);
	font-size: 14px;
	transition: all 0.2s ease;
}

.fe-hero-form-card__form .fy-brevo-form input[type="text"]:focus,
.fe-hero-form-card__form .fy-brevo-form input[type="email"]:focus,
.fe-hero-form-card__form .fy-brevo-form input[type="tel"]:focus,
.fe-hero-form-card__form .fy-brevo-form select:focus {
	outline: none;
	border-color: var(--fe-color-primary);
	box-shadow: 0 0 0 3px rgba(38, 95, 241, 0.1);
}

/* Botón del form Brevo */
.fe-hero-form-card__form .fy-brevo-form button[type="submit"] {
	width: 100%;
	padding: 12px 24px;
	border-radius: var(--fe-radius-sm);
	border: none;
	background: var(--fe-color-primary);
	color: var(--fe-color-white);
	font-family: var(--fe-font-body);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-top: 8px;
}

.fe-hero-form-card__form .fy-brevo-form button[type="submit"]:hover {
	background: #1e4cb8;
	box-shadow: var(--fe-shadow-md);
	transform: translateY(-2px);
}

.fe-hero-form-card__form .fy-brevo-form button[type="submit"]:active {
	transform: translateY(0);
}

/* Footer del form (texto gris claro) */
.fe-hero-form-card__footer {
	color: var(--fe-color-text-muted);
	font-family: var(--fe-font-body);
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
	text-align: center;
	margin: 0;
	width: 100%;
}

/* Stats mini cards (3 items horizontales) */
.fe-hero-form-card__stats {
	list-style: none;
	margin: 8px 0 0 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	gap: 12px;
	width: 100%;
	justify-content: center;
	flex-wrap: wrap;
}

.fe-hero-form-card__stat-item {
	display: flex;
	width: 142px;
	padding: 12px 20px;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	border-radius: var(--fe-radius-md);
	border: 1px solid #7aa9ff;
	background: var(--fe-color-white);
}

.fe-hero-form-card__stat-number {
	font-family: var(--fe-font-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	color: var(--fe-color-primary);
}

.fe-hero-form-card__stat-label {
	font-family: var(--fe-font-body);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	color: #6b7280;
}

/* ────────────────────────────────────────────────────────────────────────────
   PROBLEMA SECTION: Header (texto + botón)
   ──────────────────────────────────────────────────────────────────────────── */

.fe-problema-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	margin-bottom: 20px;
}

/**
 * Botón CTA de la sección Problema
 * Enlaza a #contacto (el form del hero)
 */
.fe-problema-cta-btn {
	display: inline-flex;
	padding: 10px 24px;
	justify-content: center;
	align-items: center;
	gap: 16px;
	border-radius: var(--fe-radius-sm);
	border: none;
	background: var(--fe-color-primary);
	color: var(--fe-color-white);
	font-family: var(--fe-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease;
	width: fit-content;
}

.fe-problema-cta-btn:hover {
	background: #1e4cb8;
	box-shadow: var(--fe-shadow-md);
	transform: translateY(-2px);
}

.fe-problema-cta-btn:active {
	transform: translateY(0);
}

/* ────────────────────────────────────────────────────────────────────────────
   PROBLEMA SECTION: Cards comparativas (3 cards horizontales)
   ──────────────────────────────────────────────────────────────────────────── */

.fe-problema-cards {
	display: flex;
	flex-direction: row;
	gap: 28px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin-top: var(--fe-spacing-xl);
}

@media (max-width: 768px) {
	.fe-problema-cards {
		gap: 16px;
		margin-top: var(--fe-spacing-lg);
	}
}

/**
 * Card de comparación (base — mejorada con elementos visuales)
 * Dimensiones: 374px × 222px
 * Padding: 25px 26px
 * Flex column, centrado
 * Bordes: 1.5px para light, 2.5px para blue
 */
.fe-comparison-card {
	display: flex;
	width: 374px;
	height: 222px;
	padding: 25px 26px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 12px;
	border-radius: var(--fe-radius-md);
	background: var(--fe-color-white);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

@media (max-width: 768px) {
	.fe-comparison-card {
		width: 100%;
		max-width: 300px;
		height: auto;
	}
}

/**
 * Variante clara (Banco y Agentes Terceros)
 * Borde gris 1.5px
 * Sombra suave
 * Fondo blanco puro
 */
.fe-comparison-card--light {
	border: 1.5px solid #d1d5db;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Elemento decorativo en esquina superior de card light */
.fe-comparison-card--light::before {
	content: '';
	position: absolute;
	top: -8px;
	right: 20px;
	width: 16px;
	height: 16px;
	background: linear-gradient(135deg, #3b82f6 0%, #265ff1 100%);
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(38, 95, 241, 0.2);
}

/**
 * Variante azul (Fluyez) — COMPLETAMENTE TRANSFORMADA
 * Borde azul primario 2.5px
 * Sombra muy marcada + glow
 * Fondo con gradient más saturado
 * Badge visual superior
 * Escala ligeramente diferente
 */
.fe-comparison-card--blue {
	border: 2.5px solid var(--fe-color-primary);
	box-shadow: 
		0 0 0 0.5px rgba(38, 95, 241, 0.1),
		0 8px 24px rgba(38, 95, 241, 0.2),
		0 20px 40px rgba(38, 95, 241, 0.12);
	background: linear-gradient(135deg, #f0f7ff 0%, #dfe6ff 100%);
	position: relative;
	min-height: 240px;
}

/**
 * Badge "MEJOR OPCIÓN" en card Fluyez
 */
.fe-comparison-card--blue::before {
	content: '★ MEJOR OPCIÓN';
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 12px;
	background: linear-gradient(135deg, #265ff1 0%, #1e4cb8 100%);
	color: white;
	font-family: var(--fe-font-display);
	font-size: 11px;
	font-weight: 700;
	border-radius: 20px;
	letter-spacing: 0.5px;
	box-shadow: 0 4px 12px rgba(38, 95, 241, 0.25);
	z-index: 10;
}

/**
 * Línea decorativa en card Fluyez (::after)
 */
.fe-comparison-card--blue::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
/* 	background: linear-gradient(90deg, transparent 0%, var(--fe-color-primary) 50%, transparent 100%);
 */	border-radius: var(--fe-radius-md) var(--fe-radius-md) 0 0;
}

/* Hover mejorado: más energía en card blue */
.fe-comparison-card:hover {
	transform: translateY(-8px);
}

.fe-comparison-card--light:hover {
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
	border-color: #9ca3af;
	background: #fafafa;
}

.fe-comparison-card--blue:hover {
	box-shadow: 
		0 0 0 0.5px rgba(38, 95, 241, 0.2),
		0 12px 32px rgba(38, 95, 241, 0.3),
		0 24px 48px rgba(38, 95, 241, 0.15);
	border-color: #1e4cb8;
	background: linear-gradient(135deg, #e8effe 0%, #dfe6ff 100%);
	transform: translateY(-10px) scale(1.02);
}

/* Título de la card (para Banco y Agentes) */
.fe-comparison-card__title {
	color: var(--fe-color-dark);
	font-family: var(--fe-font-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	margin: 0;
	text-align: center;
	letter-spacing: -0.3px;
	position: relative;
	z-index: 2;
}

/* Logo de Fluyez (solo en card central) */
.fe-comparison-card__logo {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.fe-comparison-card__logo img {
	max-width: 120px;
	height: auto;
	display: block;
}

/* Lista de items dentro de la card */
.fe-comparison-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.fe-comparison-card__list li {
	color: var(--fe-color-text);
	font-family: var(--fe-font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	text-align: center;
	margin: 0;
}

/* ────────────────────────────────────────────────────────────────────────────
   PILARES SECTION (Los 6 pilares de Fluyez Empresas)
   ──────────────────────────────────────────────────────────────────────────── */

/**
 * Sección "Los 6 pilares" con estructura vertical
 * Background blanco con radial gradients decorativos sutiles
 * Padding vertical: 80px
 */
.fe-section--pilares {
	background: var(--fe-color-white);
	background-image: 
		radial-gradient(ellipse 800px 600px at 10% 20%, rgba(229, 242, 255, 0.3) 0%, rgba(229, 242, 255, 0) 70%),
		radial-gradient(ellipse 700px 500px at 90% 80%, rgba(229, 242, 255, 0.2) 0%, rgba(229, 242, 255, 0) 70%);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding: 80px 2rem;
}

@media (max-width: 768px) {
	.fe-section--pilares {
		background-attachment: scroll;
		padding: 60px 1rem;
	}
}

@media (max-width: 640px) {
	.fe-section--pilares {
		padding: 40px 1rem;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   CONTAINER PILARES (estructura vertical centralizada)
   ──────────────────────────────────────────────────────────────────────────── */

.fe-container--pilares {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0;
}

/* ────────────────────────────────────────────────────────────────────────────
   PILARES GRID (6 cards, 2 filas × 3 columnas)
   ──────────────────────────────────────────────────────────────────────────── */

/**
 * .fe-services-grid: Layout masonry/irregular
 * - Desktop: 2 columnas base, algunas cards ocupan ambas (wide)
 * - Tablet: 2 columnas, reducidas
 * - Mobile: 1 columna
 */
.fe-services-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

/* ────────────────────────────────────────────────────────────────────────────
   SERVICE CARD: Base y variantes
   ──────────────────────────────────────────────────────────────────────────── */

/**
 * .fe-service-card: Card individual
 * Flex column, padding flexible, background blanco
 * Border: 1px gris claro, border-radius 16px
 * Overflow visible para que imágenes no se corten
 */
.fe-service-card {
	display: flex;
	flex-direction: column;
	padding: 32px;
	background: var(--fe-color-white);
	border: 1px solid #e8ecf1;
	border-radius: 16px;
	min-height: 420px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: visible;
	gap: 20px;
}

/**
 * .fe-service-card--wide: Card que ocupa 2 columnas (ancha)
 * Layout: flex row con contenido a la izquierda e imagen a la derecha
 */
.fe-service-card--wide {
	grid-column: span 2;
	flex-direction: row;
	align-items: stretch;
}

.fe-service-card--wide .fe-service-card__content {
	flex: 1 1 20%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.fe-service-card--wide .fe-service-card__image {
	flex: 1;
	width: auto;
	margin: 0;
	border-radius: 0 16px 16px 0;
	object-fit: cover;
}

/**
 * Hover effect: Sombra y borde, SIN elevación
 */
.fe-service-card:hover {
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
	border-color: var(--fe-color-primary);
}

/**
 * .fe-service-card__content: Contenedor del texto
 * Flex column con gap
 */
.fe-service-card__content {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 0 0 auto;
}

/**
 * .fe-service-card__label: Etiqueta
 * Poppins, 12px, 600, azul primario, uppercase
 */
.fe-service-card__label {
	font-family: var(--fe-font-display);
	font-size: 12px;
	font-weight: 600;
	color: var(--fe-color-primary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0;
}

/**
 * .fe-service-card__title: Título (H3)
 * Poppins, 20px, 700, gris oscuro
 */
.fe-service-card__title {
	font-family: var(--fe-font-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	color: var(--fe-color-dark);
	margin: 0;
}

.fe-service-card--wide .fe-service-card__title {
	font-size: 24px;
	line-height: 32px;
}

/**
 * .fe-service-card__text: Descripción
 * Inter, 14px, 400, gris medio
 * Flex: 1 para ocupar espacio disponible
 */
.fe-service-card__text {
	font-family: var(--fe-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	color: var(--fe-color-text);
	margin: 0;
	flex: 1;
}

.fe-service-card--wide .fe-service-card__text {
	font-size: 15px;
	line-height: 24px;
}

/**
 * .fe-service-card__btn: Botón
 * Poppins, 14px, 600, fondo oscuro
 */
.fe-service-card__btn {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	border: none;
	border-radius: 8px;
	background: #1F2A37;
	font-family: var(--fe-font-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--fe-color-white);
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease;
	width: fit-content;
}

.fe-service-card__btn:hover {
	background: rgba(31, 42, 55, 0.85);
}

/* ────────────────────────────────────────────────────────────────────────────
   SERVICE CARD IMAGE: Proporción y responsive
   ──────────────────────────────────────────────────────────────────────────── */

/**
 * .fe-service-card__image: Imagen directa
 * Display: block, rounded, responsive
 */
.fe-service-card__image {
	display: block;
	width: 100%;
	border-radius: 12px;
	object-fit: cover;
	object-position: center;
	transition: transform 0.3s ease;
}

.fe-service-card:hover .fe-service-card__image {
	transform: scale(1.08);
}

.fe-service-card__image-container{
	display: flex;
	justify-content: flex-end;
}

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE: Tablet (max-width: 1024px)
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.fe-services-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.fe-service-card--wide {
		grid-column: span 1;
		flex-direction: column;
	}

	.fe-service-card--wide .fe-service-card__content {
		flex: auto;
		max-width: 100%;
	}

	.fe-service-card--wide .fe-service-card__image {
		flex: auto;
		margin: 0;
		border-radius: 12px;
		min-height: 260px;
	}

	.fe-service-card {
		min-height: auto;
		padding: 28px;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE: Móvil (max-width: 768px)
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.fe-services-grid {
		gap: 20px;
	}

	.fe-service-card {
		padding: 24px;
		gap: 16px;
	}

	.fe-service-card__title {
		font-size: 18px;
		line-height: 26px;
	}

	.fe-service-card__text {
		font-size: 13px;
		line-height: 20px;
	}

	.fe-service-card__image {
		min-height: 180px;
	}
	.fe-service-card__image-container{
	display: flex;
	justify-content: center;
	}

}

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE: Móvil pequeño (max-width: 640px)
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	.fe-services-grid {
		gap: 16px;
	}

	.fe-service-card {
		padding: 20px;
		gap: 14px;
		border-radius: 12px;
	}

	.fe-service-card__label {
		font-size: 11px;
	}

	.fe-service-card__title {
		font-size: 16px;
		line-height: 24px;
	}

	.fe-service-card__text {
		font-size: 12px;
		line-height: 18px;
	}

	.fe-service-card__image {
		min-height: 160px;
	}

	.fe-service-card__btn {
		padding: 8px 16px;
		font-size: 13px;
	}
		.fe-service-card__image-container{
	display: flex;
	justify-content: center;
	}
}




@media (max-width: 640px) {
	.fe-section--hero {
		padding: 2rem 0;
	}

	.fe-container {
		padding: 0 1rem;
	}

	.fe-hero-content {
		gap: 1rem;
		text-align: center;
		align-items: center;
	}

	.fe-hero-content__title {
		font-size: 24px;
		line-height: 32px;
	}

	.fe-hero-content__subtitle {
		text-align: center;
	}

	.fe-hero-content__cta-btn {
		margin: 0 auto;
	}

	.fe-hero-content__benefits {
		gap: 1rem;
		justify-content: center;
	}

	.fe-hero-form-card {
		width: 100%;
		padding: 24px 20px;
		gap: 12px;
	}

	.fe-hero-form-card__stats {
		gap: 8px;
	}

	.fe-hero-form-card__stat-item {
		width: calc(33.333% - 6px);
	}

	/* Problema section responsive */
	.fe-section--problema {
		padding: 30px 15px 20px 15px;
	}

	.fe-container--problema {
		gap: var(--fe-spacing-lg);
	}

	.fe-comparison-card {
		width: 100%;
		height: auto;
		padding: 20px 20px;
	}

	.fe-problema-cards {
		flex-direction: column;
		align-items: center;
	}

	.fe-section-heading {
		font-size: 22px;
		line-height: 28px;
	}

	.fe-section-text {
		font-size: 14px;
		line-height: 20px;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   UTILIDADES (puede reutilizarse)
   ──────────────────────────────────────────────────────────────────────────── */

/* Ocultar en Mobile si es necesario */
@media (max-width: 768px) {
	.fe-hide-mobile {
		display: none;
	}
}

/* Ocultar en Desktop si es necesario */
@media (min-width: 769px) {
	.fe-hide-desktop {
		display: none;
	}
}

.fe-hero-form-card__stat-label {
	font-family: Inter, sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	color: #6b7280;
}


/* ────────────────────────────────────────────────────────────────────────────
   Band empresas
   ────────────────────────────────────────────────────────────────────────────
 */
 .empresas-band{
    background-color: #000D59;
    width: 100%;
    padding: 15px 0;
    overflow: hidden;
}
.empresas-band__track{
    display: inline-flex;
    flex-wrap: nowrap;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0, #000D59 80px, #000D59 calc(100% - 80px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000D59 80px, #000D59 calc(100% - 80px), transparent 100%);
    justify-content: center;
}
.empresas-band__list{
    display: flex;
    flex-shrink: 0;
    flex-wrap: nowrap;
    align-items: center;
    color: #ffffff;
    gap: 200px;
    padding: 0 16px;
    list-style: none;
    margin: 0;
}
.empresas-band__list li{
    white-space: nowrap;
    font-family: Poppins, Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}


/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE: Mobile first improvements
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	.fe-section--hero {
		padding: 2rem 0;
	}

	.fe-container {
		padding: 0 1rem;
	}

	.fe-hero-content {
		gap: 1rem;
		text-align: center;
		align-items: center;
	}

	.fe-hero-content__title {
		font-size: 24px;
		line-height: 32px;
	}

	.fe-hero-content__subtitle {
		text-align: center;
	}

	.fe-hero-content__cta-btn {
		margin: 0 auto;
	}

	.fe-hero-content__benefits {
		gap: 1rem;
		justify-content: center;
	}

	.fe-hero-form-card {
		width: 100%;
		padding: 24px 20px;
		gap: 12px;
	}

	.fe-hero-form-card__stats {
		gap: 8px;
	}

	.fe-hero-form-card__stat-item {
		width: calc(33.333% - 6px);
	}
}


/* ────────────────────────────────────────────────────────────────────────────
   WHY FLUYEZ SECTION (¿Por qué elegir Fluyez?)
   ──────────────────────────────────────────────────────────────────────────── */
.fe-section--why-fluyez {
	background: #f0f7ff;
	padding: 80px 2rem;
}

@media (max-width: 768px) {
	.fe-section--why-fluyez {
		padding: 60px 1rem;
	}
}

@media (max-width: 640px) {
	.fe-section--why-fluyez {
		padding: 40px 1rem;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   CONTAINER WHY FLUYEZ
   ──────────────────────────────────────────────────────────────────────────── */

.fe-container--why-fluyez {
	display: flex;
	flex-direction: column;
	align-items: center;
  /* 4rem entre header y cards */
	max-width: 1400px;
	margin: 0 auto;
	padding: 0;
}

/* ────────────────────────────────────────────────────────────────────────────
   WHY FLUYEZ CARDS CONTAINER (Grid horizontal de 4 cards)
   ──────────────────────────────────────────────────────────────────────────── */
.fe-why-cards-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(278px, 1fr));
	gap: 20px;
	width: 100%;
	max-width: 1200px;
	margin-top: 20px;
}

@media (max-width: 768px) {
	.fe-why-cards-container {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

@media (max-width: 640px) {
	.fe-why-cards-container {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   WHY CARD (Individual card: 278px × auto, white background, flex column)
   ──────────────────────────────────────────────────────────────────────────── */

.fe-why-card {
	display: flex;
	width: 278px;
	padding: 40px 20px;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	border-radius: 25px;
	background: var(--fe-color-white);
	text-align: left;
	transition: all 0.3s ease;
}

@media (max-width: 768px) {
	.fe-why-card {
		width: 100%;
	}
}

/**
 * Hover: Elevate card + shadow
 */
.fe-why-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--fe-shadow-lg);
}

/* ────────────────────────────────────────────────────────────────────────────
   WHY CARD: Contenido interno (Icon + Title)
   ──────────────────────────────────────────────────────────────────────────── */


.fe-why-card__icon {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}

.fe-why-card__title {
	color: #000d59;
	font-family: var(--fe-font-display);  /* Poppins */
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	margin: 0;
	text-align: left;
	width: 100%;
}

.fe-why-card__text {
	color: #4a5568;
	font-family: var(--fe-font-body);  /* Inter */
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	margin: 0;
	text-align: left;
	width: 100%;
}



/* ────────────────────────────────────────────────────────────────────────────
   SECCIÓN: OPERATIVIDAD — Criptomonedas soportadas
   ──────────────────────────────────────────────────────────────────────────── */

.fe-section--operatividad {

	padding: 80px var(--fe-spacing-lg);
}

.fe-container--operatividad {
	max-width: 1120px;
	margin: 0 auto;
	text-align: center;
}

.fe-operatividad-cards-container {
	display: flex;
	flex-wrap: nowrap;
	gap: 16px;
	justify-content: center;
	align-items: center;
	margin-top: var(--fe-spacing-xl);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.fe-operatividad-card {
	display: flex;
	width: 200px;
	padding: 16px;
	align-items: center;
	gap: 12px;
	border-radius: 8px;
	border: 1px solid #dee2e8;
	background: var(--fe-color-white);
	transition: all 0.3s ease;
	cursor: pointer;
}

.fe-operatividad-card:hover {
	box-shadow: 0 8px 16px rgba(78, 96, 141, 0.2);
	transform: translateY(-4px);
}


.fe-operatividad-card__logo {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.fe-operatividad-card__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.fe-operatividad-card__name {
	font-family: var(--fe-font-display);  /* Poppins */
	font-size: 14px;
	font-weight: 600;
	color: var(--fe-color-dark);
	margin: 0;
	line-height: 20px;
}

.fe-operatividad-card__symbol {
	font-family: var(--fe-font-body);  /* Inter */
	font-size: 12px;
	font-weight: 400;
	color: var(--fe-color-text);
	margin: 0;
	line-height: 16px;
}

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE: Tableta (max-width: 1024px)
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.fe-section--operatividad {
		padding: 60px var(--fe-spacing-lg);
	}

	.fe-operatividad-cards-container {
		gap: 12px;
	}

	.fe-operatividad-card {
		width: 180px;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE: Móvil (max-width: 768px)
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.fe-section--operatividad {
		padding: 50px var(--fe-spacing-md);
	}

	.fe-section-heading {
		font-size: 22px;
	}

	.fe-operatividad-cards-container {
		flex-wrap: wrap;
		overflow-x: visible;
		gap: 12px;
	}

	.fe-operatividad-card {
		width: 170px;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE: Móvil pequeño (max-width: 640px)
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	.fe-section--operatividad {
		padding: 40px var(--fe-spacing-sm);
	}

	.fe-section-heading {
		font-size: 18px;
	}

	.fe-operatividad-cards-container {
		gap: 10px;
	}

	.fe-operatividad-card {
		width: 150px;
		padding: 12px;
	}

	.fe-operatividad-card__name {
		font-size: 13px;
	}

	.fe-operatividad-card__symbol {
		font-size: 11px;
	}

	.fe-operatividad-card__logo {
		width: 28px;
		height: 28px;
	}
}



/* ────────────────────────────────────────────────────────────────────────────
   SECCIÓN: CASOS DE USO (4 cards)
   ──────────────────────────────────────────────────────────────────────────── */

/**
 * .fe-section--casos-uso: Sección de casos de uso
 */
.fe-section--casos-uso {
	background: var(--fe-color-white);
	padding: 80px 32px;
	position: relative;
	overflow: hidden;
}

/* Radial gradient decorativo en el fondo (centrado en las 4 cards) */
.fe-section--casos-uso::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(38, 95, 241, 0.08) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

.fe-container--casos-uso {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.fe-casos-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	width: 100%;
	max-width: 1120px;
}

.fe-casos-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 30px;
	border-radius: 16px;
	border: 1px solid rgba(38, 95, 241, 0.10);
	background: var(--fe-color-white);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.fe-casos-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 24px rgba(38, 95, 241, 0.12);
	border-color: rgba(38, 95, 241, 0.2);
}


.fe-casos-card__label {
	font-family: var(--fe-font-display);
	font-size: 12px;
	font-weight: 600;
	color: var(--fe-color-primary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0;
	line-height: 16px;
}


.fe-casos-card__title {
	font-family: var(--fe-font-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 26px;
	color: var(--fe-color-dark);
	margin: 0;
	width: 100%;
}


.fe-casos-card__text {
	font-family: var(--fe-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	color: var(--fe-color-text);
	margin: 0;
	width: 100%;
}

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE: Tablet (max-width: 1024px) - CASOS DE USO
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.fe-section--casos-uso {
		padding: 60px 24px;
	}

	.fe-container--casos-uso {
		gap: 48px;
	}

	.fe-casos-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE: Móvil (max-width: 768px) - CASOS DE USO
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.fe-section--casos-uso {
		padding: 50px 16px;
	}

	.fe-container--casos-uso {
		gap: 40px;
	}

	.fe-casos-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.fe-casos-card {
		width: 100%;
		padding: 24px;
	}

	.fe-casos-card__title {
		font-size: 16px;
		line-height: 24px;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE: Móvil pequeño (max-width: 640px) - CASOS DE USO
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	.fe-section--casos-uso {
		padding: 40px 12px;
	}

	.fe-container--casos-uso {
		gap: 32px;
	}

	.fe-casos-card {
		padding: 20px;
		gap: 8px;
	}

	.fe-casos-card__label {
		font-size: 11px;
	}

	.fe-casos-card__title {
		font-size: 15px;
		line-height: 22px;
	}

	.fe-casos-card__text {
		font-size: 13px;
		line-height: 20px;
	}
}


/* ────────────────────────────────────────────────────────────────────────────
   SECCIÓN: CTA BANNER (Contactar Asesor)
   ──────────────────────────────────────────────────────────────────────────── */

/**
 * .fe-section--cta-banner: Banner CTA con fondo oscuro
 * Fondo: Gradiente azul marino a morado oscuro
 * Padding: responsive (80px → 60px → 50px)
 * Posición: relative para pseudo-elementos decorativos
 */
.fe-section--cta-banner {
	background: linear-gradient(135deg, #000D59 0%, #0a088e 50%, #000D59 100%);
	padding: 80px 32px;
	position: relative;
	overflow: hidden;
}

/* Decoración superior izquierda (líneas punteadas) */
.fe-section--cta-banner::before {
	content: '';
	position: absolute;
	top: 20px;
	left: 40px;
	width: 120px;
	height: 80px;
	border: 2px dashed rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	pointer-events: none;
}

/* Decoración inferior derecha (líneas punteadas) */
.fe-section--cta-banner::after {
	content: '';
	position: absolute;
	bottom: 40px;
	right: 60px;
	width: 140px;
	height: 100px;
	border: 2px dashed rgba(38, 95, 241, 0.2);
	border-radius: 16px;
	pointer-events: none;
}

/**
 * .fe-container--cta-banner: Contenedor principal
 * Flex row, center items, justify-content between
 * Z-index: 1 para estar encima de los pseudo-elementos
 * Max-width: 1200px
 */
.fe-container--cta-banner {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
}

/**
 * .fe-cta-banner__title: Título principal
 * Font: Poppins, 42px, weight 800
 * Color: Blanco (#FFF)
 * Line-height: 58px
 * Max-width: 600px
 * Margin: 0
 */
.fe-cta-banner__title {
	font-family: var(--fe-font-display);
	font-size: 42px;
	font-weight: 800;
	line-height: 58px;
	color: var(--fe-color-white);
	margin: 0;
	max-width: 600px;
}

/**
 * .fe-cta-banner__btn: Botón de acción
 * Background: #265FF1 (azul primario)
 * Padding: 16px 32px
 * Border-radius: 8px
 * Font: Poppins, 15px, weight 600
 * Color: Blanco
 * Display: inline-flex
 * Text-decoration: none
 * Transition suave
 * Flex-shrink: 0 (no se comprime)
 */
.fe-cta-banner__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 32px;
	background: var(--fe-color-primary);
	border: none;
	border-radius: 8px;
	font-family: var(--fe-font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--fe-color-white);
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	white-space: nowrap;
	flex-shrink: 0;
}

/**
 * Hover effect: Más saturado y elevado
 */
.fe-cta-banner__btn:hover {
	background: #1e4fbf;
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(38, 95, 241, 0.3);
}

/**
 * Active/Focus state
 */
.fe-cta-banner__btn:active {
	transform: translateY(-2px);
}


/* ────────────────────────────────────────────────────────────────────────────
   PREGUNTAS FRECUENTES
   ──────────────────────────────────────────────────────────────────────────── */
.fe-section--faq {
	padding: 80px 32px;
	background: var(--fe-color-white);
}	
.fe-faq-container{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE: Tablet (max-width: 1024px) - CTA BANNER
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.fe-section--cta-banner {
		padding: 60px 24px;
	}

	.fe-container--cta-banner {
		gap: 48px;
	}

	.fe-cta-banner__title {
		font-size: 36px;
		line-height: 52px;
		max-width: 500px;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE: Móvil (max-width: 768px) - CTA BANNER
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.fe-section--cta-banner {
		padding: 50px 16px;
	}

	.fe-section--cta-banner::before {
		top: 15px;
		left: 20px;
		width: 80px;
		height: 60px;
		border-width: 1.5px;
	}

	.fe-section--cta-banner::after {
		bottom: 20px;
		right: 30px;
		width: 100px;
		height: 70px;
		border-width: 1.5px;
	}

	.fe-container--cta-banner {
		flex-direction: column;
		gap: 32px;
		align-items: center;
		text-align: center;
	}

	.fe-cta-banner__title {
		font-size: 28px;
		line-height: 40px;
		max-width: 100%;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE: Móvil pequeño (max-width: 640px) - CTA BANNER
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	.fe-section--cta-banner {
		padding: 40px 12px;
	}

	.fe-section--cta-banner::before {
		display: none;
	}

	.fe-section--cta-banner::after {
		bottom: 15px;
		right: 15px;
		width: 80px;
		height: 60px;
	}

	.fe-cta-banner__title {
		font-size: 24px;
		line-height: 36px;
	}

	.fe-cta-banner__btn {
		padding: 14px 28px;
		font-size: 14px;
	}
}


/* ────────────────────────────────────────────────────────────────────────────
   SECCIÓN: FINAL BANNER (Empieza hoy)
   ──────────────────────────────────────────────────────────────────────────── */

/**
 * .fe-section--final-banner: Banner final con fondo dark
 * Fondo: #000D59 (azul marino muy oscuro)
 * Padding: responsive (80px → 60px → 50px)
 * Posición: relative para pseudo-elementos decorativos
 * Múltiples backgrounds para SVG decorativos en esquinas
 */
.fe-section--final-banner {
	background-color: #000d59;
	background-image: url('../images/logo-bg.svg'), url('../images/logo-bg.svg');
	background-position: bottom -20px left -50px, top 20px right -60px;
	background-size: 300px 320px, 320px 340px;
	background-repeat: no-repeat;
	padding: 80px 32px;
	position: relative;
	overflow: hidden;
	min-height: 400px;
	display: flex;
	align-items: center;
}

/* Decoración: Elipse blur en el centro-abajo */
.fe-section--final-banner::before {
	content: '';
	position: absolute;
	bottom: -150px;
	left: 50%;
	transform: translateX(-50%);
	width: 685px;
	height: 685px;
	border-radius: 685px;
	background: #265FF1;
	opacity: 0.75;
	filter: blur(250px);
	pointer-events: none;
	z-index: 0;
}

/* SVG decorativo: Abajo a la izquierda */
.fe-section--final-banner::after {
	content: '';
	position: absolute;
	bottom: -20px;
	left: -50px;
	width: 300px;
	height: 320px;
	background-image: url('../images/logo-bg.svg');
	background-size: contain;
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: 0;
	opacity: 0.6;
}

/**
 * .fe-container--final-banner: Contenedor principal
 * Flex column, center items
 * Z-index: 1 para estar encima de los pseudo-elementos
 * Max-width: 1200px
 * Text-align: center
 */
.fe-container--final-banner {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	text-align: center;
	pointer-events: auto;
}

/**
 * .fe-final-banner__title: Título principal
 * Font: Poppins, 52px, weight 800
 * Color: Blanco (#FFF)
 * Line-height: 66px
 * Margin: 0
 */
.fe-final-banner__title {
	font-family: var(--fe-font-display);
	font-size: 52px;
	font-weight: 800;
	line-height: 66px;
	color: var(--fe-color-white);
	margin: 0;
}

/**
 * .fe-final-banner__text: Texto descriptivo
 * Font: Inter, 16px, weight 400
 * Color: #A3C6FF (azul claro)
 * Line-height: 26px
 * Max-width: 700px
 * Margin: 0
 */
.fe-final-banner__text {
	font-family: var(--fe-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	color: #a3c6ff;
	margin: 0;
	max-width: 700px;
}

/**
 * .fe-final-banner__btn: Botón de acción
 * Background: #265FF1 (azul primario)
 * Padding: 16px 32px
 * Border-radius: 8px
 * Font: Poppins, 15px, weight 600
 * Color: Blanco
 * Display: inline-flex
 * Text-decoration: none
 * Transition suave
 * Margin-top: 8px para separación
 */
.fe-final-banner__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 32px;
	background: var(--fe-color-primary);
	border: none;
	border-radius: 8px;
	font-family: var(--fe-font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--fe-color-white);
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	white-space: nowrap;
	margin-top: 8px;
}

/**
 * Hover effect
 */
.fe-final-banner__btn:hover {
	background: #1e4fbf;
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(38, 95, 241, 0.4);
}

/**
 * Active state
 */
.fe-final-banner__btn:active {
	transform: translateY(-2px);
}

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE: Tablet (max-width: 1024px) - FINAL BANNER
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.fe-section--final-banner {
		padding: 60px 24px;
		min-height: 350px;
	}

	.fe-final-banner__title {
		font-size: 44px;
		line-height: 58px;
	}

	.fe-final-banner__text {
		font-size: 15px;
		line-height: 24px;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE: Móvil (max-width: 768px) - FINAL BANNER
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.fe-section--final-banner {
		padding: 50px 16px;
		min-height: 300px;
	}

	.fe-section--final-banner::before {
		width: 500px;
		height: 500px;
		bottom: -200px;
		filter: blur(200px);
	}

	.fe-section--final-banner {
		background-position: bottom -40px left -80px, top 15px right -80px;
		background-size: 260px 280px, 300px 320px;
	}

	.fe-section--final-banner::after {
		width: 220px;
		height: 240px;
		bottom: -40px;
		left: -80px;
		opacity: 0.5;
	}

	.fe-final-banner__title {
		font-size: 32px;
		line-height: 44px;
	}

	.fe-final-banner__text {
		font-size: 14px;
		line-height: 22px;
		max-width: 100%;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE: Móvil pequeño (max-width: 640px) - FINAL BANNER
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.fe-section--final-banner {
		padding: 40px 12px;
		min-height: 280px;
	}
	.fe-section--final-banner::before {
		width: 400px;
		height: 400px;
		bottom: -250px;
		filter: blur(180px);
	}

	.fe-section--final-banner {
		background-image: url('../images/logo-bg.svg');
		background-position: bottom -20px left -80px;
		background-size: 220px 240px;
	}

	.fe-section--final-banner::after {
		display: none;
	}

	.fe-final-banner__title {
		font-size: 26px;
		line-height: 36px;
	}

	.fe-final-banner__text {
		font-size: 13px;
		line-height: 20px;
	}

	.fe-final-banner__btn {
		padding: 14px 28px;
		font-size: 14px;
	}
}


/* Ocultar en Mobile si es necesario */
@media (max-width: 768px) {
	.fe-hide-mobile {
		display: none;
	}
}

/* Ocultar en Desktop si es necesario */
@media (min-width: 769px) {
	.fe-hide-desktop {
		display: none;
	}
}