/*
 * Portada: héroe, collage editorial, filosofía, doble grid, envíos y reseñas.
 */

/* ---------- Héroe ---------- */

/*
 * Con escaparate el héroe ocupa más de una pantalla y su interior queda
 * pegado (sticky): así las prendas entran con el scroll sin que la vista
 * abandone el héroe. --p (0→1) es el progreso, lo escribe main.js.
 */
/* Fondo oscuro en todo el bloque: si por redondeo quedara algún píxel sin
   cubrir por el video, se funde con él en vez de abrir una franja clara. */
.hero-stage {
	--p: 0;
	position: relative;
	background: #16171a;
}

.hero-stage.has-showcase {
	height: 240vh;
}

/* El héroe ocupa exactamente lo que queda bajo el encabezado, para que su
   contenido se vea completo sin desplazarse. */
/* --hero-offset lo mide main.js sobre el encabezado ya renderizado. */
.hero-viewport {
	position: relative;
	height: calc(100vh - var(--hero-offset, var(--header-h)));
	height: calc(100svh - var(--hero-offset, var(--header-h)));
	min-height: 480px;
	overflow: hidden;
	background-color: var(--surface-container);
}

/*
 * Queda pegado bajo el encabezado compactado, pero mide contra el
 * encabezado completo: así en la primera pantalla —que es cuando la barra
 * está entera— el héroe se ve de arriba abajo sin cortarse.
 */
/*
 * --hero-top es el borde inferior real del encabezado, y main.js lo reescribe
 * en cada cuadro de scroll. Sirve de tope y de resta para la altura: así el
 * héroe llena exactamente lo visible mientras la barra se compacta. Con una
 * medida fija (la barra entera) el héroe quedaba más corto que la pantalla al
 * hacer scroll y asomaba una franja del fondo oscuro del bloque debajo.
 */
.hero-stage.has-showcase .hero-viewport {
	position: sticky;
	top: var(--hero-top, var(--header-h-min));
	height: calc(100vh - var(--hero-top, var(--hero-offset, var(--header-h))));
	height: calc(100svh - var(--hero-top, var(--hero-offset, var(--header-h))));
}

.hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: #16171a;
	overflow: hidden;
}

/* Posición absoluta explícita: así el video llena el marco aunque el
   navegador aún no conozca sus dimensiones reales. */
.hero-video,
.hero-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Sin video ni imagen: fondo tonal oscuro para que el texto claro respire. */
.hero--placeholder .hero-media {
	background-image: linear-gradient(160deg, #303030 0%, #474743 55%, #5f5e5b 100%);
}

@media (max-width: 700px) {
	/* En móvil manda la altura de pantalla, no un mínimo fijo: con un
	   mínimo mayor el héroe sobresale y su contenido queda cortado. */
	.hero-viewport {
		min-height: 0;
	}
	.hero-overlay {
		padding-bottom: clamp(56px, 9vh, 96px);
	}
	/* Aire entre el final del héroe y la sección siguiente. */
	.hero-stage + .home-section {
		padding-top: calc(var(--section-gap-mobile) + var(--unit) * 4);
	}
}

/* El contenido se ancla abajo; el degradado asienta el texto sobre el fondo.
   No captura el puntero para no bloquear el escaparate que hay detrás. */
.hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: linear-gradient(to top, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0.2) 38%, rgb(0 0 0 / 0.04) 68%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	text-align: center;
	padding: 0 var(--margin-mobile) clamp(48px, 7vh, 96px);
	pointer-events: none;
}

.hero-overlay a {
	pointer-events: auto;
}

/* ---------- Escaparate: prisma que gira con el scroll ----------
 * Cada producto es una cara. Con 3 piezas es un prisma triangular y con 4
 * un cubo; --face-angle y --apothem los calcula el PHP según cuántas haya.
 */
.hero-showcase {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 16vh;
	perspective: 1400px;
	perspective-origin: 50% 45%;
	pointer-events: none;
}

/* Zona que captura el puntero: solo alrededor del cubo, para no bloquear
   el botón del héroe que está más abajo. */
