/* ==========================================================================
   Identidade visual — linha do wati.io ("sticker" / neo-brutalista)
   Tres regras que definem tudo:
     1. contorno preto de 2-2.5px em todo elemento que e um objeto (botao,
        card, campo, modal);
     2. sombra SOLIDA deslocada, sem desfoque — preta nos objetos comuns,
        colorida no que e destaque;
     3. blocos de cor chapada (azul, creme, rosa, amarelo) separando areas,
        nunca degrade.
   Fonte DM Sans. Verde e a acao, e o texto em cima dele e PRETO.
   ========================================================================== */

:root{
  /* tinta */
  --ink:#1D1D1B;
  --ink-2:#3A3A38;
  --ink-3:#8A8A86;

  /* superficies */
  --branco:#FFFFFF;
  --azul-bloco:#E3F5FF;
  --creme-bloco:#FEF6E0;
  --rosa-bloco:#FCEBFF;
  --cinza:#F7F7F5;

  /* cor */
  --verde:#00E785;
  --verde-2:#00CE76;
  --amarelo:#FFE45C;
  --azul:#51C4FF;
  --rosa:#F0AFFF;
  --vermelho:#FF5A5A;

  /* contorno e sombra — o coracao do estilo */
  --borda:2px solid var(--ink);
  --borda-forte:2.5px solid var(--ink);
  --s1:3px 3px 0 0 var(--ink);
  --s2:4px 4px 0 0 var(--ink);
  --s3:6px 6px 0 0 var(--ink);
  --s-verde:4px 4px 0 0 var(--verde);
  --s-azul:4px 4px 0 0 var(--azul);
  --s-amarelo:4px 4px 0 0 var(--amarelo);

  /* forma */
  --r-btn:12px;
  --r-campo:12px;
  --r-card:20px;
  --r-grande:24px;

  --lateral:252px;
}

*{box-sizing:border-box}
/* .modal usa display:flex, que ganha do [hidden] do navegador por especificidade.
   Sem esta linha o modal fica invisivel mas cobrindo a tela inteira e engolindo cliques. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; display:flex; background:var(--branco); color:var(--ink);
  font:14px/20px "DM Sans","DM Sans Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}

/* ---------------- lateral ---------------- */
.lateral{
  width:var(--lateral); flex:0 0 var(--lateral); background:var(--azul-bloco);
  border-right:var(--borda-forte); display:flex; flex-direction:column;
  padding:26px 16px 22px; height:100vh; position:sticky; top:0;
}
.marca{font-size:17px; font-weight:700; letter-spacing:-.4px; padding:2px 4px 28px; display:flex; align-items:center; gap:7px}
.marca span{
  background:var(--verde); border:var(--borda); border-radius:9px;
  padding:1px 9px 2px; box-shadow:2px 2px 0 0 var(--ink);
}
#menu{display:flex; flex-direction:column; gap:10px}
.item{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:transparent; border:2px solid transparent; padding:11px 13px; border-radius:var(--r-btn);
  color:var(--ink); font-weight:600; cursor:pointer; transition:transform .08s, box-shadow .08s;
}
.item:hover{background:rgba(255,255,255,.6); border-color:var(--ink)}
.item.ativo{background:var(--branco); border:var(--borda); box-shadow:var(--s1)}
.item.ativo:active{transform:translate(2px,2px); box-shadow:1px 1px 0 0 var(--ink)}
.ico{width:17px; text-align:center}
.rodape-lateral{margin-top:auto; display:flex; flex-direction:column; gap:12px}
.status{
  font-size:12px; font-weight:700; padding:6px 11px; border:1.5px solid var(--ink);
  border-radius:20px; background:var(--branco); align-self:flex-start;
}
.status.ok{background:var(--verde)}
.status.erro{background:var(--vermelho); color:var(--branco)}

