@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* base */
  --fundo:#07070C;
  --painel:#101018;
  --painel2:#15151F;
  --linha:#23232F;
  --tinta:#FFFFFF;
  --texto:rgba(255,255,255,.75);
  --fraca:rgba(255,255,255,.55);

  /* marca: o verde e o mesmo do logotipo (brand/BRANDING.md) */
  --a:#00E58C;          /* ponta quente do degrade */
  --b:#00A3FF;          /* ponta fria */
  --marca:#00D47E;
  --marca-texto:#00E58C;
  --marca-forte:#00D47E;

  --grad:linear-gradient(90deg, var(--a), var(--b));
  /* Degrade SO PARA TEXTO. O --grad serve para fundo (botao, pilula, tico do
     H2) e pode ser claro a vontade; usado como TINTA sobre papel branco ele
     da 1,67:1 na ponta verde, ou seja o texto some. E some justamente no
     preco e na palavra-chave do H1, que sao as duas coisas que a pagina
     existe para mostrar. Por isso sao dois tokens e nao um: escurecer o
     --grad consertaria o texto e arruinaria o botao, que tem tinta escura. */
  --grad-texto:var(--grad);
  --largura:74rem;
  /* Coluna de leitura. Em rem e nao em `ch` de proposito: `ch` e relativo
     a fonte do PROPRIO elemento, entao 68ch num H2 de 40px da ~1360px e o
     titulo nunca alinha com o paragrafo que ele encabeca. */
  --prosa:43rem;
  --raio:14px;
}