.hero-prism-wrap {
	--face-w: clamp(150px, 16vw, 240px);
	position: relative;
	width: calc(var(--face-w) * 2.1);
	height: calc(var(--face-w) * 4 / 3 * 1.35);
	display: flex;
	align-items: center;
	justify-content: center;
	transform-style: preserve-3d;
	pointer-events: auto;
	cursor: grab;
	touch-action: pan-y;
	/* Sin esto el navegador arrastra la imagen en lugar de girar el cubo. */
	user-select: none;
	-webkit-user-select: none;
}

.hero-prism-wrap img {
	-webkit-user-drag: none;
	pointer-events: none;
}

.hero-prism-wrap.is-dragging {
	cursor: grabbing;
}

/*
 * --ra: montaje (0→1) con el scroll. --ry / --rx: giro con el puntero.
 * El eje va inclinado para que el cubo no se lea plano.
 */
.hero-prism {
	position: relative;
	width: var(--face-w);
	height: calc(var(--face-w) * 4 / 3);
	transform-style: preserve-3d;
	transform:
		rotateZ(-7deg)
		rotateX(calc(-14deg + var(--rx, 0deg)))
		rotateY(var(--ry, -28deg))
		scale(calc(0.82 + var(--ra, 0) * 0.18));
	will-change: transform;
}

/*
 * Cada cara arranca lejos y converge al armarse el cubo. La separación
 * (--face-gap) las despega de las aristas: se ve el volumen sin que
 * los cantos se toquen.
 */
/*
 * Caras separadas y traslúcidas: al verse unas a través de otras el
 * conjunto gana profundidad. La pieza señalada sube a 90% y se despega
 * del resto.
 */
.hero-face {
	--face-gap: 90px;
	--face-opacity: 0.62;
	position: absolute;
	inset: 0;
	display: block;
	/* Sin ocultar la cara trasera: en escorzo se ven varias a la vez. */
	backface-visibility: visible;
	opacity: calc(var(--ra, 0) * var(--face-opacity));
	transform:
		rotateY(calc(var(--i) * var(--face-angle)))
		translateZ(calc((var(--face-w) * var(--apothem) + var(--face-gap)) * (1 + (1 - var(--ra, 0)) * 2.2)));
	box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.55);
	pointer-events: auto;
	transition: opacity 220ms ease;
}

.hero-face:hover,
.hero-face:focus-visible {
	--face-opacity: 0.9;
	z-index: 2;
}

.hero-face-media {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--surface-container);
}

.hero-face-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Las caras laterales se oscurecen: da volumen sin sombras falsas. */
.hero-face::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgb(0 0 0 / 0.28), rgb(0 0 0 / 0) 55%);
	pointer-events: none;
}

.hero-face:hover::after,
.hero-face:focus-visible::after {
	background: rgb(0 0 0 / 0.12);
}

/* Ficha que aparece al pasar el cursor */
.hero-face-info {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translate(-50%, 10px);
	opacity: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 10px 16px;
	white-space: nowrap;
	background: color-mix(in srgb, var(--surface) 94%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 12px 28px rgb(0 0 0 / 0.18);
	pointer-events: none;
	z-index: 2;
	transition: opacity var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out-expo);
}

.hero-face:hover .hero-face-info,
.hero-face:focus-visible .hero-face-info {
	opacity: 1;
	transform: translate(-50%, 0);
}

.hero-face-name {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--on-surface);
}

.hero-face-price {
	font-size: 13px;
	color: var(--on-surface-variant);
}

.hero-face-cta {
	margin-top: 4px;
	color: var(--accent-strong);
	border-bottom: 1px solid var(--accent-strong);
	font-size: 10px;
}

/* Sombra proyectada bajo el cubo */
.hero-prism-shadow {
	position: absolute;
	left: 50%;
	bottom: 4%;
	width: clamp(170px, 19vw, 280px);
	height: 24px;
	transform: translateX(-50%) scaleX(calc(0.7 + var(--ra, 0) * 0.3));
	background: radial-gradient(ellipse at center, rgb(0 0 0 / 0.45), rgb(0 0 0 / 0) 70%);
	opacity: calc(var(--ra, 0) * 0.9);
	pointer-events: none;
}


/* Indicación de deslizar */
.hero-scroll-hint {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	z-index: 4;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--surface) 80%, transparent);
	opacity: calc(1 - var(--p) * 2.4);
	pointer-events: none;
}

