/*
 * Página: portada.
 * Hero cinematográfico y secciones de la experiencia AZOVÉ.
 */

/* ============ 1. Hero ============ */

.hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background-color: var(--color-black);
}

.hero__media {
	position: absolute;
	inset: 0;
	/* Respaldo sensorial si aún no existe poster ni video. */
	background:
		radial-gradient(
			110% 80% at 78% 40%,
			color-mix(in srgb, var(--color-gold) 14%, transparent),
			transparent 62%
		),
		linear-gradient(180deg, var(--color-charcoal), var(--color-black) 75%);
}

.hero__poster,
.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El video se inyecta por JS y aparece con un fundido lento. */
.hero__video {
	opacity: 0;
	transition: opacity var(--duration-slow) var(--ease-out);
}

.hero__video.is-ready {
	opacity: 1;
}

/* Overlay: garantiza contraste del texto sobre video o poster. */
.hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			90deg,
			rgba(10, 10, 10, 0.88) 0%,
			rgba(10, 10, 10, 0.62) 45%,
			rgba(10, 10, 10, 0.22) 100%
		),
		linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, transparent 30%, transparent 60%, rgba(10, 10, 10, 0.75) 100%);
}

.hero__content {
	position: relative;
	z-index: 1;
	padding-block: calc(var(--header-height) + var(--space-l)) var(--space-xl);
}

.hero__title {
	max-width: 15ch;
	font-size: var(--text-display);
}

.hero__text {
	margin-top: var(--space-m);
	max-width: 44ch;
	font-size: var(--text-l);
	color: color-mix(in srgb, var(--color-ivory) 90%, transparent);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	margin-top: var(--space-l);
}

/* ============ 3. Categorías ============ */

.category-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-s);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 900px) {
	.category-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-m);
	}
}

.category-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--space-2xs);
	aspect-ratio: 3 / 4;
	padding: var(--space-m);
	background:
		radial-gradient(
			130% 100% at 50% 0%,
			color-mix(in srgb, var(--color-gold) 10%, transparent),
			transparent 65%
		),
		var(--color-charcoal);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-m);
	text-decoration: none;
	overflow: hidden;
	transition:
		border-color var(--duration-base) var(--ease-out),
		background-color var(--duration-base) var(--ease-out);
}

.category-card:hover {
	border-color: var(--color-line-gold);
}

.category-card__name {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	color: var(--color-ivory);
}

.category-card__text {
	font-size: var(--text-s);
	color: var(--color-ivory-dim);
}

/* ============ 4. Aroma ideal ============ */

.home-aroma__panel {
	padding: clamp(2.5rem, 6vw, 5rem);
	background:
		radial-gradient(
			90% 120% at 50% 120%,
			color-mix(in srgb, var(--color-gold) 9%, transparent),
			transparent 60%
		),
		var(--color-charcoal);
	border: 1px solid var(--color-line-gold);
	border-radius: var(--radius-m);
	text-align: center;
}

.home-aroma__panel .section-heading {
	margin-bottom: var(--space-l);
}

/* ============ 5. Familias olfativas ============ */

.family-grid {
	display: grid;
	gap: var(--space-s);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.family-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-m);
	}
}

@media (min-width: 1000px) {
	.family-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.family-card {
	padding: var(--space-l) var(--space-m);
	background-color: var(--color-charcoal);
	border: 1px solid var(--color-line);
	border-top: 2px solid var(--color-line-gold);
	border-radius: var(--radius-m);
	transition: border-color var(--duration-base) var(--ease-out);
}

.family-card:hover {
	border-top-color: var(--color-gold);
}

.family-card__name {
	font-size: var(--text-xl);
}

.family-card__text {
	margin-top: var(--space-xs);
	color: var(--color-ivory-dim);
	font-size: var(--text-s);
	line-height: 1.6;
}

/* ============ 6. Notas ============ */

.home-notes {
	background:
		linear-gradient(
			180deg,
			transparent,
			color-mix(in srgb, var(--color-charcoal) 55%, transparent) 50%,
			transparent
		);
}

.notes-steps {
	display: grid;
	gap: var(--space-l);
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

@media (min-width: 900px) {
	.notes-steps {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-xl);
	}
}

.notes-step__number {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-style: italic;
	color: var(--color-gold);
}

.notes-step__name {
	margin-top: var(--space-xs);
	font-size: var(--text-xl);
}

.notes-step__text {
	margin-top: var(--space-xs);
	color: var(--color-smoke);
	line-height: 1.7;
}

/* ============ 7. Beneficios ============ */

.benefit-grid {
	display: grid;
	gap: var(--space-m);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.benefit-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.benefit-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.benefit-card {
	padding: var(--space-l) var(--space-m);
	background-color: var(--color-charcoal);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-m);
}

.benefit-card__icon {
	display: inline-flex;
	color: var(--color-gold);
}

.benefit-card__name {
	margin-top: var(--space-s);
	font-family: var(--font-body);
	font-size: var(--text-m);
	font-weight: 600;
}

.benefit-card__text {
	margin-top: var(--space-xs);
	font-size: var(--text-s);
	color: var(--color-ivory-dim);
	line-height: 1.6;
}

/* ============ 8. Testimonios ============ */

.testimonial-grid {
	display: grid;
	gap: var(--space-m);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 900px) {
	.testimonial-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.testimonial-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
	padding: var(--space-l) var(--space-m);
	background-color: var(--color-charcoal);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-m);
}

.testimonial-card__quote p {
	font-family: var(--font-display);
	font-size: var(--text-l);
	font-style: italic;
	line-height: 1.5;
	color: var(--color-ivory);
}

.testimonial-card__quote p::before {
	content: "\201C";
	color: var(--color-gold);
	margin-right: 0.15em;
}

.testimonial-card__quote p::after {
	content: "\201D";
	color: var(--color-gold);
	margin-left: 0.15em;
}

.testimonial-card__author {
	margin-top: auto;
	font-size: var(--text-s);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-gold);
}

.testimonial-card__place {
	display: block;
	margin-top: 0.2em;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--color-ivory-dim);
}

/* ============ 9. Newsletter ============ */

.home-newsletter {
	border-top: 1px solid var(--color-line);
}

.home-newsletter__inner {
	max-width: 44rem;
}

.newsletter-form {
	max-width: 34rem;
	margin-inline: auto;
}

.newsletter-form__note {
	margin-top: var(--space-s);
	font-size: var(--text-s);
	color: var(--color-smoke);
	text-align: center;
}