/* No tema claro o degrade continua, mas o texto sobre papel precisa do
   verde escuro: #00E58C em branco da 1,8:1 e some. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --fundo:#FFFFFF; --painel:#F7F9FC; --painel2:#EEF2F7; --linha:#E2E8F0;
    --tinta:#0B0F14; --texto:#3E4A5B; --fraca:#64748B;
    --marca-texto:#00794A;
  /* verde e azul da marca, escurecidos ate passarem em AA sobre branco:
     5,91:1 na ponta verde, 6,82:1 na azul, 6,56:1 no meio do degrade. */
  --grad-texto:linear-gradient(90deg,#00734A,#0059B3);
  }
}
:root[data-theme="light"]{
  --fundo:#FFFFFF; --painel:#F7F9FC; --painel2:#EEF2F7; --linha:#E2E8F0;
  --tinta:#0B0F14; --texto:#3E4A5B; --fraca:#64748B; --marca-texto:#00794A;
  /* verde e azul da marca, escurecidos ate passarem em AA sobre branco:
     5,91:1 na ponta verde, 6,82:1 na azul, 6,56:1 no meio do degrade. */
  --grad-texto:linear-gradient(90deg,#00734A,#0059B3);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
/* O overflow-x:hidden do body esconde o sintoma; o max-width aqui impede a
   causa. Os dois juntos: elemento largo demais encolhe em vez de criar barra
   de rolagem horizontal, que o briefing proibe a 375px. */
img,svg,table,pre,iframe{max-width:100%}
body{
  margin:0; background:var(--fundo); color:var(--texto); overflow-x:hidden;
  font:400 16px/1.7 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.env{max-width:var(--largura); margin:0 auto; padding:0 20px}
a{color:var(--marca-texto); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* ---------------------------------------------------------- tipografia -- */
h1,h2,h3,h4{color:var(--tinta); font-weight:700; letter-spacing:-.03em; margin:0}
h1{font-size:clamp(2.2rem,6vw,4.1rem); line-height:1.04; margin:0 0 18px}
h2{font-size:clamp(1.6rem,3.6vw,2.5rem); line-height:1.12; margin:0 0 16px}
h3{font-size:1.08rem; line-height:1.35; margin:0 0 6px; letter-spacing:-.015em}
p{margin:0 0 15px}
.grad{background:var(--grad-texto); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent}

/* ------------------------------------------------------------- topo ----- */
header.topo{position:sticky; top:0; z-index:50; backdrop-filter:saturate(160%) blur(12px);
  background:color-mix(in srgb, var(--fundo) 82%, transparent);
  border-bottom:1px solid var(--linha)}
header.topo .env{display:flex; align-items:center; gap:14px; height:64px}
.marca{display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px;
  letter-spacing:-.04em; color:var(--tinta)}
.marca:hover{text-decoration:none}
.marca .mk{border-radius:7px; flex:none}
/* O menu so aparece quando ha largura para ele E para os botoes. A 900px
   ele cabia sozinho mas empurrava o bloco da direita, que quebrava em duas
   linhas e atropelava o logotipo. 1120 e a largura em que os dois convivem. */
/* `align-items:center` NAO E ENFEITE: sem ele o "Buy" cai 8px abaixo dos
   outros quatro itens do menu.
   Medido no ar em 24/09/2026, base do texto em pixels:
     Buy 40,5  |  All services 32,5  |  How it works 32,5  |  Reseller 32,5
   O "Buy" e um <button> (abre o mega-menu) e os demais sao <a>. O botao tem
   `padding:8px 0` para ganhar area de clique; os links nao tem padding
   nenhum. Num flex sem alinhamento declarado o padrao e `stretch`: os cinco
   viram caixas de 41px, e dentro delas o texto do link encosta no TOPO
   enquanto o do botao desce os 8px do proprio padding.
   Com `center` os cinco textos ficam em 40,5 e o botao mantem os 41px de
   alvo. Tirar o padding do botao alinharia igual e custaria a area de clique,
   que e o que nao se quer num gatilho de menu. */
.topo nav{display:none; align-items:center; margin-left:18px; gap:22px;
  font-size:14.5px; font-weight:500; white-space:nowrap}
.topo nav a{color:var(--fraca)}
.topo nav a:hover{color:var(--tinta); text-decoration:none}
@media(min-width:1120px){.topo nav{display:flex}}
/* CHOQUE DE NOME, e custou caro: `.fim` era ao mesmo tempo o grupo de botoes
   do cabecalho e o cartao de CTA no pe da pagina. O cartao tem fundo, borda,
   raio de 20px e padding de 44px - e tudo isso caiu no cabecalho, que virou
   um bloco escuro flutuante de 128px dentro de uma barra de 65px, em TODA
   pagina do site. O grupo do topo passa a se chamar `.topo-acoes`. */
.topo .topo-acoes{margin-left:auto; display:flex; align-items:center; gap:9px;
  white-space:nowrap; min-width:0}
/* Em tela estreita os dois botoes somavam 255px num viewport de 288 e
   empurravam a pagina para fora - scroll horizontal, que o briefing proibe.
   Abaixo de 520px sobra so o "Create account", que e a acao que importa;
   quem ja tem conta chega pelo /login do rodape. */
.topo .topo-acoes .btn-2{display:none}
@media(min-width:520px){.topo .topo-acoes .btn-2{display:inline-flex}}
/* A 375px o "Create account" sobrava 50px para fora e ficava cortado. Nao ha
   scroll porque o body esconde, mas botao cortado e pior que botao pequeno.
   Abaixo de 520 ele encolhe e o rotulo vira "Sign up", que cabe.

   A ORDEM IMPORTA: a regra base vem ANTES do media query. Escrita depois,
   com a mesma especificidade, ela vencia por ser a ultima - e os dois
   rotulos ficavam escondidos, deixando um botao vazio no topo. */
.topo .topo-acoes .btn-1 .curto{display:none}
@media(max-width:519px){
  .topo .topo-acoes .btn{padding:8px 12px; font-size:13px}
  .topo .topo-acoes .btn-1 .longo{display:none}
  .topo .topo-acoes .btn-1 .curto{display:inline}
  .marca{font-size:17px; gap:8px}
}
/* O aviso de moeda e informativo, nao acao: no celular ele sai do cabecalho
   para o "Sign in" e o "Create account" caberem sem espremer. */
#hd-moeda{display:none}
@media(min-width:720px){#hd-moeda{display:inline-flex}}
/* E o atributo `hidden` que decide se este botao existe: ele nasce escondido
   e so aparece quando a conversao de moeda acontece de verdade. Mas `hidden`
   e display:none da folha do navegador, e a regra acima o atropelava - em
   toda tela de 720px para cima o aviso aparecia com o texto de fabrica,
   "Showing USD - switch to USD", oferecendo trocar para a moeda que ja
   estava sendo mostrada. Especificidade resolve: [hidden] soma um atributo
   e ganha das duas regras acima sem precisar de !important. */
#hd-moeda[hidden]{display:none}
/* O cabecalho e sticky: sem esta reserva o "How it works" do menu rola o
   titulo para debaixo da propria barra, e a pessoa cai numa pagina que
   comeca no meio de um paragrafo. 106px e a altura da barra no celular,
   onde ela e mais alta por causa da fileira de redes. */
.bloco[id]{scroll-margin-top:118px}
@media(min-width:1120px){.bloco[id]{scroll-margin-top:80px}}
.moeda{border:1px solid var(--linha); background:var(--painel); color:var(--texto);
  border-radius:9px; padding:7px 10px; font:inherit; font-size:13.5px}

/* ------------------------------------------------------------ botoes ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:15px; padding:13px 22px; border-radius:11px;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .12s ease, filter .12s ease}
.btn:hover{text-decoration:none; transform:translateY(-1px); filter:brightness(1.07)}
.btn-1{background:var(--grad); color:#04140A}
.btn-2{background:var(--painel); color:var(--tinta); border-color:var(--linha)}
.btn.mini{padding:9px 15px; font-size:13.5px; border-radius:9px}
.btn.larga{width:100%}

/* ------------------------------------------------------------- heroi ---- */
.heroi{position:relative; overflow:hidden; padding:74px 0 52px; text-align:center;
  border-bottom:1px solid var(--linha)}
.heroi::before{content:""; position:absolute; inset:-20% -10% auto -10%; height:150%;
  pointer-events:none;
  background:
    radial-gradient(55% 50% at 18% 8%, color-mix(in srgb, var(--a) 22%, transparent), transparent 60%),
    radial-gradient(50% 45% at 85% 18%, color-mix(in srgb, var(--b) 22%, transparent), transparent 60%);
}
.heroi > *{position:relative}
.heroi .chamada{font-size:clamp(1.02rem,2vw,1.18rem); max-width:44rem; margin:0 auto 26px;
  color:var(--texto)}
.gira{font-size:clamp(1.3rem,3.2vw,2rem); font-weight:700; color:var(--fraca);
  letter-spacing:-.02em; margin:-6px 0 18px}
.gira .grad{transition:opacity .18s ease; display:inline-block; min-width:5ch}
.heroi .botoes{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:0 0 22px}
.pilula{display:inline-flex; align-items:center; gap:9px; margin:0 0 22px;
  padding:7px 16px; border-radius:999px; font-size:12.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--tinta);
  background:var(--painel); border:1px solid var(--linha)}
.pilula i{width:6px; height:6px; border-radius:50%; background:var(--grad); flex:none}
.trilha{font-size:13px; color:var(--fraca); margin:0 0 14px}
.trilha a{color:var(--fraca)}
.trilha i{font-style:normal; margin:0 8px; opacity:.5}

/* ------------------------------------------------------------- chips ---- */
.chips{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin:0; padding:0; list-style:none}
.chips li{display:flex; align-items:center; gap:8px; padding:9px 15px; border-radius:999px;
  font-size:13.5px; font-weight:600; color:var(--texto);
  background:var(--painel); border:1px solid var(--linha)}
.chips .ic{color:var(--marca-texto); flex:none}

/* ------------------------------------------------------------ secoes ---- */
section.bloco{padding:56px 0; border-bottom:1px solid var(--linha)}
section.bloco:last-of-type{border-bottom:0}
.centro{text-align:center; max-width:46rem; margin:0 auto 34px}
.selo{display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:999px;
  font-size:13px; font-weight:700; margin:0 0 18px;
  color:var(--marca-texto); background:color-mix(in srgb, var(--marca) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--marca) 34%, transparent)}

/* ---------------------------------------------------------- cartoes ----- */
.grade{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:640px){.grade{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.grade-3{grid-template-columns:repeat(3,1fr)}}
.cartao{background:var(--painel); border:1px solid var(--linha); border-radius:var(--raio);
  padding:22px; transition:border-color .15s ease, transform .15s ease}
.cartao:hover{border-color:color-mix(in srgb, var(--marca) 40%, var(--linha)); transform:translateY(-2px)}
.cartao .ico{width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  margin:0 0 14px; background:color-mix(in srgb, var(--marca) 13%, transparent);
  color:var(--marca-texto); border:1px solid color-mix(in srgb, var(--marca) 28%, transparent)}
.cartao p:last-child{margin-bottom:0}
.cartao ul{margin:10px 0 0; padding-left:18px}
.cartao li{margin:6px 0}

/* --------------------------------------------- cartoes de quantidade ---- */
.precos{display:grid; gap:14px; grid-template-columns:1fr; margin:26px 0 16px; padding:0; list-style:none}
@media(min-width:560px){.precos{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.precos{grid-template-columns:repeat(3,1fr)}}
.preco{position:relative; background:var(--painel); border:1px solid var(--linha);
  border-radius:var(--raio); padding:20px; display:flex; flex-direction:column; gap:6px;
  transition:border-color .15s ease, transform .15s ease}
.preco:hover{border-color:color-mix(in srgb, var(--marca) 45%, var(--linha)); transform:translateY(-2px)}
.preco.destaque{border-color:color-mix(in srgb, var(--marca) 55%, var(--linha))}
.preco.destaque::after{content:"Most picked"; position:absolute; top:-10px; right:16px;
  background:var(--grad); color:#04140A; font-size:11px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px}
.preco .q{font-size:1.9rem; font-weight:800; color:var(--tinta); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; line-height:1}
.preco .u{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--fraca);
  font-weight:700}
.preco .v{font-size:1.32rem; font-weight:800; font-variant-numeric:tabular-nums;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent}
.preco .r{font-size:13.5px; color:var(--fraca); flex:1; margin:4px 0 12px}
.unidade{font-size:1.1rem; font-weight:700; color:var(--tinta); margin:0 0 6px}
.nota{font-size:14px; color:var(--fraca); margin:0 0 6px}

/* ------------------------------------------------------------ tabela ---- */
.tabela{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:22px 0 8px;
  border:1px solid var(--linha); border-radius:var(--raio); background:var(--painel)}
table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:38rem}
th,td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--linha); white-space:nowrap}
tr:last-child td{border-bottom:0}
th{color:var(--fraca); font-weight:700; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.07em; background:var(--painel2)}
td{color:var(--texto)}
td.price{font-variant-numeric:tabular-nums; font-weight:800; color:var(--marca-texto)}

/* ------------------------------------------------------------ passos ---- */
.passos{list-style:none; padding:0; margin:22px 0; counter-reset:p; display:grid; gap:16px}
@media(min-width:760px){.passos{grid-template-columns:1fr 1fr}}
.passos li{counter-increment:p; position:relative; padding:20px 20px 20px 62px;
  background:var(--painel); border:1px solid var(--linha); border-radius:var(--raio)}
.passos li::before{content:counter(p); position:absolute; left:20px; top:20px;
  width:30px; height:30px; border-radius:9px; background:var(--grad); color:#04140A;
  display:grid; place-items:center; font-size:14px; font-weight:800}
.passos strong{display:block; color:var(--tinta); margin:0 0 4px; font-size:1.02rem}

/* ------------------------------------------------------------- ensaio --- */
/* Prosa longa em duas colunas - ver ensaio() no renderizador. Abaixo de
   1060px vira uma coluna so, que e o certo: no celular nao ha faixa
   sobrando para o titulo morar. */
.ensaio{display:grid; gap:12px; margin:0 0 48px}
.ensaio:last-child{margin-bottom:0}
.ensaio-t h2{margin:0; position:relative; padding-top:18px}
.ensaio-t h2::before{content:""; position:absolute; top:0; left:0; width:40px;
  height:3px; border-radius:3px; background:var(--grad)}
.ensaio-c{max-width:68ch}
.ensaio-c p{margin:0 0 16px}
.ensaio-c p:last-child{margin-bottom:0}
/* O primeiro paragrafo e a entrada do assunto: maior e mais claro. E o que
   separa "parede" de "texto editado" sem cortar uma palavra. */
.ensaio-c > p:first-child{font-size:1.09rem; line-height:1.62;
  color:var(--tinta); opacity:.93}
@media(min-width:1060px){
  .ensaio{grid-template-columns:19rem minmax(0,1fr); gap:0 52px; margin-bottom:56px}
  /* Grudado no topo enquanto a secao rola. O 96px e a barra fixa (64px) mais
     ar; sem isso o titulo encosta no cabecalho e os dois viram uma faixa so. */
  .ensaio-t h2{position:sticky; top:96px;
    font-size:clamp(1.45rem,2.1vw,1.95rem); line-height:1.15}
}

/* --------------------------------------------------------- respiro ----- */
/* Secoes alternadas. Doze blocos seguidos com o mesmo fundo e uma linha de
   1px entre eles nao dao apoio nenhum ao olho em 13.000px de rolagem; com a
   faixa alternada o leitor percebe onde um assunto acaba mesmo passando
   rapido. A conta do color-mix mantem o contraste do texto intacto - e so
   uma casca mais clara que o fundo, nao um tema diferente. */
main > section.bloco:nth-of-type(even){
  background:color-mix(in srgb, var(--painel) 62%, var(--fundo));
  border-bottom-color:transparent}
/* Dentro da faixa, o cartao sobe um degrau. A 42% a faixa era invisivel (4
   unidades de diferenca do fundo); subindo para 62% ela aparece, mas encosta
   na cor do proprio cartao e as caixas somem dentro dela. Os dois valores
   andam juntos: faixa mais clara exige cartao mais claro ainda. */
main > section.bloco:nth-of-type(even) .cartao,
main > section.bloco:nth-of-type(even) .caixa,
main > section.bloco:nth-of-type(even) .preco,
main > section.bloco:nth-of-type(even) details,
main > section.bloco:nth-of-type(even) .cruz li,
main > section.bloco:nth-of-type(even) .passos li{background:var(--painel2)}

/* ----------------------------------------------------------- acordeao --- */
details{border:1px solid var(--linha); border-radius:var(--raio); background:var(--painel);
  padding:0; margin:0 0 10px; overflow:hidden}
details summary{cursor:pointer; font-weight:600; color:var(--tinta); list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:center;
  padding:16px 20px; font-size:15.5px}
details summary:hover{background:color-mix(in srgb, var(--painel2) 60%, transparent)}
/* A objecao leva H3 dentro do <summary> para continuar sendo titulo no HTML.
   Sem isto ele entra com o tamanho de titulo e quebra a linha do acordeao. */
details summary h3{margin:0; font-size:inherit; font-weight:inherit;
  letter-spacing:-.01em; color:inherit}
details[open]{border-color:color-mix(in srgb, var(--marca) 30%, var(--linha))}
details[open] summary{color:var(--tinta)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; color:var(--marca-texto); font-weight:700;
  font-size:20px; line-height:1; flex:none}
details[open] summary::after{content:"\2013"}
details .corpo{padding:0 20px 18px}
details p{margin:0 0 10px}
details p:last-child{margin-bottom:0}

/* --------------------------------------------------------- caixa dupla -- */
.caixa{background:var(--painel); border:1px solid var(--linha); border-radius:var(--raio); padding:20px 22px}
.caixa h3{margin-top:0}
.caixa ul{margin:10px 0 0; padding-left:18px}
.caixa li{margin:7px 0}
.caixa.ok{border-color:color-mix(in srgb, var(--marca) 38%, var(--linha))}
.caixa.nao{border-color:rgba(248,113,113,.34)}

/* ------------------------------------------------------------- cruz ----- */
.cruz{list-style:none; padding:0; margin:18px 0; display:grid; gap:12px}
@media(min-width:760px){.cruz{grid-template-columns:1fr 1fr}}
.cruz li{background:var(--painel); border:1px solid var(--linha); border-radius:var(--raio);
  padding:16px 18px}
.cruz a{font-weight:700; color:var(--tinta)}
.cruz a:hover{color:var(--marca-texto); text-decoration:none}
.cruz span{display:block; font-size:14px; color:var(--fraca); margin-top:4px}

/* -------------------------------------------------------------- fim ----- */
.fim{position:relative; overflow:hidden; text-align:center; margin:44px 0 0;
  padding:44px 24px; border:1px solid var(--linha); border-radius:20px; background:var(--painel)}
.fim::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 80% at 50% 0%, color-mix(in srgb, var(--a) 16%, transparent), transparent 70%)}
.fim > *{position:relative}
.fim h2{margin-bottom:10px}

