/* Scrollytelling: producto fijo, pasos que scrollean.
   Vive en su propio archivo porque lo usan el home y la landing del
   personalizado, y home.css pesa 23 KB que la ficha no necesita.
   El JS que lo maneja está en main.js y depende de estas clases. */

.tt-scrolly { background: var(--tt-blanco); }
.tt-scrolly__grid {
	display: grid;
	gap: var(--tt-esp-4);
	grid-template-columns: 1fr;
	margin-top: var(--tt-esp-4);
}
@media (min-width: 900px) {
	.tt-scrolly__grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
.tt-scrolly__media {
	position: sticky;
	top: calc(var(--tt-header-alto) + 30px);
	/* 4:3, que es el ratio real de las fotos que mandó el dueño. Con el
	   cuadrado anterior se les comía los costados. */
	aspect-ratio: 4 / 3;
	border-radius: var(--tt-radio);
	overflow: hidden;
	background: var(--tt-crema-claro);
}
.tt-scrolly__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 400ms ease;
}
.tt-scrolly__media img.is-active { opacity: 1; }
.tt-scrolly__pasos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(2rem, 6vh, 4rem);
}
.tt-scrolly__pasos li {
	padding: var(--tt-esp-3);
	border-left: 3px solid var(--tt-borde);
	border-radius: 0 var(--tt-radio) var(--tt-radio) 0;
	opacity: 0.45;
	transition: opacity var(--tt-transicion), border-color var(--tt-transicion),
		background var(--tt-transicion);
}
.tt-scrolly__pasos li.is-active {
	opacity: 1;
	border-left-color: var(--tt-acento);
	background: rgba(255, 189, 89, 0.07);
}
.tt-scrolly__pasos h3 { margin-bottom: var(--tt-esp-1); }
.tt-scrolly__pasos p { margin: 0; }
/* Mobile: la imagen TAMBIÉN se queda fija.
   Antes acá se desactivaba el sticky y la foto quedaba arriba de todo: al
   bajar, la imagen cambiaba de paso pero ya estaba fuera de pantalla, así que
   el efecto no se veía. Era la sección scrolleando sola.

   Dos cosas hacen falta, no una:

   1. `display: block` en la grilla. Un elemento sticky se pega dentro de SU
      área de grid, y en una sola columna esa área mide exactamente lo que mide
      la imagen: no le queda recorrido para viajar. En flujo normal el bloque
      contenedor pasa a ser la sección entera y ahí sí se pega.
   2. Fondo opaco y z-index. Los pasos scrollean por detrás de la imagen; sin
      fondo se transparentan encima. */
@media (max-width: 899px) {
	.tt-scrolly__grid { display: block; }
	.tt-scrolly__media {
		position: sticky;
		top: calc(var(--tt-header-alto) + var(--tt-announcement-alto) + 10px);
		aspect-ratio: 4 / 3;
		max-height: 44vh;
		z-index: 2;
		background: var(--tt-crema-claro);
		margin-bottom: var(--tt-esp-3);
	}
	/* Aire entre pasos para que cada uno tenga su tramo de scroll: sin esto
	   la imagen cambia cuatro veces en dos dedos de recorrido. */
	.tt-scrolly__pasos {
		gap: 26vh;
		padding-bottom: 10vh;
	}
	/* Sin atenuar en celular: con la imagen fija ya se entiende cuál es el paso
	   activo por el borde ámbar, y un texto al 45% no llega al contraste AA. */
	.tt-scrolly__pasos li { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.tt-scrolly__pasos li { opacity: 1; }
}

/* =====================================================================
 * Variante "rica": píldora flotante, palabra de fondo y eyebrow numerado
 * ===================================================================== */

/* Fondo cálido en degradado: separa la sección del crema plano de alrededor
   sin necesidad de una franja de color entera. */
.tt-scrolly--rico .tt-scrolly__media {
	background: linear-gradient(160deg, #fdf6e6 0%, var(--tt-crema-claro) 55%, #f2efe6 100%);
	display: grid;
	place-items: center;
	isolation: isolate;
}

/* La palabra grande detrás del producto. Es decorativa —el mismo texto ya está
   en el eyebrow numerado del paso—, por eso el contenedor va aria-hidden. */
.tt-scrolly__fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: grid;
	place-items: center;
	font-size: clamp(4rem, 15vw, 11rem);
	font-weight: 900;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	color: rgba(18, 18, 18, 0.055);
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 500ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
	white-space: nowrap;
}
.tt-scrolly__fondo.is-active { opacity: 1; transform: scale(1); }

/* El producto flota sobre el degradado en vez de llenar la caja: si la imagen
   cubre todo, la palabra de fondo queda tapada y el recurso no existe.
   `contain` + padding dejan ver el aire alrededor, que es lo que hace que se
   lea como una escena y no como una foto recortada. */
.tt-scrolly--rico .tt-scrolly__media img {
	z-index: 1;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: clamp(1.5rem, 6%, 3.5rem);
	filter: drop-shadow(0 18px 34px rgba(18, 18, 18, 0.18));
}

/* Píldora flotante sobre la foto. */
.tt-scrolly__pill {
	position: absolute;
	z-index: 2;
	top: clamp(0.8rem, 3vw, 1.4rem);
	left: clamp(0.8rem, 3vw, 1.4rem);
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.9rem;
	border-radius: 999px;
	background: rgba(253, 251, 247, 0.92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 6px 20px rgba(18, 18, 18, 0.14);
	font-size: 0.8rem;
	font-weight: 800;
	color: var(--tt-negro);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 350ms ease, transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}
.tt-scrolly__pill.is-active { opacity: 1; transform: translateY(0); }
.tt-scrolly__pill-punto {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--tt-ambar);
}

/* Eyebrow numerado de cada paso: "01 / ÁLBUM". */
.tt-scrolly__indice {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 0.5rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tt-texto);
	opacity: 0.65;
}
.tt-scrolly__indice-punto {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--tt-borde);
	transition: background var(--tt-transicion);
}
.tt-scrolly__pasos li.is-active .tt-scrolly__indice { opacity: 1; }
.tt-scrolly__pasos li.is-active .tt-scrolly__indice-punto { background: var(--tt-ambar); }

@media (prefers-reduced-motion: reduce) {
	.tt-scrolly__fondo, .tt-scrolly__pill { transition: none; }
	/* Sin animación, mostrar cuatro palabras superpuestas sería ilegible:
	   se deja solo la del primer paso. */
	.tt-scrolly__fondo:not(.is-active) { display: none; }
	.tt-scrolly__pill:not(.is-active) { display: none; }
}