/* =========================================================
   HERO — Sección a Pantalla Completa
   =========================================================

   La primera cosa que ve el usuario: imagen de fondo a 100vh
   con título superpuesto y botón CTA.

   Capas (de atrás a adelante):
   1. .hero-bg       → Imagen de fondo (position: absolute)
   2. .hero-overlay  → Gradiente semi-transparente
   3. .hero-content  → Texto y botón (z-index: 1)
   ========================================================= */

/* Contenedor principal */
.hero-section {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	overflow: hidden;
	background: var(--color-ink);
}

/* Imagen de fondo: cubre todo el hero */
.hero-bg {
	position: absolute;
	inset: 0;
}

.hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
}

/* Overlay: gradiente de arriba (claro) a abajo (oscuro) */
.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(43, 50, 38, 0.2) 0%,
		rgba(43, 50, 38, 0.6) 100%
	);
}

/* Contenido: título, tagline, botón */
.hero-content {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 2rem var(--frame-margin);
	max-width: 700px;
}

/* Título: enorme, serif, con sombra */
.hero-title {
	font-family: var(--font-display);
	font-weight: 500;
	font-style: italic;
	font-size: clamp(2.8rem, 8vw, 5.5rem);
	line-height: 1;
	color: var(--color-cream);
	margin: 0;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

/* Tagline */
.hero-tagline {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-cream-deep);
	margin: 1rem 0 0;
	opacity: 0.85;
}

/* Divisor SVG */
.hero-divider {
	display: flex;
	justify-content: center;
	margin: 1.5rem 0 2rem;
	color: var(--color-cosmos);
}

.hero-divider svg {
	width: 80px;
	height: auto;
}

/* Botón CTA */
.hero-cta {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-cream);
	border: 1px solid rgba(247, 241, 228, 0.4);
	padding: 0.75rem 2rem;
	transition: all 0.3s ease;
}

.hero-cta:hover {
	background: var(--color-magenta);
	border-color: var(--color-magenta);
	color: var(--color-cream);
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	.hero-cta {
		transition: none;
	}
}