/* ============================================================
   MP Digital Celulares — loja pública
   Mesma identidade do painel interno: preto, amarelo e branco,
   neutros em cinza puro, títulos em serifada e cantos quase retos.
   Quem vê o site e quem usa o sistema veem a mesma marca.
   ============================================================ */

:root{
  /* Neutros sem viés de cor — o preto/branco da marca pede cinza puro. */
  --fundo:#F5F5F3; --cartao:#FFFFFF; --fundo2:#EDEDEA; --borda:#DBDBD6; --borda2:#E6E6E2;
  --texto:#171717; --texto2:#4D4D4D; --texto3:#7A7A7A;

  /* Amarelo é ASSINATURA, não botão: logo, selo de novidade, filtro ativo.
     Aparecendo pouco e sempre no mesmo papel, ele marca — e para de brigar
     com o verde do WhatsApp, que é o único botão que importa nesta loja. */
  --marca:#F5C400; --marca-tinta:#111111; --marca-suave:#FAF0C8;

  /* Azul-petróleo: o que precisa ser LIDO (link, foco, ação secundária).
     Amarelo sobre branco nunca terá contraste; petróleo tem, é sóbrio e
     fica no lado oposto do amarelo, então não disputa com ele. */
  --acento:#0E5566; --acento-btn:#0E5566; --acento-btn-txt:#FFFFFF; --acento-suave:#E2EFF2;

  --ok:#3F6B46; --ok-suave:#DFE9DC;
  --alerta:#9A6413; --alerta-suave:#F3E6CC;
  --erro:#973229; --erro-suave:#F3DCD8;

  /* Verde do WhatsApp fica: é sinal reconhecido, não decoração. */
  --zap:#25D366; --zap-esc:#1DA851;

  /* Grafite levemente quente no lugar do preto absoluto: mantém a moldura
     escura da marca sem o peso de faixa de sinalização numa página de venda. */
  --preto:#1F1E1B; --preto-linha:#343229; --preto-texto:#B3AFA4;

  --sombra:0 1px 2px rgba(20,30,28,.06), 0 6px 18px rgba(20,30,28,.05);
  --sombra-alta:0 20px 60px rgba(0,0,0,.3);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --raio:3px; --raio-p:3px;
  --cab:64px;
  --largura:1240px;
}
@media (prefers-color-scheme: dark){
  :root{
    --fundo:#121212; --cartao:#1A1A1A; --fundo2:#212121; --borda:#2F2F2F; --borda2:#262626;
    --texto:#EDEDED; --texto2:#A8A8A8; --texto3:#777777;
    --marca-suave:#3B3000;
    /* No escuro o petróleo clareia para continuar legível; o botão mantém o
       tom médio, que aparece sobre fundo escuro sem virar néon. */
    --acento:#6FC4D8; --acento-btn:#12697F; --acento-btn-txt:#FFFFFF; --acento-suave:#12313A;
    --ok:#7FB585; --ok-suave:#1E2C21;
    --alerta:#D9A85A; --alerta-suave:#33280F;
    --erro:#D97A6E; --erro-suave:#38201C;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.28);
  }
}
:root{ color-scheme:light dark; }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans); background:var(--fundo); color:var(--texto);
  line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{ font-family:var(--serif); font-weight:600; text-wrap:balance; }
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
svg{ width:20px; height:20px; fill:currentColor; }
.oculto{ display:none !important; }
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }

.pular{
  position:absolute; left:-999px; top:8px; z-index:100;
  background:var(--acento-btn); color:var(--acento-btn-txt); padding:10px 16px;
  border-radius:var(--raio); font-weight:700;
}
.pular:focus{ left:8px; }

.faixa-aviso{
  background:var(--marca); color:var(--marca-tinta);
  text-align:center; padding:8px 16px; font-size:.85rem; font-weight:700;
  letter-spacing:.01em;
}

