/* ==========================================================================
   Velas Velia — Home · Hero
   --------------------------------------------------------------------------
   Estilos propios de la sección hero de la Home. Consume EXCLUSIVAMENTE los
   tokens de tokens.css y reutiliza las clases vv- de main.css
   (.vv-btn, .vv-display, .vv-script, .vv-container, .vv-torn--top).

   Replica el resultado visual del componente Hero del Storefront:
   foto a sangre (~460px) + scrim gradiente cálido + texto sobre la imagen.
   ========================================================================== */

/* --- Contenedor del hero ------------------------------------------------- */
.vv-hero {
	position: relative;
	overflow: hidden;
	background: var(--gold-900); /* base cálida bajo la foto mientras carga */
}

/* --- Foto de fondo a sangre ----------------------------------------------
   La foto pasa a ser una CAPA absoluta que cubre todo el hero; así el alto
   real lo marca el contenido (.vv-hero__inner) y nunca se recorta. */
.vv-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 40%;
	background-repeat: no-repeat;
}

/* --- Scrim gradiente cálido (oro profundo, de izquierda a derecha) -------- */
.vv-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(110, 87, 54, 0.82),  /* --gold-900 a ~82% */
		rgba(110, 87, 54, 0.34)   /* --gold-900 a ~34% */
	);
}

/* --- Contenido centrado verticalmente ------------------------------------
   En FLUJO (no absolute): el contenido define la altura del hero. Usamos
   min-height para conservar la presencia de la foto sin recortar el texto. */
.vv-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(380px, 70vh, 460px);
	padding-block: var(--space-12);
	z-index: 1;
}

/* --- Título display sobre la foto ---------------------------------------- */
.vv-hero__title {
	margin: 0;
	max-width: 640px;
	/* Título del hero en Erotique (serif display de marca). */
	font-family: var(--font-display);
	font-size: var(--text-5xl); /* 84px — escala display grande del hero */
	line-height: 0.98;
	color: var(--white);
}

/* --- Subtítulo en mayúsculas con tracking (mockup: "DE MASCOTAS") -------- */
.vv-hero__subtitle {
	display: block;
	margin-top: var(--space-3);
	font-family: var(--font-sans);
	font-weight: var(--fw-medium);
	font-size: var(--text-xl); /* 28px */
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	line-height: 1;
	color: #FBEFDC; /* crema cálido sobre la foto */
}

/* --- CTA único + regla horizontal --------------------------------------- */
.vv-hero__actions {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	margin-top: var(--space-10);
}

/* CTA sobre foto: pill translúcido con borde claro (mockup "Comprar Aquí") */
.vv-hero__cta {
	flex: 0 0 auto;
	background: rgba(255, 255, 255, 0.12);
	color: var(--white);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: var(--radius-pill);
	padding: var(--space-4) var(--space-12);
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: var(--text-md);
	letter-spacing: 0.02em;
}

.vv-hero__cta:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.24);
	color: var(--white);
}

/* Línea fina que sale del botón hacia la derecha (decorativa, como el mockup) */
.vv-hero__rule {
	flex: 1 1 auto;
	height: 1px;
	max-width: 360px;
	background: rgba(255, 255, 255, 0.55);
}

/* --- Borde de papel rasgado al pie --------------------------------------- */
.vv-hero__torn {
	position: absolute;
	left: 0;
	bottom: -1px; /* sella el seam contra el bloque siguiente */
	z-index: 2;
	height: 52px;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 768px) {
	/* La altura ya la marca el contenido; solo escalamos la tipografía */
	.vv-hero__title  { font-size: var(--text-4xl); }   /* 64px */
	.vv-hero__subtitle { font-size: var(--text-lg); }  /* 22px */
}

@media (max-width: 480px) {
	/* Título escalable: nunca menos legible que el flujo, sin desbordar */
	.vv-hero__title  {
		font-size: var(--text-3xl);   /* 48px */
		max-width: 100%;              /* deja que ocupe todo el ancho disponible */
		overflow-wrap: anywhere;     /* parte palabras largas antes de recortar */
	}
	.vv-hero__subtitle { font-size: var(--text-base); }
	/* La regla decorativa se oculta en móvil; el botón a ancho completo */
	.vv-hero__rule { display: none; }
	.vv-hero__actions { gap: var(--space-3); }
	.vv-hero__cta { width: 100%; text-align: center; }
}