/* Track Tagz — estilos de la home. Se encola solo en la portada. */

/* Los genéricos de sección (.tt-s, .tt-eyebrow, .tt-sub, .tt-center) se
   mudaron a base.css: la ficha de catálogo y la landing del personalizado los
   usan y no cargan esta hoja, así que sus secciones quedaban sin padding y se
   veían pegadas una contra la otra. */

/* Secciones oscuras comparten base */
.tt-hero, .tt-pasos, .tt-stats, .tt-cta {
	background: var(--tt-negro-profundo);
	color: var(--tt-texto-invertido);
}
.tt-hero h1, .tt-hero h2, .tt-pasos h2, .tt-pasos h3, .tt-stats h2, .tt-cta h2 {
	color: var(--tt-texto-invertido);
}

/* ---------- 1. Hero ---------- */
.tt-hero {
	position: relative;
	overflow: clip;
	text-align: center;
	padding-block: clamp(4.5rem, 13vw, 8rem) clamp(4rem, 11vw, 6.5rem);
}
.tt-hero__fondo { position: absolute; inset: 0; }
.tt-hero__fondo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* La foto es vertical 2:3 y el hero es una franja ancha: con el encuadre
	   por defecto (50% 50%) el recorte cae sobre los jeans y el celular queda
	   fuera. Este punto mantiene las manos y la pantalla en cuadro. */
	object-position: 52% 38%;
}
/* En celular el hero es alto y entra casi toda la foto: ahí conviene subir un
   poco el encuadre para que la cara y los auriculares no queden cortados. */
@media (max-width: 767px) {
	.tt-hero__fondo img { object-position: 55% 30%; }
}
/* Overlay en dos capas.
   Antes era un degradado parejo al 62-78%, que garantizaba contraste pero
   apagaba la foto entera. Ahora el peso va concentrado detrás del bloque de
   texto —una elipse— y el resto queda apenas velado, así la imagen se ve.
   El degradado vertical solo cierra contra el negro del pie, para que la
   sección siguiente no arranque con un corte duro. */
.tt-hero__fondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 72% 58% at 50% 44%,
			rgba(11, 11, 12, 0.74) 0%,
			rgba(11, 11, 12, 0.45) 55%,
			transparent 78%),
		linear-gradient(rgba(11, 11, 12, 0.18), rgba(11, 11, 12, 0.30) 55%, var(--tt-negro-profundo));
}
/* Zoom sutil ligado al scroll (scroll-driven animation, sin JS).
   Donde no hay soporte, la imagen queda estática. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.tt-hero__fondo img {
			animation: tt-hero-zoom linear both;
			animation-timeline: view();
			animation-range: exit 0% exit 100%;
		}
	}
}
@keyframes tt-hero-zoom {
	from { transform: scale(1); }
	to { transform: scale(1.18); }
}
.tt-hero__contenido { position: relative; z-index: 1; }
.tt-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--tt-acento);
	margin: 0 0 var(--tt-esp-2);
}
.tt-hero__title {
	font-size: clamp(1.9rem, 4.5vw + 0.4rem, 3.1rem);
	max-width: 22ch;
	margin-inline: auto;
	margin-bottom: var(--tt-esp-2);
	text-wrap: balance;
}
.tt-hero__lede {
	max-width: 30rem;
	margin: 0 auto var(--tt-esp-3);
	font-size: 1rem;
	opacity: 0.88;
}
/* Entrada escalonada por palabra: el JS envuelve cada palabra en .tt-palabra */
.tt-js .tt-hero__title .tt-palabra {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.45em);
	transition: opacity 600ms var(--tt-suave), transform 600ms var(--tt-suave);
	transition-delay: calc(var(--i) * 70ms);
}
.tt-js .tt-hero__title.is-animado .tt-palabra { opacity: 1; transform: none; }
/* Indicador de scroll */
.tt-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	z-index: 1;
	color: rgba(246, 244, 238, 0.7);
	animation: tt-rebote 1.8s ease-in-out infinite;
}
@keyframes tt-rebote {
	0%, 100% { transform: translate(-50%, 0); }
	50% { transform: translate(-50%, 7px); }
}
@media (prefers-reduced-motion: reduce) { .tt-hero__scroll { animation: none; } }
/* .tt-hero__tags se eliminó: las píldoras de categorías competían con los
   dos CTA y tapaban la foto. */
