/* Track Tagz — drawer del carrito, comunicación del descuento y el bloque
   "Completá tu pack". Se encola en todo el sitio: el drawer se abre desde
   cualquier página. */

body.tt-sin-scroll { overflow: hidden; }

/* ---------- Barra de progreso ---------- */
.tt-progreso {
	background: var(--tt-crema-claro);
	border-radius: var(--tt-radio-chico);
	padding: var(--tt-esp-2);
	margin-bottom: var(--tt-esp-2);
}
.tt-progreso__texto {
	margin: 0 0 0.45rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--tt-negro);
}
.tt-progreso__texto.is-logrado { color: #3c7d01; }
.tt-progreso__barra {
	height: 7px;
	border-radius: 4px;
	background: rgba(18, 18, 18, 0.1);
	overflow: hidden;
}
.tt-progreso__barra span {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--tt-ambar), var(--tt-compra));
	transition: width 500ms var(--tt-suave);
}
.tt-progreso__envio { margin: 0.5rem 0 0; font-size: 0.8rem; opacity: 0.8; }
.tt-progreso__envio.is-logrado { color: #3c7d01; opacity: 1; font-weight: 700; }
.tt-progreso--pdp { margin-bottom: var(--tt-esp-3); }

/* ---------- Drawer: líneas ---------- */
.tt-drawer-lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tt-esp-2); }
.tt-drawer-linea {
	position: relative;
	display: flex;
	gap: var(--tt-esp-2);
	padding-bottom: var(--tt-esp-2);
	border-bottom: 1px solid var(--tt-borde);
	transition: opacity var(--tt-transicion);
}
.tt-drawer-linea.is-cargando { opacity: 0.5; pointer-events: none; }
.tt-drawer-linea__info { flex: 1; min-width: 0; display: grid; gap: 0.3rem; align-content: start; }
.tt-drawer-linea__nombre {
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--tt-negro);
	text-decoration: none;
	line-height: 1.25;
}
.tt-drawer-linea__meta { font-size: 0.75rem; opacity: 0.7; }
.tt-drawer-linea__meta p { margin: 0; }
.tt-drawer-linea__pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tt-esp-1);
	margin-top: 0.2rem;
}
.tt-drawer-linea__precio { font-weight: 800; font-size: 0.9rem; color: var(--tt-negro); }
.tt-drawer-linea__quitar {
	position: absolute;
	top: 0; right: 0;
	background: none;
	border: 0;
	font-size: 1.2rem;
	line-height: 1;
	width: 28px; height: 28px;
	opacity: 0.4;
	color: var(--tt-negro);
	transition: opacity var(--tt-transicion);
}
.tt-drawer-linea__quitar:hover { opacity: 1; color: var(--tt-compra); }