/* ------------------------------------------------------------ rodape ---- */
footer.rodape{border-top:1px solid var(--linha); margin-top:56px; padding:34px 0 48px;
  color:var(--fraca); font-size:14px; background:var(--painel)}
.moedas{display:flex; flex-wrap:wrap; gap:9px; margin:12px 0 20px; padding:0; list-style:none}
.moedas li{border:1px solid var(--linha); background:var(--fundo); border-radius:9px;
  padding:7px 13px; font-size:12.5px; font-weight:800; color:var(--tinta); letter-spacing:.03em}
.rodape-links{display:flex; flex-wrap:wrap; gap:18px; margin:0 0 16px; padding:0; list-style:none}
.rodape-links a{color:var(--fraca)}

/* ------------------------------------------ telas de conta (centradas) -- */
/* Login e cadastro ficavam colados na esquerda de uma coluna de 74rem: o
   formulario tem 26rem e sobrava meia tela vazia a direita. Aqui a coluna
   inteira encolhe e centraliza - o campo continua alinhado a esquerda dentro
   dela, que e como se preenche formulario. */
.painel.centrado{max-width:27rem; padding-top:14px; padding-bottom:56px}
.painel.centrado h1{font-size:clamp(1.9rem,5vw,2.5rem); text-align:center;
  margin:22px 0 10px}
.painel.centrado > .chamada{text-align:center; margin-bottom:24px}
.painel.centrado .forma{max-width:none; margin:0}
.painel.centrado > p{text-align:center; font-size:14.5px; margin:14px 0 0}
.painel.centrado .ou{margin:20px 0}
.painel.centrado .erros{text-align:left}

/* ---------------------------------------------------------- admin ------- */
.abas-admin{display:flex; gap:6px; flex-wrap:wrap; margin:22px 0 6px}
.abas-admin a{padding:8px 15px; border-radius:999px; border:1px solid var(--linha);
  background:var(--painel); color:var(--fraca); font-size:13.5px; font-weight:600}
.abas-admin a.on{color:#04140A; background:var(--grad); border-color:transparent}
.abas-admin a:hover{text-decoration:none}
form.inline{display:inline-flex; gap:5px; align-items:center; margin:0 6px 4px 0}
form.inline input[type=text]{width:6.5rem; padding:6px 9px; font-size:13px}
form.inline select{width:auto; padding:6px 9px; font-size:13px}
.busca{display:flex; gap:8px; margin:18px 0; max-width:30rem}
.filtros{font-size:13.5px; color:var(--fraca); margin:14px 0}
tr.alerta td{background:rgba(248,113,113,.07)}
tr.alerta td:first-child{box-shadow:inset 3px 0 0 rgba(248,113,113,.6)}
.num p.dica{margin:6px 0 0; font-size:12px}

/* --------------------------------------------- redes na home ----------- */
.redes-h{display:flex; flex-wrap:wrap; gap:8px 10px; justify-content:center;
  list-style:none; padding:0; margin:22px 0 0}
.redes-h a{display:inline-block; padding:8px 15px; border-radius:999px;
  border:1px solid var(--linha); background:var(--painel); color:var(--texto);
  font-size:13.5px; font-weight:600}
.redes-h a:hover{border-color:color-mix(in srgb, var(--marca) 45%, var(--linha));
  color:var(--tinta); text-decoration:none}

/* --------------------------------------------- opcoes de pacote -------- */
.opcoes{display:grid; gap:10px}
.opc{display:block; background:var(--painel); border:1px solid var(--linha);
  border-radius:12px; padding:14px 16px; cursor:pointer}
.opc:hover{border-color:color-mix(in srgb, var(--marca) 40%, var(--linha))}
.opc input{margin-right:10px}
.opc-t{display:inline-flex; align-items:baseline; gap:10px}
.opc-t b{color:var(--tinta); font-size:1rem}
.opc-t em{font-style:normal; color:var(--marca-texto); font-weight:700;
  font-variant-numeric:tabular-nums}
.opc-d{display:block; font-size:13px; color:var(--fraca); margin-top:5px;
  padding-left:26px}
td.quebra{white-space:normal; word-break:break-all; max-width:18rem; font-size:13px}

/* ------------------------------------------------ entrar com o Google -- */
/* ------------------------------------------ tela de pedido ------------ */
/* Estas regras moravam num <style> dentro de paginas/pedido_novo.php. Vieram
   para ca quando a tela de saldo passou a usar as mesmas classes (.pd-abas,
   .pd-bloco, .pd-cab, .pd-num, .pd-linha): CSS inline numa tela nao alcanca a
   outra, e duplicar e garantir que as duas divirjam na primeira correcao. */
.pd-abas{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.5rem}
.pd-abas a{padding:.55rem 1rem;border-radius:99px;border:1px solid var(--linha);
  text-decoration:none;font-size:.92rem}
.pd-abas a.on{background:var(--marca-forte);border-color:var(--marca-forte);color:#04140A;font-weight:600}
.pd-como{border:1px solid var(--linha);border-radius:14px;padding:1.1rem 1.2rem;margin:0 0 1.6rem}
.pd-como h2{font-size:1rem;margin:0 0 .3rem}
.pd-passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.7rem;margin-top:.9rem}
.pd-passo{border:1px solid var(--linha);border-radius:11px;padding:.75rem .85rem}
.pd-passo b{display:block;font-size:.88rem;margin:.25rem 0 .2rem}
.pd-passo i{font-style:normal;font-size:.72rem;opacity:.5;letter-spacing:.06em}
.pd-passo p{margin:0;font-size:.8rem;opacity:.72;line-height:1.45}
.pd-bloco{border:1px solid var(--linha);border-radius:14px;padding:1.1rem 1.2rem;margin:0 0 1.1rem}
.pd-bloco.off{opacity:.45}
.pd-cab{display:flex;align-items:center;gap:.6rem;margin:0 0 .9rem}
.pd-num{width:1.6rem;height:1.6rem;border-radius:99px;background:var(--marca-forte);color:#04140A;
  display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:0 0 auto}
.pd-cab h2{font-size:1rem;margin:0;flex:1}
.pd-cab .cont{font-size:.78rem;opacity:.55}
.pd-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.55rem}
.pd-grade button{display:flex;align-items:center;gap:.55rem;
  padding:.7rem .8rem;border-radius:11px;border:1px solid var(--linha);
  background:transparent;color:inherit;cursor:pointer;font:inherit;text-align:left}
.pd-grade button:hover{border-color:var(--marca-forte)}
.pd-grade button.on{border-color:var(--marca-forte);background:color-mix(in srgb, var(--marca) 12%, transparent)}
.pd-grade button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;text-align:left}
.pd-grade button em{font-style:normal;font-size:.75rem;opacity:.5;flex:none}
.rede-ic{flex:none}
/* Selecionada, a rede ganha o proprio icone em destaque e a borda da marca. */
.pd-grade button.on .rede-ic{transform:scale(1.08)}
.pd-busca{width:100%;margin-top:.7rem;padding:.6rem .8rem;border-radius:10px;
  border:1px solid var(--linha);background:transparent;color:inherit;font:inherit}
.pd-pac{display:flex;gap:.7rem;align-items:flex-start;padding:.8rem .9rem;border-radius:11px;
  border:1px solid var(--linha);cursor:pointer;margin-bottom:.5rem}
.pd-pac:hover{border-color:var(--marca-forte)}
.pd-pac.on{border-color:var(--marca-forte);background:color-mix(in srgb, var(--marca) 12%, transparent)}
.pd-pac input{margin-top:.25rem}
.pd-pac b{display:block}
.pd-pac .preco{color:var(--marca-forte);font-weight:600}
.pd-pac small{display:block;opacity:.6;font-size:.78rem;margin-top:.2rem}
.pd-vazio{opacity:.6;font-size:.88rem;margin:0}
.pd-resumo{border:1px solid var(--linha);border-radius:14px;padding:1.1rem 1.2rem;
  margin:1.4rem 0 0;background:rgba(255,255,255,.02)}
