/* ==========================================================================
   Radar de Oferta — folha de estilo
   Paleta Mercado Livre: amarelo #FFE600 + preto + escala de cinza.
   Base clara (familiar pra quem compra no ML) com blocos pretos "tech"
   no hero, no sorteio e no rodapé.
   ========================================================================== */

:root {
  --amarelo: #ffe600;
  --amarelo-cl: #fff159;
  --amarelo-es: #e8d200;

  --preto: #0a0a0a;
  --preto-2: #16181d;
  --preto-3: #22252c;

  --bg: #ededed;
  --card: #ffffff;
  --linha: #e2e2e2;
  --linha-2: #d2d2d2;

  --tinta: #111111;
  --tinta-60: #666666;
  --tinta-40: #6f6f6f;  /* era #949494: 2,9:1 no branco, reprovava em texto pequeno */

  --verde: #00a650;      /* verde do ML — só como fundo de selo */
  --verde-txt: #00753d;  /* mesma família, mas passa 4,5:1 como TEXTO no branco */
  --verde-cl: #e8f6ee;

  --raio: 12px;
  --raio-sm: 8px;
  --raio-lg: 20px;
  --sombra: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
  --sombra-alta: 0 8px 28px rgba(0,0,0,.13), 0 2px 6px rgba(0,0,0,.06);
  --largura: 1200px;
  --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

/* [hidden] tem a mesma especificidade de uma classe — qualquer regra deste
   arquivo com "display" (.produtos, .p-carta...) venceria o [hidden] do
   navegador: o elemento sumiria da lógica mas continuaria na tela.
   Esta linha garante que hidden sempre vence. NÃO REMOVER. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--tinta); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.025em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.15rem); }
h3 { font-size: clamp(1.02rem, 1.7vw, 1.25rem); font-weight: 700; }
p { margin: 0 0 1em; }

.env { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 20px; }
.lead { color: var(--tinta-60); max-width: 64ch; font-size: 1.05rem; }

.guia-cat {
  margin-top: 28px; padding: 18px 20px; background: var(--card);
  border: 1px solid var(--linha); border-left: 3px solid var(--amarelo);
  border-radius: var(--raio-sm);
}
.guia-cat h2 { font-size: .95rem; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-60); }
.guia-cat p { margin: 0; max-width: 70ch; color: var(--tinta); font-size: .92rem; line-height: 1.55; }
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tag-mono {
  display: inline-block; font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--amarelo);
  border: 1px solid rgba(255,230,0,.4); padding: 4px 10px; border-radius: 999px; margin-bottom: 16px;
}

/* a "aurora" vira uma malha de pontos discreta atrás do conteúdo claro */
.aurora {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(0,0,0,.055) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

/* ---------- cabeçalho: barra amarela do ML ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: var(--amarelo);
  border-bottom: 1px solid rgba(0,0,0,.10);
  overflow: hidden;
}
/* brilho diagonal que atravessa a barra de tempos em tempos */
.topo::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 160px;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  transform: skewX(-18deg); animation: brilhoBarra 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes brilhoBarra { 0%{left:-200px} 55%,100%{left:110%} }

.topo-int { display: flex; align-items: center; gap: 26px; min-height: 62px; padding: 8px 0; position: relative; z-index: 1; }
.marca { display: flex; align-items: center; gap: 12px; }
.marca:hover { text-decoration: none; }
.marca-icone { width: auto; height: 42px; flex: none; display: block; transition: transform .35s cubic-bezier(.3,1.3,.5,1); }
.marca:hover .marca-icone { transform: translateY(-1px) scale(1.05); }
.marca-nome { width: auto; height: 22px; flex: none; display: block; }
@media (max-width: 480px) { .marca-nome { height: 19px; } .marca-icone { height: 36px; } .marca { gap: 9px; } }
.marca-icone svg { width: 100%; height: 100%; display: block; }
.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.nav a {
  padding: 9px 15px; border-radius: 8px; color: rgba(0,0,0,.72);
  font-weight: 600; font-size: .93rem; position: relative;
}
.nav a::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 2px;
  background: var(--preto); transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.nav a:hover { color: var(--preto); text-decoration: none; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--preto); font-weight: 700; }
.menu-btn {
  display: none; margin-left: auto; background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.14);
  border-radius: 8px; padding: 8px 12px; font-size: 1.1rem; cursor: pointer; color: var(--preto);
}
@media (max-width: 880px) {
  .menu-btn { display: block; }
  .nav {
    /* no fluxo, nao absoluto: o cabecalho agora quebra em duas linhas
       (logo+menu / busca) e um "top" fixo cairia no lugar errado */
    display: none; position: static; flex-basis: 100%;
    background: var(--amarelo); border-top: 1px solid rgba(0,0,0,.12);
    flex-direction: column; align-items: stretch; padding: 6px 0 2px; gap: 2px;
  }
  .nav.aberto { display: flex; }
  .nav a { padding: 13px 14px; }
  .nav a::after { display: none; }
}

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 10px; font-weight: 700; font-size: .95rem;
  font-family: inherit; border: 1px solid transparent; cursor: pointer;
  transition: transform .14s, box-shadow .14s, background .18s, color .18s;
}
.botao:hover { text-decoration: none; transform: translateY(-2px); }
.botao-1 { background: var(--amarelo); color: var(--preto); box-shadow: 0 4px 0 var(--amarelo-es); }
.botao-1:hover { background: var(--amarelo-cl); color: var(--preto); box-shadow: 0 6px 0 var(--amarelo-es), 0 10px 24px rgba(0,0,0,.18); }
.botao-1:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--amarelo-es); }
.botao-1:disabled { opacity: .55; cursor: default; transform: none; }
.botao-2 { background: transparent; color: var(--tinta); border-color: var(--linha-2); }
.botao-2:hover { border-color: var(--preto); color: var(--preto); }
.botoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* botão claro sobre fundo preto */
.bloco-preto .botao-2 { color: #fff; border-color: rgba(255,255,255,.55); }
.bloco-preto .botao-2:hover { border-color: var(--amarelo); color: var(--amarelo); }

/* ==========================================================================
   HERO — bloco preto "tech"
   ========================================================================== */
.hero {
  background: var(--preto); color: #fff; padding: 70px 0 64px; position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,230,0,.055) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,230,0,.055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
}
.hero .env { position: relative; z-index: 1; }
.hero-grade { display: grid; grid-template-columns: 1.02fr .98fr; gap: 44px; align-items: center; }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--amarelo); }
.hero-texto .sub { font-size: 1.1rem; color: rgba(255,255,255,.74); max-width: 48ch; }
.hero-texto .sub b { color: var(--amarelo); font-weight: 700; }

.selo-dados {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  background: rgba(255,230,0,.10); border: 1px solid rgba(255,230,0,.35); color: var(--amarelo);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 22px; text-transform: uppercase;
}
.ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--amarelo); flex: none; animation: pulso 2s infinite; }
@keyframes pulso { 0%{box-shadow:0 0 0 0 rgba(255,230,0,.55)} 70%{box-shadow:0 0 0 9px rgba(255,230,0,0)} 100%{box-shadow:0 0 0 0 rgba(255,230,0,0)} }