.hero-scroll-hint::after {
	content: "";
	display: block;
	width: 1px;
	height: 22px;
	margin: 8px auto 0;
	background: currentColor;
	transform-origin: top;
	animation: heroHint 2.4s var(--ease-out-expo) infinite;
}

@keyframes heroHint {
	0%,
	100% {
		transform: scaleY(0.35);
		opacity: 0.4;
	}
	50% {
		transform: scaleY(1);
		opacity: 1;
	}
}

/*
 * Móvil: el héroe es un bloque normal, sin anclaje ni restas de alturas.
 * El visor pegajoso se alineaba con una medida del encabezado calculada,
 * y cualquier diferencia con la real abría una franja encima. Aquí basta
 * una fracción de la pantalla: no depende de nada más y nunca deja hueco.
 */
@media (max-width: 900px) {
	.hero-stage,
	.hero-stage.has-showcase {
		height: auto;
	}
	.hero-viewport,
	.hero-stage.has-showcase .hero-viewport {
		position: relative;
		top: auto;
		height: 78vh;
		height: 78svh;
		min-height: 0;
	}
	.hero-showcase,
	.hero-prism-shadow,
	.hero-scroll-hint {
		display: none;
	}
}


@media (prefers-reduced-motion: reduce) {
	.hero-scroll-hint::after {
		animation: none;
	}
	.hero-garment {
		transition: none;
	}
}

.hero-kicker {
	color: var(--white);
	letter-spacing: 0.4em;
	margin: 0 0 calc(var(--unit) * 2);
}

.hero-title {
	color: var(--white);
	font-size: clamp(40px, 5.5vw + 10px, 76px);
	line-height: 1.05;
	margin-bottom: calc(var(--unit) * 4);
	text-wrap: balance;
}

/* ---------- Collage editorial geométrico ---------- */

.section-editorial {
	background: var(--surface-container-low);
	padding-block: calc(var(--unit) * 4);
}

.editorial-grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: var(--gutter);
	align-items: center;
	padding-block: calc(var(--unit) * 8);
}

.editorial-copy {
	z-index: 2;
	margin-right: -5%;
}

.editorial-copy .headline-lg {
	margin-bottom: calc(var(--unit) * 4);
}

.editorial-copy .body-lg {
	max-width: 28rem;
	margin: 0 0 calc(var(--unit) * 6);
}

.editorial-collage {
	position: relative;
	height: clamp(480px, 55vw, 800px);
}

.editorial-collage figure {
	position: absolute;
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.15);
}

.collage-main {
	top: 0;
	right: 0;
	width: 75%;
	aspect-ratio: 3 / 4;
	z-index: 0;
}

.collage-mid {
	top: 25%;
	left: 0;
	width: 50%;
	aspect-ratio: 4 / 5;
	border: 8px solid var(--surface);
	z-index: 1;
	background: var(--surface-container-high);
}

.collage-detail {
	bottom: 0;
	right: 25%;
	width: 33%;
	aspect-ratio: 1 / 1;
	border: 4px solid var(--surface);
	z-index: 2;
	background: var(--surface-container-highest);
}

@media (max-width: 900px) {
	.editorial-grid {
		grid-template-columns: 1fr;
	}
	.editorial-copy {
		margin-right: 0;
		margin-bottom: calc(var(--unit) * 6);
	}
	.editorial-collage {
		height: auto;
		aspect-ratio: 4 / 5;
	}
}

/* ---------- Filosofía ---------- */

.section-filosofia {
	padding-block: clamp(56px, 5vw + 24px, 96px);
}

.filosofia-grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(var(--gutter), 5vw, 96px);
	align-items: center;
	max-width: 1120px;
}

.filosofia-media {
	max-width: 400px;
	justify-self: end;
	width: 100%;
}

.filosofia-copy .headline-lg {
	font-size: clamp(26px, 1.8vw + 14px, 38px);
}

.filosofia-media {
	position: relative;
}

.filosofia-image {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--surface-container);
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.15);
	z-index: 1;
}

.filosofia-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.filosofia-block {
	position: absolute;
	top: -48px;
	left: -48px;
	width: 75%;
	height: 75%;
	background: var(--primary-container);
	z-index: 0;
}