.pd-resumo h2{font-size:1rem;margin:0 0 .8rem}
.pd-linha{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;font-size:.9rem;
  border-bottom:1px solid var(--linha)}
.pd-linha:last-of-type{border-bottom:0}
.pd-linha span:first-child{opacity:.6}
.pd-linha span:last-child{text-align:right}
.pd-total{font-size:1.2rem;font-weight:700;color:var(--marca-forte)}
/* Os passos ocupam a LARGURA INTEIRA e o resumo desce para baixo, como na
   Acelera. Antes era `1fr 320px`: sobravam ~560px para o passo 1 e a grade
   de dezesseis redes cabia em tres colunas, virando lista vertical. */
/* A CAUSA RAIZ do aperto, e nao era a coluna do resumo: este formulario tem
   class="forma larga", e `.forma.larga` do estilo do site crava max-width de
   40rem. Toda a tela de pedido vivia dentro de 640px - por isso a grade de
   dezesseis redes saia em tres colunas, virando lista. `.forma` existe para
   formulario de login e de conta, onde 40rem e o certo; aqui a tela E o
   formulario. Seletor com o id para nao afrouxar os outros. */
form#pd-form.forma.larga{max-width:none}
.pd-resumo{max-width:34rem;margin-left:auto;margin-right:auto}
@media(min-width:900px){
  .pd-grade{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:.6rem}
}

/* ------------------------------------- trilho do primeiro pedido ------ */
/* Onde o cliente esta e o que falta. Some sozinho depois do primeiro pedido -
   ver trilhoDoCliente() no vista.php. */
.trilho{display:grid; gap:14px; margin:0 0 20px}
.tr-passos{list-style:none; margin:0; padding:0; display:grid; gap:10px;
  grid-template-columns:1fr}
@media(min-width:760px){.tr-passos{grid-template-columns:repeat(3,1fr)}}
.tr-passos li{display:grid; grid-template-columns:auto 1fr; gap:2px 11px;
  align-items:center; padding:13px 15px; border-radius:12px;
  border:1px solid var(--linha); background:var(--painel)}
.tr-passos b{color:var(--tinta); font-size:14.5px}
.tr-nota{grid-column:2; font-size:12.5px; color:var(--fraca); line-height:1.45}
.tr-n{grid-row:span 2; display:grid; place-items:center; width:28px; height:28px;
  border-radius:50%; font-size:13px; font-weight:800;
  border:1px solid var(--linha); color:var(--fraca)}
/* O passo FEITO fica discreto: ele ja nao pede nada. */
.tr-passos li.feito{opacity:.62}
.tr-passos li.feito .tr-n{background:color-mix(in srgb, var(--marca) 22%, transparent);
  border-color:transparent; color:var(--marca-texto)}
/* O passo ATUAL e o unico com a cor da marca. Dois destaques competindo e o
   que faz o cliente reler a barra tentando achar onde ele esta. */
.tr-passos li.agora{border-color:color-mix(in srgb, var(--marca) 55%, var(--linha));
  background:color-mix(in srgb, var(--marca) 8%, var(--painel))}
