/* 084 3D — tema do design system por cima da base herdada: grafite, aço escovado e cobalto. */
:root {
  --bg: #111317; --fg: #e9ebee; --muted: #8a9099; --line: rgba(196,200,206,.14); --card: #1a1d22;
  --accent: #2f6bff; --on-accent: #ffffff; --wa: #25d366; --on-wa: #0b1a12;
  --aco: #c4c8ce; --cobalto-profundo: #1a3f9e; --cobalto-brilho: #7aa2ff; --foto: #e9ebee;
  --font-display: "Russo One", "Arial Black", sans-serif;
  --font-texto: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --display: var(--font-display); --texto: var(--font-texto); --mono: var(--font-mono);
  --arco: linear-gradient(90deg, #1a3f9e, #2f6bff, #7aa2ff, #c4c8ce);
  color-scheme: dark;
}
body { background: var(--bg); color: var(--fg); font-size: 17px; }

/* Russo One tem um peso só: nada de 800 falso nem letras apertadas */
.impresso, .sec__tit, .trilho__cab h2, .linha__txt h2, .passos h3, .lj-conf__tit, .mc__miolo b, h1 { font-weight: 400 !important; letter-spacing: -.01em !important; }
.impresso > span:last-child { color: var(--accent); }
.fecho .impresso > span:last-child { color: var(--accent); }

/* topo */
.topo.solido { background: rgba(17,19,23,.82); box-shadow: 0 1px 0 var(--line); }
.topo__marca { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; }
.topo__marca img { border-radius: 8px; }
.topo__nav a.nav-outlet { background: var(--card); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.topo__nav a.nav-outlet:hover { background: var(--accent); color: var(--on-accent); }

/* abertura: o aro partido do logo atrás do título */
.hero { overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; pointer-events: none; right: -12vw; top: 50%; width: min(78vw, 980px); aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; border: clamp(10px, 1.6vw, 22px) solid transparent; }
.hero::before { border-top-color: var(--accent); border-right-color: var(--accent); rotate: -45deg; opacity: .55; }
.hero::after { border-bottom-color: var(--aco); border-left-color: var(--aco); rotate: -45deg; opacity: .22; scale: .92; }
.hero > * { position: relative; z-index: 1; }
.grade-mesa { opacity: .35; }
.ponto { background: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* fotos de produto continuam em fundo claro, como aço polido */
.lj-card__foto, .bob__foto, .linha__foto, .lj-prod__foto, .lj-item img, .lj-voo, .lj-flip { background: var(--foto); }
.lj-card__foto, .bob__foto { border-radius: 14px; }
.linha__foto { border-radius: 20px; box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(0,0,0,.45); }
.lj-prod { border-radius: 20px; box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(0,0,0,.6); }
.lj-x { background: rgba(17,19,23,.85); color: var(--fg); }

/* botões */
.lj-btn { box-shadow: 0 2px 0 var(--cobalto-profundo); }
.lj-btn:hover { box-shadow: 0 0 0 1px rgba(47,107,255,.5), 0 8px 30px rgba(47,107,255,.35); }
.lj-btn--wa, .lj-btn--linha { box-shadow: none; }
.lj-btn--wa:hover { box-shadow: 0 8px 30px rgba(37,211,102,.3); }
.btn-outlet { background: var(--card); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.btn-outlet__pct { background: var(--accent); color: var(--on-accent); }
@keyframes pctPulsa { 50% { transform: scale(1.18) rotate(-12deg); box-shadow: 0 0 0 6px rgba(47,107,255,.25); } }
.seta { background: var(--card); color: var(--fg); }
.lj-filtro[aria-selected="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.cor-ativa { background: var(--fg); color: var(--bg); }

/* números e etiquetas em mono, como ficha técnica */
.passos span { font-size: 13px; color: var(--cobalto-brilho); }
.passos li { background: var(--card); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.passos li::after { content: ""; display: block; height: 3px; width: 48px; margin-top: 28px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) 60%, var(--aco) 60%); }

/* marcas: anel cobalto e aço no lugar do arco-íris */
.mc[aria-selected="true"] .mc__anel { background: conic-gradient(from 225deg, var(--accent) 0 50%, var(--aco) 50% 100%); animation: mcGira 6s linear infinite; }
@keyframes mcGira { to { rotate: 360deg; } }
.mc__miolo { background: var(--foto); border-color: var(--bg); color: #111317; }
.tom[aria-selected="true"] .tom__bola { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }

/* outlet, fecho e rodapé: um degrau acima do fundo */
.outlet { background: var(--card); color: var(--fg); --muted: #8a9099; --line: rgba(196,200,206,.14); box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.outlet::before { -webkit-text-stroke: 1px rgba(47,107,255,.14); }
.outlet__eti { color: var(--cobalto-brilho) !important; }
.outlet .seta { background: rgba(255,255,255,.05); color: var(--fg); }
.fecho { position: relative; overflow: hidden; background: #0b0d10; color: var(--fg); }
.fecho .impresso .bico::before { background: var(--aco); }
.fecho::before { content: ""; position: absolute; left: 50%; bottom: -46vw; width: 92vw; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; border: 2px solid var(--line); border-top-color: rgba(47,107,255,.5); pointer-events: none; }
.fecho > * { position: relative; }
.rodape { background: #0b0d10; color: var(--fg); --muted: #8a9099; --line: rgba(196,200,206,.14); }
.rod__marca img { border-radius: 14px; background: none; }
.rod__rede { background: rgba(255,255,255,.06); }
.rod__rede:hover { background: var(--accent); color: var(--on-accent); }
.rod__frete { color: var(--cobalto-brilho); }
.frete-selo { background: var(--accent); color: var(--on-accent); }

/* carrinho e confirmações */
.lj-gav { box-shadow: -1px 0 0 var(--line), -20px 0 60px rgba(0,0,0,.5); }
.lj-conf, .lj-limpa__conf button { background: #262a31; color: var(--fg); }
.lj-limpa__btn:hover { color: #ff6b5e; }
.lj-aviso { background: var(--fg); color: var(--bg); }

/* cursor e efeitos */
.fx-ponto { background: var(--accent); }
.fx-cursor.ver::before { background: var(--accent); border-color: var(--accent); }
.fx-fio__bico { background: var(--cobalto-brilho); box-shadow: 0 0 10px var(--accent), 0 0 2px #fff; }

/* página do pedido */
.fio { background: var(--arco); }
.ped__logo img { border-radius: 14px; }

:focus-visible { outline: 2px solid var(--cobalto-brilho); outline-offset: 3px; }
@media (max-width: 760px) { .hero::before, .hero::after { right: -40vw; width: 110vw; } }
@media (prefers-reduced-motion: reduce) { .mc[aria-selected="true"] .mc__anel { animation: none; } }