.tt-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tt-esp-2);
}
.tt-btn--hero-fantasma {
	background: transparent;
	color: var(--tt-texto-invertido);
	box-shadow: inset 0 0 0 1.5px rgba(246, 244, 238, 0.5);
}
.tt-btn--hero-fantasma:hover { box-shadow: inset 0 0 0 1.5px var(--tt-acento); color: var(--tt-acento); }

/* ---------- 2. Ticker ---------- */
.tt-ticker {
	background: var(--tt-acento);
	color: var(--tt-negro);
	overflow: hidden;
	padding-block: 0.7rem;
	font-weight: 700;
}
.tt-ticker__track {
	display: flex;
	gap: 2.5rem;
	white-space: nowrap;
	width: max-content;
	animation: tt-marquee 22s linear infinite;
}
@keyframes tt-marquee {
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.tt-ticker__track { animation: none; }
}

/* ---------- 2b. Marquee infinito de logos ---------- */
.tt-logos {
	background: var(--tt-crema-claro);
	padding-block: var(--tt-esp-4);
	overflow: hidden;
}
/* Franja oscura. No es un capricho estético: los logos que hay son de dos
   clases —unos vienen con fondo #121212 incrustado y otros son blanco puro—
   y sobre crema una mitad queda como un bloque negro y la otra invisible.
   Sobre negro se leen todos, y el #121212 de los recortes se funde con el
   fondo sin que se note el cuadrado. */
.tt-logos--oscura {
	background: var(--tt-negro);
	color: var(--tt-crema);
}
.tt-logos .tt-eyebrow { color: var(--tt-texto); opacity: 0.7; margin-bottom: var(--tt-esp-3); }
.tt-logos--oscura .tt-eyebrow { color: var(--tt-crema); opacity: 0.6; }
.tt-logos__fila {
	overflow: hidden;
	padding-block: var(--tt-esp-1);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.tt-logos__track {
	display: flex;
	width: max-content;
	animation: tt-marquee 30s linear infinite;
}
.tt-logos__fila--reversa .tt-logos__track { animation-direction: reverse; animation-duration: 36s; }
.tt-logos__fila:hover .tt-logos__track { animation-play-state: paused; }
.tt-logos__grupo {
	display: flex;
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
	padding-right: clamp(2rem, 5vw, 4rem);
}
.tt-logos__grupo img {
	height: 34px;
	width: auto;
	opacity: 0.55;
	filter: grayscale(1);
	transition: opacity var(--tt-transicion), filter var(--tt-transicion);
}
.tt-logos__grupo img:hover { opacity: 1; filter: none; }
/* Sobre oscuro no va grayscale: los logos ya son monocromos y el filtro solo
   los apaga. Se los deja más altos porque varios traen aire propio en el SVG. */
.tt-logos--oscura .tt-logos__grupo img {
	height: 52px;
	opacity: 0.75;
	filter: none;
}
.tt-logos--oscura .tt-logos__grupo img:hover { opacity: 1; transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
	.tt-logos__track { animation: none; flex-wrap: wrap; justify-content: center; }
	.tt-logos__grupo[aria-hidden="true"] { display: none; }
}

/* ---------- 2c. Trust strip ---------- */
.tt-trust { padding-block: var(--tt-esp-4); border-bottom: 1px solid var(--tt-borde); }
.tt-trust__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--tt-esp-3);
	grid-template-columns: 1fr 1fr;
	text-align: center;
}
@media (min-width: 900px) { .tt-trust__grid { grid-template-columns: repeat(4, 1fr); } }
.tt-trust__grid li { display: grid; justify-items: center; gap: 0.35rem; }
.tt-trust__grid svg { color: var(--tt-acento); }
.tt-trust__grid strong { color: var(--tt-negro); }
.tt-trust__grid small { font-size: 0.85rem; opacity: 0.75; max-width: 16rem; }