.tr-passos li.agora .tr-n{background:var(--grad); color:#04140A; border-color:transparent}
.tr-passos li.depois{opacity:.55}

.tr-cartao{border:1px solid color-mix(in srgb, var(--marca) 30%, var(--linha));
  border-radius:var(--raio); padding:20px 22px;
  background:
    radial-gradient(80% 160% at 4% 0%, color-mix(in srgb, var(--a) 12%, transparent), transparent 70%),
    var(--painel)}
.tr-cartao h2{font-size:1.15rem; margin:0 0 7px}
.tr-cartao > p{margin:0 0 14px; font-size:14.5px; color:var(--texto)}
.tr-como{list-style:none; counter-reset:t; margin:0 0 16px; padding:0;
  display:grid; gap:9px}
@media(min-width:900px){.tr-como{grid-template-columns:1fr 1fr}}
.tr-como li{counter-increment:t; position:relative; padding:0 0 0 30px}
.tr-como li::before{content:counter(t,decimal-leading-zero); position:absolute;
  left:0; top:1px; font-size:11px; font-weight:800; color:var(--marca-texto);
  font-variant-numeric:tabular-nums}
.tr-como b{display:block; color:var(--tinta); font-size:13.5px}
.tr-como span{display:block; font-size:12.5px; color:var(--fraca); line-height:1.5}
.tr-pe{margin:12px 0 0; font-size:12.5px; color:var(--fraca)}

/* ------------------------------------ pilula de saldo no topo --------- */
/* Na Acelera o saldo E o botao de adicionar: uma pilula verde no cabecalho
   que mostra o disponivel e leva para a recarga. Aqui eram duas coisas
   soltas, e com a barra lateral o cabecalho tinha ficado so com "Sign out" -
   o numero que o cliente mais olha sumiu do topo. */
.saldo-pilula{display:inline-flex; align-items:center; gap:8px;
  padding:6px 8px 6px 14px; border-radius:999px; font-size:13px; font-weight:600;
  color:#04140A; background:var(--grad); white-space:nowrap}
.saldo-pilula:hover{text-decoration:none; filter:brightness(1.06)}
.saldo-pilula span{opacity:.72; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.06em; font-weight:800}
.saldo-pilula b{font-weight:800; font-variant-numeric:tabular-nums; font-size:14px}
/* O "+" e o que diz que da para CLICAR e somar. Sem ele a pilula parece so
   um rotulo, e o cliente procura o botao de recarga em outro lugar. */
.saldo-pilula i{display:grid; place-items:center; width:20px; height:20px;
  border-radius:50%; background:rgba(4,20,10,.18); font-style:normal;
  font-weight:800; font-size:14px; line-height:1}
@media(max-width:519px){
  .saldo-pilula span{display:none}
  .saldo-pilula{padding:6px 7px 6px 11px}
}

/* ------------------------------------------------ conta --------------- */
/* Dados e senha lado a lado: sao dois formularios curtos e independentes, e
   empilhados eles empurram o resto da tela para baixo de graca. */
.ct-colunas{display:grid; gap:14px; grid-template-columns:1fr; margin:0 0 14px}
@media(min-width:900px){.ct-colunas{grid-template-columns:1fr 1fr; align-items:start}}
.ct-colunas .forma{max-width:none; margin:0}
.ct-colunas .pd-bloco{margin:0}
/* Campo desligado precisa PARECER desligado, senao o cliente tenta digitar e
   acha que a tela travou. */
.campo input:disabled{opacity:.6; cursor:not-allowed;
  background:color-mix(in srgb, var(--painel2) 60%, transparent)}

/* ------------------------------------------ adicionar saldo ----------- */
/* A forma da tela da Acelera: saldo em destaque no topo, duas colunas, e o
   resumo grudado a direita. */
.sd-saldo{display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin:0 0 20px; padding:20px 24px;
  border:1px solid var(--linha); border-radius:var(--raio);
  background:
    radial-gradient(70% 140% at 12% 0%, color-mix(in srgb, var(--a) 14%, transparent), transparent 70%),
    var(--painel)}
.sd-saldo span{font-size:12px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--fraca); font-weight:700}
.sd-saldo b{font-size:clamp(1.7rem,4vw,2.4rem); font-weight:800;
  letter-spacing:-.03em; color:var(--tinta); font-variant-numeric:tabular-nums}

.sd-colunas{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:980px){
  .sd-colunas{grid-template-columns:minmax(0,1fr) 20rem; align-items:start}
  .sd-resumo{position:sticky; top:88px}
}
.sd-resumo{border:1px solid var(--linha); border-radius:var(--raio);
  background:var(--painel); padding:18px 20px}
.sd-resumo h2{font-size:1rem; margin:0 0 12px}

/* Cada moeda e um cartao clicavel. O radio fica escondido mas ATIVO: e ele
   que carrega o valor e o minimo, e some-lo do teclado quebraria a tela para
   quem nao usa mouse. */
.sd-moedas{display:grid; gap:10px; grid-template-columns:1fr}
@media(min-width:620px){.sd-moedas{grid-template-columns:1fr 1fr}}
.sd-moeda{position:relative; display:grid; gap:2px; cursor:pointer;
  padding:14px 16px; border-radius:12px; border:1px solid var(--linha);
  background:var(--painel2)}
.sd-moeda input{position:absolute; opacity:0; width:0; height:0}
.sd-moeda:hover{border-color:color-mix(in srgb, var(--marca) 40%, var(--linha))}
.sd-moeda.on{border-color:var(--marca-forte);
  background:color-mix(in srgb, var(--marca) 12%, transparent)}
.sd-moeda input:focus-visible ~ .sd-sigla{outline:2px solid var(--marca-forte);
  outline-offset:3px; border-radius:4px}
.sd-sigla{font-weight:800; color:var(--tinta); font-size:1.02rem}
.sd-nome{font-size:13px; color:var(--texto)}
.sd-rede{font-size:11.5px; color:var(--marca-texto); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em}
.sd-nota{font-size:12.5px; color:var(--fraca); line-height:1.45; margin-top:3px}

.sd-campo{display:flex; align-items:center; gap:8px; margin:14px 0 12px;
  padding:10px 16px; border-radius:12px; border:1px solid var(--linha);
  background:var(--painel2)}
.sd-campo span{font-size:1.5rem; font-weight:800; color:var(--fraca)}
.sd-campo input{flex:1; min-width:0; border:0; background:none; padding:0;
  font:inherit; font-size:1.9rem; font-weight:800; color:var(--tinta);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.sd-campo input:focus{outline:none}
.sd-campo:focus-within{border-color:var(--marca-forte)}
/* A seta do number rouba largura e ninguem usa para escolher um valor. */
.sd-campo input::-webkit-outer-spin-button,
.sd-campo input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.sd-campo input[type=number]{-moz-appearance:textfield}

.sd-chips{display:flex; flex-wrap:wrap; gap:8px}
.sd-chip{padding:8px 16px; border-radius:999px; border:1px solid var(--linha);
  background:var(--painel2); color:var(--texto); font:inherit; font-size:14px;
  font-weight:700; cursor:pointer; font-variant-numeric:tabular-nums}
.sd-chip:hover{color:var(--tinta); border-color:color-mix(in srgb, var(--marca) 45%, var(--linha))}
.sd-chip.on{background:var(--grad); color:#04140A; border-color:transparent}
.sd-erro{margin:10px 0 0; font-size:13.5px; color:#F87171; font-weight:600}

.sd-destaque{display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin:12px 0; padding:12px 14px; border-radius:11px;
  background:color-mix(in srgb, var(--marca) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--marca) 40%, var(--linha))}
.sd-destaque span{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--fraca); font-weight:700}
.sd-destaque b{font-size:1.3rem; font-weight:800; color:var(--marca-texto);
  font-variant-numeric:tabular-nums}

/* No lugar do botao, enquanto nao ha como cobrar. Ver o topo de saldo.php. */
.sd-fechado{margin-top:14px; padding:14px 16px; border-radius:11px;
  border:1px dashed var(--linha); background:var(--painel2)}
.sd-fechado b{display:block; color:var(--tinta); margin-bottom:5px; font-size:14.5px}
.sd-fechado p{margin:0; font-size:13.5px; color:var(--fraca); line-height:1.55}

/* --------------------------------------- catalogo e pagamentos --------- */
.busca-cat{width:100%; max-width:34rem; margin:0 0 20px; padding:11px 14px;
  border-radius:11px; font:inherit; font-size:15px;
  background:var(--painel); border:1px solid var(--linha); color:var(--tinta)}
.busca-cat:focus{outline:2px solid var(--marca-forte); outline-offset:1px}
.cat-rede{border:1px solid var(--linha); border-radius:var(--raio);
  background:var(--painel); margin:0 0 10px; overflow:hidden}
.cat-rede > summary{cursor:pointer; list-style:none; display:flex;
  align-items:center; gap:12px; padding:14px 18px}
.cat-rede > summary::-webkit-details-marker{display:none}
.cat-rede > summary::after{content:"+"; margin-left:auto; font-size:19px;
  font-weight:700; color:var(--marca-texto); line-height:1}
.cat-rede[open] > summary::after{content:"3"}
.cat-rede > summary:hover{background:var(--painel2)}
.cat-rede h3{margin:0; font-size:1.02rem}
.cat-n{font-size:12.5px; color:var(--fraca); font-weight:600}
.cat-rede .tabela{margin:0; border-top:1px solid var(--linha)}
.cat-nome b{display:block; color:var(--tinta)}
.cat-cat{display:block; font-size:12px; color:var(--fraca); margin-top:2px}
.cat-sem{color:var(--fraca)}
/* A coluna do nome nao pode ficar numa linha so: o nome do servico e longo e
   empurraria o preco para fora da tela no celular. */
.cat-nome{white-space:normal; min-width:13rem}

.pg-chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px}
.pg-chips a{padding:7px 14px; border-radius:999px; border:1px solid var(--linha);
  background:var(--painel); color:var(--texto); font-size:13.5px; font-weight:600}
.pg-chips a:hover{color:var(--tinta); text-decoration:none}
.pg-chips a.on{background:var(--grad); color:#04140A; border-color:transparent}
.pg-mais{color:var(--marca-texto)}
.pg-menos{color:var(--fraca)}

/* ------------------------------------------------- area do cliente ----- */
/* Barra lateral fixa, espelhando a area logada da Acelera. Antes o painel
   tinha cinco links de texto no topo e nada mais; la o cliente tem saldo,
   pedidos e total gasto sempre a vista, e o menu em grupos com atalho por
   status de pedido. O dado dos tres numeros ja existia e nao aparecia. */
/* O painel e MAIS LARGO que o site. `--largura` (74rem) e medida de leitura,
   certa para landing page e errada para ferramenta: presa nela, a grade de
   dezesseis redes da tela de pedido sai em quatro colunas numa tela de 1900px,
   enquanto a da Acelera sai em dez. Aqui a coluna de texto nao manda. */
.app-grade{display:grid; gap:26px; grid-template-columns:1fr; padding-top:24px;
  max-width:96rem}
@media(min-width:960px){
  .app-grade{grid-template-columns:15.5rem minmax(0,1fr); gap:34px; align-items:start}
  /* Gruda enquanto o conteudo rola. O 88px e a barra do topo mais ar. */
  .lado{position:sticky; top:88px}
}
.lado{display:flex; flex-direction:column; gap:14px}
.lado-quem{display:flex; align-items:center; gap:10px; min-width:0}
.lado-av{display:grid; place-items:center; width:38px; height:38px; flex:none;
  border-radius:11px; background:var(--grad); color:#04140A;
  font-weight:800; font-size:14px; letter-spacing:-.02em}
.lado-nome{font-weight:700; color:var(--tinta); font-size:14.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lado-num{list-style:none; margin:0; padding:14px 16px; display:grid; gap:9px;
  background:var(--painel); border:1px solid var(--linha); border-radius:13px}
.lado-num li{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.lado-num b{font-size:11px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--fraca); font-weight:700}
.lado-num span{font-weight:800; font-variant-numeric:tabular-nums;
  color:var(--tinta); font-size:15px}
.lado-nav{display:flex; flex-direction:column; gap:1px}
.lado-sec{font-size:10.5px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--fraca); font-weight:800; margin:14px 0 5px; padding:0 10px}
.lado-sec:first-child{margin-top:4px}
.lado-nav a{display:block; padding:8px 11px; border-radius:9px; font-size:14px;
  font-weight:600; color:var(--texto)}
.lado-nav a:hover{background:var(--painel); color:var(--tinta); text-decoration:none}
/* O item ativo leva a cor da marca numa barra a esquerda, nao fundo cheio:
   fundo cheio no tema claro apaga o texto. */
.lado-nav a.on{background:var(--painel); color:var(--tinta);
  box-shadow:inset 3px 0 0 var(--marca-forte)}
/* No celular a lateral vira uma tira que rola, acima do conteudo - coluna de
   15rem num viewport de 375 nao sobra largura para o pedido. */
@media(max-width:959px){
  .lado-nav{flex-direction:row; flex-wrap:nowrap; overflow-x:auto; gap:6px;
    scrollbar-width:none; padding-bottom:2px}
  .lado-nav::-webkit-scrollbar{display:none}
  .lado-nav a{flex:none; border:1px solid var(--linha); border-radius:999px;
    padding:7px 13px; font-size:13px; white-space:nowrap}
  .lado-nav a.on{box-shadow:none;
    border-color:color-mix(in srgb, var(--marca) 50%, var(--linha))}
  .lado-sec{display:none}
  .lado-num{grid-template-columns:repeat(3,1fr); gap:0}
  .lado-num li{flex-direction:column; align-items:flex-start; gap:2px}
}

/* --------------------------------------------------- autenticacao ------ */
/* As tres telas publicas do painel (/login, /register, /password). Antes
   eram um formulario nu no meio do preto: sem cartao, sem marca, sem o
   degrade que o resto do site usa. E o cabecalho oferecia "Sign in" DENTRO
   da tela de sign in. */
.autenticar{position:relative; overflow:hidden; display:flex; gap:24px;
  flex-direction:column; align-items:center; justify-content:center;
  min-height:calc(100vh - 210px); padding:46px 20px 54px}
/* O mesmo brilho radial do heroi, para a tela pertencer ao site. */
.autenticar::before{content:""; position:absolute; inset:-40% -10% auto -10%;
  height:170%; pointer-events:none;
  background:
    radial-gradient(58% 48% at 28% 2%, color-mix(in srgb, var(--a) 17%, transparent), transparent 62%),
    radial-gradient(52% 44% at 76% 12%, color-mix(in srgb, var(--b) 15%, transparent), transparent 62%)}
.autenticar > *{position:relative}
.aut-caixa{width:100%; max-width:27rem; background:var(--painel);
  border:1px solid var(--linha); border-radius:18px; padding:30px 28px 26px;
  box-shadow:0 22px 56px rgba(0,0,0,.42)}
.aut-marca{display:flex; align-items:center; justify-content:center; gap:9px;
  font-weight:800; font-size:18px; letter-spacing:-.04em; color:var(--tinta);
  margin:0 0 18px}
.aut-marca:hover{text-decoration:none}
.aut-marca .mk{border-radius:7px; flex:none}
.aut-caixa h1{font-size:clamp(1.5rem,4vw,1.8rem); line-height:1.15;
  text-align:center; margin:0 0 7px}
.aut-sub{text-align:center; color:var(--fraca); font-size:14.5px;
  line-height:1.5; margin:0 0 20px}
/* .forma nasce com 26rem e margem de 26px; dentro do cartao ela e o cartao. */
.aut-caixa .forma{max-width:none; margin:0}
.aut-caixa .campo:last-of-type{margin-bottom:18px}
.aut-caixa .btn.larga{width:100%}
.aut-caixa .erros{margin-bottom:16px}
/* O botao do Google e alternativa de peso igual ao formulario, nao um
   apendice: largura cheia e o logotipo colorido oficial. */
.btn.google{gap:10px; font-weight:600}
.btn.google svg{flex:none}
.aut-pes{margin:16px 0 0; text-align:center; font-size:14px; color:var(--fraca)}
.aut-pes p{margin:7px 0}
.aut-selos{display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  list-style:none; margin:0; padding:0; max-width:31rem}
.aut-selos li{border:1px solid var(--linha); border-radius:999px;
  background:color-mix(in srgb, var(--painel) 70%, transparent);
  padding:7px 14px; font-size:12.5px; color:var(--fraca); font-weight:600}
@media(max-width:519px){
  .autenticar{padding:26px 16px 40px; min-height:0}
  .aut-caixa{padding:24px 20px 22px; border-radius:15px}
}

.ou{display:flex; align-items:center; gap:14px; margin:22px 0; color:var(--fraca);
  font-size:13px}
.ou::before,.ou::after{content:""; flex:1; height:1px; background:var(--linha)}
.btn.google{gap:10px; font-weight:600}
.btn.google svg{flex:none}

/* ============================ PAINEL DO CLIENTE ========================= */
/* Serve as telas logadas. Mesmos tokens do site: o cliente acabou de vir da
   landing e um painel com identidade propria parece outro produto. */
.abas{border-bottom:1px solid var(--linha)}
.abas .env{display:flex; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch}
.abas a{padding:13px 14px; text-decoration:none; color:var(--fraca); font-size:14.5px;
  font-weight:600; white-space:nowrap; border-bottom:2px solid transparent}
.abas a.on{color:var(--tinta); border-bottom-color:var(--marca-forte)}
.painel{padding-bottom:40px}
.usuario{display:flex; align-items:center; gap:10px; font-size:14px}
.usuario a{text-decoration:none}
.saldo{font-weight:700; font-variant-numeric:tabular-nums; color:var(--marca-texto)}
.btn.mini{padding:7px 12px; font-size:13.5px; border-radius:8px}
.sair{margin:0}
.sair button{background:none; border:0; color:var(--fraca); cursor:pointer;
  font:inherit; font-size:14px; padding:6px}
.flash{border-radius:11px; padding:13px 16px; margin:20px 0 0; font-size:14.5px;
  border:1px solid var(--linha); background:var(--painel)}
.flash.ok{border-color:rgba(0,212,126,.4)}
.flash.erro{border-color:rgba(248,113,113,.45)}
.erros{border:1px solid rgba(248,113,113,.45); background:var(--painel);
  border-radius:11px; padding:12px 16px; margin:0 0 18px}
.erros ul{margin:0; padding-left:18px}
.erros li{margin:4px 0; font-size:14.5px}
.forma{max-width:26rem; margin:26px 0}
.forma.larga{max-width:40rem}
.campo{margin:0 0 15px}
.campo label{display:block; font-size:13.5px; font-weight:600; margin:0 0 5px}
.campo .dica{font-size:13px; color:var(--fraca); margin:4px 0 0}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%; padding:11px 13px; border-radius:9px; font:inherit; font-size:15px;
  background:var(--painel); border:1px solid var(--linha); color:var(--tinta)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--marca-forte); outline-offset:1px}