.filosofia-copy .headline-lg {
	margin-bottom: calc(var(--unit) * 4);
}

.filosofia-copy .body-lg {
	max-width: 28rem;
	margin: 0 0 calc(var(--unit) * 6);
}

@media (max-width: 900px) {
	.filosofia-grid {
		grid-template-columns: 1fr;
	}
	.filosofia-block {
		top: -20px;
		left: -20px;
	}
}

/* ---------- Doble grid editorial ---------- */

.section-double-grid {
	background: var(--surface-container-low);
	border-top: 1px solid var(--outline-variant);
}

.double-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gutter);
	align-items: start;
}

.double-grid-item figure {
	aspect-ratio: 4 / 3;
	margin-bottom: calc(var(--unit) * 4);
}

/*
 * Ventanas del doble grid: cada una recorta el mismo video. El de la
 * derecha se desplaza una columna —y el desnivel del bloque— para que
 * ambas muestren la misma escena continua, como una máscara conjunta.
 */
.grid-window {
	position: relative;
	overflow: hidden;
	background: var(--surface-container);
}

.grid-video {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(200% + var(--gutter));
	height: auto;
	min-height: 100%;
	object-fit: cover;
	display: block;
}

.double-grid-item.is-offset .grid-video {
	left: calc(-100% - var(--gutter));
	top: calc(var(--unit) * -12);
}

/* Velo sobre la ventana que lleva el nombre, para que el texto se lea. */
.grid-window--1::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(0 0 0 / 0.42), rgb(0 0 0 / 0.1));
	pointer-events: none;
}

/* Ocupa la mitad derecha de la ventana: del centro hacia el borde. */
.grid-wordmark {
	position: absolute;
	left: 50%;
	right: 5%;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	font-family: var(--font-display);
	font-size: clamp(26px, 3.4vw, 58px);
	line-height: 1;
	letter-spacing: 0.12em;
	text-align: center;
	text-transform: uppercase;
	color: var(--white);
	text-shadow: 0 6px 30px rgb(0 0 0 / 0.45);
	white-space: nowrap;
	pointer-events: none;
	display: flex;
	align-items: baseline;
	justify-content: center;
}

/* La inicial en script y el resto en la serif del kit: el mismo juego de
   contraste que hace el logotipo. */
.grid-wordmark-initial {
	font-family: var(--font-script);
	font-size: 1.7em;
	text-transform: none;
	letter-spacing: 0;
	line-height: 0.8;
	margin-right: 0.04em;
}

.double-grid-item .headline-md {
	margin-bottom: calc(var(--unit) * 2);
}

.double-grid-item p {
	color: var(--on-surface-variant);
	max-width: 24rem;
	margin: 0 0 calc(var(--unit) * 3);
}

.double-grid-item.is-offset {
	margin-top: calc(var(--unit) * 12);
}

@media (max-width: 700px) {
	.double-grid {
		grid-template-columns: 1fr;
	}
	.double-grid-item.is-offset {
		margin-top: 0;
	}
	/* En una sola columna la segunda ventana enseña otra zona de la escena. */
	.double-grid-item.is-offset .grid-video {
		left: -50%;
		top: 0;
	}
}

/* ---------- Banner de envíos ---------- */

.section-shipping {
	padding-block: calc(var(--unit) * 8);
	border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
}

.shipping-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: calc(var(--unit) * 4);
	text-align: center;
}

.shipping-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Especificidad de 2 clases: components.css define .svg-icon a 22px y se
   carga después, así que una sola clase aquí no ganaría. */
.shipping-item .shipping-icon {
	width: 52px;
	height: 52px;
	color: var(--primary);
	margin-bottom: calc(var(--unit) * 2.5);
}

@media (max-width: 700px) {
	.shipping-item .shipping-icon {
		width: 44px;
		height: 44px;
	}
}

.shipping-item h4 {
	font-family: var(--font-body);
	color: var(--on-surface);
	margin-bottom: 4px;
}

.shipping-item p {
	font-size: 12px;
	color: var(--on-surface-variant);
	max-width: 160px;
	margin: 0;
}

@media (max-width: 900px) {
	.shipping-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.shipping-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Reseñas ---------- */
/* El carrusel de reseñas vive en components.css (.reviews-carousel). */