/* ==========================================================================
   Kamala — inicio: monturas, marcas, sol, titanio y reseñas.
   La portada (.hero) y las fotos con texto (.tile) están en layout.css.
   ========================================================================== */

/* Cabecera de sección: antetítulo pequeño + título fino en mayúsculas. */

.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(20px, 2.4vw, 36px);
}

.kicker {
	margin-bottom: 10px;
	font-size: clamp(0.6875rem, 0.62rem + 0.25vw, 0.8125rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Títulos de sección en segundo plano (segunda revisión del cliente: "reducir
   el protagonismo tipográfico", la prioridad son las fotos). Antes, de 29 a
   38 px. */
.headline {
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.625rem);
	font-weight: 300;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.1;
}

/* Vídeo a gran formato bajo la portada: a todo el ancho, sin controles. ------- */

.home-video__frame {
	display: block;
	background: var(--surface);
}

.home-video__media {
	display: block;
	width: 100%;
	height: min(86svh, 56.25vw);
	min-height: 320px;
	object-fit: cover;
}

/* Monturas ------------------------------------------------------------------ */

/* Carrusel (segunda revisión del cliente, 13/10): la gafa es la protagonista y
   el texto va en segundo plano. Tres modelos a la vista y el cuarto asomando
   por el borde derecho (antes cuatro y el quinto), con la gafa al 86 % del
   ancho de la tarjeta (antes al 80 % de una tarjeta más pequeña). La tarjeta
   es vertical, como en Kaleos (decisión de Andrés entre tres proporciones).
   Las tres medidas van en variables porque de ellas sale también la altura
   de las flechas. */
.home-frames {
	--frames-per: 3.25; /* tarjetas a la vista */
	--frames-gaps: 20px; /* huecos entre las que se ven enteras */
	--frames-ratio: 1.2; /* alto de la foto respecto a su ancho (5:6) */
}

.home-frames__strip {
	position: relative;
}

.home-frames__list {
	/* "relative" encierra dentro de la tira los textos ocultos de cada
	   tarjeta (.visually-hidden, que son "absolute"). Sin esto se salían de
	   la tira y ensanchaban toda la página. */
	position: relative;
	display: flex;
	gap: 10px;
	margin: 0 calc(var(--gutter) * -1) 0 0;
	padding: 0 var(--gutter) 0 0;
	list-style: none;
	overflow-x: auto;
	/* Solo de lado: si no, con el dedo la tira también se movía unos píxeles
	   arriba y abajo (Luca, 15/10). */
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.home-frames__list::-webkit-scrollbar {
	display: none;
}

.frame-card {
	flex: 0 0 calc((100% - var(--frames-gaps)) / var(--frames-per));
	scroll-snap-align: start;
}

.frame-card__media {
	--fit-w: 86;
	--fit-h: 76;
	position: relative;
	display: block;
	margin-bottom: 20px;
	aspect-ratio: 1 / var(--frames-ratio);
	overflow: hidden;
	background: var(--surface);
}

/* Segunda foto del modelo (de lado): aparece al pasar el cursor. */
.frame-card .frame-card__media .frame-card__alt {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.45s var(--ease-soft), transform 1s var(--ease-soft);
}

.frame-card__media.has-alt > img:first-child {
	transition: opacity 0.45s var(--ease-soft), transform 1s var(--ease-soft);
}

/* Si la segunda foto va encajada por su gafa (.fit-photo, base.css), se coloca
   desde el centro del recuadro: el "inset: 0" de arriba la mandaba a la
   esquina y al pasar el cursor salía descuadrada. */
@supports (width: 1cqw) and (translate: 0px) {
	.frame-card .frame-card__media .frame-card__alt.fit-photo {
		inset: auto;
		top: 50%;
		left: 50%;
	}
}

@media (hover: hover) and (pointer: fine) {
	.frame-card:hover .frame-card__media .frame-card__alt {
		opacity: 1;
	}

	.frame-card:hover .frame-card__media.has-alt > img:first-child {
		opacity: 0;
	}
}

/* Las fotos de producto traen fondo blanco: al multiplicar se funden con el gris. */
.frame-card .frame-card__media img {
	filter: brightness(1.02); /* fondo casi blanco de la foto → blanco puro, sin costura */
	width: 100%;
	height: 100%;
	object-fit: cover; /* las fotos son verticales con aire arriba y abajo: se recorta ese aire */
	mix-blend-mode: multiply;
	transition: transform 1s var(--ease-soft);
}

@media (hover: hover) and (pointer: fine) {
	.frame-card:hover .frame-card__media img {
		transform: scale(1.04);
		transition-duration: 1.4s;
	}
}

/* Tarjeta entera pulsable: "Ver montura" no se ve (revisión del cliente),
   pero sigue siendo el enlace y ocupa toda la tarjeta. */
.frame-card {
	position: relative;
}

/* Nombre en letra más pequeña y fina, sin la línea de marca y tipo debajo
   (Judith, 17/10). */
.frame-card__name {
	margin-bottom: 6px;
	font-size: 0.8125rem;
	font-weight: 300;
	letter-spacing: var(--track);
	text-transform: uppercase;
}

/* Sin margen debajo del último texto: el hueco hasta "Pruébatelas" lo pone
   ese bloque (segunda revisión del cliente: quedaba un vacío grande). */
.frame-card .micro {
	margin-bottom: 0;
	font-size: var(--fs-small);
	letter-spacing: 0.08em;
}

.frame-card__price {
	margin: 10px 0 0;
	font-size: 0.9375rem;
}

.frame-card__link {
	position: static;
	display: block;
	font-size: 0;
	line-height: 0;
}

.frame-card__link .icon {
	display: none;
}

.frame-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* "Encuentra tu mirada": bloque centrado con el título y, debajo, el botón.
   Más compacto (segunda revisión del cliente: sobraba espacio en blanco
   alrededor). */
.home-frames.section {
	padding-bottom: clamp(24px, 2.6vw, 36px);
}

.home-frames__try {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: clamp(24px, 2.6vw, 38px);
	padding-top: clamp(22px, 2.2vw, 32px);
	border-top: 1px solid var(--line);
	text-align: center;
}

.home-frames__try .title {
	margin: 0;
	font-size: clamp(1rem, 0.85rem + 0.6vw, 1.25rem);
}

.home-frames__try .btn {
	min-width: min(300px, 100%);
	justify-content: space-between;
}

.home-frames__mobile-action {
	display: none;
}

/* Flechas: un cuadrado pequeño casi blanco a cada lado de la tira, a media
   altura de las fotos. El "::before" mide lo mismo que una foto (el relleno en
   % va sobre el ancho), así el 50 % cae en el centro de la gafa. La de
   "anterior" no sale hasta que hay algo detrás. Sin JavaScript no se ven:
   la tira se pasa con el dedo o la rueda. */
.carousel-arrows {
	display: none;
}

.js .carousel-arrows {
	/* Flechas ocultas (Luca, 17/10: "que no se vean"). La tira se pasa con
	   el dedo, la rueda o arrastrando con el ratón (home.js). */
	display: none !important;
	position: absolute;
	inset: 0 0 auto;
	z-index: 2;
	display: block;
	pointer-events: none;
}

.carousel-arrows::before {
	content: "";
	display: block;
	padding-top: calc((100% - var(--frames-gaps)) / var(--frames-per) * var(--frames-ratio));
}

.carousel-arrows__button {
	position: absolute;
	top: 50%;
	left: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	border-radius: var(--radius);
	background: rgba(255, 255, 255, 0.9);
	pointer-events: auto;
	transition: opacity 0.25s var(--ease), visibility 0.25s, background-color 0.25s var(--ease);
}

.carousel-arrows__button--next {
	right: 10px;
	left: auto;
}

/* Zona de toque de 48 px aunque el cuadrado mida 40. */
.carousel-arrows__button::after {
	content: "";
	position: absolute;
	inset: -4px;
}

.carousel-arrows__button .icon {
	width: 18px;
	height: 18px;
}

.carousel-arrows__button:not(.carousel-arrows__button--next) .icon {
	transform: scaleX(-1);
}

.carousel-arrows__button:hover {
	background: var(--paper);
}

.carousel-arrows__button:disabled {
	opacity: 0;
	visibility: hidden;
}

/* Marcas -------------------------------------------------------------------- */

.home-brands {
	padding-top: clamp(36px, 4.4vw, 64px);
	padding-bottom: 0;
}

/* Marcas, sol y titanio con los mismos márgenes que el resto de la página
   (el de los títulos y el carrusel) y 10 px entre fotos (segunda revisión del
   cliente: "igualar los márgenes exteriores y revisar la separación"). Antes
   las marcas iban a 28 px del borde y el sol y el titanio a sangre, con 2 px
   entre fotos. En móvil siguen a sangre (más abajo). */
.home-brands__grid,
.home-sun {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding-inline: var(--gutter);
}

.tile--brand {
	aspect-ratio: 25 / 24;
}

/* Ancho fijo. Con "aspect-ratio" y "max-height", cuando la foto llega al alto
   máximo el navegador la estrecha para guardar la proporción: en pantallas
   anchas y bajas las de sol y titanio quedaban más estrechas que las de
   marcas y no cuadraban con ellas (aviso de Andrés, 13/10). Así llegan al
   alto máximo recortando la foto, no el ancho. */
.tile--brand,
.tile--sun {
	width: 100%;
}

.tile--brand .tile__title {
	margin-bottom: clamp(14px, 1.6vw, 22px);
}

.tile--brand .tile__link,
.tile--sun .tile__link,
.home-titanium .tile__link {
	font-size: clamp(0.75rem, 0.68rem + 0.3vw, 0.9375rem);
}

/* Sol y titanio -------------------------------------------------------------- */

.home-sun {
	margin-top: clamp(40px, 6vw, 96px);
}

.tile--sun {
	aspect-ratio: 19 / 20;
	max-height: 100svh;
}

/* Títulos de sol más pequeños: que no compitan con la foto (segunda
   revisión del cliente). Antes, el mismo tamaño que las marcas. */
.tile--sun .tile__title {
	font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
}

.home-titanium {
	width: calc(100% - var(--gutter) * 2);
	margin: 10px var(--gutter) 0;
	aspect-ratio: 2 / 1;
	max-height: 100svh;
}

/* Reseñas ------------------------------------------------------------------- */

.home-reviews__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Sin caja ni fondo y con letra más pequeña (revisión del cliente: las cajas
   grises con borde pesaban demasiado). El bloque está oculto de momento. */
.review {
	display: flex;
	flex-direction: column;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

.review__stars {
	margin-bottom: 16px;
	font-size: 0.875rem;
	letter-spacing: 0.3em;
	line-height: 1;
}

.review__text {
	margin: 0 0 18px;
	font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
	line-height: 1.55;
	letter-spacing: 0;
}

.review__author {
	margin: auto 0 0;
	font-size: clamp(0.75rem, 0.68rem + 0.25vw, 0.875rem);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Móvil ---------------------------------------------------------------------- */

@media (max-width: 899px) {
	.section-head__action {
		display: none;
	}

	/* En móvil la tira sangra por los dos lados: un modelo y el siguiente
	   asomando (dado por bueno en la revisión del cliente). */
	.home-frames__list {
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		scroll-padding-inline: var(--gutter);
	}

	/* Un modelo y el siguiente asomando: la tarjeta ocupa el 82 % del ancho. */
	.home-frames {
		--frames-per: 1.2195;
		--frames-gaps: 0px;
	}

	.frame-card__media {
		margin-bottom: 16px;
	}

	.carousel-arrows__button {
		left: 6px;
		width: 36px;
		height: 36px;
		margin-top: -18px;
	}

	.carousel-arrows__button--next {
		right: 6px;
		left: auto;
	}

	.home-frames__mobile-action {
		display: flex;
		margin-top: 16px;
	}

	.home-frames__try .btn {
		width: 100%;
	}

	.home-brands__grid,
	.home-sun,
	.home-reviews__list {
		grid-template-columns: minmax(0, 1fr);
	}

	/* A todo el ancho, como el resto de fotos del inicio (revisión del cliente). */
	.home-brands__grid,
	.home-sun {
		gap: 2px;
		padding-inline: 0;
	}


	.tile--brand {
		aspect-ratio: 1;
	}

	.tile--sun {
		aspect-ratio: 4 / 5;
		max-height: none;
	}

	.home-titanium {
		width: 100%;
		margin: 2px 0 0;
		aspect-ratio: 4 / 5;
		max-height: none;
	}

	.review {
		min-height: 0;
	}
}

/* Arrastrando la tira con el ratón (home.js). */
@media (hover: hover) and (pointer: fine) {
	.home-frames__list {
		cursor: grab;
	}

	.home-frames__list.is-dragging {
		cursor: grabbing;
		user-select: none;
	}
}