/* ------------------------------------------------------------ cabeçalho */
/* Preto nos dois temas: é onde a logomarca assenta sem competir com nada. */
.cabecalho{
  position:sticky; top:0; z-index:50; background:var(--preto);
  border-bottom:1px solid var(--preto-linha);
}
.cabecalho .linha{
  max-width:var(--largura); margin:0 auto; padding:0 16px; height:var(--cab);
  display:flex; align-items:center; gap:14px;
}
.marca{ display:flex; align-items:center; gap:10px; flex:none; }
.marca img.logo{ height:34px; width:auto; }
.marca-icone{
  width:36px; height:36px; border-radius:var(--raio); display:grid; place-items:center;
  background:var(--marca); color:var(--marca-tinta);
  font-weight:800; font-size:.82rem; letter-spacing:.04em;
}
.marca-txt{ display:flex; flex-direction:column; line-height:1.1; }
.marca-txt b{ font-family:var(--serif); font-size:1.05rem; color:#FFFFFF; font-weight:600; }
.marca-txt small{
  font-size:.62rem; color:var(--marca); letter-spacing:.13em;
  text-transform:uppercase; font-weight:700;
}

.busca{ flex:1; position:relative; display:flex; align-items:center; max-width:520px; }
.busca svg{ position:absolute; left:11px; color:#8A8A8A; pointer-events:none; width:18px; height:18px; }
.busca input{
  width:100%; height:38px; padding:0 34px 0 36px; border-radius:var(--raio);
  border:1px solid var(--preto-linha); background:#131313; color:#FFFFFF;
}
.busca input::placeholder{ color:#7A7A7A; }
.busca input::-webkit-search-cancel-button{ display:none; }
.busca input:focus{ outline:none; border-color:var(--marca); background:#161616; }
.busca .limpar{ position:absolute; right:9px; font-size:1.3rem; color:#8A8A8A; line-height:1; }

.acoes{ display:flex; align-items:center; gap:6px; flex:none; }
.icone{
  position:relative; width:38px; height:38px; border-radius:var(--raio);
  display:grid; place-items:center; color:var(--preto-texto);
}
.icone:hover{ background:#161616; color:#FFFFFF; }
.bolinha{
  position:absolute; top:3px; right:3px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--marca); color:var(--marca-tinta);
  font-size:.66rem; font-weight:800; display:grid; place-items:center;
}
/* Marca discreta de "você está conectado" — sem número, só presença. */
.ponto-conta{
  position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%;
  background:var(--marca); border:2px solid var(--preto);
}
.conta-linha{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:13px 0; border-bottom:1px solid var(--borda2);
}
.conta-linha:last-child{ border-bottom:0; }
.conta-linha .rot{ font-size:.78rem; color:var(--texto3); text-transform:uppercase;
  letter-spacing:.06em; font-weight:800; }
.conta-linha .val{ font-size:.95rem; }
.codigo-campo input{
  font-family:var(--serif); font-size:1.8rem; letter-spacing:.5em; text-align:center;
  height:60px; padding-left:.5em;
}
.reenviar{ font-size:.85rem; color:var(--texto2); text-align:center; margin-top:12px; }
.reenviar button{ color:var(--acento); font-weight:700; }
.reenviar button:disabled{ color:var(--texto3); font-weight:500; cursor:default; }
.btn-whats{
  display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px;
  border-radius:var(--raio); background:var(--zap); color:#FFFFFF; font-weight:700; font-size:.88rem;
}
.btn-whats:hover{ background:var(--zap-esc); }
@media (max-width:860px){ .btn-whats span{ display:none; } .btn-whats{ padding:0 11px; } }
@media (max-width:640px){ .marca-txt{ display:none; } .cabecalho .linha{ gap:10px; } }

/* ------------------------------------------------------------ blocos */
.faixa{ max-width:var(--largura); margin:0 auto; padding:0 16px; }
.secao{ margin:38px auto; }
.secao-topo{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.secao-topo h2{ font-size:1.3rem; }
.secao-topo a{ color:var(--acento); font-weight:700; font-size:.86rem; }
h1.titulo{ font-size:1.7rem; margin-bottom:4px; }
.sub{ color:var(--texto2); font-size:.92rem; }

/* ------------------------------------------------------------ banners */
.banners{ position:relative; margin-top:16px; }
.banner-pista{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px;
  scrollbar-width:none; border-radius:var(--raio);
}
.banner-pista::-webkit-scrollbar{ display:none; }
.banner{
  position:relative; flex:0 0 100%; scroll-snap-align:center; border-radius:var(--raio);
  overflow:hidden; background:var(--preto); aspect-ratio:21/7; min-height:180px;
}
@media (max-width:720px){ .banner{ aspect-ratio:4/3; min-height:0; } }
.banner img{ width:100%; height:100%; object-fit:cover; }
.banner-txt{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  gap:8px; padding:clamp(18px,4vw,52px); max-width:660px;
}
.banner-txt h3{ font-size:clamp(1.3rem,3.4vw,2.4rem); line-height:1.12; }
.banner-txt p{ font-size:clamp(.85rem,1.6vw,1.05rem); opacity:.94; font-family:var(--sans); }
.banner.claro .banner-txt{ color:#FFFFFF; }
.banner.claro .banner-txt h3{ text-shadow:0 2px 18px rgba(0,0,0,.5); }
.banner.escuro .banner-txt{ color:#111111; }
.banner.claro::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.2) 62%,transparent);
}
.banner.claro .banner-txt{ z-index:1; }
.banner-bolas{ display:flex; gap:5px; justify-content:center; margin-top:12px; }
.banner-bolas button{ width:7px; height:7px; border-radius:1px; background:var(--borda); }
.banner-bolas button.on{ background:var(--marca); width:22px; }

/* ------------------------------------------------------------ confiança */
.confianca{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; margin-top:20px;
}
.selo-conf{
  display:flex; gap:11px; align-items:flex-start; padding:14px; border-radius:var(--raio);
  background:var(--cartao); border:1px solid var(--borda);
}
.selo-conf svg{ width:20px; height:20px; color:var(--acento); flex:none; margin-top:2px; }
.selo-conf b{ display:block; font-size:.9rem; }
.selo-conf span{ font-size:.82rem; color:var(--texto2); }

/* ------------------------------------------------------------ atalhos */
.chips{ display:flex; gap:6px; overflow-x:auto; padding:4px 0 8px; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; padding:7px 13px; border-radius:var(--raio); border:1px solid var(--borda);
  background:var(--cartao); font-size:.86rem; font-weight:600; white-space:nowrap;
}
.chip:hover{ border-color:var(--acento); }
.chip.on{ background:var(--marca); color:var(--marca-tinta); border-color:var(--marca); }
.chip small{ color:var(--texto3); margin-left:5px; font-weight:400; }
.chip.on small{ color:inherit; opacity:.65; }

/* ------------------------------------------------------------ barra de filtros */
.barra{
  position:sticky; top:var(--cab); z-index:40; background:var(--fundo);
  border-bottom:1px solid var(--borda); padding:9px 0; margin-bottom:18px;
}
.barra .dentro{
  max-width:var(--largura); margin:0 auto; padding:0 16px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.barra .conta{ color:var(--texto2); font-size:.88rem; margin-right:auto; }
.barra .conta b{ color:var(--texto); font-variant-numeric:tabular-nums; }
/* Hierarquia de ação: verde = falar com vendedor (a conversão), petróleo =
   ação secundária real, contorno = o resto. Amarelo não é botão. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:38px; padding:0 15px; border-radius:var(--raio); font-weight:700; font-size:.88rem;
  background:var(--acento-btn); color:var(--acento-btn-txt); border:1px solid var(--acento-btn);
}
.btn:hover{ filter:brightness(1.06); }
.btn.fantasma{ background:transparent; color:var(--texto); border-color:var(--borda); }
.btn.fantasma:hover{ border-color:var(--acento); background:var(--cartao); filter:none; }
.btn.zapbtn{ background:var(--zap); border-color:var(--zap); color:#FFFFFF; }
.btn.zapbtn:hover{ background:var(--zap-esc); filter:none; }
.btn.grande{ height:50px; font-size:.98rem; }
.btn.larga{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; filter:none; }
select.ordem{
  height:38px; padding:0 10px; border-radius:var(--raio); border:1px solid var(--borda);
  background:var(--cartao); font-size:.88rem;
}
.tags-ativas{ display:flex; gap:5px; flex-wrap:wrap; }
.tag-ativa{
  display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:var(--raio);
  background:var(--acento-suave); color:var(--acento); font-size:.78rem; font-weight:700;
  border:1px solid transparent;
}
.tag-ativa button{ color:inherit; font-size:1rem; line-height:1; }

/* ------------------------------------------------------------ grade */
.grade{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
@media (max-width:560px){ .grade{ grid-template-columns:repeat(2,1fr); gap:10px; } }

.card{
  position:relative; background:var(--cartao); border:1px solid var(--borda);
  border-radius:var(--raio); overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--sombra); transition:border-color .16s ease, transform .16s ease;
}
.card:hover{ border-color:var(--acento); transform:translateY(-2px); }
.card-foto{
  position:relative; aspect-ratio:1/1; background:var(--fundo2);
  display:grid; place-items:center; overflow:hidden; border-bottom:1px solid var(--borda2);
}
.card-foto img{ width:100%; height:100%; object-fit:cover; }
.card-foto .vazio{ color:var(--texto3); font-size:.78rem; text-align:center; padding:16px; }
.card-foto .vazio svg{ width:32px; height:32px; margin:0 auto 6px; opacity:.5; }
.selos{ position:absolute; top:7px; left:7px; display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.selo{
  padding:3px 8px; border-radius:2px; font-size:.66rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em;
}
.selo.novo{ background:var(--marca); color:var(--marca-tinta); }
.selo.ilustra{ background:rgba(7,7,7,.82); color:#FFFFFF; text-transform:none; letter-spacing:0; font-weight:600; }
.selo.bat{ background:rgba(255,255,255,.92); color:#171717; }
.selo.otimo{ background:var(--ok); color:#FFFFFF; }
.coracao{
  position:absolute; top:7px; right:7px; width:32px; height:32px; border-radius:var(--raio);
  background:rgba(255,255,255,.9); display:grid; place-items:center;
  color:var(--texto3); border:1px solid var(--borda2);
}
.coracao svg{ width:16px; height:16px; }
.coracao.on{ color:var(--erro); }
@media (prefers-color-scheme: dark){ .coracao{ background:rgba(26,26,26,.9); } }

.card-corpo{ padding:11px 12px 13px; display:flex; flex-direction:column; gap:2px; flex:1; }
.card-nome{ font-weight:600; font-size:.92rem; line-height:1.25; }
.card-meta{ font-size:.75rem; color:var(--texto3); margin-bottom:6px; }
.preco{
  font-family:var(--serif); font-size:1.35rem; font-weight:600; margin-top:auto;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.preco small{ font-family:var(--sans); font-size:.7rem; font-weight:500; color:var(--texto3); }
.parcela{ font-size:.78rem; color:var(--texto2); }
.parcela b{ color:var(--texto); font-weight:700; }
.card-acao{ margin-top:9px; }
.card-acao .btn{ height:34px; font-size:.82rem; width:100%; }

.esqueleto{ background:var(--cartao); border:1px solid var(--borda); border-radius:var(--raio); overflow:hidden; }
.esqueleto .b{ background:linear-gradient(90deg,var(--fundo2) 25%,var(--borda2) 37%,var(--fundo2) 63%);
  background-size:400% 100%; animation:brilho 1.3s ease infinite; }
.esqueleto .f{ aspect-ratio:1/1; }
.esqueleto .l{ height:11px; margin:12px 12px 0; border-radius:2px; }
.esqueleto .l.curta{ width:55%; }
.esqueleto .l.ultima{ margin-bottom:16px; width:40%; height:17px; }
@keyframes brilho{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

.fim-lista{ text-align:center; color:var(--texto3); font-size:.86rem; padding:26px 0; }
.fim-lista a{ color:var(--acento); font-weight:700; }
.sentinela{ height:1px; }

/* ------------------------------------------------------------ vazio / erro */
.vazio-tela{ text-align:center; padding:54px 20px; }
.vazio-tela svg{ width:44px; height:44px; color:var(--texto3); margin:0 auto 14px; }
.vazio-tela h3{ font-size:1.15rem; margin-bottom:6px; }
.vazio-tela p{ color:var(--texto2); max-width:430px; margin:0 auto 18px; }

/* ------------------------------------------------------------ painel de filtros */
.gaveta{
  position:fixed; inset:0; z-index:70; display:flex; justify-content:flex-end;
  background:rgba(7,7,7,.5); opacity:0; pointer-events:none; transition:opacity .2s;
}
.gaveta.on{ opacity:1; pointer-events:auto; }
.gaveta .painel{
  width:min(400px,100%); height:100%; background:var(--fundo); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .24s cubic-bezier(.3,.8,.3,1);
}
.gaveta.on .painel{ transform:none; }
.gaveta .topo{ display:flex; align-items:center; justify-content:space-between;
  padding:15px 16px; border-bottom:1px solid var(--borda); }
.gaveta .topo h3{ font-size:1.05rem; }
.gaveta .topo .icone{ color:var(--texto2); }
.gaveta .topo .icone:hover{ background:var(--fundo2); color:var(--texto); }
.gaveta .corpo{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:20px; }
.gaveta .pe{ padding:13px 16px; border-top:1px solid var(--borda); display:flex; gap:8px; }
.grupo h4{ font-size:.72rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--texto3); margin-bottom:9px; font-weight:800; }
.opcoes{ display:flex; flex-wrap:wrap; gap:6px; }
.faixa-preco{ display:flex; align-items:center; gap:8px; }
.faixa-preco input{ flex:1; height:38px; padding:0 11px; border-radius:var(--raio);
  border:1px solid var(--borda); background:var(--cartao); }

/* ------------------------------------------------------------ ficha */
.ficha{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:36px; margin-top:22px; }
@media (max-width:900px){ .ficha{ grid-template-columns:1fr; gap:20px; } }
.migalha{ font-size:.8rem; color:var(--texto3); margin-top:16px; }
.migalha a:hover{ color:var(--acento); }

.galeria .principal{
  position:relative; aspect-ratio:1/1; background:var(--fundo2); border-radius:var(--raio);
  overflow:hidden; border:1px solid var(--borda);
}
.galeria .principal img,.galeria .principal video{ width:100%; height:100%; object-fit:cover; }
.galeria .principal .navega{
  position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px;
  border-radius:var(--raio); background:rgba(255,255,255,.92); color:#171717;
  display:grid; place-items:center; box-shadow:var(--sombra);
}
.galeria .principal .navega.esq{ left:9px; }
.galeria .principal .navega.dir{ right:9px; }
.miniaturas{ display:flex; gap:7px; margin-top:9px; overflow-x:auto; padding-bottom:4px; }
.miniaturas button{
  flex:none; width:64px; height:64px; border-radius:var(--raio); overflow:hidden;
  border:2px solid transparent; background:var(--fundo2); position:relative;
}
.miniaturas button.on{ border-color:var(--marca); }
.miniaturas img{ width:100%; height:100%; object-fit:cover; }
.miniaturas .play{ position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.4); color:#FFFFFF; }
.nota-foto{ font-size:.76rem; color:var(--texto3); margin-top:8px; display:flex; gap:6px; align-items:center; }

.ficha h1{ font-size:clamp(1.45rem,3vw,1.95rem); line-height:1.18; }
.ficha-selos{ display:flex; gap:6px; flex-wrap:wrap; margin:12px 0 16px; }
.pilula{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--raio);
  background:var(--cartao); border:1px solid var(--borda); font-size:.8rem; font-weight:700;
}
.pilula svg{ width:14px; height:14px; }
.pilula.ok{ color:var(--ok); background:var(--ok-suave); border-color:transparent; }
.pilula.aviso{ color:var(--alerta); background:var(--alerta-suave); border-color:transparent; }

.caixa-preco{
  background:var(--cartao); border:1px solid var(--borda); border-radius:var(--raio);
  padding:18px; margin-bottom:16px; border-left:3px solid var(--marca);
}
.caixa-preco .grande{
  font-family:var(--serif); font-size:2.2rem; font-weight:600; line-height:1.1;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.caixa-preco .grande small{ font-family:var(--sans); font-size:.82rem; font-weight:500; color:var(--texto2); letter-spacing:0; }
.caixa-preco .parc{ margin-top:5px; font-size:.98rem; color:var(--texto2); }
.caixa-preco .parc b{ color:var(--texto); }
.caixa-preco .juros{ color:var(--texto3); font-size:.82rem; }
.ver-parcelas{ margin-top:9px; font-size:.85rem; color:var(--acento); font-weight:700; }
.tabela-parcelas{ margin-top:11px; border-top:1px solid var(--borda); }
.tabela-parcelas div{
  display:flex; justify-content:space-between; padding:6px 0; font-size:.85rem;
  border-bottom:1px solid var(--borda2); color:var(--texto2);
  font-variant-numeric:tabular-nums;
}
.tabela-parcelas div b{ color:var(--texto); }
.tabela-parcelas .juros{ color:var(--texto3); font-size:.76rem; }

.acoes-ficha{ display:flex; flex-direction:column; gap:9px; }
.acoes-lado{ display:flex; gap:9px; }
.acoes-lado .btn{ flex:1; }

.bloco{ margin-top:24px; }
.bloco h3{ font-size:1rem; margin-bottom:9px; display:flex; align-items:center; gap:8px; }
.bloco h3 svg{ color:var(--acento); }
.especs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
.espec{ padding:11px; border-radius:var(--raio); background:var(--cartao); border:1px solid var(--borda); }
.espec span{ font-size:.72rem; color:var(--texto3); display:block; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.espec b{ font-size:.92rem; }
.lista-cond{ display:flex; flex-direction:column; gap:7px; }
.cond{
  display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:var(--raio);
  background:var(--cartao); border:1px solid var(--borda); font-size:.88rem;
}
.cond svg{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--alerta); }
.cond.leve svg{ color:var(--texto3); }
.aviso-honesto{
  margin-top:10px; font-size:.82rem; color:var(--texto2); background:var(--marca-suave);
  border-left:3px solid var(--marca); padding:10px 12px; border-radius:0 var(--raio) var(--raio) 0;
}
@media (prefers-color-scheme: dark){ .aviso-honesto{ color:var(--texto); } }
.texto-corrido{ color:var(--texto2); font-size:.9rem; white-space:pre-wrap; }

/* barra fixa de compra no celular */
.compra-fixa{
  position:fixed; left:0; right:0; bottom:0; z-index:45; display:none;
  padding:9px 14px calc(9px + env(safe-area-inset-bottom));
  background:var(--cartao); border-top:1px solid var(--borda);
  gap:12px; align-items:center;
}
.compra-fixa .p{ flex:1; min-width:0; }
.compra-fixa .p b{ display:block; font-family:var(--serif); font-size:1.1rem; font-variant-numeric:tabular-nums; }
.compra-fixa .p span{ font-size:.73rem; color:var(--texto2); }
@media (max-width:900px){ .compra-fixa{ display:flex; } body.tem-fixa{ padding-bottom:76px; } }

/* ------------------------------------------------------------ zap flutuante */
.zap{
  position:fixed; right:16px; bottom:16px; z-index:46;
  display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 18px;
  border-radius:var(--raio); background:var(--zap); color:#FFFFFF; font-weight:700;
  box-shadow:0 10px 30px rgba(37,211,102,.35);
}
.zap svg{ width:24px; height:24px; }
.zap:hover{ background:var(--zap-esc); }
.zap:active{ transform:scale(.97); }
@media (max-width:900px){
  .zap{ right:14px; bottom:86px; height:50px; padding:0; width:50px; justify-content:center; }
  .zap-txt{ display:none; }
  body:not(.tem-fixa) .zap{ bottom:16px; }
}

/* ------------------------------------------------------------ modal */
.fundo{
  position:fixed; inset:0; z-index:80; background:rgba(7,7,7,.55);
  display:grid; place-items:center; padding:16px;
}
.modal{
  width:min(520px,100%); max-height:88vh; overflow-y:auto; background:var(--cartao);
  border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra-alta); padding:20px;
}
.modal h3{ font-size:1.15rem; margin-bottom:5px; display:flex; align-items:center; gap:8px; }
.modal h3 svg{ color:var(--acento); }
.modal .sub{ margin-bottom:15px; }
.campo{ display:block; margin-bottom:13px; }
.campo span{
  display:block; font-size:.72rem; font-weight:800; color:var(--texto2); margin-bottom:5px;
  text-transform:uppercase; letter-spacing:.06em;
}
.campo input,.campo select,.campo textarea{
  width:100%; height:42px; padding:0 12px; border-radius:var(--raio);
  border:1px solid var(--borda); background:var(--fundo);
}
.campo textarea{ height:82px; padding:10px 12px; resize:vertical; }
.campo input:focus,.campo select:focus,.campo textarea:focus{ outline:none; border-color:var(--acento); }
.marcar{ display:flex; gap:10px; align-items:flex-start; font-size:.84rem; color:var(--texto2); margin-bottom:15px; }
.marcar input{ width:17px; height:17px; margin-top:2px; accent-color:var(--marca); flex:none; }
.marcar a{ color:var(--acento); font-weight:700; }
.erro-campo{
  color:var(--erro); background:var(--erro-suave); border-left:3px solid var(--erro);
  font-size:.84rem; margin-bottom:12px; padding:8px 11px; border-radius:0 var(--raio) var(--raio) 0;
}
.modal-galeria{ width:min(96vw,1000px); background:#000000; padding:0; border-color:#000000; }
.modal-galeria img,.modal-galeria video{ width:100%; max-height:86vh; object-fit:contain; }

.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,140%); z-index:90;
  background:var(--preto); color:#FFFFFF; padding:11px 18px; border-radius:var(--raio);
  font-size:.88rem; font-weight:700; box-shadow:var(--sombra-alta); transition:transform .25s;
  max-width:90vw; text-align:center; border-left:3px solid var(--marca);
}
.toast.on{ transform:translate(-50%,0); }

/* ------------------------------------------------------------ rodapé */
/* Preto, como o cabeçalho: a marca fecha a página do mesmo jeito que abre. */
.rodape{ margin-top:52px; padding:34px 0 36px; background:var(--preto); color:var(--preto-texto); }
.rodape .cols{
  max-width:var(--largura); margin:0 auto; padding:0 16px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:24px;
}
.rodape h4{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.11em; color:var(--marca);
  margin-bottom:9px; font-weight:800;
}
.rodape p,.rodape a{ font-size:.87rem; color:var(--preto-texto); display:block; margin-bottom:5px; }
.rodape a:hover{ color:#FFFFFF; }
.rodape .fim{
  max-width:var(--largura); margin:24px auto 0; padding:15px 16px 0; border-top:1px solid var(--preto-linha);
  font-size:.78rem; color:#6E6E6E; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}

/* ------------------------------------------------------------ página de texto */
.pagina-texto{ max-width:760px; margin:0 auto; padding:30px 16px 56px; }
.pagina-texto h1{ font-size:1.7rem; margin-bottom:6px; }
.pagina-texto h2{ font-size:1.1rem; margin:22px 0 7px; }
.pagina-texto p,.pagina-texto li{ color:var(--texto2); margin-bottom:9px; }
.pagina-texto ul{ margin-left:20px; }
.pagina-texto a{ color:var(--acento); font-weight:600; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* ------------------------------------------------------------ confiança nova */
/* Os selos do topo eram pixels dentro da imagem do banner. Agora são texto, e
   por isso precisam de forma própria: faixa escura colada embaixo do banner,
   com a mesma leitura que a arte tinha, só que legível e responsiva. */
.hero-selos{
  list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:2px; margin-top:2px; background:var(--borda2);
  border:1px solid var(--borda); border-radius:var(--raio); overflow:hidden;
}
.hero-selos li{
  display:flex; gap:9px; align-items:flex-start; padding:12px 14px; background:var(--cartao);
}
.hero-selos svg{ color:var(--marca); flex:none; margin-top:1px; }
.hero-selos b{ display:block; font-size:.86rem; line-height:1.25; }
.hero-selos span{ display:block; font-size:.78rem; color:var(--texto2); line-height:1.35; }
@media (max-width:560px){
  .hero-selos{ grid-template-columns:repeat(2,1fr); }
  .hero-selos li{ padding:10px 11px; }
  .hero-selos b{ font-size:.8rem; }
  .hero-selos span{ font-size:.72rem; }
}

/* Checklist de revisão: o que separa uma loja de um anúncio de rede social. */
.revisao{
  margin-top:14px; padding:15px 16px; border-radius:var(--raio);
  background:var(--cartao); border:1px solid var(--borda);
}
.revisao h3{ font-size:1rem; margin-bottom:11px; display:flex; align-items:center; gap:8px; }
.revisao h3 svg{ color:var(--ok); flex:none; }
.revisao ul{
  list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:6px 18px;
}
.revisao li{ display:flex; gap:8px; align-items:flex-start; font-size:.86rem; color:var(--texto2); }
.revisao li svg{ color:var(--ok); flex:none; margin-top:3px; }
.revisao-pe{
  margin-top:12px; padding-top:11px; border-top:1px solid var(--borda2);
  font-size:.82rem; color:var(--texto3);
}

/* Quem atende e em quanto tempo, colado no botão que promete a conversa. */
.atendimento{
  display:flex; gap:7px; align-items:center; justify-content:center;
  margin-top:10px; font-size:.82rem; color:var(--texto2); text-align:center;
}
.atendimento svg{ color:var(--acento); flex:none; }

/* Estado do aparelho no card: era um cinza de nota de rodapé, virou etiqueta. */
.card-est{ margin:5px 0 2px; }
.est{
  display:inline-block; padding:2px 8px; border-radius:2px;
  font-size:.7rem; font-weight:800; letter-spacing:.02em;
  background:var(--fundo2); color:var(--texto2); border:1px solid var(--borda);
}
.est.otimo{ background:var(--ok-suave); color:var(--ok); border-color:transparent; }
.est.bom{ background:var(--acento-suave); color:var(--acento); border-color:transparent; }
.est.detalhe,.est.detalhes{ background:var(--alerta-suave); color:var(--alerta); border-color:transparent; }

/* Na ficha do celular havia três botões verdes disputando o mesmo canto: o
   flutuante, o da barra fixa de preço e o principal. A barra fixa já leva o
   cliente ao WhatsApp com o preço à vista, então o flutuante sai de cena. */
@media (max-width:900px){
  body.tem-fixa .zap{ display:none; }
}

/* ------------------------------------------------------------ páginas de texto */
.pagina-texto .migalha{ margin:0 0 14px; }
.pagina-texto h2{ color:var(--texto); }
.pagina-texto ul{ margin-bottom:12px; }
/* Quem leu a página inteira está decidindo: a conversa começa ali mesmo, sem
   obrigar a voltar para a vitrine para achar um botão verde. */
.pagina-cta{
  margin-top:34px; padding-top:22px; border-top:1px solid var(--borda); text-align:center;
}
.pagina-cta .btn{ min-width:min(300px,100%); }
.pagina-cta .atendimento{ margin-top:12px; }

/* ------------------------------------------------------------ avaliações */
.estrelas{ display:inline-flex; gap:1px; }
.estrelas .estrela svg{ width:15px; height:15px; color:var(--borda); }
.estrelas .estrela.on svg{ color:var(--marca); }
.nota-media{ display:inline-flex; align-items:center; gap:7px; font-size:.86rem; color:var(--texto2); }
.nota-media b{ color:var(--texto); font-size:1rem; font-variant-numeric:tabular-nums; }

.depoimentos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.depoimentos.coluna{ grid-template-columns:1fr; gap:9px; }
.depo{
  background:var(--cartao); border:1px solid var(--borda); border-radius:var(--raio);
  padding:15px 16px; display:flex; flex-direction:column; gap:9px;
}
.depo blockquote{ font-size:.9rem; color:var(--texto2); line-height:1.5; }
.depo figcaption{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; font-size:.78rem; color:var(--texto3); }
.depo figcaption b{ color:var(--texto); font-size:.84rem; }
/* O selo só existe porque a venda está registrada — não é enfeite de vitrine. */
.verificada{
  display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:2px;
  background:var(--ok-suave); color:var(--ok); font-weight:700; font-size:.72rem;
}
.verificada svg{ width:13px; height:13px; }
/* No celular vira faixa que corre para o lado: três depoimentos empilhados
   empurrariam a vitrine para fora da tela. */
@media (max-width:640px){
  .depoimentos:not(.coluna){
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:10px; padding-bottom:6px; scrollbar-width:none;
  }
  .depoimentos:not(.coluna)::-webkit-scrollbar{ display:none; }
  .depoimentos:not(.coluna) .depo{ flex:0 0 82%; scroll-snap-align:start; }
}

/* ---------------------------------------------- formulário de avaliação */
.avaliar .notas{ border:0; display:flex; gap:6px; margin-bottom:20px; }
.avaliar .notas legend{
  font-size:.72rem; font-weight:800; color:var(--texto2); margin-bottom:8px;
  text-transform:uppercase; letter-spacing:.06em;
}
.nota-op{ display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; }
.nota-op input{ position:absolute; opacity:0; width:0; height:0; }
.nota-op .cx svg{ width:30px; height:30px; color:var(--borda); transition:color .12s; }
.nota-op.on .cx svg{ color:var(--marca); }
.nota-op input:focus-visible + .cx{ outline:2px solid var(--acento); outline-offset:3px; border-radius:2px; }
.avaliar .cap{ font-size:.8rem; color:var(--texto3); margin:-4px 0 16px; }

/* ------------------------------------------------------------ filtros rápidos */
/* Os filtros de sempre à mão: escolher "com foto real" custava abrir a gaveta,
   marcar e aplicar — três toques para uma decisão de um toque. */
.chips.rapidos{ padding:0 0 12px; margin-top:-6px; }
.chips.rapidos .chip{ font-weight:500; }
.chips.rapidos .chip.on{ font-weight:700; }

/* Vitrine estreita: "você viu há pouco" mostra no máximo quatro. */
.grade.estreita{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
@media (max-width:560px){ .grade.estreita{ grid-template-columns:repeat(2,1fr); } }
/* Cada aparelho é um anúncio próprio, mas a avaliação é do modelo: este
   marcador diz ao leitor que a opinião é de quem levou justamente este. */
.mesmo-modelo{
  display:inline-flex; align-items:center; padding:2px 7px; border-radius:2px;
  background:var(--acento-suave); color:var(--acento); font-weight:700; font-size:.72rem;
}