/* ---------- Drawer: totales ---------- */
.tt-drawer-totales {
	margin-top: var(--tt-esp-3);
	padding-top: var(--tt-esp-2);
	border-top: 2px solid var(--tt-borde);
	display: grid;
	gap: 0.35rem;
}
.tt-drawer-totales p {
	display: flex;
	justify-content: space-between;
	gap: var(--tt-esp-2);
	margin: 0;
	font-size: 0.9rem;
}
.tt-drawer-totales__ahorro { color: #3c7d01; font-weight: 700; }
.tt-drawer-totales__total {
	font-size: 1.1rem !important;
	font-weight: 800;
	color: var(--tt-negro);
	padding-top: 0.35rem;
	border-top: 1px solid var(--tt-borde);
}

/* ---------- Drawer: pie sticky ---------- */
.tt-cart-drawer__pie {
	border-top: 1px solid var(--tt-borde);
	padding: var(--tt-esp-2) var(--tt-esp-3);
	padding-bottom: calc(var(--tt-esp-2) + env(safe-area-inset-bottom));
	background: var(--tt-blanco);
	display: grid;
	gap: 0.5rem;
}
.tt-cart-drawer__pie .tt-btn { width: 100%; }
.tt-cart-drawer__seguir {
	text-align: center;
	font-size: 0.85rem;
	background: none;
	border: 0;
	color: var(--tt-texto);
	text-decoration: underline;
}

/* ---------- Drawer vacío ---------- */
.tt-drawer-vacio { text-align: center; padding: var(--tt-esp-4) var(--tt-esp-2); display: grid; gap: 0.5rem; justify-items: center; }
.tt-drawer-vacio img { opacity: 0.9; }
.tt-drawer-vacio__titulo { font-weight: 800; font-size: 1.05rem; color: var(--tt-negro); margin: var(--tt-esp-2) 0 0; }
.tt-drawer-vacio p { margin: 0; font-size: 0.9rem; opacity: 0.75; }
.tt-drawer-vacio .tt-btn { margin-top: var(--tt-esp-2); }

/* ---------- Completá tu pack ---------- */
.tt-completa {
	margin-top: var(--tt-esp-3);
	padding-top: var(--tt-esp-2);
	border-top: 1px solid var(--tt-borde);
}
.tt-completa__head { margin-bottom: var(--tt-esp-2); }
.tt-completa__head h3 { margin: 0; font-size: 0.95rem; }
.tt-completa__nudge {
	margin: 0.25rem 0 0;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--tt-compra);
}
.tt-completa__fila {
	list-style: none;
	margin: 0;
	padding: 0 0 0.4rem;
	display: flex;
	gap: var(--tt-esp-2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
.tt-completa__item {
	flex: 0 0 auto;
	width: 96px;
	display: grid;
	justify-items: center;
	gap: 0.25rem;
	scroll-snap-align: start;
	text-align: center;
}
.tt-completa__nombre {
	font-size: 0.7rem;
	line-height: 1.2;
	color: var(--tt-negro);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 1.7em;
}
.tt-completa__precio { font-size: 0.78rem; font-weight: 800; color: var(--tt-negro); }
.tt-completa__btn {
	border: 1.5px solid var(--tt-negro);
	background: transparent;
	border-radius: 999px;
	padding: 0.2rem 0.6rem;
	font-size: 0.72rem;
	font-weight: 800;
	color: var(--tt-negro);
	transition: background var(--tt-transicion), color var(--tt-transicion);
}
.tt-completa__btn:hover:not(:disabled) { background: var(--tt-negro); color: var(--tt-crema); }
.tt-completa__btn:disabled { opacity: 0.5; }
/* En el home la fila respira más */
.tt-completa--home .tt-completa__item { width: 130px; }
.tt-completa--home .tt-thumb { width: 110px; height: 110px; }

/* ---------- Badge flotante ---------- */
.tt-badge-flotante[hidden] { display: none; }
.tt-badge-flotante {
	position: fixed;
	right: 16px;
	bottom: 78px;
	z-index: 85;
	display: flex;
	align-items: center;
	background: rgba(253, 251, 247, 0.72);
	-webkit-backdrop-filter: blur(14px) saturate(1.6);
	backdrop-filter: blur(14px) saturate(1.6);
	border: 1px solid rgba(18, 18, 18, 0.12);
	border-radius: 999px;
	box-shadow: 0 6px 22px rgba(18, 18, 18, 0.16);
	padding-right: 4px;
	max-width: calc(100vw - 32px);
}
.tt-badge-flotante__btn {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	background: none;
	border: 0;
	padding: 0.55rem 0.5rem 0.55rem 0.9rem;
	font-size: 0.8rem;
	font-weight: 800;
	color: var(--tt-negro);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tt-badge-flotante__punto {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--tt-compra);
	flex-shrink: 0;
	animation: tt-latir 1.8s ease-in-out infinite;
}
@keyframes tt-latir {
	0%, 100% { box-shadow: 0 0 0 0 rgba(221, 29, 29, 0.5); }
	50% { box-shadow: 0 0 0 6px rgba(221, 29, 29, 0); }
}
@media (prefers-reduced-motion: reduce) { .tt-badge-flotante__punto { animation: none; } }
.tt-badge-flotante__cerrar {
	background: none;
	border: 0;
	width: 26px; height: 26px;
	border-radius: 50%;
	font-size: 1rem;
	line-height: 1;
	opacity: 0.5;
	color: var(--tt-negro);
}
.tt-badge-flotante__cerrar:hover { opacity: 1; }
/* En mobile, arriba de la barra sticky de compra */
@media (max-width: 767px) {
	.tt-badge-flotante { bottom: 140px; right: 12px; }
}

/* ---------- Pop-up ---------- */
.tt-modal[hidden] { display: none; }
.tt-modal {
	position: fixed;
	inset: 0;
	z-index: 140;
	background: rgba(11, 11, 12, 0.6);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	display: grid;
	place-items: center;
	padding: var(--tt-esp-2);
	opacity: 0;
	transition: opacity var(--tt-transicion);
}
.tt-modal.is-open { opacity: 1; }
.tt-modal__panel {
	position: relative;
	width: min(440px, 100%);
	background: var(--tt-crema);
	border-radius: var(--tt-radio);
	padding: var(--tt-esp-4) var(--tt-esp-3) var(--tt-esp-3);
	text-align: center;
	transform: translateY(14px) scale(0.98);
	transition: transform 350ms var(--tt-suave);
	max-height: 90vh;
	overflow-y: auto;
}
.tt-modal.is-open .tt-modal__panel { transform: none; }
.tt-modal__cerrar {
	position: absolute;
	top: 8px; right: 10px;
	background: none;
	border: 0;
	font-size: 1.7rem;
	line-height: 1;
	width: 40px; height: 40px;
	opacity: 0.5;
	color: var(--tt-negro);
}
.tt-modal__cerrar:hover { opacity: 1; }
.tt-modal__panel h2 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.tt-modal__bajada { font-size: 0.9rem; opacity: 0.8; margin: 0 0 var(--tt-esp-3); }
.tt-modal__tiers {
	list-style: none;
	margin: 0 0 var(--tt-esp-3);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
}
.tt-modal__tiers li {
	background: var(--tt-blanco);
	border-radius: var(--tt-radio-chico);
	padding: var(--tt-esp-2) 0.3rem;
	display: grid;
	gap: 0.1rem;
}
.tt-modal__tiers li:nth-child(2) { background: var(--tt-negro-profundo); color: var(--tt-texto-invertido); }
.tt-modal__cantidad { font-size: 1.5rem; font-weight: 900; line-height: 1; }
.tt-modal__cantidad small { font-size: 0.6em; opacity: 0.7; }
.tt-modal__pct { font-size: 1.05rem; font-weight: 800; color: var(--tt-compra); }
.tt-modal__tiers li:nth-child(2) .tt-modal__pct { color: var(--tt-ambar); }
.tt-modal__off { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; }

/* ---------- Sección de escala en el home ---------- */
.tt-escala { background: var(--tt-crema-claro); }
.tt-escala__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--tt-esp-2);
	margin-top: var(--tt-esp-4);
}
@media (min-width: 700px) { .tt-escala__grid { grid-template-columns: repeat(3, 1fr); } }
.tt-escala__card {
	position: relative;
	background: var(--tt-blanco);
	border: 1.5px solid var(--tt-borde);
	border-radius: var(--tt-radio);
	padding: var(--tt-esp-3) var(--tt-esp-2) var(--tt-esp-2);
	text-align: center;
	display: grid;
	justify-items: center;
	gap: 0.3rem;
	transition: transform var(--tt-transicion), box-shadow var(--tt-transicion);
}
.tt-escala__card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.1); }
.tt-escala__card.is-destacada {
	background: var(--tt-negro-profundo);
	border-color: var(--tt-negro-profundo);
	color: var(--tt-texto-invertido);
}
.tt-escala__card img { width: 100%; max-width: 200px; height: auto; border-radius: var(--tt-radio-chico); }
.tt-escala__cantidad { font-weight: 800; margin: var(--tt-esp-1) 0 0; }
.tt-escala__pct { font-size: 2.2rem; font-weight: 900; line-height: 1; margin: 0; color: var(--tt-compra); }
.tt-escala__card.is-destacada .tt-escala__pct { color: var(--tt-ambar); }
.tt-escala__pct small { font-size: 0.36em; opacity: 0.75; }

/* ---------- Aviso flotante ---------- */
.tt-aviso {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 18px);
	z-index: 150;
	max-width: min(420px, calc(100vw - 32px));
	background: var(--tt-negro-profundo);
	color: var(--tt-crema);
	padding: 0.7rem 1.1rem;
	border-radius: var(--tt-radio-chico);
	font-size: 0.86rem;
	font-weight: 600;
	box-shadow: 0 8px 26px rgba(0,0,0,0.3);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tt-transicion), transform var(--tt-transicion);
}
.tt-aviso.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* El contador del carrito se esconde cuando está en cero */
.tt-cart-count.is-vacio { display: none; }