.hero-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 36px; }
.num-carta {
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--raio); padding: 15px 16px; position: relative; overflow: hidden;
}
.num-carta::after {
  content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: var(--amarelo);
  transform: scaleY(0); transform-origin: bottom; animation: barraSobe .8s ease forwards;
}
.num-carta:nth-child(2)::after { animation-delay: .12s; }
.num-carta:nth-child(3)::after { animation-delay: .24s; }
@keyframes barraSobe { to { transform: scaleY(1); } }
.num-carta b { display: block; font-size: 1.75rem; color: var(--amarelo); letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.num-carta span { font-size: .7rem; color: rgba(255,255,255,.55); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }

.cena-ia {
  width: 100%; max-width: 540px; height: auto; border-radius: var(--raio-lg);
  border: 1px solid rgba(255,230,0,.18); box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
@media (max-width: 940px) {
  .hero-grade { grid-template-columns: 1fr; gap: 32px; }
  .cena-ia { max-width: 440px; }
}

/* ---------- animações da cena da IA ---------- */
.ia-sweep { transform-origin: 386px 240px; animation: varre 4s linear infinite; }
@keyframes varre { to { transform: rotate(360deg); } }
.ia-blips circle { animation: blip 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ia-blips circle:nth-child(2){animation-delay:.8s} .ia-blips circle:nth-child(3){animation-delay:1.6s}
.ia-blips circle:nth-child(4){animation-delay:2.4s} .ia-blips circle:nth-child(5){animation-delay:3.2s}
@keyframes blip { 0%{opacity:0;transform:scale(.4)} 12%{opacity:1;transform:scale(1.5)} 30%{opacity:1;transform:scale(1)} 100%{opacity:.15;transform:scale(1)} }
.ia-chip { animation: flutuaChip 6s ease-in-out infinite; }
.ia-chip:nth-child(2){animation-delay:1.4s;animation-duration:7s} .ia-chip:nth-child(3){animation-delay:2.6s;animation-duration:8s}
@keyframes flutuaChip { 0%,100%{transform:translateY(0);opacity:.9} 50%{transform:translateY(-9px);opacity:1} }
.ia-olho { animation: olho 3.4s ease-in-out infinite; }
@keyframes olho { 0%,100%{opacity:1} 46%{opacity:1} 50%{opacity:.15} 54%{opacity:1} }
.ia-visor { animation: visor 3.4s ease-in-out infinite; }
@keyframes visor { 0%,100%{stroke-opacity:1} 50%{stroke-opacity:.45} }
.ia-part circle { animation: flutua 7s ease-in-out infinite; }
.ia-part circle:nth-child(2n){animation-duration:9s} .ia-part circle:nth-child(3n){animation-duration:6s;animation-delay:1s}
@keyframes flutua { 0%,100%{transform:translateY(0);opacity:.55} 50%{transform:translateY(-11px);opacity:1} }
.ia-pontos circle { animation: pisca 2.4s steps(1) infinite; }
.ia-pontos circle:nth-child(2){animation-delay:.8s} .ia-pontos circle:nth-child(3){animation-delay:1.6s}
@keyframes pisca { 0%,60%{opacity:1} 61%,100%{opacity:.25} }
.ia-stream text { animation: pisca 3s steps(1) infinite; }
.ia-stream text:nth-child(2){animation-delay:.5s} .ia-stream text:nth-child(3){animation-delay:1s}
.ia-figura { animation: respira 7s ease-in-out infinite; }
@keyframes respira { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

/* ---------- faixa marquee de destaques ---------- */
.marquee {
  background: var(--preto-2); color: #fff; border-block: 1px solid rgba(255,255,255,.08);
  overflow: hidden; padding: 11px 0; position: relative;
}
.marquee-trilha { display: flex; gap: 34px; width: max-content; animation: correMarquee 34s linear infinite; }
.marquee:hover .marquee-trilha { animation-play-state: paused; }
@keyframes correMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee span {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; white-space: nowrap;
  color: rgba(255,255,255,.62); display: inline-flex; align-items: center; gap: 10px;
}
.marquee span b { color: var(--amarelo); font-weight: 700; }
.marquee span::before { content: "◆"; color: rgba(255,230,0,.5); font-size: .6rem; }

/* ---------- faixa de confiança ---------- */
.confianca {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--linha); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden;
}
.conf-item { background: var(--card); display: flex; align-items: flex-start; gap: 12px; padding: 20px 17px; transition: background .2s; }
.conf-item:hover { background: #fffdf0; }
.conf-icone {
  flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--amarelo);
  display: grid; place-items: center; color: var(--preto);
}
.conf-icone svg { width: 21px; height: 21px; }
.conf-tit { font-size: .87rem; font-weight: 700; color: var(--tinta); margin: 0 0 3px; }
.conf-texto p { font-size: .78rem; color: var(--tinta-60); margin: 0; line-height: 1.45; }
.conf-texto p.conf-tit { color: var(--tinta); }
@media (max-width: 880px) { .confianca { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .confianca { grid-template-columns: 1fr; } }

/* ---------- seções ---------- */
.secao { padding: 58px 0; }
.secao-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.secao-topo h2 { position: relative; padding-left: 16px; }
.secao-topo h2::before {
  content: ""; position: absolute; left: 0; top: .12em; bottom: .12em; width: 5px;
  background: var(--amarelo); border-radius: 3px;
}
.secao-topo p { color: var(--tinta-60); margin: .3em 0 0 16px; max-width: 60ch; }

/* ---------- passos "como funciona" ---------- */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: passo; }
.passo {
  position: relative; background: var(--card); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 30px 24px 24px; overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.passo::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--amarelo);
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.passo:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.passo:hover::before { transform: scaleX(1); }
.passo-num {
  position: absolute; top: 18px; right: 20px; font-family: var(--mono); font-size: 2.4rem;
  font-weight: 700; color: #dcdcdc; line-height: 1;
}
.passo-ic { display: block; width: 28px; height: 28px; color: var(--preto); margin: 0 0 14px; }
.passo h3 { margin-bottom: 6px; }
.passo p { margin: 0; color: var(--tinta-60); font-size: .92rem; }
@media (max-width: 820px) { .passos { grid-template-columns: 1fr; } }

/* ---------- categorias ---------- */
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 16px; }
.cat-carta {
  background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio);
  overflow: hidden; display: block; transition: border-color .18s, box-shadow .18s, transform .18s;
}
.cat-carta:hover { text-decoration: none; border-color: var(--amarelo); box-shadow: var(--sombra-alta); transform: translateY(-4px); }
.cat-foto { aspect-ratio: 4/3; background: #f6f6f6; overflow: hidden; }
.cat-foto img { width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform .35s; }
.cat-carta:hover .cat-foto img { transform: scale(1.08); }
.cat-corpo { padding: 14px 16px 16px; }
.cat-corpo h3 { margin-bottom: 3px; font-size: 1rem; }
.cat-corpo span { font-size: .78rem; color: var(--tinta-40); font-weight: 600; font-family: var(--mono); }

/* ---------- grade de produtos ---------- */
.produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 16px; }
/* Celular: 2 cartões por linha, igual ao app do Mercado Livre. Sem isso o
   minmax(228px) só cabia uma coluna e a pessoa via um produto por vez. */
@media (max-width: 620px) {
  .produtos { grid-template-columns: 1fr 1fr; gap: 10px; }
  .produtos .p-img img { padding: 10px; }
  .produtos .p-selos { top: 6px; left: 6px; gap: 4px; }
  .produtos .selo { font-size: .62rem; padding: 3px 6px; }
  .produtos .p-corpo { padding: 10px 11px 12px; }
  .produtos .p-nome { font-size: .8rem; line-height: 1.36; -webkit-line-clamp: 2; min-height: 2.2em; margin-bottom: 7px; }
  .produtos .p-nota { font-size: .7rem; margin-bottom: 7px; }
  .produtos .p-preco { gap: 5px; }
  .produtos .p-preco b { font-size: 1.05rem; }
  .produtos .p-desc, .produtos .p-antes { font-size: .72rem; }
  .produtos .p-origem { font-size: .7rem; margin: 6px 0 9px; }
  .produtos .p-cta { padding: 10px 6px; font-size: .78rem; border-radius: 7px; white-space: nowrap; }
  /* em 2 colunas não cabe "no Mercado Livre" — o aria-label do link continua
     completo, então quem usa leitor de tela ouve o texto inteiro. */
  .produtos .p-cta-longo { display: none; }
  /* mais largura útil pros cartões: a margem lateral encolhe */
  .env { padding: 0 12px; }
}
.p-carta {
  background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.p-carta::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--raio); pointer-events: none;
  box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .18s;
}
.p-carta:hover { box-shadow: var(--sombra-alta); transform: translateY(-5px); }
.p-carta:hover::after { box-shadow: inset 0 0 0 2px var(--amarelo); }
.p-img { position: relative; aspect-ratio: 1; background: #fff; overflow: hidden; }
.p-img img { width: 100%; height: 100%; object-fit: contain; padding: 16px; transition: transform .35s; }
.p-carta:hover .p-img img { transform: scale(1.06); }
.p-selos { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.selo {
  font-size: .63rem; font-weight: 800; padding: 4px 8px; border-radius: 5px;
  letter-spacing: .05em; text-transform: uppercase; line-height: 1.3; font-family: var(--mono);
}
.selo-destaque { background: linear-gradient(90deg, var(--amarelo), var(--amarelo-cl)); color: var(--preto); box-shadow: 0 2px 10px rgba(255,230,0,.5); }
.selo-oferta { background: var(--preto); color: var(--amarelo); }
.selo-campeao { background: var(--amarelo); color: var(--preto); }
.selo-full { background: var(--verde); color: #fff; }
.selo-queridinho { background: #fff; color: var(--tinta); border: 1px solid var(--linha-2); }

.p-corpo { padding: 14px 15px 16px; display: flex; flex-direction: column; flex: 1; }
.p-nome {
  font-size: .87rem; font-weight: 500; line-height: 1.42; margin: 0 0 9px; color: var(--tinta);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.7em;
}
.p-nota { font-size: .76rem; color: var(--tinta-40); display: flex; align-items: center; gap: 5px; margin-bottom: 10px; font-weight: 600; font-family: var(--mono); }
.p-nota-nova { font-style: italic; }
.estrela { color: #ffb800; }
.p-preco { margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.p-preco b { font-size: 1.35rem; color: var(--tinta); letter-spacing: -.035em; font-weight: 700; }
.p-antes { font-size: .78rem; color: var(--tinta-40); text-decoration: line-through; }
.p-desc { font-size: .78rem; font-weight: 700; color: var(--verde-txt); font-family: var(--mono); }
.p-origem { font-size: .71rem; color: var(--tinta-40); margin: 8px 0 12px; font-weight: 500; }
.p-cta {
  display: block; text-align: center; padding: 11px; border-radius: 9px;
  background: var(--amarelo); color: var(--preto); font-weight: 700; font-size: .85rem;
  transition: background .18s, transform .12s;
}
.p-cta:hover { background: var(--amarelo-cl); color: var(--preto); text-decoration: none; }

/* ==========================================================================
   SORTEIO — carretel horizontal (bloco preto)
   ========================================================================== */
.sorteio { background: var(--preto); color: #fff; padding: 0; }
.sorteio-caixa { padding: 60px 0 64px; position: relative; }
.sorteio-topo { max-width: 60ch; margin-bottom: 32px; }
.sorteio-topo h2 { color: #fff; }
.sorteio-topo p { color: rgba(255,255,255,.62); margin: 0; }

.carretel {
  position: relative; height: 132px; overflow: hidden; border-radius: var(--raio);
  background: var(--preto-2); border: 1px solid rgba(255,255,255,.10);
}
.carretel-trilha { display: flex; gap: 12px; padding: 14px 0; align-items: center; height: 100%; will-change: transform; }
.celula {
  flex: none; width: 128px; height: 104px; border-radius: var(--raio-sm); background: #fff;
  position: relative; overflow: hidden; display: grid; place-items: center;
}
.celula img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.celula-desc {
  position: absolute; bottom: 0; left: 0; right: 0; background: var(--preto); color: var(--amarelo);
  font-family: var(--mono); font-size: .68rem; font-weight: 700; text-align: center; padding: 2px 0;
}
/* mira central */
/* Nada de "box-shadow: 0 0 0 9999px" pra escurecer as bordas: isso cria uma
   camada de pintura gigante e trava o compositor. O escurecimento vem dos
   gradientes .carretel-fade, que são baratos. */
.carretel-mira {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 132px; margin-left: -66px; z-index: 3;
  border: 2px solid var(--amarelo); border-radius: var(--raio-sm); pointer-events: none;
}
.carretel-mira::before, .carretel-mira::after {
  content: ""; position: absolute; left: 50%; margin-left: -7px;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
}
.carretel-mira::before { top: -1px; border-top: 9px solid var(--amarelo); }
.carretel-mira::after { bottom: -1px; border-bottom: 9px solid var(--amarelo); }
.carretel-fade { position: absolute; top: 0; bottom: 0; width: 34%; z-index: 2; pointer-events: none; }
.carretel-fade-e { left: 0; background: linear-gradient(90deg, var(--preto-2) 12%, rgba(22,24,29,.55) 62%, transparent); }
.carretel-fade-d { right: 0; background: linear-gradient(-90deg, var(--preto-2) 12%, rgba(22,24,29,.55) 62%, transparent); }

.sorteio-acao { display: flex; align-items: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.sorteio-status { font-family: var(--mono); font-size: .78rem; color: var(--amarelo); }

.roleta-saida { margin-top: 22px; max-width: 560px; }
.roleta-card {
  display: flex; gap: 16px; align-items: center; background: var(--preto-2);
  border: 1px solid rgba(255,230,0,.28); border-radius: var(--raio); padding: 14px;
  animation: revelaCard .45s cubic-bezier(.2,1.2,.4,1);
}
@keyframes revelaCard { from{opacity:0;transform:translateY(10px) scale(.98)} to{opacity:1;transform:none} }
.roleta-card > img { width: 88px; height: 88px; object-fit: contain; background: #fff; border-radius: 9px; flex: none; padding: 8px; }
.rc-corpo { min-width: 0; }
.rc-nome { font-size: .88rem; font-weight: 600; line-height: 1.35; margin: 0 0 6px; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc-meta { font-size: .9rem; color: rgba(255,255,255,.7); margin: 0 0 10px; font-family: var(--mono); }
.rc-meta b { color: #34d17e; font-weight: 700; margin-left: 6px; }  /* sobre fundo preto */
.rc-cta {
  display: inline-block; background: var(--amarelo); color: var(--preto); font-weight: 700;
  font-size: .8rem; padding: 8px 16px; border-radius: 8px;
}
.rc-cta:hover { background: var(--amarelo-cl); text-decoration: none; }
@media (max-width: 560px) {
  .carretel { height: 118px; }
  .celula { width: 108px; height: 92px; }
  .carretel-mira { width: 112px; margin-left: -56px; }
}

/* ---------- filtros ---------- */
.filtros {
  display: flex; gap: 12px 14px; flex-wrap: wrap; align-items: flex-end;
  background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 16px 18px; margin-bottom: 26px;
}
/* Cada rótulo anda junto do seu campo. Antes label e select eram irmãos soltos
   no flex: ao quebrar linha no celular, cada rótulo colava no campo ERRADO. */
.filtro-campo { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; min-width: 0; }
.filtro-busca { flex: 2 1 200px; }
.filtros label { font-size: .8rem; font-weight: 700; color: var(--tinta-60); }
.filtros select, .filtros input {
  font-family: inherit; font-size: .88rem; padding: 9px 12px; width: 100%;
  height: 40px; line-height: 1.2; /* input e select na mesma altura, senão os rótulos desalinham 2px */
  border: 1px solid var(--linha-2); border-radius: 8px; background: #fff; color: var(--tinta);
}
@media (max-width: 620px) {
  .filtro-campo { flex: 1 1 100%; }
  .filtros .botao { width: 100%; }
}
.filtros select:focus, .filtros input:focus { outline: 2px solid var(--amarelo); outline-offset: 1px; border-color: var(--amarelo); }
.conta { margin-left: auto; font-size: .82rem; color: var(--tinta-40); font-weight: 600; font-family: var(--mono); }
.vazio { padding: 50px 20px; text-align: center; color: var(--tinta-40); }

/* ---------- blog ---------- */
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.post-carta {
  background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 26px;
  display: flex; flex-direction: column; transition: box-shadow .18s, transform .18s, border-color .18s;
}
.post-carta:hover { box-shadow: var(--sombra-alta); transform: translateY(-4px); border-color: var(--amarelo); }
.post-tag {
  font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
  color: var(--preto); background: var(--amarelo); padding: 4px 10px; border-radius: 5px;
  align-self: flex-start; margin-bottom: 14px; font-family: var(--mono);
}
.post-carta h3 { font-size: 1.1rem; margin-bottom: 8px; }
.post-carta p { font-size: .88rem; color: var(--tinta-60); margin-bottom: 14px; }
.post-meta { font-size: .74rem; color: var(--tinta-40); margin-top: auto; font-weight: 600; font-family: var(--mono); }

/* ---------- artigo ---------- */
.artigo { max-width: 748px; margin: 0 auto; padding: 44px 0 20px; }
.artigo h1 { margin-bottom: 14px; }
.artigo-meta {
  font-size: .82rem; color: var(--tinta-40); font-weight: 600; font-family: var(--mono);
  padding-bottom: 22px; margin-bottom: 30px; border-bottom: 1px solid var(--linha-2);
}
.artigo h2 { margin-top: 1.8em; }
.artigo h3 { margin-top: 1.5em; }
.artigo p, .artigo li { font-size: 1.05rem; line-height: 1.78; color: #333; }
.artigo ul, .artigo ol { padding-left: 1.3em; margin-bottom: 1.2em; }
.artigo li { margin-bottom: .5em; }
.artigo li::marker { color: var(--amarelo-es); }
.artigo code { background: #f2f2f2; border: 1px solid var(--linha); border-radius: 5px; padding: 1px 6px; font-family: var(--mono); font-size: .88em; }

.destaque {
  background: #fffdf0; border: 1px solid rgba(255,230,0,.7); border-left: 5px solid var(--amarelo);
  padding: 18px 22px; border-radius: 0 var(--raio-sm) var(--raio-sm) 0; margin: 28px 0;
}
.destaque p:last-child { margin-bottom: 0; }

.tabela-env { overflow-x: auto; margin: 28px 0; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { padding: 13px 15px; text-align: left; border-bottom: 1px solid var(--linha); }
th { background: #fafafa; font-weight: 800; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-60); white-space: nowrap; }
tr:last-child td { border-bottom: none; }

.faq-item { border-bottom: 1px solid var(--linha); padding: 18px 0; }
.faq-item:last-child { border-bottom: none; }
.faq-item h3 { font-size: 1rem; margin: 0 0 8px; }
.faq-item p { margin: 0; font-size: .96rem; color: var(--tinta-60); }

.migalhas { font-size: .78rem; color: var(--tinta-40); padding: 18px 0 0; font-weight: 600; font-family: var(--mono); }
.migalhas a { color: var(--tinta-40); }
.migalhas span { margin: 0 7px; opacity: .5; }

/* ---------- rodapé ---------- */
.rodape { background: var(--preto); color: rgba(255,255,255,.62); padding: 56px 0 26px; margin-top: 64px; }
.rodape-grade { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 36px; }
.rodape-tit { color: var(--amarelo); font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 15px; font-family: var(--mono); }
.rodape a { color: rgba(255,255,255,.66); font-size: .88rem; display: block; padding: 3px 0; margin-bottom: 5px; transition: color .15s, padding-left .15s; }
.rodape a:hover { color: var(--amarelo); padding-left: 4px; text-decoration: none; }
.rodape p { font-size: .87rem; line-height: 1.65; }
.rodape-fim {
  border-top: 1px solid rgba(255,255,255,.10); padding-top: 22px;
  font-size: .77rem; color: rgba(255,255,255,.62); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
/* aqui os links andam no meio da frase — não são itens de lista como no resto do rodapé */
.rodape-fim a { display: inline; margin: 0; padding: 0; color: rgba(255,255,255,.78); }
.rodape-fim a:hover { padding-left: 0; }
@media (max-width: 800px) { .rodape-grade { grid-template-columns: 1fr 1fr; gap: 28px; } }

/* ---------- utilitários ---------- */
.centro { text-align: center; }
.mt-40 { margin-top: 40px; }

/* ---------- entrada suave (100% CSS, sempre termina visível) ----------
   animation com fill "both": sem JS, sem risco de conteúdo preso invisível. */
.secao { animation: entra .55s ease both; }
.hero-grade > * { animation: entra .6s ease both; }
.hero-grade > *:nth-child(2) { animation-delay: .08s; }
@keyframes entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   MOVIMENTO REDUZIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .secao, .hero-grade > * { opacity: 1 !important; transform: none !important; }
  .topo::after { display: none; }
  .marquee-trilha { animation: none; transform: none; }
  .ia-sweep, .ia-figura, .ia-chip { animation: none; transform: none; }
  .ia-blips circle, .ia-part circle, .ia-pontos circle, .ia-stream text { opacity: 1; animation: none; }
  .num-carta::after { transform: scaleY(1); }
  .carretel-trilha { transition: none !important; }
}

/* ==========================================================================
   ACESSIBILIDADE E ACABAMENTO — adicionado na auditoria de qualidade
   ========================================================================== */

/* Foco visível de verdade. Sem isto, quem navega por teclado fica perdido:
   é o item que mais reprova site "bonito" em auditoria de acessibilidade.
   :focus-visible só aparece na navegação por teclado, não no clique de mouse. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--preto);
  outline-offset: 3px;
  border-radius: 6px;
}
/* sobre o amarelo do cabeçalho o contorno preto some — inverte */
.topo :where(a, button):focus-visible { outline-color: var(--preto); }
/* nos blocos pretos o contorno precisa ser amarelo pra ser visto */
.hero :where(a, button):focus-visible,
.sorteio :where(a, button):focus-visible,
.rodape :where(a, button):focus-visible { outline-color: var(--amarelo); }

/* Link "pular para o conteúdo": escondido até receber foco. Antes ele era
   invisível SEMPRE — ou seja, era um atalho que ninguém conseguia usar. */
.pular {
  /* fixed, não absolute: com absolute o link fica ancorado no topo do
     DOCUMENTO, então ao receber foco com a página rolada ele aparecia
     centenas de pixels fora da tela — um atalho que ninguém via. */
  position: fixed; left: 12px; top: -60px; z-index: 100;
  background: var(--preto); color: var(--amarelo); font-weight: 700; font-size: .9rem;
  padding: 12px 20px; border-radius: 0 0 10px 10px; transition: top .18s ease;
}
.pular:focus { top: 0; text-decoration: none; }

::selection { background: var(--amarelo); color: var(--preto); }

/* Alvo de toque mínimo no celular: 44px é a recomendação de acessibilidade. */
@media (pointer: coarse) {
  .nav a, .menu-btn, .p-cta, .botao, .rodape-grade a { min-height: 44px; display: flex; align-items: center; }
  .rodape-grade a, .nav a { justify-content: flex-start; }
  .p-cta, .botao { justify-content: center; }
  .rodape-fim a { display: inline; min-height: 0; }
}

/* ---------- classes utilitárias (substituem os antigos style="" inline,
   o que permitiu fechar o CSP sem 'unsafe-inline' em style-src) ---------- */
.secao-sem-fim { padding-bottom: 0; }
.secao-sem-topo { padding-top: 0; }
.secao-pagina { padding-top: 26px; }
.secao-404 { padding: 90px 0; }
.botao-sm { padding: 10px 20px; }
.botoes-centro { justify-content: center; }
.p-404 { color: var(--tinta-60); max-width: 52ch; margin: 0 auto 8px; }


/* ---------- páginas institucionais ---------- */
.destaque-contato {
  background: var(--preto); color: #fff; border-radius: var(--raio);
  padding: 20px 24px; font-size: 1.05rem;
}
.destaque-contato a { color: var(--amarelo); font-weight: 700; text-decoration: underline; }
.pendente {
  background: #fff8e1; border: 1px dashed var(--amarelo-es); border-radius: var(--raio);
  padding: 16px 20px; color: var(--tinta-60); font-size: .95rem;
}

/* content-visibility: auto foi REMOVIDO daqui de propósito.
   Ele economizava pintura em seções fora da tela, mas junto com o cabeçalho
   position: sticky causava rasgo de renderização (a barra amarela desenhando
   no meio da tela, com área cinza vazia acima). A página inteira tem ~5000px:
   a economia era pequena perto do risco. */

/* ---------- impressão: preto no branco, sem enfeite ---------- */
@media print {
  .topo, .rodape, .marquee, .sorteio, .aurora, .botoes, .p-cta, .filtros, .pular { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero { background: #fff; color: #000; padding: 0 0 12pt; }
  .hero h1, .hero h1 em { color: #000; }
  .cena-ia, .hero-numeros { display: none; }
  .produtos { display: block; }
  .p-carta { break-inside: avoid; border: 1px solid #999; margin-bottom: 8pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
  .secao { padding: 8pt 0; }
}

/* ---------- selo de revisão (autoridade: mostra que a lista tem manutenção) ----------
   inline-block (não inline-flex): em tela estreita o texto quebra como uma
   frase normal, sem a data ser jogada pra um canto. O pill fica retangular
   arredondado, não estádio, pra não ficar estranho em 2 linhas. */
.selo-revisao {
  display: inline-block; margin: 14px 0 0; line-height: 1.5;
  font-family: var(--mono); font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-60);
  background: var(--card); border: 1px solid var(--linha-2);
  padding: 6px 13px; border-radius: 14px;
}
.selo-revisao b { color: var(--tinta); white-space: nowrap; }
.ponto-escuro {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--verde); margin-right: 8px; vertical-align: middle;
  animation: pulsoVerde 2.4s infinite;
}
@keyframes pulsoVerde {
  0% { box-shadow: 0 0 0 0 rgba(0,166,80,.5); }
  70% { box-shadow: 0 0 0 8px rgba(0,166,80,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,166,80,0); }
}

/* ==========================================================================
   INSPIRADO NO JEITO DE MARKETPLACE (referência: Mercado Livre) — mas com a
   nossa linguagem: atalhos em bloco (não círculo), carrossel com setas,
   hierarquia de preço, linha de entrega e esqueleto de carregamento.
   ========================================================================== */

/* ---------- atalhos de categoria: círculo + nome, rolável ---------- */
.atalhos {
  display: flex; gap: 6px; overflow-x: auto; padding: 6px 2px 10px;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.atalhos::-webkit-scrollbar { display: none; }
.atalho {
  flex: none; width: 96px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 10px 4px; border-radius: var(--raio); text-align: center;
  transition: background .16s;
}
.atalho:hover { text-decoration: none; background: rgba(0,0,0,.045); }
.atalho-ic {
  width: 62px; height: 62px; border-radius: 50%; background: var(--card);
  border: 1px solid var(--linha); display: grid; place-items: center; color: var(--preto);
  box-shadow: var(--sombra);
  transition: transform .22s cubic-bezier(.3,1.4,.5,1), background .18s, border-color .18s;
}
.atalho:hover .atalho-ic {
  transform: translateY(-4px) scale(1.06);
  background: var(--amarelo); border-color: var(--amarelo);
}
.atalho-ic svg { width: 26px; height: 26px; }
.atalho-nome { font-size: .76rem; font-weight: 600; line-height: 1.25; color: var(--tinta-60); }
.atalho:hover .atalho-nome { color: var(--tinta); }
.atalho-todos .atalho-ic { background: var(--preto); border-color: var(--preto); color: var(--amarelo); }
.atalho-todos:hover .atalho-ic { background: var(--preto); border-color: var(--preto); }

/* ---------- carrossel horizontal com setas ---------- */
.carrossel { position: relative; }
.carrossel-pista {
  display: flex; gap: 16px; overflow-x: auto;  /* nada de scroll-behavior: smooth aqui:
     com ele ate um scrollLeft = N vira animacao, e se o navegador engasgar a
     posicao nunca chega. O app.js pede smooth explicitamente e confere depois. */
  scroll-snap-type: x mandatory; padding: 4px 2px 14px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.carrossel-pista::-webkit-scrollbar { display: none; }
.carrossel-pista > .p-carta { flex: none; width: 240px; scroll-snap-align: start; }
.carrossel-seta {
  position: absolute; top: 42%; z-index: 4; width: 44px; height: 44px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--linha-2); color: var(--preto);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--sombra-alta); transition: background .16s, transform .16s, opacity .16s;
}
.carrossel-seta svg { width: 20px; height: 20px; }
.carrossel-seta:hover { background: var(--amarelo); transform: scale(1.08); }
.carrossel-seta[disabled] { opacity: 0; pointer-events: none; }
.carrossel-ant { left: -14px; }
.carrossel-prox { right: -14px; }
@media (max-width: 1240px) { .carrossel-ant { left: 6px; } .carrossel-prox { right: 6px; } }
/* Em tela estreita as setas ficavam POR CIMA do texto do card. Abaixo de 900px
   elas somem: quem está no celular arrasta o carrossel com o dedo. */
@media (max-width: 900px) { .carrossel-seta { display: none; } .carrossel-pista { scroll-snap-type: x proximity; } }
/* sem JS as setas não fazem nada — some com elas até o app.js habilitar */
.carrossel:not([data-pronto]) .carrossel-seta { display: none; }

/* ---------- esqueleto enquanto a foto não chega ---------- */
.p-img.skeleton { background: #f1f1f1; }
.p-img.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.85) 50%, transparent 80%);
  animation: brilhoSkel 1.3s ease-in-out infinite;
}
.p-img.carregada::after { display: none; }
@keyframes brilhoSkel { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- hierarquia de preço ---------- */
.p-antes-linha { min-height: 1.1em; margin-bottom: 1px; }
.p-preco b { font-size: 1.42rem; }
.p-desc { font-size: .82rem; font-weight: 700; color: var(--verde-txt); font-family: var(--fonte); }
.p-entrega { font-size: .78rem; color: var(--verde-txt); font-weight: 600; margin: 6px 0 0; }
.p-entrega b { color: var(--verde-txt); font-weight: 700; }

/* ---------- isenção de responsabilidade ---------- */
.isencao {
  background: #fffdf0; border: 1px solid rgba(255,230,0,.8); border-left: 5px solid var(--amarelo);
  border-radius: 0 var(--raio) var(--raio) 0; padding: 20px 24px; margin: 26px 0;
}
.isencao p:last-child { margin-bottom: 0; }
.isencao-titulo { margin-top: 0 !important; font-size: 1.05rem !important; text-transform: uppercase; letter-spacing: .06em; }
.isencao-alerta { background: #f7f7f7; border-color: var(--linha-2); border-left-color: var(--preto); }



/* ==========================================================================
   CABEÇALHO COM BUSCA + FAIXA DE BENEFÍCIOS
   O campo de busca na barra amarela é o elemento que mais dá "cara de loja".
   Ele é um <form> de verdade: manda pra produtos.html?busca= e funciona
   mesmo sem JavaScript.
   ========================================================================== */
.busca-topo {
  position: relative;
  flex: 1 1 auto; max-width: 560px; margin: 0 8px;
  display: flex; align-items: center; gap: 6px;
  background: #fff; border-radius: 10px; padding: 3px 4px 3px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.16);
  transition: box-shadow .18s, transform .18s;
}

/* ---------- sugestões de busca (progressive enhancement — sem JS, o campo
   continua funcionando normal, só some a lista) ---------- */
.busca-sugestoes {
  /* position:fixed porque o cabeçalho tem overflow:hidden (usado pro menu
     mobile) — um filho absolute dele seria cortado. Coordenadas em JS. */
  position: fixed; z-index: 200;
  background: var(--card); border: 1px solid var(--linha); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.16); overflow: hidden; padding: 6px;
  list-style: none; margin: 0;
}
.busca-sugestoes button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 10px 12px; border-radius: 8px; font-size: .88rem; color: var(--tinta);
  cursor: pointer; font-family: inherit;
}
.busca-sugestoes button:hover,
.busca-sugestoes button.ativo { background: var(--bg); }
.busca-sugestoes mark { background: none; color: var(--tinta); font-weight: 700; padding: 0; }
.busca-topo:focus-within { box-shadow: 0 3px 14px rgba(0,0,0,.24); transform: translateY(-1px); }
.busca-topo input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: .93rem; color: var(--tinta); padding: 9px 0;
}
.busca-topo input::placeholder { color: var(--tinta-40); }
.busca-topo button {
  flex: none; width: 38px; height: 34px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--tinta-60); display: grid; place-items: center;
  transition: background .16s, color .16s;
}
.busca-topo button:hover { background: var(--amarelo); color: var(--preto); }
.busca-topo button svg { width: 19px; height: 19px; }

/* faixa fina de benefícios, logo abaixo da barra amarela */
.faixa-beneficios {
  background: var(--preto); color: rgba(255,255,255,.72); position: relative; z-index: 1;
}
.faixa-int {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  height: 34px; font-size: .78rem; overflow: hidden; white-space: nowrap;
}
.faixa-int span { display: inline-flex; align-items: center; gap: 7px; }
.faixa-int b { color: var(--amarelo); font-weight: 700; }
.faixa-int svg { width: 16px; height: 16px; color: var(--amarelo); }
.faixa-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.3); }

@media (max-width: 880px) {
  /* logo + menu na 1ª linha, busca ocupando a 2ª — igual app de loja */
  .topo-int { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  .marca { order: 1; }
  .menu-btn { order: 2; margin-left: auto; }
  .busca-topo { order: 3; flex-basis: 100%; max-width: none; margin: 0; }
  .nav { order: 4; top: auto; }
  .faixa-beneficios { display: none; }  /* espaço é curto no celular */
}
@media (max-width: 620px) {
  .faixa-int { justify-content: flex-start; }
}

/* Registrar a variavel deixa o conic-gradient do anel animar de verdade;
   onde @property nao existe, o anel so aparece pronto — sem quebrar nada. */
@property --pct { syntax: "<number>"; inherits: false; initial-value: 0; }

/* ==========================================================================
   HERO "CENTRO DE COMANDO"
   A arte da IA ocupa o bloco inteiro; por cima entram painéis de dados na
   mesma linguagem visual dela. Os números dos painéis são os do catálogo de
   verdade — a arte é cenário, o dado é real.
   ========================================================================== */
.hero-comando {
  position: relative; overflow: hidden;
  min-height: 720px; display: flex; align-items: center;
  padding: 74px 0 68px;
}

/* --- cena de fundo --- */
.hero-cena { position: absolute; inset: 0; z-index: 0; }
.hero-arte-img {
  /* Desktop: a arte aparece INTEIRA (contain), encostada à direita, e a borda
     esquerda dela some num degradê pro preto — assim a figura, os painéis e a
     mesa da ilustração ficam todos à mostra, e o título tem a metade esquerda. */
  /* top: 46px dá um respiro acima da cabeça dela — a arte tem a coroa
     colada no topo, e sem esse recuo ela era cortada. */
  position: absolute; top: 46px; right: 0; bottom: 0; width: auto; height: 100%;
  max-width: 62%; object-fit: cover; object-position: 50% 0%;
  transform-origin: 50% 0%;
  filter: saturate(1.04) contrast(1.02);
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
  /* mesma entrada das seções do site + uma deriva lenta, como os painéis.
     A deriva agora é para BAIXO (origin no topo) — nunca sobe a cabeça. */
  animation: entra .6s ease both, arteDeriva 14s ease-in-out 1s infinite alternate;
  will-change: transform;
}
@keyframes arteDeriva { from { transform: translateY(0) scale(1); } to { transform: translateY(9px) scale(1.012); } }
/* quando não há arte raster, a cena vetorial ocupa o mesmo lugar */
.hero-cena .cena-ia {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: min(58%, 640px); max-width: none; height: auto;
  border: 0; border-radius: 0; box-shadow: none;
}

/* scrim: sem ele o título não sobrevive em cima da arte */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6,6,6,.92) 0%, rgba(6,6,6,.78) 34%, rgba(6,6,6,.18) 52%, transparent 66%),
    linear-gradient(180deg, rgba(6,6,6,.28) 0%, transparent 18%, transparent 78%, rgba(6,6,6,.9) 100%);
}

/* piso em perspectiva, lembrando a mesa iluminada da arte */
.hero-piso {
  position: absolute; left: -20%; right: -20%; bottom: -30px; height: 240px;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,230,0,.22) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(0deg, rgba(255,230,0,.16) 0 1px, transparent 1px 42px);
  transform: perspective(420px) rotateX(66deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(180deg, transparent, #000 55%);
  opacity: .85;
  animation: pisoCorre 9s linear infinite;
}
@keyframes pisoCorre { to { background-position: 0 42px, 0 42px; } }

/* varredura vertical, mesma ideia do radar.
   Anima TRANSLATE, não `top` — animar `top` é propriedade de layout e
   registrava micro-CLS a cada quadro (tirava o site da faixa verde do Google). */
.hero-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,230,0,.85), transparent);
  box-shadow: 0 0 22px 3px rgba(255,230,0,.35);
  will-change: transform;
  animation: heroScan 6.5s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes heroScan {
  0% { transform: translateY(0); opacity: 0; } 8% { opacity: .9; }
  50% { transform: translateY(820px); opacity: .9; } 58% { opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* --- conteúdo por cima de tudo --- */
.hero-comando .env { position: relative; z-index: 3; }
.hero-comando .hero-grade {
  display: grid; grid-template-columns: minmax(0, 620px) minmax(300px, 1fr);
  gap: 28px; align-items: center;
}
.hero-comando .hero-texto { grid-column: 1; grid-row: 1; }
/* a coluna dos painéis: relativa, e os painéis são absolutos DENTRO dela —
   por isso não conseguem mais invadir a coluna do texto (era o bug). */
.hero-paineis-col {
  grid-column: 2; grid-row: 1; position: relative; align-self: stretch; min-height: 560px;
  animation: none !important;
}
.hero-comando .hero-texto { max-width: 620px; }
.hero-comando h1 { text-shadow: 0 2px 24px rgba(0,0,0,.75); }
.hero-comando .sub { text-shadow: 0 1px 12px rgba(0,0,0,.8); }

/* ==========================================================================
   PAINÉIS DE DADOS
   ========================================================================== */
.paineis { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.painel {
  position: absolute; width: 252px; padding: 13px 15px 15px;
  background: rgba(10,10,10,.62);
  border: 1px solid rgba(255,230,0,.32);
  border-radius: 12px;
  backdrop-filter: blur(9px) saturate(140%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.55), inset 0 0 30px rgba(255,230,0,.06);
  opacity: 0;
  animation: painelEntra .7s cubic-bezier(.2,.9,.3,1) forwards, painelFlutua 9s ease-in-out infinite;
}
.pn-b { top: 3%;    left: 4%;  width: 236px; animation-delay: .3s, 1.6s; }
.pn-c { bottom: 3%; left: 12%; width: 184px; animation-delay: .5s, 2.3s; }
@keyframes painelEntra {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes painelFlutua { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }

.pn-topo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--amarelo);
  padding-bottom: 9px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,230,0,.22);
}
.pn-led {
  width: 6px; height: 6px; border-radius: 50%; background: var(--amarelo);
  box-shadow: 0 0 8px var(--amarelo); animation: ledPisca 2.2s steps(1) infinite;
}
@keyframes ledPisca { 0%,70% { opacity: 1; } 71%,100% { opacity: .2; } }

.pn-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pn-barras li {
  display: grid; grid-template-columns: 1fr 62px 34px; align-items: center; gap: 8px;
}
.pn-rot {
  font-size: .68rem; color: rgba(255,255,255,.74);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pn-barra { height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.pn-barra i {
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,230,0,.55), var(--amarelo));
  box-shadow: 0 0 10px rgba(255,230,0,.5);
  transition: width 1.1s cubic-bezier(.2,.9,.3,1);
}
.pn-val {
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  color: var(--amarelo); text-align: right;
}

/* anel de porcentagem */
.pn-anel {
  width: 104px; height: 104px; margin: 4px auto 6px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--amarelo) calc(var(--pct, 0) * 1%), rgba(255,255,255,.10) 0);
  transition: --pct 1.2s ease;
}
.pn-anel::after {
  content: ""; position: absolute; inset: 9px; border-radius: 50%;
  background: rgba(10,10,10,.88); box-shadow: inset 0 0 18px rgba(255,230,0,.14);
}
.pn-anel-num {
  position: relative; z-index: 1; font-family: var(--mono);
  font-size: 1.5rem; font-weight: 700; color: #fff; line-height: 1;
}
.pn-anel-num i { font-style: normal; font-size: .85rem; color: var(--amarelo); }
.pn-nota { font-size: .68rem; color: rgba(255,255,255,.6); text-align: center; margin: 0; }

/* ---------- responsivo: painéis só onde há espaço de verdade ---------- */
@media (max-width: 1180px) { .pn-b { width: 218px; } .pn-c { left: 6%; } }
@media (max-width: 980px) {
  .hero-comando .hero-grade { display: block; }
  /* Celular: a figura fica inteira no alto (rosto + painéis), e o texto começa
     ABAIXO dela, sobre um degradê forte. Sem isso o título caía em cima do
     rosto e a arte virava só um fundo confuso. */
  /* padding-top acompanha a largura: a arte tem altura proporcional, então o
     rosto desce conforme a tela alarga — e os painéis ficam logo abaixo dele. */
  .hero-comando { min-height: 0; padding-top: max(450px, 57vw); padding-bottom: 40px; align-items: flex-end; }
  .hero-arte-img {
    top: 0; left: 0; width: 100%; max-width: none; height: auto;
    object-fit: cover; object-position: 50% 0%;
    mask-image: none; -webkit-mask-image: none; animation: entra .6s ease both;
  }
  /* topo: só um leve escurecimento pra dar clima, a figura fica à mostra.
     A leitura do texto NÃO depende deste degradê — quem garante isso é o
     fundo sólido do .hero-texto abaixo. */
  .hero-piso { display: none; }
  .hero-scrim {
    background: linear-gradient(180deg, rgba(6,6,6,.34) 0%, rgba(6,6,6,.12) 20%, rgba(6,6,6,.30) 44%, #060606 62%);
  }
  .hero-comando .hero-texto { max-width: none; }
  .hero-cena .cena-ia { right: -12%; width: 88%; opacity: .5; }

  /* O texto fica sobre um painel preto sólido, com a borda de cima esfumada
     pra dentro da imagem — assim o título é sempre legível, não importa a
     altura exata do bloco (que varia com o tamanho da tela). */
  .hero-comando .hero-texto {
    position: relative; z-index: 3;
    background: #060606;
    padding-top: 8px;
  }
  .hero-comando .hero-texto::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 150px;
    background: linear-gradient(180deg, transparent 0%, rgba(6,6,6,.35) 38%, rgba(6,6,6,.8) 72%, #060606 100%);
    pointer-events: none;
  }
  .hero-comando h1 { text-shadow: none; }
  .hero-comando .sub { text-shadow: none; }
  /* o selo agora fica sobre o preto, não mais sobre os números pintados na arte */
  .hero-comando .selo-dados { margin-bottom: 16px; }
}
@media (max-width: 620px) {
  /* altura fixa: rosto sempre no mesmo lugar, painéis logo abaixo */
  .hero-comando { padding-top: 400px; }
  .hero-arte-img { height: 520px; }
  .hero-comando .hero-texto::before { height: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-arte-img { animation: none; }
  .hero-scan, .hero-piso { animation: none; }
  .hero-scan { display: none; }
  .painel { opacity: 1; animation: none; }
}


/* ---------- feed "ao vivo" dos painéis ---------- */
.pn-relogio {
  margin-left: auto; font-weight: 500; letter-spacing: .06em;
  color: rgba(255,230,0,.72); font-variant-numeric: tabular-nums;
}
.pn-barras li {
  max-height: 26px; overflow: hidden;
  transition: opacity .42s ease, transform .42s ease, max-height .42s ease, margin .42s ease;
}
.pn-barras li.entrando { opacity: 0; transform: translateY(-10px); max-height: 0; margin-top: -7px; }
.pn-barras li.saindo   { opacity: 0; transform: translateY(10px);  max-height: 0; margin-top: -7px; }

.pn-c .pn-anel-num, .pn-c .pn-nota, .pn-c [data-metrica-titulo] { transition: opacity .24s ease; }
.pn-c.trocando .pn-anel-num, .pn-c.trocando .pn-nota, .pn-c.trocando [data-metrica-titulo] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .pn-barras li { transition: none; }
}

/* ---------- placeholder de imagem (enquanto as fotos não chegam) ---------- */
.p-img-vazia {
  background: linear-gradient(150deg, #f4f4f4, #e6e6e6);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 20px; text-align: center;
}
.p-img-ic { width: 40px; height: 40px; color: var(--tinta-40); }
.p-img-ic svg { width: 100%; height: 100%; }
.p-img-txt {
  font-family: var(--mono); font-size: .72rem; font-weight: 700; line-height: 1.35;
  color: var(--tinta-40); text-transform: uppercase; letter-spacing: .04em;
}
/* faixa fininha amarela pra não parecer card quebrado */
.p-img-vazia::after {
  content: "foto a caminho"; position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--amarelo); color: var(--preto); font-family: var(--mono);
  font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 0;
}

/* ---------- painel "Busca em tempo real": linha de status ---------- */
.pn-buscando {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .04em;
  color: rgba(255,255,255,.6); margin: -4px 0 9px;
}
.pn-buscando [data-buscando] {
  transition: opacity .22s ease;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pn-spin {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  border: 1.5px solid rgba(255,230,0,.3); border-top-color: var(--amarelo);
  animation: pnSpin .7s linear infinite;
}
@keyframes pnSpin { to { transform: rotate(360deg); } }
.pn-reticencias::after { content: ""; animation: pnDots 1.4s steps(4) infinite; }
@keyframes pnDots { 0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."} }
@media (prefers-reduced-motion: reduce) {
  .pn-spin { animation: none; border-top-color: rgba(255,230,0,.3); }
  .pn-reticencias::after { content: "..."; animation: none; }
  .pn-buscando [data-buscando] { transition: none; }
}

/* ---------- legenda do painel "Busca em tempo real" ---------- */
.pn-legenda {
  margin: 9px 0 0; font-size: .62rem; line-height: 1.45;
  color: rgba(255,255,255,.62); font-family: var(--mono); letter-spacing: .01em;
}

/* ==========================================================================
   TARJA DE SEGURANÇA (abaixo do cabeçalho) + SELOS DE CONFIANÇA (antes do rodapé)
   Elementos de credibilidade: escudo "site seguro", curadoria validada,
   "funcionando em tempo real". Inspiração nos rodapés de e-commerce grande,
   sem copiar selos de certificação de terceiros que o site não tem.
   ========================================================================== */
.tarja-seg {
  background: var(--preto); color: rgba(255,255,255,.82);
  border-bottom: 1px solid rgba(255,230,0,.22);
}
.tarja-seg-int {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 26px; padding: 9px 20px; font-size: .76rem;
}
.tarja-seg-item { display: inline-flex; align-items: baseline; gap: 7px; }
.tarja-seg-item b { color: #fff; font-weight: 700; }
.tarja-seg-item i { color: rgba(255,255,255,.6); font-style: normal; }
.tarja-seg-ic { width: 15px; height: 15px; color: var(--amarelo); flex: none; align-self: center; }
.tarja-seg-ic svg { width: 100%; height: 100%; display: block; }
@media (max-width: 900px) {
  .tarja-seg-item i { display: none; }
  .tarja-seg-int { gap: 7px 16px; padding: 8px 14px; }
}
/* no celular só cabe uma linha: encolhe a fonte e aproxima os itens
   pra "Navegação 100% segura · MAYA no ar agora · Seleção validada" caber */
@media (max-width: 560px) {
  .tarja-seg-int { gap: 6px 11px; font-size: .66rem; padding: 7px 10px; }
  .tarja-seg-item { gap: 5px; }
  .tarja-seg-ic { width: 13px; height: 13px; }
}
@media (max-width: 380px) {
  .tarja-seg-int { font-size: .6rem; gap: 5px 8px; }
}

.selos-seg-secao { background: var(--preto); }
.selos-seg {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255,230,0,.16); border: 1px solid rgba(255,230,0,.16);
  border-radius: 14px; overflow: hidden;
}
.selo-seg { background: #0e0e0e; padding: 22px 18px; }
.selo-seg-ic { display: block; width: 26px; height: 26px; color: var(--amarelo); margin-bottom: 11px; }
.selo-seg-ic svg { width: 100%; height: 100%; }
.selo-seg-tit { color: #fff; font-size: .95rem; font-weight: 700; margin: 0 0 5px; }
.selo-seg p { color: rgba(255,255,255,.6); font-size: .8rem; line-height: 1.5; margin: 0; }
.selos-seg-rodape {
  color: rgba(255,255,255,.6); font-size: .74rem; text-align: center;
  margin: 16px auto 0; max-width: 70ch;
}
@media (max-width: 900px) { .selos-seg { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .selos-seg { grid-template-columns: 1fr; } }

/* ==========================================================================
   FAIXA MAYA — arte cinematográfica full-bleed que dissolve no fundo preto
   ========================================================================== */
/* A arte é 1122 px de largura na origem. Pra não pixelar, o quadro visível é
   limitado a ~1160 px (a mesma largura do conteúdo) — nunca esticamos além
   disso. A tarja preta atrás continua full-bleed, então segue cinematográfico. */
.faixa-maya {
  position: relative; width: 100%; background: var(--preto);
  overflow: hidden;
}
.faixa-maya-in {
  position: relative; margin: 0 auto; max-width: 1160px;
  height: clamp(300px, 40vw, 460px); overflow: hidden;
}
.faixa-maya img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 8%;
  /* fade vertical: a arte dissolve no preto em cima e embaixo */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
  filter: saturate(1.03);
}
/* fade lateral: sombra preta que disfarça a borda dura da imagem nos lados */
.faixa-maya-in::before,
.faixa-maya-in::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 1;
  width: clamp(48px, 14%, 160px); pointer-events: none;
}
.faixa-maya-in::before { left: 0;  background: linear-gradient(90deg, var(--preto) 0%, rgba(10,10,10,.6) 42%, transparent 100%); }
.faixa-maya-in::after  { right: 0; background: linear-gradient(270deg, var(--preto) 0%, rgba(10,10,10,.6) 42%, transparent 100%); }
.faixa-maya-txt {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center;
  padding: 0 clamp(20px, 6vw, 72px);
  background: linear-gradient(90deg, rgba(6,6,6,.82) 0%, rgba(6,6,6,.55) 34%, rgba(6,6,6,.05) 60%, transparent 78%);
}
.faixa-maya.pos-dir .faixa-maya-txt {
  background: linear-gradient(270deg, rgba(6,6,6,.82) 0%, rgba(6,6,6,.55) 34%, rgba(6,6,6,.05) 60%, transparent 78%);
}
.faixa-maya-txt p {
  color: #fff; font-weight: 700; margin: 0;
  font-size: clamp(1.05rem, 2.4vw, 1.7rem); line-height: 1.34;
  max-width: 22ch; text-shadow: 0 2px 20px rgba(0,0,0,.9);
}
.faixa-maya.pos-dir .faixa-maya-txt { justify-content: flex-end; }
.faixa-maya.pos-dir .faixa-maya-txt p { text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .faixa-maya img { animation: none; }
}

/* ==========================================================================
   BARRA FIXA INFERIOR (só no celular) — mesma ideia da barra do app do
   Mercado Livre: a pessoa sempre alcança as categorias, de qualquer página.
   "Categorias" é um <details>, então abre e fecha sem JavaScript.
   ========================================================================== */
.barra-inf { display: none; }

/* Só no CELULAR (≤640px). No tablet o padrão do topo já dá conta — a barra
   fixa embaixo é linguagem de app de telefone e duplicaria a navegação. */
@media (max-width: 640px) {
  .barra-inf {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--card); border-top: 1px solid var(--linha-2);
    box-shadow: 0 -2px 14px rgba(0,0,0,.10);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* o conteúdo não pode ficar escondido atrás da barra */
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }

  .bi-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 4px 7px; min-height: 58px;
    font-size: .68rem; font-weight: 600; color: var(--tinta-60);
    text-align: center; list-style: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .bi-item::-webkit-details-marker { display: none; }
  .bi-item:hover { text-decoration: none; color: var(--tinta); }
  .bi-ic { width: 22px; height: 22px; display: block; }
  .bi-ic svg { width: 100%; height: 100%; display: block; }
  .bi-txt { line-height: 1; }
  .bi-on { color: var(--tinta); }
  .bi-on .bi-ic { color: var(--tinta); }
  /* traço amarelo em cima do item atual, como a aba ativa do app */
  .bi-on { box-shadow: inset 0 3px 0 var(--amarelo); }

  /* o <details> ocupa uma coluna igual aos links */
  .bi-cats { flex: 1; display: flex; }
  /* FECHADO, o painel NÃO pode renderizar. Como o <details> tem display:flex,
     o Chrome deixa de esconder o conteúdo fechado sozinho — escondemos aqui. */
  .bi-cats:not([open]) > .bi-painel { display: none; }
  .bi-cats > summary { flex: 1; }
  .bi-cats[open] > summary { color: var(--tinta); box-shadow: inset 0 3px 0 var(--amarelo); }

  /* painel que sobe de baixo */
  .bi-painel {
    position: fixed; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    background: var(--card); border-top: 1px solid var(--linha);
    box-shadow: 0 -10px 30px rgba(0,0,0,.18);
    padding: 16px 14px 18px; max-height: 66vh; overflow-y: auto;
    animation: biSobe .22s ease both;
  }
  @keyframes biSobe { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
  .bi-painel-tit {
    margin: 0 0 12px; font-family: var(--mono); font-size: .68rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-40);
  }
  .bi-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .bi-grade a {
    display: flex; align-items: center; gap: 9px; min-height: 48px;
    padding: 9px 11px; border: 1px solid var(--linha); border-radius: 10px;
    background: var(--bg); color: var(--tinta); font-size: .8rem;
  }
  .bi-grade a:hover { text-decoration: none; border-color: var(--amarelo); background: #fffdf0; }
  .bi-cat-ic { width: 20px; height: 20px; flex: none; color: var(--tinta-60); }
  .bi-cat-ic svg { width: 100%; height: 100%; display: block; }
  .bi-grade b { font-weight: 600; line-height: 1.25; min-width: 0; }
  .bi-grade i { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: .72rem; color: var(--tinta-40); }
  .bi-todas {
    display: block; text-align: center; margin-top: 10px; padding: 12px;
    background: var(--amarelo); color: var(--preto); border-radius: 9px;
    font-weight: 700; font-size: .84rem;
  }
  .bi-todas:hover { text-decoration: none; background: var(--amarelo-cl); }
}

@media (max-width: 380px) {
  .bi-item { font-size: .63rem; }
  .bi-grade { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { .bi-painel { animation: none; } }
@media print { .barra-inf { display: none !important; } body { padding-bottom: 0 !important; } }

/* ==========================================================================
   REVENDA — área de produtos até R$ 150 (home, revenda.html e as 2 faixas)
   ========================================================================== */
.revenda-chamada {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 36px; align-items: center;
  background: var(--preto); color: #fff; border-radius: var(--raio-lg);
  padding: 40px 42px; position: relative; overflow: hidden;
}
.revenda-chamada::before {
  content: ""; position: absolute; width: 440px; height: 440px; right: -150px; top: -190px;
  background: radial-gradient(circle, rgba(255,230,0,.18), transparent 65%); pointer-events: none;
}
.revenda-chamada-txt { position: relative; }
.revenda-chamada h2 { color: #fff; }
.revenda-chamada p { color: rgba(255,255,255,.72); margin-bottom: 22px; }
@media (max-width: 880px) { .revenda-chamada { grid-template-columns: 1fr; padding: 30px 22px; gap: 26px; } }

.revenda-faixas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; }
.secao-pagina .revenda-faixas { max-width: 760px; }
.revenda-faixa {
  display: flex; flex-direction: column; gap: 4px; padding: 22px 22px 20px; min-width: 0;
  background: var(--amarelo); color: var(--preto); border: 1px solid var(--amarelo-es);
  border-radius: var(--raio); box-shadow: 0 5px 0 var(--amarelo-es);
  transition: transform .18s, box-shadow .18s;
}
.revenda-faixa:nth-child(2) { background: var(--card); border-color: var(--linha-2); box-shadow: 0 5px 0 var(--linha-2); }
.revenda-faixa:hover { text-decoration: none; transform: translateY(-3px); }
.revenda-faixa-rot { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.revenda-faixa-teto { font-size: clamp(2rem, 4vw, 2.7rem); font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.revenda-faixa-info { font-size: .84rem; font-weight: 600; color: rgba(0,0,0,.72); }
.revenda-faixa-fotos { display: flex; gap: 6px; margin: 12px 0 10px; }
.revenda-faixa-fotos img {
  width: 54px; height: 54px; object-fit: contain; background: #fff;
  border: 1px solid rgba(0,0,0,.08); border-radius: 10px; padding: 5px;
}
.revenda-faixa-cta { font-weight: 800; font-size: .9rem; margin-top: auto; }
.revenda-faixa-cta::after { content: " →"; }
@media (max-width: 480px) { .revenda-faixas { grid-template-columns: 1fr; } }

.abas-revenda { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0 28px; }
.abas-revenda a {
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--linha-2);
  background: var(--card); font-weight: 700; font-size: .86rem; color: var(--tinta);
}
.abas-revenda a:hover { text-decoration: none; border-color: var(--preto); }
.abas-revenda a[aria-current="page"] { background: var(--preto); border-color: var(--preto); color: var(--amarelo); }

.grupo-revenda { margin-top: 34px; }
.grupo-revenda h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.grupo-revenda h2 span {
  font-family: var(--mono); font-size: .75rem; font-weight: 700; letter-spacing: 0;
  background: var(--amarelo); color: var(--preto); padding: 3px 9px; border-radius: 999px;
}

.passos-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1060px) { .passos-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .passos-4 { grid-template-columns: 1fr; } }

/* calculadora de margem */
.calc {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 34px; align-items: center;
  background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio-lg);
  padding: 34px 36px; box-shadow: var(--sombra);
}
.calc .tag-mono { color: var(--tinta); border-color: var(--linha-2); }
.calc-txt p { color: var(--tinta-60); margin: 0; }
.calc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.calc-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.calc-campo label { font-size: .8rem; font-weight: 700; color: var(--tinta-60); }
.calc-campo input {
  font: inherit; font-size: 1rem; height: 44px; padding: 9px 12px; width: 100%;
  border: 1px solid var(--linha-2); border-radius: 8px; background: #fff; color: var(--tinta);
}
.calc-campo input:focus { outline: 2px solid var(--amarelo); outline-offset: 1px; border-color: var(--amarelo); }
.calc-res {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 4px;
  background: var(--linha); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden;
}
.calc-res span { background: var(--bg); padding: 14px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.calc-res b { font-size: 1.25rem; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.calc-res i { font-style: normal; font-size: .74rem; color: var(--tinta-40); font-weight: 600; }
.calc-res .positivo { color: var(--verde-txt); }
.calc-res .negativo { color: #c0282d; }
@media (max-width: 880px) { .calc { grid-template-columns: 1fr; padding: 26px 20px; gap: 22px; } }
@media (max-width: 480px) { .calc-form, .calc-res { grid-template-columns: 1fr; } }

.calc-chamada {
  margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px 22px; background: var(--card); border: 1px solid var(--linha);
  border-left: 3px solid var(--amarelo); border-radius: var(--raio-sm);
}
.calc-chamada p { margin: 0; }

.faq-caixa { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 6px 26px; max-width: 860px; }

/* ==========================================================================
   PAINÉIS DO HERO NO CELULAR/TABLET — viram um "HUD" logo abaixo do rosto da
   MAYA, lado a lado, por cima da arte. Quem entra pelo celular vê a busca
   rodando sem precisar rolar. (No desktop continuam na coluna da direita.)
   ========================================================================== */
@media (max-width: 980px) {
  .hero-paineis-col {
    display: block; position: absolute; z-index: 4;
    left: 20px; right: 20px; top: -152px; height: 140px; min-height: 0;
  }
  .paineis { display: block; }
  .painel { padding: 9px 10px 10px; border-radius: 10px; }
  .pn-b { top: auto; bottom: 0; left: 0; width: min(60%, 300px); }
  .pn-c { top: auto; bottom: 0; left: auto; right: 0; width: min(38%, 200px); }
  .pn-topo { font-size: .54rem; letter-spacing: .08em; gap: 6px; padding-bottom: 6px; margin-bottom: 7px; }
  .pn-c .pn-relogio { display: none; }
  .pn-buscando { font-size: .58rem; margin: -2px 0 6px; }
  .pn-barras { gap: 5px; }
  .pn-barras li { grid-template-columns: minmax(0, 1fr) 30px 26px; gap: 5px; max-height: 20px; }
  .pn-barras li:nth-child(n+4) { display: none; }
  .pn-rot, .pn-val { font-size: .6rem; }
  .pn-legenda { display: none; }
  .pn-anel { width: 66px; height: 66px; margin: 0 auto 4px; }
  .pn-anel::after { inset: 7px; }
  .pn-anel-num { font-size: 1.05rem; }
  .pn-anel-num i { font-size: .7rem; }
  .pn-nota { font-size: .58rem; }
}
@media (max-width: 620px) { .hero-paineis-col { left: 12px; right: 12px; } }
@media (max-width: 400px) { .pn-relogio { display: none; } }

/* ==========================================================================
   TELA DE ABERTURA — preta, ícone e nome da MAYA em branco pulsando e uma
   linha de carregamento embaixo (referência: site da Ferrari). Só aparece na
   1ª página da visita (assets/abertura.js marca o <html>). O app.js tira a
   tela quando a página carrega; se o JS falhar, ela some sozinha em 3 s.
   ========================================================================== */
.tela-abertura { display: none; }
html.abertura { background: #000; }
.abertura .tela-abertura {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  position: fixed; inset: 0; z-index: 10000; background: #000;
  animation: aberturaSai .5s ease 3s forwards;
}
.abertura-fim .tela-abertura { animation: aberturaSai .5s ease forwards; }
.abertura-ok .tela-abertura { display: none; }
@keyframes aberturaSai { to { opacity: 0; visibility: hidden; } }
.abertura-ic {
  width: auto; height: 78px;
  filter: brightness(0) invert(1);
  animation: aberturaPulsa 1.4s ease-in-out infinite;
}
.abertura-nome { width: 128px; height: auto; filter: brightness(0) invert(1); opacity: .92; }
@keyframes aberturaPulsa { 0%, 100% { opacity: .4; transform: scale(.94); } 50% { opacity: 1; transform: scale(1); } }
.abertura-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.1); }
.abertura-barra i {
  display: block; height: 100%; width: 0; background: #fff;
  animation: aberturaCarrega 2.6s cubic-bezier(.3,.7,.4,1) forwards;
}
@keyframes aberturaCarrega { to { width: 88%; } }
.abertura-fim .abertura-barra i { width: 100%; animation: none; transition: width .3s ease; }
@media (prefers-reduced-motion: reduce) {
  .abertura-ic, .abertura-barra i { animation: none; }
  .abertura-ic { opacity: 1; }
}