/* =========================================================================
   hero.css — Hero de portada: fondo con gradiente claro azulado, eyebrow,
   H1, texto de apoyo, dos CTAs, imagen con badge flotante.
   ========================================================================= */

.hero {
	position: relative;
	background: var(--grad-hero);
	overflow: hidden;
	padding-block: clamp(48px, 7vw, 96px);
}

/* Formas orgánicas de fondo (azul/cian) — puro CSS, sin imágenes. */
.hero::before,
.hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(10px);
	opacity: 0.5;
	z-index: 0;
	pointer-events: none;
}
.hero::before {
	width: 420px; height: 420px;
	right: -120px; top: -140px;
	background: radial-gradient(circle at 30% 30%, rgba(19,167,214,0.35), transparent 70%);
}
.hero::after {
	width: 360px; height: 360px;
	left: -120px; bottom: -160px;
	background: radial-gradient(circle at 60% 40%, rgba(8,124,167,0.22), transparent 70%);
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	gap: clamp(30px, 5vw, 64px);
}

.hero__content { max-width: 560px; }

.hero__title {
	font-size: clamp(2.3rem, 5vw, 3.1rem);
	margin: 0 0 18px;
}

.hero__text {
	font-size: 1.15rem;
	color: var(--muted);
	margin-bottom: 6px;
}

/* Imagen del hero con badge flotante. */
.hero__media {
	position: relative;
}
.hero__media img {
	width: 100%;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-lg);
	display: block;
	object-fit: cover;
}
.hero__badge {
	position: absolute;
	left: -14px;
	bottom: 24px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card);
	padding: 14px 18px;
	max-width: 250px;
}
.hero__badge strong {
	display: block;
	font-family: var(--font-heading);
	color: var(--navy);
	font-size: 0.98rem;
	line-height: 1.3;
}
.hero__badge span {
	font-size: 0.85rem;
	color: var(--muted);
}

/* Placeholder cuando aún no hay imagen (degradado suave con icono). */
.hero__media--placeholder {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-card);
	background:
		linear-gradient(160deg, rgba(19,167,214,0.14), rgba(8,124,167,0.10)),
		var(--sky);
	box-shadow: var(--shadow-lg);
	display: grid;
	place-items: center;
	color: var(--blue);
}

@media (max-width: 900px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__media { order: -1; }
	.hero__badge { left: 12px; }
}