/* ---------- 3. Cómo funciona ---------- */
.tt-pasos .tt-center { margin-top: var(--tt-esp-4); }

/* ---------- 4/7. Grillas de productos (shortcode Woo) ----------
   El estilo de las cards vive en base.css (aplica en todo el sitio);
   acá solo el layout propio del home. */
.tt-productos ul.products {
	margin-top: var(--tt-esp-4);
	margin-bottom: 0;
}
@media (min-width: 768px) { .tt-productos ul.products { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 4b. Tabs de filtro ---------- */
.tt-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tt-esp-1);
	margin-top: var(--tt-esp-3);
}
.tt-tabs__btn {
	border: 0;
	border-radius: 999px;
	padding: 0.45rem 1.1rem;
	font-weight: 700;
	font-size: 0.9rem;
	background: transparent;
	color: var(--tt-texto);
	box-shadow: inset 0 0 0 1.5px var(--tt-borde);
	transition: background var(--tt-transicion), color var(--tt-transicion),
		box-shadow var(--tt-transicion);
}
.tt-tabs__btn:hover { box-shadow: inset 0 0 0 1.5px var(--tt-negro); color: var(--tt-negro); }
.tt-tabs__btn.is-active {
	background: var(--tt-negro);
	color: var(--tt-crema);
	box-shadow: none;
}
.tt-tab-panel[hidden] { display: none; }

/* ---------- 5. Stats ---------- */
.tt-stats { text-align: center; }
.tt-stats__grid {
	display: grid;
	gap: var(--tt-esp-3);
	grid-template-columns: 1fr;
	margin-top: var(--tt-esp-4);
}
@media (min-width: 640px) { .tt-stats__grid { grid-template-columns: repeat(3, 1fr); } }
.tt-stats__num {
	font-size: clamp(2.4rem, 6vw, 3.5rem);
	font-weight: 900;
	color: var(--tt-acento);
	margin: 0;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.tt-stats__sufijo { font-size: 0.5em; opacity: 0.7; }
.tt-stats__label { font-weight: 700; margin: var(--tt-esp-1) 0 0; }
.tt-stats__nota { margin: 0.2rem 0 0; font-size: 0.85rem; opacity: 0.65; }

/* ---------- 6. Bento ---------- */
.tt-bento { background: var(--tt-crema-claro); }
.tt-bento__grid {
	display: grid;
	gap: var(--tt-esp-2);
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "a a" "b c" "b d";
	margin-top: var(--tt-esp-4);
}
@media (min-width: 900px) {
	.tt-bento__grid {
		grid-template-columns: 2fr 1.2fr 1.2fr;
		grid-template-areas: "a b c" "a b d";
	}
}
.tt-bento__tile:nth-child(1) { grid-area: a; }
.tt-bento__tile:nth-child(2) { grid-area: b; }
.tt-bento__tile:nth-child(3) { grid-area: c; }
.tt-bento__tile:nth-child(4) { grid-area: d; }
.tt-bento__tile {
	position: relative;
	display: block;
	border-radius: var(--tt-radio);
	overflow: hidden;
	min-height: 180px;
	background: var(--tt-negro);
	text-decoration: none;
}
.tt-bento__tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.85;
	transition: transform var(--tt-transicion), opacity var(--tt-transicion);
}
.tt-bento__tile:hover img { transform: scale(1.04); opacity: 0.7; }
.tt-bento__tile--grande { min-height: 260px; }
.tt-bento__texto {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--tt-esp-3) var(--tt-esp-2) var(--tt-esp-2);
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
	color: #fff;
	display: grid;
}
.tt-bento__texto strong { font-size: 1.1rem; }
.tt-bento__texto small { opacity: 0.85; }
.tt-bento__tile--texto {
	display: grid;
	place-items: center;
	background: var(--tt-negro);
}
.tt-bento__tile--texto .tt-bento__texto {
	position: static;
	background: none;
	text-align: center;
}
.tt-bento__tile--texto:hover { outline: 2px solid var(--tt-acento); outline-offset: -2px; }