.forma .btn-1{width:100%; text-align:center; border:0; cursor:pointer; font:inherit;
  font-weight:700; font-size:15px; padding:13px 20px; border-radius:10px}
.cartoes-num{display:grid; gap:12px; grid-template-columns:1fr; margin:22px 0}
@media(min-width:620px){.cartoes-num{grid-template-columns:repeat(3,1fr)}}
.num{background:var(--painel); border:1px solid var(--linha); border-radius:13px; padding:16px 18px}
.num b{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--fraca); font-weight:700; margin-bottom:6px}
.num span{font-size:1.7rem; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.tag{display:inline-block; padding:3px 9px; border-radius:999px; font-size:12px;
  font-weight:700; border:1px solid var(--linha); background:var(--painel)}
.t-completed{border-color:rgba(0,212,126,.45); color:var(--marca-texto)}
.t-canceled,.t-refunded{border-color:rgba(248,113,113,.4)}
.vazio{background:var(--painel); border:1px solid var(--linha); border-radius:13px;
  padding:28px 22px; text-align:center; color:var(--fraca); margin:22px 0}
.vazio a{font-weight:700}
.resumo{background:var(--painel); border:1px solid var(--linha); border-radius:12px;
  padding:14px 16px; margin:16px 0; font-size:14.5px}
.resumo dl{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0}
.resumo dt{color:var(--fraca)}
.resumo dd{margin:0; text-align:right; font-variant-numeric:tabular-nums; font-weight:600}
.resumo .total{font-size:1.15rem}

/* ------------------------------------------------------------ artigo ---- */
.artigo{max-width:45rem; margin:0 auto}
.artigo h2{margin:40px 0 12px}
.artigo h3{margin:26px 0 8px; font-size:1.12rem}
.dek{font-size:1.14rem; color:var(--fraca); margin:0 0 24px; line-height:1.6}
.meta{font-size:13px; color:var(--fraca); margin:0 0 22px}
.resposta{border-left:3px solid transparent; border-image:var(--grad) 1;
  padding:2px 0 2px 18px; margin:0 0 28px; font-size:1.06rem; color:var(--tinta)}
.ancora{background:var(--painel); border:1px solid var(--linha); border-radius:var(--raio);
  padding:18px 20px; margin:28px 0}
.ancora b{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--marca-texto); margin-bottom:8px; font-weight:800}
.posts{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:14px}
@media(min-width:760px){.posts{grid-template-columns:1fr 1fr}}
.posts li{background:var(--painel); border:1px solid var(--linha); border-radius:var(--raio);
  padding:20px; transition:border-color .15s ease, transform .15s ease}
.posts li:hover{border-color:color-mix(in srgb, var(--marca) 40%, var(--linha)); transform:translateY(-2px)}
.posts a{font-size:1.1rem; font-weight:700; color:var(--tinta); letter-spacing:-.02em}
.posts a:hover{text-decoration:none}
.posts span{display:block; color:var(--fraca); font-size:14px; margin-top:6px}
.posts em{font-style:normal; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--marca-texto); font-weight:800; display:block; margin-bottom:8px}
.leia{background:var(--painel); border:1px solid var(--linha); border-radius:var(--raio);
  padding:20px 22px; margin:36px 0 0}
.leia h2{margin:0 0 12px; font-size:1.15rem}
.leia ul{margin:0; padding-left:18px}
.leia li{margin:8px 0}

/* =========================================================== acabamento ==
   Tres defeitos MEDIDOS na LP do TikTok, nao opinados:

   1. 134 caracteres por linha de prosa. A medida legivel e 60-75; acima
      disso o olho perde o retorno da linha e a pagina le como documento
      em vez de produto. Foi o maior motivo de "parece amador".
   2. Duas secoes de ~1.700px sem UM elemento visual: 835 e 916 palavras
      em `h2 p p p` repetido. Nada dizia ao leitor onde comeca um assunto.
   3. Zero movimento na pagina inteira.

   O que NAO muda: nenhuma palavra de texto, nenhum dado, nenhuma tabela.
   Isto e tipografia e ritmo, nao reescrita - as LPs ja passaram por auditoria
   de SEO e mexer no conteudo custaria aquela medicao.                      */

/* -- 1. medida de leitura ------------------------------------------------ */
/* So no filho DIRETO de .env: paragrafo dentro de .cartao, .caixa ou .grade
   ja tem a largura da propria caixa, e apertar de novo criaria coluna dupla
   dentro do cartao. `ul:not([class])` poupa .cruz e .passos, que sao grade e
   ol numerada - ali a largura e layout, nao leitura. */
section.bloco > .env > p,
section.bloco > .env > section > p,
section.bloco > .env > ul:not([class]),
section.bloco > .env > ol:not([class]){max-width:var(--prosa)}
section.bloco > .env > p{margin:0 0 18px}

/* O paragrafo logo depois do H2 e a entrada do assunto: maior, mais claro,
   linha um pouco mais solta. E o que separa "parede" de "texto editado" sem
   cortar uma palavra. */
section.bloco > .env > h2 + p,
section.bloco > .env > section > h2 + p{
  font-size:1.1rem; line-height:1.62; color:var(--tinta); opacity:.93;
  max-width:var(--prosa)}

/* -- 2. ancoras dentro da prosa ------------------------------------------ */
/* Cada H2 ganha um tico do degrade da marca acima. Na secao "Why a follower
   count..." sao CINCO H2 dentro de uma secao so: sem marca nenhuma eles
   somem no meio dos paragrafos e o leitor ve um bloco unico de 1.700px. */
section.bloco > .env > h2,
section.bloco > .env > section > h2{position:relative; padding-top:20px}
section.bloco > .env > h2::before,
section.bloco > .env > section > h2::before{
  content:""; position:absolute; top:0; left:0; width:40px; height:3px;
  border-radius:3px; background:var(--grad)}

/* H2 que nao e o primeiro da secao precisa de ar em cima, senao encosta no
   paragrafo anterior e os dois assuntos viram um. */
section.bloco > .env > h2 ~ h2{margin-top:52px}

/* H3 solto na prosa (a secao "Before you buy" tem nove) vira ancora com
   regua da marca. E o que quebra a parede sem inventar conteudo. */
