/* BurgaLovers — estilos complementarios a Tailwind (Smash Maximalism) */

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

html { scroll-behavior: smooth; }

/* Scrollbar general en modo oscuro */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: #242424; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #E22121; }

::placeholder { color: #6b7280; }

/* ---------- Botón pincelada ---------- */
.btn-brush {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: #E22121;
	color: #fff;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: .85rem 1.6rem;
	border-radius: 16px 9px 18px 10px;
	box-shadow: 0 10px 24px -8px rgba(226,33,33,.7);
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-brush:hover { background: #c81c1c; transform: translateY(-2px) rotate(-.4deg); box-shadow: 0 16px 30px -10px rgba(226,33,33,.85); }
.btn-brush:active { transform: translateY(0); }

.btn-brush-outline {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: #fff;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: .85rem 1.6rem;
	border: 2px solid #E22121;
	border-radius: 16px 9px 18px 10px;
	transition: background .15s ease, transform .15s ease;
}
.btn-brush-outline:hover { background: #E22121; transform: translateY(-2px) rotate(.4deg); }

/* ---------- Resplandor rojo ---------- */
.glow-red { box-shadow: 0 0 60px -10px rgba(226,33,33,.55); }

/* ---------- Doodles dibujados a mano ---------- */
.doodle { position: absolute; color: #E22121; pointer-events: none; opacity: .9; }
.doodle svg { width: 100%; height: 100%; display: block; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-8px) rotate(var(--r,0deg)); } }
.doodle-float { animation: floaty 5s ease-in-out infinite; }

/* ---------- Marca de agua BURGA de fondo ---------- */
.marquee-bg {
	position: absolute; inset: 0; overflow: hidden; pointer-events: none;
	display: flex; flex-direction: column; justify-content: center; gap: .1em;
	opacity: .05; transform: rotate(-6deg) scale(1.3);
}
.marquee-bg span {
	font-family: 'Anton', Impact, sans-serif;
	font-size: 5rem; line-height: .95; white-space: nowrap; color: #fff; letter-spacing: .05em;
}

/* ---------- Moneda BurgaCoin ---------- */
.coin {
	width: 130px; height: 130px; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #ff5a5a, #E22121 45%, #8f1010 100%);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 0 40px -6px rgba(226,33,33,.7), inset 0 -8px 18px rgba(0,0,0,.45), inset 0 6px 12px rgba(255,255,255,.25);
	border: 4px solid #b71818;
	position: relative;
}
.coin::after {
	content: ""; position: absolute; inset: 14px; border-radius: 50%;
	border: 3px dashed rgba(255,255,255,.35);
}
.coin span { font-size: 3.2rem; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.4); z-index: 1; }

/* ---------- Flechas de carrusel ---------- */
.carousel-arrow {
	width: 44px; height: 44px; border-radius: 50%;
	border: 2px solid #E22121; color: #E22121;
	display: flex; align-items: center; justify-content: center;
	transition: background .15s ease, color .15s ease; flex: none;
}
.carousel-arrow:hover { background: #E22121; color: #fff; }

/* ---------- BurgaCoins: moneda y brillos ---------- */
@keyframes bcFloat { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
@keyframes bcGlow  { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.08); } }
@keyframes bcShine { 0% { transform: translateX(-120%) rotate(20deg); } 60%,100% { transform: translateX(320%) rotate(20deg); } }
.bc-coin { animation: bcFloat 5s ease-in-out infinite; filter: drop-shadow(0 24px 40px rgba(226,33,33,.5)); }
.bc-glow { animation: bcGlow 5s ease-in-out infinite; }
.bc-step { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.bc-step:hover { transform: translateY(-6px); border-color: rgba(226,33,33,.7); box-shadow: 0 22px 50px -20px rgba(226,33,33,.7); }
.bc-reward { transition: transform .2s ease, box-shadow .2s ease; }
.bc-reward:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 18px 40px -18px rgba(226,33,33,.65); }

/* ---------- Seguimiento: estado activo animado ---------- */
@keyframes blPing {
	0%   { box-shadow: 0 0 0 0 rgba(226,33,33,.5); }
	70%  { box-shadow: 0 0 0 8px rgba(226,33,33,0); }
	100% { box-shadow: 0 0 0 0 rgba(226,33,33,0); }
}
@keyframes blBob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-2px); }
}
.step-dot.is-active { animation: blPing 1.5s ease-out infinite; }
.step-dot.is-active svg { animation: blBob 1.5s ease-in-out infinite; }

/* ---------- Card producto: brillo al hover ---------- */
.prod-card { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.prod-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(226,33,33,.6); }