/* ---------- 8. Comparativa ---------- */
.tt-compara__inner { max-width: 44rem; }
.tt-compara__tabla {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--tt-esp-4);
	background: var(--tt-blanco);
	border-radius: var(--tt-radio);
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.tt-compara__tabla th, .tt-compara__tabla td {
	padding: var(--tt-esp-2);
	text-align: center;
	border-bottom: 1px solid var(--tt-borde);
}
.tt-compara__tabla tbody th { text-align: left; font-weight: 600; }
.tt-compara__tabla thead th { font-weight: 800; color: var(--tt-negro); }
.tt-compara__nosotros { background: rgba(255, 189, 89, 0.15); }
.tt-si {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: #53af01;
	color: #fff;
	font-weight: 700;
}
.tt-no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: #dbdbdb;
	color: var(--tt-negro);
	font-weight: 700;
}

/* ---------- 9. Collab ---------- */
.tt-collab__grid {
	display: grid;
	gap: var(--tt-esp-3);
	grid-template-columns: 1fr;
	background: var(--tt-blanco);
	border-radius: var(--tt-radio);
	overflow: hidden;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
	padding: 0;
}
@media (min-width: 900px) { .tt-collab__grid { grid-template-columns: 1fr 1.1fr; } }
.tt-collab__media { position: relative; background: #111; }
.tt-collab__media video { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.tt-collab__caption {
	position: absolute;
	left: var(--tt-esp-2);
	bottom: var(--tt-esp-1);
	color: #fff;
	font-size: 0.8rem;
	margin: 0;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.tt-collab__copy { padding: var(--tt-esp-4); align-self: center; }
.tt-collab__copy h2 { text-align: left; }
.tt-collab__copy p { margin-bottom: var(--tt-esp-3); }

/* ---------- 9b. Before / After ---------- */
.tt-antes__inner { max-width: 56rem; }
.tt-antes__comparador {
	position: relative;
	margin-top: var(--tt-esp-4);
	aspect-ratio: 3 / 2;
	border-radius: var(--tt-radio);
	overflow: hidden;
	background: var(--tt-negro);
	touch-action: pan-y; /* el drag horizontal es del comparador; el scroll, de la página */
}
.tt-antes__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tt-antes__capa {
	position: absolute;
	inset: 0;
	clip-path: inset(0 0 0 var(--pos));
}
.tt-antes__linea {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	width: 2px;
	background: var(--tt-blanco);
	transform: translateX(-1px);
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}
.tt-antes__mango {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--tt-blanco);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.tt-antes__mango::before {
	content: "⟨ ⟩";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 0.85rem;
	letter-spacing: 2px;
	color: var(--tt-negro);
}
.tt-antes__etiqueta {
	position: absolute;
	top: var(--tt-esp-2);
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	color: var(--tt-blanco);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.tt-antes__etiqueta--izq { left: var(--tt-esp-2); }
.tt-antes__etiqueta--der { right: var(--tt-esp-2); }
/* El range invisible cubre todo el comparador: mouse, touch y teclado */
.tt-antes__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
}
.tt-antes__comparador:has(.tt-antes__range:focus-visible) {
	outline: 2px solid var(--tt-ambar);
	outline-offset: 2px;
}

/* ---------- 9c. Featured product: Personalizado ---------- */
.tt-destacado { background: var(--tt-crema-claro); }
.tt-destacado__grid {
	display: grid;
	gap: var(--tt-esp-4);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 900px) { .tt-destacado__grid { grid-template-columns: 1.1fr 1fr; } }
.tt-destacado__galeria { position: relative; }
.tt-destacado__principal {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--tt-radio);
	background: var(--tt-negro-profundo);
}
.tt-destacado__thumbs {
	display: flex;
	gap: var(--tt-esp-1);
	margin-top: var(--tt-esp-2);
}
.tt-destacado__thumb {
	border: 0;
	padding: 0;
	border-radius: var(--tt-radio-chico);
	overflow: hidden;
	opacity: 0.55;
	outline-offset: 2px;
	transition: opacity var(--tt-transicion), box-shadow var(--tt-transicion);
}
.tt-destacado__thumb img { width: 64px; height: 64px; object-fit: cover; }
.tt-destacado__thumb:hover { opacity: 0.85; }
.tt-destacado__thumb.is-active {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--tt-ambar);
}
.tt-destacado__sello {
	position: absolute;
	top: -22px;
	right: -12px;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
}
/* Gira solo el anillo de texto, no el SVG entero: el box rotado generaría
   scroll horizontal */
.tt-destacado__sello-giro {
	animation: tt-girar 18s linear infinite;
	transform-box: view-box;
	transform-origin: center;
}
@keyframes tt-girar { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .tt-destacado__sello-giro { animation: none; } }
@media (max-width: 600px) { .tt-destacado__sello { width: 84px; height: 84px; top: -14px; right: -4px; } }
.tt-destacado__info h2 { text-align: left; }
.tt-destacado__info .tt-eyebrow { text-align: left; }
.tt-destacado__rating { color: var(--tt-negro); font-weight: 700; }
.tt-destacado__rating span { color: #f5a623; letter-spacing: 2px; }
.tt-destacado__specs {
	list-style: none;
	margin: var(--tt-esp-3) 0;
	padding: 0;
	display: grid;
	gap: var(--tt-esp-2);
	grid-template-columns: 1fr 1fr;
}
.tt-destacado__specs li {
	display: flex;
	align-items: center;
	gap: var(--tt-esp-1);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--tt-negro);
}
.tt-destacado__specs svg { color: var(--tt-acento); flex-shrink: 0; }
.tt-destacado__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tt-esp-2);
	margin-top: var(--tt-esp-3);
}