section.bloco > .env > h3{
  margin:36px 0 10px; padding-left:16px; font-size:1.2rem; color:var(--tinta);
  border-left:3px solid transparent; border-image:var(--grad) 1}

/* Alternancia discreta de fundo: com doze secoes empilhadas e a mesma cor, a
   pagina rola como um documento so. 45% do tom do painel e o bastante para o
   olho contar as secoes sem virar listra. */
section.bloco:nth-of-type(even){
  background:color-mix(in srgb, var(--painel) 45%, transparent)}

/* -- 3. movimento -------------------------------------------------------- */
/* .surge e posto pelo JS, NUNCA pelo renderizador. Se nascesse no HTML, um
   JS que falha (ou o robo que nao executa) deixaria a pagina inteira em
   opacity:0 - conteudo invisivel e trafego perdido. Nascendo do JS, sem JS a
   pagina fica simplesmente parada e legivel. */
.surge{opacity:0; transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),
             transform .6s cubic-bezier(.22,.61,.36,1)}
.surge.vis{opacity:1; transform:none}

/* Os filhos de grade entram em cascata: seis cartoes aparecendo juntos e um
   piscar; aparecendo em 60ms de intervalo viram uma sequencia. */
.surge .grade > *,.surge .precos > *,.surge .passos > li{
  opacity:0; transform:translateY(12px);
  transition:opacity .5s ease var(--d,0s), transform .5s ease var(--d,0s)}
.surge.vis .grade > *,.surge.vis .precos > *,.surge.vis .passos > li{
  opacity:1; transform:none}
.surge .grade > :nth-child(2),.surge .precos > :nth-child(2),.surge .passos > :nth-child(2){--d:.06s}
.surge .grade > :nth-child(3),.surge .precos > :nth-child(3),.surge .passos > :nth-child(3){--d:.12s}
.surge .grade > :nth-child(4),.surge .precos > :nth-child(4),.surge .passos > :nth-child(4){--d:.18s}
.surge .grade > :nth-child(5),.surge .precos > :nth-child(5){--d:.24s}
.surge .grade > :nth-child(6),.surge .precos > :nth-child(6){--d:.3s}

/* Cartao e preco ja subiam 2px no hover. Ganham sombra e um fio da marca: e
   o que faz o elemento parecer tocavel antes do toque. */
.cartao,.preco,.caixa,.posts li,.opc{
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease}
.cartao:hover,.preco:hover,.posts li:hover{
  box-shadow:0 12px 32px -14px rgba(0,0,0,.6),
             0 0 0 1px color-mix(in srgb, var(--marca) 22%, transparent)}

/* Link de prosa com sublinhado que cresce em vez de aparecer seco. */
section.bloco > .env > p a{
  text-decoration:none; background-image:var(--grad);
  background-size:100% 1px; background-repeat:no-repeat;
  background-position:0 100%; transition:background-size .25s ease}
section.bloco > .env > p a:hover{text-decoration:none; background-size:100% 2px}

/* Quem pediu menos animacao no sistema recebe a pagina parada, inclusive a
   rolagem suave do html. Sem isto a "melhoria" vira sintoma para quem tem
   sensibilidade vestibular - e o JS ja desiste antes, entao isto e o cinto
   de seguranca do cinto. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .surge,.surge .grade > *,.surge .precos > *,.surge .passos > li{
    opacity:1 !important; transform:none !important; transition:none !important}
}

/* No telefone a medida de leitura ja vem do proprio viewport; o que falta e
   ar entre as secoes, que a 375px ficam coladas. */
@media(max-width:640px){
  section.bloco{padding:40px 0}
  section.bloco > .env > h2 ~ h2{margin-top:40px}
  section.bloco > .env > h3{margin-top:28px}
}

/* ====================================================== largura e centro ==
   Tres medidas, nao gosto:

   1. A coluna e 74rem fixo. Isso e 82% de uma tela de 1440 e 62% de uma de
      1920 - em monitor grande o site fica numa faixa no meio com vao dos
      dois lados. Agora ela cresce em dois degraus.
   2. 65 das 76 LPs tem EXATAMENTE 5 cartoes de preco, e a grade travava em
      3 colunas: fila de 3 + fila de 2, com buraco. Era o que o print
      mostrava.
   3. Com a coluna mais larga, prosa presa a 68ch encostada a esquerda
      deixaria um vao enorme a direita. Entao a prosa passa a ser uma coluna
      centrada; cartao e tabela seguem ocupando a largura toda.            */

/* -- 1. a coluna cresce com a tela --------------------------------------- */
@media(min-width:1500px){ :root{ --largura:84rem } }   /* 1344px */

/* -- 2. os cinco cartoes numa fila so ------------------------------------ */
/* `auto-fit` e nao `repeat(5,1fr)` porque 11 LPs tem 3 ou 4 cartoes: com
   numero fixo elas ficariam com cartao estreito e buraco do lado. O auto-fit
   descarta a trilha vazia e os cartoes que existem esticam para preencher.
   Abaixo de 1180 nao cabe cinco, e ai 3+2 e o menos ruim - nao existe
   arranjo sem sobra para cinco itens fora de 1 ou 5 colunas. */
@media(min-width:1180px){
  .precos{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}
/* `.grade-3` NAO leva auto-fit, e a diferenca e a contagem: o hub tem 9
   cartoes e "Who this is for" tem 6 - os dois dividem por 3 e ja caiam em
   filas cheias. Com auto-fit o hub virou 4+4+1, pior do que estava. Regra
   fixa onde o numero fecha; auto-fit so no preco, onde 5 nunca fecha em 3. */

/* -- 3. a prosa vira coluna centrada ------------------------------------- */
/* h2, h3 e p recebem a MESMA caixa e o mesmo `auto`, entao alinham entre si:
   o titulo nao fica solto a esquerda de um paragrafo centrado. A barra de
   degrade do h2 e `left:0` do proprio h2, logo acompanha a coluna. */
/* Centrar TUDO foi erro meu, e o print mostrou o que a medicao nao pegava:
   o H2 "Choose how many followers you want" ficava centrado enquanto os cinco
   cartoes que ele apresenta comecavam na borda esquerda. Titulo que encabeca
   elemento de largura cheia tem de alinhar com ele; centrado ali le como erro.

   Entao so vira coluna centrada a secao que e prosa PURA - sem grade, tabela,
   cartao ou lista de preco. O padrao e alinhar a esquerda, que e o seguro:
   navegador sem `:has()` ignora a regra e recebe a pagina toda alinhada, que e
   consistente, em vez de toda centrada, que e o que parece defeito. */
@supports selector(:has(*)){
  section.bloco:not(:has(.precos, .grade, .cruz, .passos, .caixa, .fim, table))
    > .env > :is(h2, h3, p, ul:not([class]), ol:not([class]), details){
      margin-inline:auto; max-width:var(--prosa)}
}

/* A entrada nasceu mais estreita que o resto; igualada ao token, senao ela
   ficaria centrada numa caixa menor e deslocada do proprio H2. */
section.bloco > .env > h2 + p,
section.bloco > .env > section > h2 + p{max-width:var(--prosa)}

/* O cartao de CTA do pe tambem se prende a coluna de leitura, senao vira uma
   faixa de 1440px com tres palavras dentro. */
section.bloco > .env > .fim{max-width:var(--prosa)}

/* -- 4. o telefone fica mais compacto ------------------------------------ */
/* O pedido foi "reduzido no mobile": a 375px o cartao de preco gastava mais
   altura com respiro do que com informacao, e a lista de cinco virava uma
   rolagem longa antes de chegar no proximo assunto. */
@media(max-width:560px){
  .heroi h1{font-size:clamp(2rem,9vw,2.6rem)}
  .precos{gap:10px}
  .preco{padding:16px 18px}
  .cartao{padding:18px}
  .grade{gap:12px}
  .env{padding:0 16px}
}

/* O corpo do acordeao media 129 caracteres por linha - a mesma doenca da
   pagina inteira, so que escondida atras de um <summary>. Fica como rede
   mesmo com o <details> ja limitado acima: acordeao dentro de secao com
   cartao nao herdaria aquela regra. */
.corpo > p, .corpo > ul, .corpo > ol{max-width:var(--prosa)}

/* ====================================================== interruptor de tema ==
   O icone mostra a ACAO, nao o estado: no escuro aparece o sol (clicar
   clareia), no claro aparece a lua. Foi o que menos confundiu quando testei -
   icone de estado faz a pessoa clicar achando que ja esta no outro.

   As tres regras abaixo repetem EXATAMENTE a guarda que o resto do arquivo ja
   usa para as cores: `@media` com `:root:not([data-theme="dark"])` para quem
   segue o sistema, e os dois `[data-theme]` explicitos para quem escolheu.
   Guarda diferente aqui produziria icone e cor discordando. */
.tema{appearance:none; background:transparent; border:1px solid var(--linha);
  color:var(--texto); border-radius:999px; width:34px; height:34px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  transition:border-color .18s ease, color .18s ease, background-color .18s ease}
.tema:hover{color:var(--tinta);
  border-color:color-mix(in srgb, var(--marca) 45%, var(--linha));
  background:color-mix(in srgb, var(--marca) 9%, transparent)}
.tema:focus-visible{outline:2px solid var(--marca); outline-offset:2px}
.tema svg{display:block}

/* padrao (escuro): sol visivel */
.tema .lua{display:none}
.tema .sol{display:block}

/* sistema claro, sem escolha explicita: lua */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .tema .sol{display:none}
  :root:not([data-theme="dark"]) .tema .lua{display:block}
}
/* escolha explicita manda sobre o sistema */
:root[data-theme="light"] .tema .sol{display:none}
:root[data-theme="light"] .tema .lua{display:block}
:root[data-theme="dark"] .tema .sol{display:block}
:root[data-theme="dark"] .tema .lua{display:none}