/* ---------------- conteudo ---------------- */
main{flex:1; min-width:0; height:100vh; overflow:auto}
.tela{display:none; padding:0 44px 90px; max-width:1300px} .tela.ativa{display:block}
.topo{position:sticky; top:0; background:var(--branco); padding:36px 0 0; z-index:5; margin-bottom:34px}
.topo h1{margin:0 0 22px; font-size:38px; line-height:1.08; font-weight:700; letter-spacing:-1.2px}
.abas{display:flex; gap:10px; border-bottom:var(--borda); padding-bottom:0}
.aba{
  background:var(--branco); border:var(--borda); border-bottom:none; color:var(--ink);
  padding:10px 20px 11px; border-radius:12px 12px 0 0; font-weight:600; font-size:14.5px;
  cursor:pointer; margin-bottom:-2px; transition:background .12s;
}
.aba:hover{background:var(--creme-bloco)}
.aba.ativa{background:var(--verde)}
.painel{display:none; padding-top:30px} .painel.ativo{display:block}

.colunas{display:grid; grid-template-columns:1fr 370px; gap:44px; align-items:start}
@media (max-width:1020px){.colunas{grid-template-columns:1fr; gap:32px}}

/* ---------------- formulario ---------------- */
.campo{display:block; margin-bottom:26px}
.campo>span{
  display:block; font-size:12px; font-weight:700; color:var(--ink);
  margin-bottom:9px; text-transform:uppercase; letter-spacing:.7px;
}
.campo>span em{text-transform:none; letter-spacing:0; font-style:normal; font-weight:500; color:var(--ink-3); margin-left:8px}
input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{
  width:100%; background:var(--branco); border:var(--borda); border-radius:var(--r-campo);
  padding:12px 14px; outline:none; color:var(--ink); font-weight:500;
  transition:box-shadow .1s, transform .1s;
}
input::placeholder,textarea::placeholder{color:var(--ink-3); font-weight:400}
input:focus,select:focus,textarea:focus{box-shadow:var(--s-verde)}
input:disabled{background:var(--cinza); color:var(--ink-3); border-style:dashed}
textarea{resize:vertical; line-height:1.6}
select{appearance:none; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231D1D1B' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; cursor:pointer}

.linha-botoes{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
button.primario,
.linha-botoes button:not(.primario):not(.link){
  border:var(--borda-forte); border-radius:var(--r-btn); cursor:pointer;
  font-weight:700; font-size:15px; padding:11px 24px; box-shadow:var(--s1);
  transition:transform .08s, box-shadow .08s, background .12s;
}
button.primario{background:var(--verde); color:var(--ink)}
button.primario:hover{background:var(--verde-2)}
.linha-botoes button:not(.primario):not(.link){background:var(--branco); color:var(--ink)}
.linha-botoes button:not(.primario):not(.link):hover{background:var(--creme-bloco)}
button.primario:active,
.linha-botoes button:not(.primario):not(.link):active{transform:translate(3px,3px); box-shadow:0 0 0 0 var(--ink)}
button.primario:disabled{background:#BDF3D9; box-shadow:var(--s1); cursor:default; transform:none}

.link{
  background:none; border:1.5px solid transparent; color:var(--ink); cursor:pointer;
  padding:4px 10px; font-size:13px; font-weight:700; border-radius:20px;
}
.link:hover{border-color:var(--ink); background:var(--amarelo)}
.link.perigo:hover{background:var(--vermelho); color:var(--branco)}
.modelo-inline{width:auto; max-width:280px}
.meta{font-size:13px; color:var(--ink-2); font-weight:500}
.fraco{color:var(--ink-3)}

/* ---------------- selecao de referencias ---------------- */
.busca-ref{display:flex; gap:8px; align-items:center; margin-bottom:12px}
.busca-ref input{flex:1}
.lista-ref{
  border:var(--borda); border-radius:var(--r-card); background:var(--branco);
  box-shadow:var(--s2); max-height:440px; overflow:auto;
}
.lista-ref label{
  display:flex; gap:11px; padding:13px 16px; border-bottom:1.5px solid rgba(29,29,27,.12);
  cursor:pointer; align-items:flex-start;
}
.lista-ref label:last-child{border-bottom:0}
.lista-ref label:hover{background:var(--creme-bloco)}
.lista-ref label:has(input:checked){background:var(--azul-bloco)}
.lista-ref label:has(input:checked) .tt{font-weight:700}
.lista-ref input[type=checkbox]{accent-color:var(--verde); width:16px; height:16px; margin-top:2px; flex:0 0 auto}
.lista-ref .tt{display:block; font-weight:600}
.lista-ref .sub{display:block; font-size:12px; color:var(--ink-3); margin-top:2px}
.vazio{padding:30px; color:var(--ink-3); text-align:center; font-weight:500}

/* ---------------- resultado (destaque maximo) ---------------- */
.resultado{
  margin-top:14px; background:var(--branco); border:var(--borda-forte);
  border-radius:var(--r-grande); box-shadow:6px 6px 0 0 var(--verde);
}
.resultado-topo{display:flex; gap:14px; align-items:center; padding:18px 22px; border-bottom:var(--borda)}
.resultado-topo strong{font-size:16px; font-weight:700}
.resultado-topo .acoes{margin-left:auto; display:flex; gap:6px}
#saidaCopy{
  margin:0; padding:26px 24px; white-space:pre-wrap; word-wrap:break-word;
  font:14px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace; max-height:70vh; overflow:auto;
}

/* ---------------- referencias ---------------- */
.zona-solta{
  border:2.5px dashed var(--ink); border-radius:var(--r-card); padding:52px 34px;
  text-align:center; cursor:pointer; background:var(--azul-bloco); transition:background .15s;
}
.zona-solta:hover,.zona-solta.sobre{background:var(--verde)}
.zona-solta p{margin:6px 0; font-weight:500}
.zona-solta p strong{font-size:17px; font-weight:700}
.colar{
  margin:24px 0; border:var(--borda); border-radius:var(--r-card);
  padding:18px 22px; background:var(--creme-bloco); box-shadow:var(--s2);
}
.colar summary{cursor:pointer; font-weight:700}
.colar[open] summary{margin-bottom:18px}
.colar input,.colar textarea{background:var(--branco)}

.tabela{
  margin-top:26px; border:var(--borda); border-radius:var(--r-card);
  overflow:hidden; background:var(--branco); box-shadow:var(--s2);
}
.linha{display:flex; gap:16px; align-items:center; padding:16px 20px; border-bottom:1.5px solid rgba(29,29,27,.12)}
.linha:last-child{border-bottom:0}
.linha:hover{background:var(--creme-bloco)}
.linha .principal{flex:1; min-width:0}
.linha .principal b{display:block; font-weight:700; font-size:15.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.linha .principal small{color:var(--ink-2); font-size:12.5px; display:block; margin-top:4px}
.linha .acoes{display:flex; gap:6px; flex:0 0 auto}
.tag{
  display:inline-block; font-size:11px; font-weight:700; background:var(--amarelo);
  border:1.5px solid var(--ink); border-radius:20px; padding:1px 10px 2px; color:var(--ink); margin-right:6px;
}
.tag.alerta{background:var(--rosa)}

/* ---------------- config ---------------- */
.cartao{
  background:var(--branco); border:var(--borda); border-radius:var(--r-card);
  padding:30px; margin-bottom:26px; max-width:780px; box-shadow:var(--s2);
}
.cartao.fraco{background:var(--creme-bloco); color:var(--ink-2)}
.cartao.fraco .fraco{color:var(--ink-2)}
.cartao p{margin:9px 0}
.cartao p strong{font-size:16px}
code{
  background:var(--branco); border:1.5px solid var(--ink); padding:2px 9px;
  border-radius:7px; font-size:12.5px; font-weight:500;
}

/* ---------------- aviso ---------------- */
.aviso{
  position:fixed; right:30px; bottom:30px; background:var(--branco);
  border:var(--borda-forte); border-radius:var(--r-btn); padding:15px 20px;
  max-width:430px; z-index:50; font-weight:600; box-shadow:var(--s-verde);
}
.aviso.erro{box-shadow:4px 4px 0 0 var(--vermelho)}
.aviso.ok{box-shadow:var(--s-verde)}

/* ---------------- modal ---------------- */
.modal{position:fixed; inset:0; background:rgba(29,29,27,.62); display:flex; align-items:center; justify-content:center; z-index:60; padding:30px}
.modal-caixa{
  background:var(--branco); border:var(--borda-forte); border-radius:var(--r-grande);
  width:min(880px,100%); max-height:88vh; display:flex; flex-direction:column; box-shadow:var(--s3);
}
.modal-topo{display:flex; align-items:center; padding:20px 26px; border-bottom:var(--borda); background:var(--azul-bloco); border-radius:21px 21px 0 0}
.modal-topo strong{font-size:18px; font-weight:700; letter-spacing:-.4px}
.modal-topo .link{margin-left:auto}
.modal-corpo{padding:26px; overflow:auto}
.modal-corpo pre{
  white-space:pre-wrap; word-wrap:break-word; font:13.5px/1.7 ui-monospace,Menlo,monospace;
  background:var(--cinza); border:var(--borda); padding:18px; border-radius:14px; margin:0 0 24px;
}

.girando{
  display:inline-block; width:13px; height:13px; border:2.5px solid rgba(29,29,27,.25);
  border-top-color:var(--ink); border-radius:50%; animation:g .7s linear infinite;
  vertical-align:-2px; margin-right:8px;
}
@keyframes g{to{transform:rotate(360deg)}}

/* ---------------- tela de entrada ---------------- */
.entrada{
  position:fixed; inset:0; z-index:80; background:var(--azul-bloco);
  display:flex; align-items:center; justify-content:center; padding:28px;
}
.entrada-caixa{
  background:var(--branco); border:var(--borda-forte); border-radius:var(--r-grande);
  box-shadow:8px 8px 0 0 var(--ink); padding:44px 44px 40px; width:min(470px,100%);
}
.entrada-marca{font-size:16px; font-weight:700; letter-spacing:-.3px; margin-bottom:30px; display:flex; align-items:center; gap:7px}
.entrada-marca span{
  background:var(--verde); border:var(--borda); border-radius:9px;
  padding:1px 9px 2px; box-shadow:2px 2px 0 0 var(--ink);
}
.entrada-caixa h1{margin:0 0 10px; font-size:30px; line-height:1.1; font-weight:700; letter-spacing:-1px}
.entrada-sub{margin:0 0 28px; color:var(--ink-2); font-weight:500}
.entrada-caixa .campo{margin-bottom:20px}
.entrada-caixa button.primario{width:100%; justify-content:center; padding:13px 24px}
.entrada-erro{
  margin-top:22px; background:var(--rosa-bloco); border:var(--borda); border-radius:14px;
  padding:14px 18px; font-weight:500; box-shadow:var(--s1);
}
.entrada-erro.aguarde{background:var(--creme-bloco)}

/* quem esta logado */
.quem{
  background:var(--branco); border:var(--borda); border-radius:14px; padding:11px 13px;
  box-shadow:var(--s1); display:flex; flex-direction:column; gap:1px; position:relative;
}
.quem b{font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:38px}
.quem small{font-size:11.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.quem .link{position:absolute; top:9px; right:8px; font-size:12px}

/* faixa de modo de instalacao */
.faixa-instalacao{
  margin:26px 0 0; background:var(--amarelo); border:var(--borda-forte); border-radius:14px;
  padding:15px 20px; font-weight:500; box-shadow:var(--s2);
}

/* diagnostico de aluno */
.diag{margin-top:18px}
.diag pre{
  background:var(--cinza); border:var(--borda); border-radius:14px; padding:16px;
  font:12.5px/1.6 ui-monospace,Menlo,monospace; max-height:340px; overflow:auto;
  white-space:pre-wrap; word-wrap:break-word; margin:12px 0 0;
}
.veredito{
  display:inline-block; border:var(--borda); border-radius:20px; padding:4px 14px;
  font-weight:700; box-shadow:2px 2px 0 0 var(--ink);
}
.veredito.sim{background:var(--verde)}
.veredito.nao{background:var(--vermelho); color:var(--branco)}

/* ---------------- coluna única (aluno não escolhe material) ---------------- */
.coluna-unica{max-width:840px}
.sub-topo{margin:0 0 26px; color:var(--ink-2); max-width:640px; font-weight:500}
.cartao.azul{background:var(--azul-bloco); box-shadow:var(--s2)}
.cartao.azul p{margin:8px 0}

/* ---------------- interruptor ligado/desligado ---------------- */
.interruptor{display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-weight:600; flex:0 0 auto}
.interruptor input{
  appearance:none; width:44px; height:26px; margin:0; border:var(--borda); border-radius:20px;
  background:var(--branco); position:relative; cursor:pointer; transition:background .15s;
  box-shadow:2px 2px 0 0 var(--ink); flex:0 0 auto;
}
.interruptor input::after{
  content:''; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border:var(--borda); border-radius:50%; background:var(--branco); transition:transform .15s;
}
.interruptor input:checked{background:var(--verde)}
.interruptor input:checked::after{transform:translateX(18px)}
.linha.desligada{background:var(--cinza)}
.linha.desligada .principal b{color:var(--ink-3); text-decoration:line-through}

/* ---------------- botão ADMIN ---------------- */
.item.admin{
  background:var(--amarelo); border:var(--borda); box-shadow:var(--s1);
  letter-spacing:.6px; font-weight:700;
}
.item.admin:hover{background:#FFDA2E}
.item.admin.ativo{background:var(--amarelo); box-shadow:var(--s1)}
.item.admin:active{transform:translate(2px,2px); box-shadow:1px 1px 0 0 var(--ink)}

h2.secao{
  margin:0 0 10px; font-size:22px; font-weight:700; letter-spacing:-.5px;
}

/* ================= VITRINE ================= */

.topo.topo-limpo{padding-bottom:22px; border-bottom:var(--borda); margin-bottom:0}
#tela-vitrine .painel{padding-top:22px}

.busca{position:relative; max-width:100%; margin-bottom:26px}
.busca-lupa{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:19px; height:19px; pointer-events:none; opacity:.65;
  background:no-repeat center/contain url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1D1B' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  font-size:0;
}
.busca input{padding-left:44px; height:50px; border-radius:16px; font-weight:500}

.categorias{display:flex; gap:20px; overflow-x:auto; padding:4px 2px 12px; margin-bottom:20px}
.cat{
  flex:0 0 auto; background:none; border:0; cursor:pointer; padding:0;
  display:flex; flex-direction:column; align-items:center; gap:9px; width:86px;
}
.cat .bola{
  width:66px; height:66px; border-radius:50%; border:var(--borda-forte);
  display:flex; align-items:center; justify-content:center; font-size:27px;
  box-shadow:var(--s1); transition:transform .08s, box-shadow .08s;
}
.cat:hover .bola{transform:translate(-1px,-1px); box-shadow:5px 5px 0 0 var(--ink)}
.cat.ativa .bola{background:var(--verde) !important; box-shadow:var(--s2)}
.cat span.rotulo{font-size:12px; line-height:1.25; font-weight:600; color:var(--ink-2); text-align:center}
.cat.ativa span.rotulo{color:var(--ink)}

.filtros{display:flex; gap:10px; flex-wrap:wrap}
.chip{
  background:var(--branco); border:var(--borda); border-radius:20px; padding:8px 18px;
  font-weight:600; font-size:13.5px; cursor:pointer; box-shadow:2px 2px 0 0 var(--ink);
  transition:transform .08s, box-shadow .08s, background .12s;
}
.chip:hover{background:var(--creme-bloco)}
.chip.ativo{background:var(--verde)}
.chip.fogo.ativo{background:var(--amarelo)}
.chip:active{transform:translate(2px,2px); box-shadow:0 0 0 0 var(--ink)}

.grade{
  display:grid; gap:24px; margin-top:18px;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
}
.produto{
  background:var(--branco); border:var(--borda); border-radius:var(--r-card);
  box-shadow:var(--s2); display:flex; flex-direction:column; overflow:hidden;
  transition:transform .1s, box-shadow .1s;
}
.produto:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 0 var(--ink)}
.produto.destaque{box-shadow:var(--s-amarelo)}
.produto.destaque:hover{box-shadow:6px 6px 0 0 var(--amarelo)}

.produto .foto{position:relative; aspect-ratio:1/1; background:var(--cinza); border-bottom:var(--borda)}
.produto .foto img{width:100%; height:100%; object-fit:contain; display:block}
.selo{
  position:absolute; top:10px; left:10px; background:var(--branco); border:var(--borda);
  border-radius:10px; padding:2px 9px 3px; font-size:11px; font-weight:700; box-shadow:2px 2px 0 0 var(--ink);
}
.selo.tiktok{background:var(--ink); color:var(--branco)}
.selo.shopee{background:#FF6B35; color:var(--branco)}
.fogo-marca{
  position:absolute; top:10px; right:10px; background:var(--amarelo); border:var(--borda);
  border-radius:20px; padding:2px 10px 3px; font-size:12px; font-weight:700; box-shadow:2px 2px 0 0 var(--ink);
}

.produto .corpo{padding:16px 16px 18px; display:flex; flex-direction:column; gap:8px; flex:1}
.produto .corpo p{margin:0}
.produto .corpo .tag{align-self:flex-start; margin-right:0}
.produto h3{
  margin:0; font-size:15.5px; font-weight:700; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.produto .preco{font-size:14px; font-weight:500; margin:0}
.produto .comissao{font-size:15px; font-weight:700; color:#00A65E}
.produto .comissao small{color:var(--ink-3); font-weight:600}
.produto .divulgar{margin-top:auto; width:100%; text-align:center; text-decoration:none; display:block; padding:11px 16px}

/* ---------------- página do produto ---------------- */
.produto-pagina{max-width:1000px; margin:0 auto; padding:40px 28px 80px}
.produto-pagina .voltar{display:inline-block; margin-bottom:26px}
.produto-topo{display:grid; grid-template-columns:400px 1fr; gap:40px; align-items:start}
@media (max-width:860px){.produto-topo{grid-template-columns:1fr}}
.produto-topo .moldura{
  border:var(--borda-forte); border-radius:var(--r-grande); box-shadow:var(--s3);
  background:var(--branco); overflow:hidden; aspect-ratio:1/1;
}
.produto-topo .moldura img{width:100%; height:100%; object-fit:contain; display:block}
.produto-pagina h1{margin:0 0 14px; font-size:32px; line-height:1.12; font-weight:700; letter-spacing:-1px}
.linha-selos{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px}
.selo-linha{
  background:var(--branco); border:var(--borda); border-radius:20px; padding:3px 13px 4px;
  font-size:12.5px; font-weight:700; box-shadow:2px 2px 0 0 var(--ink);
}
.selo-linha.tiktok{background:var(--ink); color:var(--branco)}
.selo-linha.shopee{background:#FF6B35; color:var(--branco)}
.selo-linha.fogo{background:var(--amarelo)}
.numeros{display:flex; gap:14px; flex-wrap:wrap; margin:22px 0}
.numero{
  background:var(--branco); border:var(--borda-forte); border-radius:14px; padding:14px 20px;
  box-shadow:var(--s2); min-width:150px;
}
.numero.verde{background:var(--verde)}
.numero b{display:block; font-size:26px; font-weight:700; letter-spacing:-.6px}
.numero span{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-2)}
.numero.verde span{color:var(--ink)}
.caixa-link{
  background:var(--azul-bloco); border:var(--borda); border-radius:var(--r-card);
  padding:20px 22px; box-shadow:var(--s2); margin-top:26px;
}
.caixa-link p{margin:0 0 12px}
.link-cru{
  display:block; background:var(--branco); border:var(--borda); border-radius:12px;
  padding:12px 14px; font:13px/1.5 ui-monospace,Menlo,monospace; word-break:break-all; margin-bottom:14px;
}
.descricao-produto{
  background:var(--creme-bloco); border:var(--borda); border-radius:var(--r-card);
  padding:20px 24px; box-shadow:var(--s2); margin-top:26px; white-space:pre-wrap; line-height:1.65; font-weight:500;
}

/* ---------------- cadastro de produto (admin) ---------------- */
.painel-admin{display:block}
.abas-admin{margin-top:4px}

.form-produto{display:grid; grid-template-columns:260px 1fr; gap:28px; align-items:start}
@media (max-width:900px){.form-produto{grid-template-columns:1fr}}
.dupla{display:grid; grid-template-columns:1fr 1fr; gap:18px}

.zona-foto{
  position:relative; aspect-ratio:1/1; border:2.5px dashed var(--ink); border-radius:var(--r-card);
  background:var(--azul-bloco); cursor:pointer; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:20px; overflow:hidden; transition:background .15s;
}
.zona-foto:hover,.zona-foto.sobre{background:var(--verde)}
.zona-foto p{margin:4px 0}
.zona-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:var(--branco)}
.destaque-check{margin:6px 0 20px}

.linha .miniatura{
  width:52px; height:52px; flex:0 0 auto; border:var(--borda); border-radius:12px;
  object-fit:contain; background:var(--branco);
}

/* ---------------- desempenho do produto ---------------- */
.tripla{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px}
@media (max-width:700px){.tripla{grid-template-columns:1fr}}
.rotulo-grupo{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  margin:4px 0 10px; color:var(--ink);
}
.rotulo-grupo em{text-transform:none; letter-spacing:0; font-style:normal; font-weight:500; color:var(--ink-3); margin-left:8px}

.numeros-card{display:flex; gap:6px; flex-wrap:wrap}
.mini{
  font-size:11px; font-weight:700; border:1.5px solid var(--ink); border-radius:20px;
  padding:2px 9px 3px; background:var(--branco);
}
.mini.sobe{background:var(--verde)}
.mini.cai{background:var(--rosa)}

.como-pegar{
  background:var(--creme-bloco); border:var(--borda); border-radius:var(--r-card);
  padding:22px 24px; box-shadow:var(--s2); margin-top:26px;
}
.como-pegar ol{margin:12px 0 0; padding-left:22px; line-height:1.75; font-weight:500}
.como-pegar li{margin-bottom:6px}

/* ---------------- rascunhos da vitrine ---------------- */
.linha.rascunho{background:var(--creme-bloco)}
.link-rascunho{
  margin-top:9px; width:100%; max-width:560px; font:13px/1.5 ui-monospace,Menlo,monospace;
  padding:9px 12px; border-radius:10px;
}

.quadrupla{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media (max-width:1100px){.quadrupla{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.quadrupla{grid-template-columns:1fr}}

/* ---------------- selo de concorrencia ---------------- */
.selo-conc{
  display:inline-block; margin:5px 0 2px; padding:3px 9px;
  border:var(--borda); border-radius:999px;
  font-size:12px; font-weight:700; line-height:1.5;
  box-shadow:2px 2px 0 0 var(--ink);
}
.selo-conc.verde{background:var(--verde)}
.selo-conc.amarelo{background:var(--amarelo)}
.selo-conc.vermelho{background:var(--vermelho)}


/* ==================================================================
   CELULAR — a lateral vira gaveta e a barra de cima traz o menu
   ------------------------------------------------------------------
   No computador a lateral e uma coluna fixa ao lado do conteudo. Numa
   tela estreita ela comeria metade do espaco, entao abaixo de 860px ela
   sai do fluxo, vira gaveta, e quem a chama e o botao de tres barras.
   ================================================================== */

.barra-mobile{
  display:none; align-items:center; gap:14px;
  padding:10px 16px; background:var(--azul-bloco);
  border-bottom:var(--borda-forte); position:sticky; top:0; z-index:55;
}
.marca-barra{padding:0; font-size:16px}

.hamburguer{
  flex:0 0 auto; width:44px; height:40px; padding:10px 9px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:var(--branco); border:var(--borda); border-radius:var(--r-btn);
  box-shadow:var(--s1); cursor:pointer;
}
.hamburguer span{display:block; height:2.5px; background:var(--ink); border-radius:2px; transition:transform .18s, opacity .18s}
/* aberto: as tres barras viram um X */
body.menu-aberto .hamburguer span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.menu-aberto .hamburguer span:nth-child(2){opacity:0}
body.menu-aberto .hamburguer span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.veu-menu{position:fixed; inset:0; background:rgba(29,29,27,.45); z-index:65}

@media (max-width:860px){
  /* o documento inteiro passa a rolar, em vez de a lateral e o main rolarem
     cada um por si — no celular dois contextos de rolagem brigam entre si */
  body{display:block}
  main{height:auto; overflow:visible}
  .barra-mobile{display:flex}

  .lateral{
    position:fixed; top:0; bottom:0; left:0; z-index:70;
    width:min(280px,84vw); flex-basis:auto; height:100dvh;
    transform:translateX(-101%); transition:transform .22s ease;
    border-right:var(--borda-forte); overflow-y:auto;
  }
  body.menu-aberto .lateral{transform:none}
  body.menu-aberto{overflow:hidden}

  /* a barra de cima ja segura o topo; deixar o .topo grudento tambem
     empilharia dois cabecalhos e comeria a tela */
  .topo{position:static; padding:22px 0 0; margin-bottom:24px}
  .topo h1{font-size:27px; letter-spacing:-.8px; margin-bottom:18px}
  .tela{padding:0 16px 70px}

  .abas{overflow-x:auto; padding-bottom:2px; scrollbar-width:none}
  .abas::-webkit-scrollbar{display:none}
  .aba{flex:0 0 auto}

  .dupla{grid-template-columns:1fr}
  .quadrupla{grid-template-columns:1fr}
  .colunas{gap:28px}

  /* linhas de tabela: no estreito a imagem fica em cima e as acoes embaixo,
     em vez de espremer o nome do produto ate ele sumir */
  .linha{flex-wrap:wrap; gap:12px; padding:14px 16px}
  .linha .principal{flex:1 1 100%; order:2}
  .linha .acoes{order:3; margin-left:auto}
  .linha .miniatura{order:1}

  .modal{padding:14px}
  .modal-caixa{max-height:92dvh}
  .produto-pagina{padding:26px 16px 70px}
  .produto-pagina h1{font-size:24px}
  .numero{min-width:0; flex:1 1 140px}
  .cartao{padding:20px 18px}
}

@media (max-width:520px){
  .topo h1{font-size:23px}
  .entrada{padding:16px}
  .entrada-caixa{padding:30px 22px 26px}
  .cat{width:74px}
  .cat .bola{width:56px; height:56px; font-size:23px}
  .grade{grid-template-columns:1fr; gap:18px}
  .linha-botoes{gap:10px}
  .linha-botoes button{flex:1 1 auto}
}