/* ---------- 9d. Marquee outline gigante ---------- */
.tt-outline {
	background: var(--tt-negro-profundo);
	overflow: hidden;
	padding-block: clamp(2rem, 6vw, 4rem);
}
.tt-outline__track {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	width: max-content;
	white-space: nowrap;
	animation: tt-marquee 45s linear infinite;
	font-size: clamp(3.5rem, 9vw, 7.5rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(246, 244, 238, 0.55);
	paint-order: stroke;
}
/* Los separadores "·" llevan relleno ámbar, más chicos */
.tt-outline__track span:nth-child(even) {
	color: var(--tt-ambar);
	-webkit-text-stroke: 0;
	font-size: 0.35em;
}
@supports not (-webkit-text-stroke: 1px #000) {
	.tt-outline__track { color: rgba(246, 244, 238, 0.25); }
}
@media (prefers-reduced-motion: reduce) {
	.tt-outline__track { animation: none; }
}

/* ---------- 10. Artistas ---------- */
.tt-artistas__grid {
	display: grid;
	gap: var(--tt-esp-2);
	grid-template-columns: repeat(2, 1fr);
	margin-top: var(--tt-esp-4);
}
@media (min-width: 900px) { .tt-artistas__grid { grid-template-columns: repeat(4, 1fr); } }
.tt-artistas__card {
	position: relative;
	display: block;
	border-radius: var(--tt-radio);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	text-decoration: none;
}
.tt-artistas__card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--tt-transicion);
}
.tt-artistas__card:hover img { transform: scale(1.05); }
.tt-artistas__card span {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: var(--tt-esp-3) var(--tt-esp-2) var(--tt-esp-2);
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
	color: #fff;
	font-weight: 800;
	font-size: 1.1rem;
}

