/*
 * Componente: Hero Producto
 *
 * Hero refactorizado con dos contenedores horizontales:
 * - Izquierda: Título H1, subtítulo, badges, botón CTA
 * - Derecha: Card con formulario Brevo
 *
 * Fondo dinámico: patrón de puntos + gradiente de color (variable CSS).
 *
 * BEM: .fe-hero__*
 * Encolado por: fluyez_empresas_enqueue_component_style('hero-producto')
 */

/* ────────────────────────────────────────────────────────────────────────────
   VARIABLES Y VALORES POR DEFECTO
   ──────────────────────────────────────────────────────────────────────────── */

:root {
	--fe-color-primary: #265ff1;
	--fe-color-dark: #1f2a37;
	--fe-color-text: #4a5568;
	--fe-color-white: #ffffff;
}

/* ────────────────────────────────────────────────────────────────────────────
   WRAPPER PRINCIPAL (HERO) — Asymmetric Gradient + Organic Blobs
   ──────────────────────────────────────────────────────────────────────────── */

.fe-hero {
	position: relative;
	overflow: hidden;
	padding: 80px 0;
	background: linear-gradient(135deg, #0D1A3A 0%, #265FF1 50%, #4A90FF 100%);
	min-height: 700px;
	display: flex;
	align-items: center;
}

/* Blob 1: Azul marino pulsante (arriba izquierda) */
.fe-hero::before {
	content: '';
	position: absolute;
	top: -100px;
	left: -150px;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(13, 26, 58, 0.4) 0%, transparent 70%);
	border-radius: 50%;
	filter: blur(80px);
	animation: blob-pulse-1 8s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

/* Blob 2: Azul claro flotante (abajo derecha) */
.fe-hero::after {
	content: '';
	position: absolute;
	bottom: -200px;
	right: -100px;
	width: 700px;
	height: 700px;
	background: radial-gradient(circle, rgba(38, 95, 241, 0.3) 0%, transparent 70%);
	border-radius: 50%;
	filter: blur(100px);
	animation: blob-pulse-2 10s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

/* Animación blob 1: pulsante con oscilación */
@keyframes blob-pulse-1 {
	0%, 100% { 
		transform: translate(0, 0) scale(1);
		opacity: 0.4;
	}
	50% { 
		transform: translate(-30px, 30px) scale(1.1);
		opacity: 0.6;
	}
}

/* Animación blob 2: pulsante con fase inversa */
@keyframes blob-pulse-2 {
	0%, 100% { 
		transform: translate(0, 0) scale(1);
		opacity: 0.3;
	}
	50% { 
		transform: translate(40px, -40px) scale(0.95);
		opacity: 0.5;
	}
}

/* Overlay de puntos random (efecto noise subtle) */
.fe-hero {
	background-image: 
		linear-gradient(135deg, #0D1A3A 0%, #265FF1 50%, #4A90FF 100%),
		radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 1%),
		radial-gradient(2px 2px at 80% 70%, rgba(255, 255, 255, 0.15) 0%, transparent 1%),
		radial-gradient(2px 2px at 40% 80%, rgba(255, 255, 255, 0.18) 0%, transparent 1%),
		radial-gradient(2px 2px at 90% 10%, rgba(255, 255, 255, 0.15) 0%, transparent 1%),
		radial-gradient(2px 2px at 10% 60%, rgba(255, 255, 255, 0.2) 0%, transparent 1%);
	background-size: 
		100% 100%,
		200% 200%,
		150% 150%,
		250% 250%,
		180% 180%,
		220% 220%;
	background-position: 
		0 0,
		0 0,
		40px 60px,
		130px 270px,
		70px 100px,
		150px 50px;
	background-attachment: fixed;
}

/* ────────────────────────────────────────────────────────────────────────────
   CONTENEDOR FLEX (DOS COLUMNAS)
   ──────────────────────────────────────────────────────────────────────────── */

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

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 3rem;
	position: relative;
	z-index: 1;
}

/* ────────────────────────────────────────────────────────────────────────────
   CONTENEDOR IZQUIERDO (CONTENIDO)
   ──────────────────────────────────────────────────────────────────────────── */

.fe-hero__left {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* ── Badges de mercado ─── */

.fe-hero__badges {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.fe-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1rem;
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	border-radius: 20px;
	background: rgba(38, 95, 241, 0.1);
	color: var(--fe-color-primary);
	transition: all 0.2s ease;
}

.fe-hero__badge:hover {
	background: rgba(38, 95, 241, 0.2);
}

.fe-hero__badge--star {
	background: rgba(255, 193, 7, 0.12);
	color: #f59e0b;
}

.fe-hero__badge-star {
	font-size: 1em;
}

/* ── Título H1 ─── */

.fe-hero__title {
	margin: 0;
	color: var(--fe-color-dark);
	font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 40px;
	font-weight: 600;
	font-style: normal;
	line-height: 56px;
	letter-spacing: -0.5px;
}

/* ── Subtítulo ─── */

.fe-hero__subtitle {
	margin: 0;
	color: var(--fe-color-text);
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	max-width: 500px;
}

/* ── Botón CTA ─── */

.fe-hero__cta {
	display: flex;
	width: fit-content;
	padding: 10px 24px;
	justify-content: center;
	align-items: center;
	gap: 16px;
	border-radius: 8px;
	border: 1px solid var(--fe-color-primary);
	background: transparent;
	color: var(--fe-color-primary);
	text-decoration: none;
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.fe-hero__cta:hover {
	background: var(--fe-color-primary);
	color: var(--fe-color-white);
	box-shadow: 0 8px 16px rgba(38, 95, 241, 0.2);
	transform: translateY(-2px);
}

.fe-hero__cta:active {
	transform: translateY(0);
	box-shadow: 0 4px 8px rgba(38, 95, 241, 0.15);
}

/* ────────────────────────────────────────────────────────────────────────────
   CONTENEDOR DERECHO (CARD CON FORMULARIO)
   ──────────────────────────────────────────────────────────────────────────── */

.fe-hero__right {
	flex: 0 0 auto;
	width: 100%;
	max-width: 540px;
}

/* ── Card wrapper ─── */

.fe-hero__form-card {
	display: flex;
	width: 100%;
	padding: 40px 36px;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	border-radius: 20px;
	border: 1px solid rgba(38, 95, 241, 0.15);
	background: var(--fe-color-white);
	box-shadow: 0 20px 60px 0 rgba(0, 13, 89, 0.08);
}

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE: TABLET (1024px)
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.fe-hero {
		padding: 60px 0;
		min-height: auto;
	}

	.fe-hero::before {
		width: 450px;
		height: 450px;
		top: -80px;
		left: -120px;
		filter: blur(70px);
	}

	.fe-hero::after {
		width: 500px;
		height: 500px;
		bottom: -150px;
		right: -80px;
		filter: blur(80px);
	}

	.fe-hero__container {
		gap: 2rem;
		flex-direction: column;
	}

	.fe-hero__title {
		font-size: 40px;
		line-height: 52px;
	}

	.fe-hero__form-card {
		max-width: 100%;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE: MOBILE (768px)
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.fe-hero {
		padding: 50px 0;
		min-height: auto;
	}

	.fe-hero::before {
		width: 350px;
		height: 350px;
		top: -80px;
		left: -150px;
		filter: blur(60px);
	}

	.fe-hero::after {
		width: 400px;
		height: 400px;
		bottom: -180px;
		right: -120px;
		filter: blur(70px);
	}

	.fe-hero__container {
		flex-direction: column;
		gap: 2rem;
		padding: 0 1.5rem;
	}

	.fe-hero__left {
		gap: 1.25rem;
		text-align: center;
		align-items: center;
	}

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

	.fe-hero__subtitle {
		max-width: 100%;
		font-size: 16px;
	}

	.fe-hero__badges {
		justify-content: center;
	}

	.fe-hero__right {
		width: 100%;
		max-width: 100%;
	}

	.fe-hero__form-card {
		padding: 32px 24px;
		gap: 12px;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE: SMALL MOBILE (480px)
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
	.fe-hero {
		padding: 32px 0;
		background-size:
			12px 12px,
			100% 100%;
	}

	.fe-hero__container {
		gap: 1.5rem;
		padding: 0 1rem;
	}

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

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

	.fe-hero__form-card {
		padding: 24px 20px;
	}
}