/* ==========================================================================
   SUPER LOJA GAMER: sistema visual
   Escuro e amigável. A moldura (cabeçalho, abertura, brasões, rodapé) é divertida: retícula, raios, balão, sombra
   de tinta e Rubik itálica. A vitrine é calma de propósito: cartão liso, foto no palco claro, o produto é o herói.
   Cores da marca (superlojagamer/marca/LEIA-ME.md): grafite, verde-água #5FB3A5 como acento e dourado de moeda
   #F2B84B como segundo acento (ação principal e "menor preço"). Sem mascote.
   Base: o motor (assets/css/style.css) fala em tokens; aqui eles viram escuro e cada peça ganha o acabamento gamer.
   ========================================================================== */
@import url("../../css/style.css");

/* ---------- tokens ---------- */
:root{
  --fundo:#121316;          /* fundo de referência da marca */
  --sup:#1A1B1F;            /* superfície: cartão, faixa */
  --sup-2:#222429;
  --grafite:#2B2D33;        /* o escudo do logo */
  --aro:#5D6068;
  --palco:#ECEBE6;          /* fundo das fotos do Mercado Livre */
  --agua:#5FB3A5;
  --agua-cl:#7FD0C2;
  --agua-esc:#2C8577;
  --agua-vidro:rgba(95,179,165,.14);
  --moeda:#F2B84B;
  --moeda-cl:#F7C866;
  --moeda-tinta:#1A1406;
  --tinta-pura:#08090B;     /* o "contorno de tinta" do gibi, no escuro */

  /* os tokens do motor, no escuro */
  --tinta:#ECEBE6; --tinta-md:#B6B8BE; --tinta-cl:#9A9DA5;
  --azul:#7FD0C2; --azul-fundo:#2C8577; --capa:#2C8577; --capa-vidro:rgba(95,179,165,.14);
  --ouro:#F2B84B; --ouro-fundo:#D99C28; --laranja:#F0894D; --areia:#2B2D33;
  --papel:#121316; --creme:#16181C; --branco:#1A1B1F; --borda:#2E3036; --borda-forte:#3B3E45;
  --sucesso:#6FD3A3; --sucesso-cl:rgba(111,211,163,.13); --erro:#FF8F7E;
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px;
  --tinta-traco:2px solid var(--tinta-pura);
  --sombra-tinta:4px 4px 0 var(--tinta-pura); --sombra-tinta-sm:3px 3px 0 var(--tinta-pura);
  --sombra-agua:5px 5px 0 var(--agua-esc);
  --sombra-card:0 2px 4px rgba(0,0,0,.3); --sombra-alta:0 8px 20px -6px rgba(0,0,0,.6);
  --display:"Rubik", "Trebuchet MS", system-ui, sans-serif;
  --texto:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body{background:var(--fundo); color:var(--tinta)}
::selection{background:var(--moeda); color:var(--moeda-tinta)}
:focus-visible{outline:3px solid var(--agua-cl)}
input,select,textarea{background:var(--sup-2); color:var(--tinta)}
input::placeholder,textarea::placeholder{color:var(--tinta-cl)}
img{height:auto}

/* Títulos da moldura: Rubik itálica pesada, a assinatura da casa. */
.hero h1,.cab h2,.capa-pg h1,.afiliado h3,.jo__tx b,.pg-404 .codigo{font-family:var(--display); font-style:italic; font-weight:800}
.d1,.d2,.d3{letter-spacing:-.015em}
.conduz{color:var(--tinta-md)}

.reticula::before{--pontos:rgba(95,179,165,.13)}
.pg-404 > .env{position:relative; z-index:1}

/* ---------- botões ---------- */
.btn{font-family:var(--display); font-weight:600}
.btn--ouro{background:var(--moeda); color:var(--moeda-tinta); border-color:var(--tinta-pura); box-shadow:var(--sombra-tinta)}
.btn--ouro:hover{background:var(--moeda-cl); box-shadow:6px 6px 0 var(--tinta-pura)}
.btn--ouro:active{box-shadow:2px 2px 0 var(--tinta-pura)}
.btn--azul{background:var(--agua); color:#0F1A18}
.btn--azul:hover{background:var(--agua-cl)}
.btn--tinta{background:var(--sup-2); color:var(--tinta); border-color:var(--borda-forte)}
.btn--tinta:hover{background:var(--grafite)}
.btn--linha{color:var(--tinta); border-color:var(--borda-forte)}
.btn--linha:hover{border-color:var(--tinta); background:var(--sup-2)}
.btn--claro{background:rgba(18,19,22,.28); color:var(--tinta); border-color:rgba(236,235,230,.42)}
.btn--claro:hover{background:var(--tinta); color:#16171A; border-color:var(--tinta)}
/* Na vitrine o botão de oferta é discreto: quem chama atenção é o produto. */
.card .btn--ouro,.vt .btn--ouro{background:var(--sup-2); color:var(--tinta); border:1px solid var(--borda-forte); box-shadow:none}
.card .btn--ouro:hover,.vt .btn--ouro:hover{background:var(--sup-2); border-color:var(--agua); color:var(--agua-cl); transform:none; box-shadow:none}

/* ---------- selos da casa ---------- */
.selo--oferta{background:var(--laranja); color:#1A0E05}
.selo--novo,.painel__n{background:var(--grafite); color:var(--tinta)}
.selo--top{background:var(--moeda); color:var(--moeda-tinta)}
.selo--esgotado{background:var(--sup-2); color:var(--tinta-md)}
.sel{display:inline-flex; align-items:center; gap:5px; font-family:var(--display); font-weight:600; font-size:.78rem; line-height:1.1; padding:6px 10px 6px 8px; border-radius:var(--r-full); background:var(--grafite); color:var(--tinta)}
.sel svg{flex:none; margin-top:-1px}
.sel--menor{background:var(--moeda); color:var(--moeda-tinta)}
.sel--caiu{background:var(--agua); color:#0F1A18}
.sel--subiu svg{color:var(--moeda)}
.sel--acima svg{color:var(--agua-cl)}

/* ---------- cabeçalho ---------- */
.topo{background:var(--fundo); border-bottom:0}
.topo.encolhe{box-shadow:0 6px 22px -10px rgba(0,0,0,.7)}
.topo__env{grid-template-columns:auto minmax(0,1fr) auto; gap:28px; padding-block:12px}
.marca img{height:50px; width:auto}
.topo.encolhe .marca img{height:42px}
.busca{max-width:540px}
.busca input{background:var(--sup-2); border:2px solid var(--borda-forte); color:var(--tinta); padding:12px 52px 12px 20px}
.busca input:focus{border-color:var(--agua); background:var(--sup-2)}
.busca button{background:var(--agua); color:#0F1A18}
.busca button:hover{background:var(--agua-cl)}
.acoes{gap:14px}
.topo__nota{display:flex; align-items:center; gap:7px; font-size:.86rem; color:var(--tinta-md); white-space:nowrap}
.topo__nota svg{color:var(--agua)}
.acao{padding:8px 12px; font-family:var(--display); color:var(--tinta)}
.acao:hover{background:var(--sup-2)}
.acao svg{color:var(--moeda)}

.menu{background:var(--fundo); border-block:1px solid var(--borda)}
.menu__env{gap:6px; padding-block:9px}
.menu a,.menu__mais button{font-weight:500; font-size:.95rem; padding:7px 15px; border:0; border-radius:var(--r-full); color:var(--tinta-md)}
.menu a:hover,.menu__mais button:hover,.menu__mais button[aria-expanded="true"]{background:var(--sup-2); color:var(--tinta); border:0}
.menu a[aria-current]{background:var(--agua-vidro); color:var(--agua-cl); border:0; box-shadow:inset 0 0 0 1px rgba(95,179,165,.4)}
.menu__cats{gap:6px}
.menu__mais-lista{background:var(--sup-2); border-color:var(--borda-forte); box-shadow:0 14px 34px -12px rgba(0,0,0,.7)}
.menu .menu__mais-lista a:hover{background:var(--grafite)}

.gaveta{background:var(--sup)}
.gaveta__topo img{height:44px; width:auto}
.gaveta nav a:hover,.fechar:hover,.hamburguer:hover{background:var(--sup-2)}
.veu{background:rgba(0,0,0,.65)}

/* ==========================================================================
   ABERTURA: painel de gibi em grafite, com a ficha viva de um produto real
   ========================================================================== */
.hero{background:linear-gradient(165deg,#34373E 0%,#2B2D33 46%,#232529 100%)}
.hero.reticula::before{--pontos:rgba(95,179,165,.17); background-size:14px 14px;
  -webkit-mask-image:linear-gradient(100deg,#000 0%,rgba(0,0,0,.35) 55%,#000 100%); mask-image:linear-gradient(100deg,#000 0%,rgba(0,0,0,.35) 55%,#000 100%)}
.hero__env{grid-template-columns:1.02fr .98fr; gap:40px; padding-block:48px 56px}
.hero__fita{background:var(--agua); color:#0F1A18; border:2px solid var(--tinta-pura); box-shadow:3px 3px 0 var(--tinta-pura)}
.hero h1{font-size:clamp(2.35rem,1.35rem + 3.4vw,4.1rem); line-height:1.02; max-width:14ch; text-wrap:balance; text-shadow:0 4px 0 rgba(8,9,11,.55)}
.hero__sub{color:#D9DAD5; max-width:46ch}
.hero__provas li{color:var(--tinta); background:rgba(18,19,22,.42); border-color:rgba(236,235,230,.22)}
.hero__provas svg{color:var(--agua-cl)}
.capa-onda path{fill:var(--fundo)}
.hero{padding-bottom:0}
.capa-onda--hero{height:64px}

.hero__palco{min-height:0; display:block; padding-top:34px}
.hero__palco::after{background:repeating-conic-gradient(from 4deg at 50% 50%, rgba(236,235,230,.08) 0deg 5deg, transparent 5deg 13deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 10%,rgba(0,0,0,.5) 45%,transparent 72%); mask-image:radial-gradient(closest-side,#000 10%,rgba(0,0,0,.5) 45%,transparent 72%)}
.hero__balao{left:2%; top:0; background:var(--tinta); color:#16171A; border:2px solid var(--tinta-pura); max-width:17.5rem; font-size:.98rem; line-height:1.3; padding:11px 18px}
.hero__balao::after{background:var(--tinta); border-right-color:var(--tinta-pura); left:38px}

/* a ficha viva: produto, gráfico, frase honesta */
.fv{position:relative; z-index:2; background:var(--sup); border:2px solid var(--tinta-pura); border-radius:var(--r-xl); box-shadow:var(--sombra-agua); padding:20px 22px 22px; max-width:480px; margin-inline:auto}
.fv__prod{display:flex; gap:16px; align-items:center}
.fv__foto{width:92px; flex:none; border-radius:var(--r-sm)}
.fv__id{display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0}
.fv__nome{font-weight:600; font-size:.95rem; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.fv__nome:hover{color:var(--agua-cl)}
.fv__preco{font-size:1.65rem}
.fv__graf{margin-top:18px; background:var(--fundo); border:1px solid var(--borda); border-radius:var(--r-md); padding:12px 14px 10px}
.fv__tit{font-family:var(--display); font-weight:600; font-size:.92rem; color:var(--tinta-md)}
.fv__area{position:relative; height:112px; margin:30px 10px 26px 10px}
.fv__area svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible; display:block}
.fv__base{stroke:var(--borda-forte); stroke-width:1; vector-effect:non-scaling-stroke}
.fv__linha{fill:none; stroke:var(--agua); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke}
.fv__ref{stroke:var(--aro); stroke-width:2; vector-effect:non-scaling-stroke}
.ponto{position:absolute; width:12px; height:12px; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 3px var(--fundo)}
.ponto--maior{background:var(--tinta-md)}
.ponto--menor{background:var(--moeda)}
.ponto--hoje{background:var(--agua); width:14px; height:14px}
.rotulo{position:absolute; transform:translate(-50%,-100%); margin-top:-13px; font-size:.78rem; font-weight:600; font-style:normal; color:var(--tinta-md); white-space:nowrap}
.rotulo--baixo{transform:translate(-50%,0); margin-top:13px; color:var(--moeda)}
.rotulo--ini{transform:translate(-8px,-100%)}
.rotulo--ini.rotulo--baixo{transform:translate(-8px,0)}
.rotulo--fim{transform:translate(-100%,-100%); margin-left:8px}
.rotulo--fim.rotulo--baixo{transform:translate(-100%,0)}
.fv__vazio{position:absolute; left:0; right:26px; top:50%; transform:translateY(-135%); font-size:.8rem; color:var(--tinta-cl); text-align:center}
.fv__eixo{display:flex; justify-content:space-between; font-size:.76rem; color:var(--tinta-cl)}
.fv__frase{margin-top:14px; background:var(--agua-vidro); border:1px solid rgba(95,179,165,.32); border-radius:var(--r-md); padding:11px 15px; font-weight:600; font-size:.95rem; line-height:1.45}
.fv__nota{margin-top:9px; font-size:.8rem; color:var(--tinta-cl)}
.fv .btn{margin-top:16px; width:100%}

/* ---------- o que a loja faz ---------- */
.vantagens{background:var(--fundo); border-bottom:1px solid var(--borda)}
.vantagem{padding:22px 16px; align-items:flex-start}
.vantagem + .vantagem::before{display:none}
.vantagem__ic{background:var(--agua-vidro); color:var(--agua-cl); border:1px solid rgba(95,179,165,.3)}
.vantagem span{color:var(--tinta-md)}

/* ---------- seções ---------- */
.secao{overflow-x:clip}   /* as faixas que rolam sangram até a borda sem criar rolagem na página */
.cab h2{font-size:clamp(1.7rem,1.25rem + 1.5vw,2.45rem); line-height:1.08; max-width:none}
.cab p{max-width:56ch}
.cab__link{color:var(--agua-cl); border-bottom-color:var(--agua-esc)}
.cab__link:hover{color:var(--agua-cl); border-color:var(--agua-cl)}
.secao--vitrine{background:var(--sup); border-block:1px solid var(--borda)}
.cab__link--pe{display:inline-block; margin-top:26px}

/* O palco claro das fotos do ML: a foto de fundo branco some no palco (multiply). */
.foto{display:block; position:relative; background:var(--palco); border-radius:var(--r-md); overflow:hidden; aspect-ratio:1/1}
.foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; padding:9%}

/* "Joga onde?": brasões com contorno de tinta e sombra verde-água */
.joga{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px}
.jo{position:relative; display:flex; flex-direction:column; background:var(--grafite); border:2px solid var(--tinta-pura); border-radius:var(--r-lg); box-shadow:var(--sombra-agua); padding:8px; transition:transform var(--t), box-shadow var(--t)}
.jo:hover{transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--agua-esc)}
.jo__foto{border-radius:15px; aspect-ratio:4/3}
.jo__foto img{padding:7%}
.jo__tx{display:flex; flex-direction:column; padding:14px 8px 12px; gap:4px}
.jo__tx b{font-size:1.4rem; line-height:1.05; font-weight:700}
.jo__tx span{font-size:.88rem; color:var(--tinta-md); line-height:1.4}
.jo__n{position:absolute; top:16px; right:16px; background:var(--tinta-pura); color:var(--tinta); font-family:var(--display); font-weight:600; font-size:.76rem; padding:4px 10px; border-radius:var(--r-full)}
.atalhos{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:26px; color:var(--tinta-md); font-size:.92rem}
.atalhos a{font-family:var(--display); font-weight:500; padding:7px 15px; border-radius:var(--r-full); background:var(--sup-2); border:1px solid var(--borda-forte); color:var(--tinta); transition:border-color var(--t), color var(--t)}
.atalhos a:hover{border-color:var(--agua); color:var(--agua-cl)}

/* ---------- vitrine: calma ---------- */
.carrossel__trilho{grid-auto-columns:calc((100% - 4 * 18px) / 5); gap:18px}
.seta{background:var(--sup-2); border:2px solid var(--borda-forte); color:var(--tinta)}
.seta:hover{background:var(--sup-2); border-color:var(--agua); color:var(--agua-cl)}
.grade-vt{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}

.vt{position:relative; display:flex; flex-direction:column; background:var(--fundo); border:1px solid var(--borda); border-radius:var(--r-lg); padding:8px; transition:border-color var(--t)}
.secao--vitrine .vt{background:var(--fundo)}
.vt:hover{border-color:var(--borda-forte)}
.vt__palco{position:relative}
.vt__palco .foto{border-radius:var(--r-md)}
.sel--adesivo{position:absolute; left:8px; bottom:-13px; z-index:2; border:3px solid var(--fundo); font-size:.76rem; padding:5px 10px 5px 7px; max-width:calc(100% - 16px); white-space:normal}
.vt__corpo{display:flex; flex-direction:column; gap:9px; flex:1; padding:20px 8px 8px}
.vt__nome{font-weight:600; font-size:.95rem; line-height:1.32; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.64em}
.vt__nome:hover{color:var(--agua-cl)}
.preco{font-family:var(--display); font-weight:700; color:var(--tinta); line-height:1; letter-spacing:-.01em; white-space:nowrap}
.preco .rs{font-size:.56em; font-weight:600; margin-right:3px; vertical-align:.32em}
.preco .cent{font-size:.56em; font-weight:600; vertical-align:.32em}
.vt__preco{font-size:1.42rem}
.vt__fora{color:var(--tinta-md); font-size:.92rem}
.hist-mini{display:flex; flex-direction:column; gap:7px; font-size:.8rem; color:var(--tinta-md); line-height:1.3; padding:9px 10px 8px; background:var(--sup); border-radius:var(--r-sm); margin-bottom:4px}
.secao--vitrine .hist-mini{background:var(--sup)}
.hist-mini--menor .hist-mini__tx{color:var(--moeda); font-weight:600}
.hist-mini--so{background:none; padding:0 2px}
.spark{position:relative; display:block; width:100%; height:22px}
.spark svg{width:100%; height:100%; overflow:visible; display:block}
.spark polyline{fill:none; stroke:var(--agua); stroke-width:1.6; vector-effect:non-scaling-stroke; stroke-linejoin:round}
.spark__ref{stroke:var(--aro); stroke-width:1.6; stroke-dasharray:2 4; vector-effect:non-scaling-stroke}
.spark i{position:absolute; width:8px; height:8px; border-radius:50%; background:var(--agua); transform:translate(-50%,-50%); box-shadow:0 0 0 2px var(--sup)}
.hist-mini--menor .spark i{background:var(--moeda)}
.vt .btn{margin-top:auto; padding:10px 14px; font-size:.92rem}

/* ---------- por que somos afiliados ---------- */
.afiliado{background:var(--sup); border:var(--tinta-traco); box-shadow:var(--sombra-agua); margin-top:0}
.afiliado__ic{color:var(--fundo)}  /* ícone escuro na moeda dourada: o verde-água claro sumia no dourado (Eduardo, 03/11) */
.afiliado h3{font-size:1.3rem; margin-bottom:8px}
.afiliado p{color:var(--tinta-md); margin-bottom:14px}

/* ==========================================================================
   O MOTOR NO ESCURO: cartão, foto, painel, blog, formulário, catálogo, produto
   ========================================================================== */
.card{background:var(--sup); border-color:var(--borda); border-radius:var(--r-lg)}
.card:hover{border-color:var(--borda-forte); box-shadow:none; transform:none}
.card__foto{background:var(--palco); margin:8px 8px 0; border-radius:var(--r-md)}
/* A foto do guia (cartão .post) não entra no multiply: ela fica direto sobre o cartão escuro, e o multiply a escurecia (Eduardo, 03/11). Fica com o fundo branco que vem no HTML. */
.card__foto img,.pdp__principal img,.post-destaque__foto img,.artigo img[src*="mlstatic"]{background:transparent !important; mix-blend-mode:multiply; object-fit:contain !important}
.card__foto img{padding:8%}
.card:hover .card__foto img{transform:none}
.duas-col .painel ul{list-style:disc}
.card__corpo{padding:14px 16px 16px}
.card__nome{font-family:var(--texto); font-weight:600; font-size:.95rem; line-height:1.32; letter-spacing:0}
.card__nome:hover{color:var(--agua-cl)}
.card__marca{color:var(--tinta-cl)}
.card__parc{color:var(--tinta-cl)}
.card__fav{background:rgba(18,19,22,.85); color:var(--tinta)}
.estrelas .vazia{color:var(--borda-forte)}

.post{background:var(--sup); border-color:var(--borda)}
.post:hover{box-shadow:none; border-color:var(--borda-forte); transform:none}
.post img,.post-destaque__foto{background:var(--palco)}
.post__tag{background:var(--agua-vidro); color:var(--agua-cl)}
.post h3,.post-destaque h2{font-family:var(--display); font-weight:600}
.artigo li::before{background:var(--moeda); border-color:var(--tinta-pura)}
.artigo blockquote{background:var(--agua-vidro); border-left-color:var(--agua)}
.artigo a{color:var(--agua-cl); text-decoration:underline; text-underline-offset:3px}
.artigo img{background:var(--palco)}

.capa-pg{background:linear-gradient(165deg,#34373E 0%,#2B2D33 52%,#232529 100%)}
.capa-pg.reticula::before{--pontos:rgba(95,179,165,.17); background-size:14px 14px}
.capa-pg h1{font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem); text-shadow:0 3px 0 rgba(8,9,11,.5)}
.capa-pg p{color:#D9DAD5}
.caminho{background:var(--fundo); border-bottom:1px solid var(--borda)}
.caminho a:hover{color:var(--agua-cl)}

.painel,.valor,.numero,.sanfona,.tabela-carrinho,.resumo,.item,.filtros,.depo{background:var(--sup); border-color:var(--borda)}
.numero,.depo{border:var(--tinta-traco); box-shadow:var(--sombra-agua)}
.numero b,.pg-404 .codigo{color:var(--agua-cl)}
.valor__ic,.pdp__vantagens svg{background:var(--agua-vidro); color:var(--agua-cl)}
.pdp__vantagens svg{background:none}
.sanfona summary:hover{background:var(--sup-2)}
.sanfona summary::after{color:var(--agua-cl)}
.sanfona .corpo a,.contato-card a,.filtro-limpa,.filtro-link[aria-current]{color:var(--agua-cl)}
.campo input,.campo select,.campo textarea,.barra-lista select,.faixa-preco input,.filtro-bl .filtro-busca,.frete-form input,.cupom input{background:var(--sup-2); border-color:var(--borda-forte); color:var(--tinta)}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--agua); box-shadow:0 0 0 4px rgba(95,179,165,.18)}
.filtro-link:hover,.filtro-link[aria-current]{background:var(--agua-vidro)}
.ficha-ativa{background:var(--agua-vidro); color:var(--agua-cl)}
.ficha-ativa button,.ficha-ativa a{background:rgba(95,179,165,.25); color:var(--agua-cl)}
.ficha-ativa button:hover,.ficha-ativa a:hover{background:var(--agua); color:#0F1A18}
.paginacao a,.paginacao span{background:var(--sup); border-color:var(--borda-forte); color:var(--tinta)}
.paginacao a:hover{border-color:var(--agua)}
.paginacao [aria-current]{background:var(--agua); border-color:var(--agua); color:#0F1A18}
.abas button[aria-selected="true"],.abas-conta button[aria-selected="true"]{color:var(--agua-cl); border-bottom-color:var(--agua)}
.abas-conta button[aria-selected="true"]{background:var(--agua-vidro); border-color:var(--agua)}
.pdp__principal{background:var(--palco); border-color:var(--borda); margin:0}   /* o <figure> traz margem de 40px do navegador: sem ela a foto fica deslocada e menor que a galeria */
/* A fileira de miniaturas ocupa a largura da foto principal: 5 colunas iguais, a primeira na mesma borda esquerda. */
.pdp__galeria{min-width:0}
.pdp__miniaturas{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:10px}
.pdp__miniaturas button{width:auto; min-width:0; background:var(--palco); border-color:var(--borda-forte)}
.pdp__miniaturas img{mix-blend-mode:multiply; object-fit:contain; background:transparent !important}
.pdp__miniaturas button[aria-current="true"]{border-color:var(--agua)}
.pdp__valor .por{color:var(--tinta)}
.hist{background:var(--sup); border-color:var(--borda)}
.hist__linha{stroke:var(--agua)}
.hist__fim{fill:var(--agua); stroke:var(--sup)}
.hist__ref{stroke:var(--aro); stroke-width:2; stroke-dasharray:3 6; stroke-linecap:round; vector-effect:non-scaling-stroke}   /* 1º dia: ainda não há linha, só o nível de hoje */
/* painel do admin: o topo do motor usa var(--tinta), que aqui é o texto claro; o logo é branco e some em fundo claro */
.adm-topo{background:var(--sup); border-bottom:1px solid var(--borda)}
.faixa input[type=range]::-webkit-slider-thumb{background:var(--sup); border-color:var(--agua)}
.faixa__cheio{background:var(--agua)}
.aviso-caixa--info{background:var(--agua-vidro); color:var(--agua-cl)}
.aviso-caixa--ok{background:var(--sucesso-cl); color:var(--sucesso)}
.aviso-caixa--atencao{background:rgba(242,184,75,.14); color:var(--moeda-cl)}
.blog-busca{background:var(--sup-2); border-color:var(--tinta-pura)}
.blog-busca button{background:var(--moeda); color:var(--moeda-tinta); border-left-color:var(--tinta-pura)}
.blog-busca button:hover{background:var(--moeda-cl)}
.blog-bichos a,.blog-filtro a{background:var(--sup-2); border-color:var(--borda-forte); color:var(--tinta-md)}
.blog-bichos a:hover,.blog-filtro a:hover{border-color:var(--agua); color:var(--tinta)}
.blog-bichos a[aria-current],.blog-filtro a[aria-current]{background:var(--tinta); border-color:var(--tinta); color:#16171A}
.blog-bichos a[aria-current] span,.blog-filtro a[aria-current] span{color:#3B3E45}
.blog-lidos li::before,.blog-lidos a:hover{color:var(--agua-cl)}
.blog-loja{background:var(--sup)}
.cat{background:var(--sup)}
.cat--tudo,.cat--tudo__mio{background:var(--moeda); color:var(--moeda-tinta)}
.cat--tudo__mio span{color:var(--moeda-tinta)}
.prod-linha{background:var(--sup); border-color:var(--borda)}
.prod-linha img{background:var(--palco)}

/* ---------- rodapé ---------- */
.rodape{background:var(--sup); color:var(--tinta-md); border-top:1px solid var(--borda); padding-top:44px; margin-top:24px}
.rodape img.logo{height:48px; width:auto; margin-bottom:14px}
.rodape h3{color:var(--tinta); font-family:var(--display)}
.rodape a:hover,.rodape__base a:hover{color:var(--moeda)}
.rodape__afiliada{display:flex; gap:10px; margin-top:14px; font-size:.86rem; color:var(--tinta-md)}
.rodape__afiliada svg{flex:none; margin-top:3px; color:var(--agua)}
.rodape__base{border-top-color:var(--borda); color:var(--tinta-cl)}
.rodape__base a{text-decoration:underline; text-underline-offset:3px}
.rodape__social a{background:var(--sup-2)}

/* ---------- celular e tablet ---------- */
@media (max-width:1080px){
  .carrossel__trilho{grid-auto-columns:calc((100% - 2 * 18px) / 3.3)}
  .grade-vt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vantagens__env{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  /* a busca fica no cabeçalho (linha própria) e as seções viram uma faixa de pílulas; a gaveta guarda o resto */
  .topo__env{flex-wrap:wrap; gap:10px 12px; padding-block:10px}
  .busca{display:flex; order:3; flex-basis:100%; max-width:none}
  .busca--gaveta{order:0}
  .menu{display:block}
  .acoes{margin-left:auto}
  .topo__nota{display:none}
  .hero__env{grid-template-columns:minmax(0,1fr); text-align:left; gap:18px; padding-block:30px 46px}
  .hero__tx{margin-inline:0}
  .hero__sub{margin-inline:0}
  .hero__cta,.hero__provas{justify-content:flex-start}
  .hero__palco{order:0; margin-bottom:0; padding-top:28px}
  .hero__balao{display:none}
  .hero__palco{padding-top:0}
  .hero__palco::after{inset:-20% -10%}
  .fv{max-width:none}
}
@media (max-width:760px){
  .menu__env{padding-block:7px}
  .menu__cats{flex:1 1 auto}
  .menu__cats a.fora{display:inline-block}   /* no celular a faixa rola: não precisa de "Mais seções" */
  .menu__mais{display:none}
  .menu a{padding:6px 12px; font-size:.9rem}
  .hero__env{padding-block:24px 44px}
  .hero h1{max-width:none}
  .hero__cta{margin-top:22px; gap:10px}
  .hero__cta .btn{flex:1; padding:14px 14px; font-size:.97rem}
  .hero__provas{display:none}
  .capa-onda--hero{height:34px}
  .fv{padding:16px 16px 18px; border-radius:var(--r-lg)}
  .fv__foto{width:72px}
  .fv__preco{font-size:1.4rem}
  .fv__area{height:92px; margin-top:26px}
  .fv__frase{font-size:.9rem; padding:10px 13px}

  .vantagens__env{display:flex; overflow-x:auto; scrollbar-width:none; gap:10px; padding-block:6px 14px; scroll-snap-type:x mandatory}
  .vantagens__env::-webkit-scrollbar{display:none}
  .vantagem{flex:0 0 78%; scroll-snap-align:start; padding:10px 4px}

  .secao{padding-block:40px}
  .cab{margin-bottom:18px}
  .joga{display:flex; overflow-x:auto; scrollbar-width:none; gap:12px; scroll-snap-type:x mandatory; padding:0 8px 10px 0; margin-right:-16px}
  .joga::-webkit-scrollbar{display:none}
  .jo{flex:0 0 62%; scroll-snap-align:start}
  .jo__tx span{display:none}
  .jo__tx{padding:10px 4px 6px}
  .jo__tx b{font-size:1.2rem}

  .carrossel__nav{display:none}
  .carrossel__trilho{grid-auto-columns:48%; gap:12px; margin-right:-16px; padding-right:16px}
  .vt{padding:6px}
  .vt__corpo{padding:18px 5px 5px; gap:7px}
  .vt__nome{font-size:.88rem}
  .vt__preco{font-size:1.22rem}
  .hist-mini{font-size:.74rem; padding:7px 7px 6px; gap:6px}
  .vt .btn{padding:9px 8px; font-size:.86rem}
  .sel--adesivo{font-size:.7rem; left:5px; padding:4px 8px 4px 6px; line-height:1.1}
  .grade-vt{gap:12px}
  .cab__link--pe{margin-top:18px}
  .afiliado{flex-direction:column; gap:12px}
  .rodape{padding-top:32px}
}
@media (max-width:640px){
  .marca img{height:38px}
  .topo.encolhe .marca img{height:34px}
  .acao--guias .acao__tx{display:none}
  .grade{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
  .card__foto{margin:6px 6px 0}
  .card__corpo{padding:12px 11px 13px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important; animation:none !important}
}