/* ---------- 11. Reviews ---------- */
.tt-reviews { background: var(--tt-crema-claro); }
.tt-reviews__grid {
	display: grid;
	gap: var(--tt-esp-2);
	grid-template-columns: 1fr;
	margin-top: var(--tt-esp-4);
}
@media (min-width: 640px) { .tt-reviews__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .tt-reviews__grid { grid-template-columns: repeat(3, 1fr); } }
.tt-reviews__card {
	background: var(--tt-blanco);
	border-radius: var(--tt-radio);
	padding: var(--tt-esp-3);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
}
.tt-reviews__stars { color: #f5a623; letter-spacing: 2px; margin: 0 0 var(--tt-esp-1); }
.tt-reviews__texto { flex: 1; margin: 0 0 var(--tt-esp-2); font-size: 0.92rem; }
.tt-reviews__card footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.8rem;
	align-items: center;
	font-size: 0.8rem;
}
.tt-reviews__badge {
	background: rgba(83, 175, 1, 0.12);
	color: #3c7d01;
	border-radius: 999px;
	padding: 0.1rem 0.6rem;
	font-weight: 600;
}
.tt-reviews__card time { opacity: 0.6; }

/* ---------- 11b. Quiz banner ---------- */
.tt-quiz {
	background: radial-gradient(80% 120% at 80% 20%, rgba(255, 189, 89, 0.16), transparent 60%),
		var(--tt-negro-profundo);
	color: var(--tt-texto-invertido);
}
.tt-quiz h2 { color: var(--tt-texto-invertido); text-align: left; }
.tt-quiz__inner {
	display: grid;
	gap: var(--tt-esp-4);
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 800px) { .tt-quiz__inner { grid-template-columns: 1fr 1.4fr; } }
/* clip: al rotar, las esquinas del cuadrado exceden el box y generarían scroll */
.tt-quiz__media { overflow: clip; }
.tt-quiz__media img {
	border-radius: 50%;
	aspect-ratio: 1;
	object-fit: cover;
	max-width: 320px;
	margin-inline: auto;
	animation: tt-girar 30s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .tt-quiz__media img { animation: none; } }
.tt-quiz__copy p { max-width: 34rem; opacity: 0.85; margin-bottom: var(--tt-esp-3); }
.tt-quiz__acciones { display: flex; flex-wrap: wrap; gap: var(--tt-esp-2); }

/* El acordeón (.tt-faq__item) se mudó a base.css: lo usan también las
   fichas de producto, que no cargan esta hoja. */
.tt-faq__inner { max-width: 44rem; }
.tt-faq h2 { margin-bottom: var(--tt-esp-3); }

/* ---------- 13. CTA final ---------- */
.tt-cta { text-align: center; padding-block: clamp(4rem, 10vw, 6.5rem); }
.tt-cta__inner p { max-width: 36rem; margin: 0 auto var(--tt-esp-3); opacity: 0.85; }
.tt-cta__mayorista { margin-top: var(--tt-esp-3); font-size: 0.9rem; }
.tt-cta__mayorista a { color: var(--tt-acento); }

/* ---------- Video: tratamiento de los verticales ----------
   Los cinco videos son 9:16. Estirarlos a un hero panorámico obligaría a
   recortar dos tercios del cuadro, así que se los deja en su formato dentro
   de un marco propio. El poster ocupa el mismo espacio desde el primer
   pintado: sin salto de layout cuando arranca la reproducción. */