@media(max-width:519px){.tema{width:30px; height:30px}}

/* ------------------------------------------------------- ilustracoes ---- */
.ilu{width:100%; height:auto; display:block; max-width:320px}
.ilu-caixa{display:flex; justify-content:center; margin:26px auto 0; max-width:340px}
.heroi .ilu-caixa{margin-top:30px}
.ilu text{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}
@media(min-width:900px){
  .heroi .env.com-ilu{display:grid; grid-template-columns:1.15fr .85fr;
    gap:40px; align-items:center; text-align:left}
  .heroi .com-ilu .chamada{margin-left:0}
  .heroi .com-ilu .botoes,.heroi .com-ilu .chips{justify-content:flex-start}
  .heroi .com-ilu .ilu-caixa{margin:0; max-width:none}
  .heroi .com-ilu .ilu{max-width:none}
}

/* ---------------------------------------------------------- moeda ------- */
.conv{display:block; font-size:12.5px; font-weight:600; color:var(--fraca);
  margin-top:3px; letter-spacing:0}
.preco .conv{font-size:12px}
td .conv{display:inline; margin-left:8px; font-weight:500}
#hd-moeda{align-items:center; gap:7px; border:1px solid var(--linha);
  background:var(--painel); color:var(--fraca); border-radius:999px; padding:6px 13px;
  font:inherit; font-size:12.5px; font-weight:600; cursor:pointer}
#hd-moeda:hover{color:var(--tinta)}
#hd-moeda b{color:var(--marca-texto); font-weight:800}

/* ------------------------------------------------------- mega-menu ------ */
.mm{position:relative; display:none}
@media(min-width:1120px){.mm{display:block}}
.mm-abre{display:inline-flex; align-items:center; gap:6px; background:none;
  border:0; color:var(--fraca); font:inherit; font-size:14.5px; font-weight:500;
  cursor:pointer; padding:8px 0}
.mm:hover .mm-abre,.mm:focus-within .mm-abre{color:var(--tinta)}
.mm-caixa{position:absolute; top:calc(100% + 10px); left:-20px; width:min(58rem,88vw);
  background:var(--painel); border:1px solid var(--linha); border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.5); opacity:0; visibility:hidden;
  transform:translateY(-6px); transition:opacity .14s ease, transform .14s ease,
  visibility .14s; overflow:hidden; z-index:60}
.mm:hover .mm-caixa,.mm:focus-within .mm-caixa{opacity:1; visibility:visible;
  transform:translateY(0)}
/* Ponte sobre os 10px entre o botao e o painel. Sem ela o menu fechava no
   meio do caminho: aquela faixa nao pertence a nenhum dos dois, e o mouse
   que desce em linha reta passa por fora do :hover. Como ela vive DENTRO do
   painel, some junto com ele e nao intercepta clique nenhum fechado. */
.mm-caixa::before{content:""; position:absolute; left:0; right:0; top:-11px; height:11px}
.mm-corpo{display:grid; grid-template-columns:15rem 1fr}
.mm-redes{list-style:none; margin:0; padding:10px; border-right:1px solid var(--linha);
  max-height:23rem; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--linha) transparent}
/* A barra padrao do Chrome vem clara e larga: dentro de um painel escuro ela
   virava uma tira branca de 15px do lado do Instagram, mais visivel que a
   propria lista. */
.mm-redes::-webkit-scrollbar{width:8px}
.mm-redes::-webkit-scrollbar-track{background:transparent}
.mm-redes::-webkit-scrollbar-thumb{background:var(--linha); border-radius:99px}
.mm-rede{display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:10px; color:var(--texto); font-size:14px; font-weight:600}
.mm-rede span{flex:1}
.mm-rede b{color:var(--fraca); font-size:12px; font-weight:700}
.mm-rede:hover{background:var(--painel2); color:var(--tinta); text-decoration:none}
/* A cor da marca da plataforma quase nunca serve crua nos dois temas: o ciano
   do TikTok some no branco, o azul do Facebook escurece demais no preto.
   Misturar com --tinta (que e branco no escuro e quase preto no claro) empurra
   cada cor para o lado que falta contraste, sem tirar a identidade dela. */
.mm-rede svg{flex:none;
  color:color-mix(in srgb, var(--rd,var(--marca-texto)) 78%, var(--tinta))}
.mm-paineis{position:relative; padding:18px 22px; min-height:15rem}
.mm-painel{display:none}
/* A troca e por classe, posta pelo script. SEM JavaScript o primeiro painel
   continua visivel e TODOS os links seguem no HTML - o robo le o mapa inteiro
   do site em qualquer pagina, que e o que mais importa aqui. */
.mm-painel.on{display:block}
.mm-rede.on{background:var(--painel2); color:var(--tinta)}
.mm-painel em{font-style:normal; font-size:11px; text-transform:uppercase;
  letter-spacing:.09em; font-weight:800;
  color:color-mix(in srgb, var(--rd,var(--marca-texto)) 78%, var(--tinta))}
.mm-links{display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; margin:12px 0 14px}
.mm-links a{padding:7px 0; color:var(--texto); font-size:14px}
.mm-links a:hover{color:var(--marca-texto); text-decoration:none}
.mm-tudo{font-size:13.5px; font-weight:700}
.mm-pe .mm-tudo{margin-left:auto}
.mm-pe{display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:13px 22px; border-top:1px solid var(--linha); background:var(--painel2)}
.mm-pe span{font-size:11px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--fraca); font-weight:800; margin-right:4px}
.mm-pe a{padding:6px 13px; border-radius:999px; border:1px solid var(--linha);
  background:var(--painel); color:var(--texto); font-size:13px; font-weight:600}
.mm-pe a:hover{border-color:color-mix(in srgb, var(--marca) 45%, var(--linha));
  color:var(--tinta); text-decoration:none}
.mm-pe a.mm-tudo{border:0; background:none; color:var(--marca-texto); padding:6px 0}

/* A fileira do celular. Mora fora do <nav> - ver mobile() -, e some na mesma
   largura em que o mega-menu aparece, para os dois nunca conviverem. */
.mm-mob{display:flex; align-items:center; gap:7px; padding:6px 20px;
  border-top:1px solid var(--linha); overflow-x:auto; white-space:nowrap;
  scrollbar-width:none; -webkit-overflow-scrolling:touch}
.mm-mob::-webkit-scrollbar{display:none}
@media(min-width:1120px){.mm-mob{display:none}}
.mm-mob>span{flex:none; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.09em; color:var(--fraca); font-weight:800; margin-right:2px}
/* line-height explicito: o 1.7 do body engordava a pilula e o cabecalho
   grudado somava 114px de 812 no telefone - 14% da tela presos no topo em
   toda pagina. */
.mm-mob a{flex:none; padding:5px 12px; border-radius:999px; line-height:1.35;
  border:1px solid var(--linha); background:var(--painel);
  color:var(--texto); font-size:12.5px; font-weight:600}
.mm-mob a:hover{text-decoration:none; color:var(--tinta)}
/* Compondo as duas classes o seletor vence `.mm-mob a` por especificidade;
   escrito so como `.mm-tudo` ele perdia e a pilula saia da cor do texto. */
.mm-mob a.mm-tudo{font-size:12.5px; padding:5px 12px;
  color:var(--marca-texto);
  border-color:color-mix(in srgb, var(--marca) 45%, var(--linha))}

.vitrine{margin:3rem auto}
.vitrine h2{margin:0 0 .4rem}
.vit-topo{opacity:.7;margin:0 0 1.4rem}
.vit-rede{border:1px solid var(--linha,#22262e);border-radius:14px;margin-bottom:.6rem;
  background:rgba(255,255,255,.015)}
.vit-rede summary{cursor:pointer;padding:1rem 1.2rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;list-style:none}
.vit-rede summary::-webkit-details-marker{display:none}
.vit-rede summary b{font-size:1.05rem}
.vit-rede summary span{font-size:.82rem;opacity:.55}
.vit-rede[open] summary{border-bottom:1px solid var(--linha,#22262e)}
.vit-cat{padding:1rem 1.2rem 0}
.vit-cat h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;
  opacity:.5;margin:0 0 .7rem}
.vit-serv{margin:0 0 1.1rem}
.vit-serv h4{font-size:.98rem;margin:0 0 .4rem}
.vit-serv ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.vit-serv li{border:1px solid var(--linha,#22262e);border-radius:10px;padding:.6rem .75rem}
.vit-serv li b{margin-right:.5rem}
.vit-preco{color:#00d47e;font-weight:600}
.vit-serv small{display:block;opacity:.6;font-size:.78rem;margin-top:.25rem}
@media(min-width:760px){.vit-serv ul{grid-template-columns:repeat(2,1fr)}}

/* Rodape em colunas: com dez links numa linha so vira sopa. */
.rod-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1.6rem;margin:0 0 2rem}
.rod-col h3{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;
  opacity:.45;margin:0 0 .7rem}
.rod-col ul{list-style:none;padding:0;margin:0;display:grid;gap:.42rem}
.rod-col a{font-size:.88rem;opacity:.75;text-decoration:none}
.rod-col a:hover{opacity:1}
.rod-pe{border-top:1px solid var(--linha,#22262e);padding-top:1.2rem}