/* =========================================================================
   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;
}
/* Frase de apoyo bajo los botones (con icono de check). */
.hero__note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 18px;
	color: var(--muted);
	font-size: 0.92rem;
	line-height: 1.4;
}
.hero__note svg {
	width: 18px; height: 18px;
	flex: 0 0 18px;
	color: var(--blue);
	margin-top: 2px;
}

/* Badge sobre la imagen: icono + título, translúcido con blur. */
.hero__badge {
	position: absolute;
	right: -14px;
	bottom: 24px;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 280px;
	background: rgba(255, 255, 255, 0.85);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 14px;
	box-shadow: var(--shadow-card);
	padding: 12px 16px;
}
.hero__badge-icon {
	width: 36px; height: 36px;
	flex: 0 0 36px;
	border-radius: 10px;
	background: var(--sky);
	color: var(--blue);
	display: grid;
	place-items: center;
}
.hero__badge-icon svg { width: 20px; height: 20px; }
.hero__badge-text {
	display: block;
	font-size: 0.82rem;
	color: var(--muted);
	line-height: 1.3;
}
.hero__badge-text strong {
	display: block;
	font-family: var(--font-heading);
	color: var(--navy);
	font-size: 0.95rem;
	line-height: 1.2;
}

/* 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; }
	/* En móvil el badge se mantiene compacto, abajo a la derecha. */
	.hero__badge {
		right: 10px;
		left: auto;
		bottom: 10px;
		max-width: 82%;
		padding: 10px 14px;
		background: rgba(255, 255, 255, 0.85);
	}
}