.tt-video {
	display: block;
	width: 100%;
	height: auto;
	background: var(--tt-negro);
	border-radius: var(--tt-radio);
	object-fit: cover;
}
.tt-collab__media { position: relative; background: var(--tt-negro); border-radius: var(--tt-radio); overflow: hidden; }
.tt-collab__video {
	/* El render de Adidas es vertical; se lo encuadra a 4:5 para que no domine
	   la sección entera pero siga leyéndose el producto. */
	aspect-ratio: 4 / 5;
	max-height: 620px;
	margin-inline: auto;
	border-radius: 0;
}

/* El muro de clientes (.tt-testi*) se mudó a base.css: además de la
   portada, ahora aparece en las fichas de producto, que no cargan esta
   hoja y lo dejaban sin estilos. */

/* ---------- 3. Cómo funciona: riel de pasos ----------
   Antes eran cuatro tarjetas idénticas. El problema no era el color: eran
   cuatro cajas del mismo peso apiladas, sin nada que dijera que una lleva a la
   siguiente, y en celular se leían como una lista larga y plana.

   Ahora los pasos cuelgan de un riel continuo. El riel es lo que comunica la
   secuencia; las cajas desaparecen. Y cada paso muestra el producto, que es
   más convincente que describirlo. */
.tt-pasos {
	/* Aire extra arriba: el header flota y con el padding mínimo el título
	   quedaba pegado al pill apenas empezaba la sección. */
	padding-top: calc(var(--tt-seccion) + var(--tt-header-alto) * 0.5);
}
.tt-pasos__riel {
	list-style: none;
	margin: var(--tt-esp-4) 0 0;
	padding: 0;
	position: relative;
	display: grid;
	gap: var(--tt-esp-4);
}

.tt-pasos__paso {
	position: relative;
	display: grid;
	grid-template-columns: 44px 1fr;
	align-items: start;
	gap: var(--tt-esp-2);
}

/* El riel: una línea que baja por detrás de las marcas y se desvanece en el
   último paso, para que no quede un tramo colgando. */
.tt-pasos__paso::before {
	content: "";
	position: absolute;
	left: 21px;
	top: 44px;
	bottom: calc(-1 * var(--tt-esp-4));
	width: 2px;
	background: linear-gradient(var(--tt-ambar), rgba(255, 189, 89, 0.15));
}
.tt-pasos__paso:last-child::before { display: none; }

.tt-pasos__marca {
	grid-row: span 2;
	position: relative;
	z-index: 1;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--tt-ambar);
	color: var(--tt-negro);
	font-weight: 900;
	font-size: 1.05rem;
	box-shadow: 0 0 0 6px var(--tt-negro-profundo);
}

.tt-pasos__media {
	border-radius: var(--tt-radio);
	overflow: hidden;
	background: rgba(253, 251, 247, 0.06);
	aspect-ratio: 4 / 3;
	margin-bottom: var(--tt-esp-2);
}
.tt-pasos__media img { width: 100%; height: 100%; object-fit: cover; }

.tt-pasos__texto h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.tt-pasos__texto p { margin: 0; font-size: 0.94rem; opacity: 0.82; max-width: 46ch; }

/* Escritorio: el riel se acuesta y los pasos van en fila. La línea pasa a ser
   horizontal, detrás de las marcas. */
@media (min-width: 900px) {
	.tt-pasos__riel {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--tt-esp-3);
	}
	.tt-pasos__paso {
		grid-template-columns: 1fr;
		gap: var(--tt-esp-2);
		text-align: left;
	}
	.tt-pasos__paso::before {
		left: 44px;
		right: calc(-1 * var(--tt-esp-3));
		top: 21px;
		bottom: auto;
		width: auto;
		height: 2px;
		background: linear-gradient(90deg, var(--tt-ambar), rgba(255, 189, 89, 0.15));
	}
	.tt-pasos__marca { grid-row: auto; }
	.tt-pasos__media { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.tt-pasos__paso { transition: none; }
}