:root{
  --tinta:#17181C; --fundo:#FFFBF5; --verde:#0E7A55; --amarelo:#F5C451;
  --areia:#F6EFE3; --borda:#EAE3D6; --suave:#6B6E76; --zap:#25D366;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fundo);color:var(--tinta);
  font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.55;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--verde)}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px}
h1,h2,h3{font-family:'Bricolage Grotesque',Inter,sans-serif;letter-spacing:-.035em;margin:0}
section{padding:clamp(56px,9vw,92px) 0}
.dentro{max-width:1180px;margin:0 auto;padding:0 20px}
.estreito{max-width:780px}
.centro{display:flex;flex-direction:column;align-items:center;text-align:center}
.centro-texto{text-align:center}
.faixa-clara{background:#fff;border-top:1px solid var(--borda);border-bottom:1px solid var(--borda)}
.faixa-areia{background:var(--areia);border-top:1px solid var(--borda);border-bottom:1px solid var(--borda)}

/* topo */
.topo{border-bottom:1px solid var(--borda);background:var(--fundo)}
.topo nav{max-width:1180px;margin:0 auto;padding:14px 20px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:14px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta)}
.marca-nome{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:24px;letter-spacing:-.03em}
.ponto{color:#E0A82E}
.logo-caixa{position:relative;display:inline-flex;align-items:center;justify-content:center;
  background:var(--tinta);border-radius:12px;overflow:hidden;flex:none}
.logo-caixa svg{position:relative;width:64%;height:64%}
.logo-brilho{position:absolute;top:-30%;left:40%;width:22%;height:170%;
  background:rgba(255,255,255,.14);transform:rotate(32deg)}
.topo-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.topo-links a{padding:10px 13px;text-decoration:none;color:#3D4047;font-weight:500;font-size:15px;border-radius:999px}
.topo-links a:hover{background:#F3EFE7}
.botao-escuro{background:var(--tinta);color:#fff!important;font-weight:600}
.botao-escuro:hover{background:#2A2C32!important}

/* abertura */
.abertura{max-width:1180px;margin:0 auto;padding:clamp(40px,7vw,80px) 20px clamp(44px,7vw,78px);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.abertura h1{font-weight:800;font-size:clamp(38px,6.4vw,84px);line-height:.95;letter-spacing:-.04em;max-width:980px}
.abertura h1 mark{background:var(--amarelo);color:inherit;padding:0 .1em;border-radius:.1em}
.abertura h1 i{font-style:italic;font-weight:500;color:var(--verde)}
.linha-fina{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:#4A4D55;max-width:600px}
.botoes{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.botao{display:inline-block;padding:17px 28px;border-radius:999px;background:var(--verde);color:#fff;
  font-weight:700;font-size:17px;text-decoration:none;text-align:center;border:none}
.botao:hover{background:#0A5C40;color:#fff}
.botao-vazado{background:transparent;color:var(--tinta);border:1.5px solid #D5CEBF;font-weight:600}
.botao-vazado:hover{background:#F3EFE7;color:var(--tinta)}
.botao-amarelo{background:var(--amarelo);color:var(--tinta)}
.botao-amarelo:hover{background:#E8B63C;color:var(--tinta)}
.miudo{margin:0;font-size:14px;color:var(--suave)}
.etiqueta{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--verde)}
section h2{font-weight:800;font-size:clamp(30px,4.2vw,52px);line-height:1;margin:14px 0 0}
section h2 + .linha-fina{margin-top:14px}

/* celular */
.celular{width:100%;max-width:272px;background:#000;border-radius:38px;padding:8px;
  transition:background .4s;margin:28px auto 0}
.celular.cliente{background:#0B6B4A}
.tela-fundo{position:relative;background:var(--fundo);border-radius:31px;overflow:hidden;
  height:492px;display:flex;flex-direction:column}
.celular-livre{margin:0}
.celular-livre .tela-fundo{height:auto}
.tela-topo{padding:13px 16px 10px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid #EFEAE0;background:#fff;font-size:12px;color:var(--suave)}
.tela-topo strong{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px;color:var(--tinta)}
.telas{flex:1;position:relative}
.tela{position:absolute;inset:0;padding:18px;display:none;flex-direction:column;gap:11px;overflow:hidden}
.tela.ativa{display:flex;animation:surgir .4s ease-out both}
.tela h3{font-weight:800;font-size:22px}
.tela label{font-size:12px;font-weight:600;color:#4A4D55;margin-top:2px}
.campo{min-height:42px;padding:11px 13px;border-radius:11px;border:2px solid #E3DCCD;background:#fff;
  font-size:15px;font-weight:600;word-break:break-all}
.campo.focado{border-color:var(--tinta)}
.campo-codigo{letter-spacing:.3em;font-family:'IBM Plex Mono',monospace}
.campo-preco{color:var(--verde);font-weight:700}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.botao-falso{padding:13px;border-radius:999px;background:var(--tinta);color:#fff;font-weight:700;
  text-align:center;font-size:14px;transition:background .3s}
.botao-falso.feito{background:var(--verde)}
.botao-menor{padding:10px;font-size:13px}
.nota{margin:0;text-align:center;font-size:12px;color:var(--suave)}
.area-foto{height:112px;border-radius:14px;border:2px dashed #CFC6B5;background:#fff;transition:background .4s}
.area-foto.cheia{background:#E9DCC4;border-style:solid;border-color:#E9DCC4;animation:surgir .5s ease-out both}
.miniaturas{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;text-align:center;font-size:11px;font-weight:700}
.mini span{display:block;height:44px;border-radius:9px;border:3px solid #E3DCCD;margin-bottom:5px;
  transition:border-color .25s;background:#fff;padding:5px;display:flex;gap:3px}
.mini.ativa span{border-color:var(--tinta)}
.mini-grade{flex-wrap:wrap}
.mini-grade::before,.mini-grade::after{content:'';flex:1 1 40%;background:#E9DCC4;border-radius:2px}
.mini-lista{flex-direction:column}
.mini-lista::before,.mini-lista::after{content:'';flex:1;background:#CFE3D6;border-radius:2px}
.mini-capa{flex-direction:column;background:#15161A!important;border-color:#15161A}
.mini-capa::before{content:'';flex:2;background:#E9DCC4;border-radius:2px}
.mini-capa::after{content:'';flex:1;background:#F4D9CF;border-radius:2px}
.previa-tema{flex:1;border-radius:16px;background:#fff;border:1px solid #EFEAE0;padding:9px;
  display:grid;grid-template-columns:1fr 1fr;gap:7px;transition:background .4s}
.previa-tema span{border-radius:8px}
.caixa-link{padding:14px;border-radius:14px;background:#fff;border:2px solid var(--tinta);
  display:flex;flex-direction:column;gap:8px}
.caixa-link .rotulo{font-size:12px;font-weight:600;color:#4A4D55}
.caixa-link strong{font-size:14px;word-break:break-all}
.canal{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:12px 14px;
  border-radius:12px;background:#F3EFE7;font-size:13px;font-weight:700;transition:background .3s}
.canal em{font-style:normal;font-size:12px;color:var(--suave)}
.canal.feito{background:#D9F5D0}
.canal.feito em{color:#0B6B4A}
.tela-conversa{background:#ECE5DA;gap:9px}
.balao-recebido{align-self:flex-start;max-width:92%;background:#fff;border-radius:16px 16px 16px 4px;
  padding:12px 14px;font-size:14px;line-height:1.5;display:flex;flex-direction:column;gap:8px}
.balao-enviado{align-self:flex-end;max-width:92%;background:#D9F5D0;border-radius:16px 16px 4px 16px;
  padding:13px 15px;font-size:14px;line-height:1.5;display:flex;flex-direction:column;gap:2px}
.balao-curto{gap:0}
.balao-enviado small,.balao-recebido small{align-self:flex-end;font-size:11px;color:#4A6B57;margin-top:4px}
.cartao-link{padding:10px;border-radius:10px;border:3px solid transparent;background:#F3EFE7;
  display:flex;flex-direction:column;transition:border-color .2s}
.cartao-link.apontado{border-color:var(--tinta)}
.cartao-link small{color:var(--verde);font-weight:600;align-self:flex-start;margin:0}
.dica-tela{margin:6px 0 0;text-align:center;font-size:13px;color:#4A4D55}
.catalogo-mini{flex:1;background:#fff;border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:9px}
.loja-topo{display:flex;align-items:center;gap:10px;padding:12px 14px}
.loja-topo span span,.loja-topo > span:last-child{display:flex;flex-direction:column}
.loja-topo strong{font-size:14px}
.loja-topo small{font-size:11px;color:var(--suave)}
.avatar-mini{flex:none;width:36px;height:36px;border-radius:50%;background:#F6EFE3;color:var(--verde);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.avatar-claro{background:#fff;color:#0B6B4A}
.grade-mini{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.item-mini{display:flex;flex-direction:column;gap:3px;font-size:12px}
.item-mini span{position:relative;height:74px;border-radius:10px;border:3px solid transparent;transition:border-color .2s}
.item-mini b{position:absolute;top:5px;left:5px;background:var(--tinta);color:#fff;font-size:10px;
  padding:3px 7px;border-radius:999px;display:none}
.item-mini.escolhido b{display:block;animation:surgir .3s ease-out both}
.item-mini.apontado span{border-color:var(--tinta)}
.item-mini em{font-style:normal;color:var(--verde);font-weight:700}
.grade-escolha{padding-top:4px}
.barra-mini{margin-top:auto;padding:12px 14px;border-radius:16px;background:var(--zap);color:#073B22;
  display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:700}
.aviso-pedido{display:flex;gap:10px;align-items:center;padding:11px 13px;border-radius:14px;
  background:var(--tinta);color:#fff;animation:descer .45s cubic-bezier(.2,.8,.2,1) both}
.aviso-pedido .bolinha{flex:none;width:30px;height:30px;border-radius:9px;background:var(--zap)}
.aviso-pedido span span,.aviso-pedido > span:last-child{display:flex;flex-direction:column}
.aviso-pedido strong{font-size:12px}
.aviso-pedido small{font-size:11px;color:#C9CBD1}
.carimbo{align-self:center;margin-top:6px;padding:8px 18px;border:4px solid var(--verde);border-radius:10px;
  color:var(--verde);background:rgba(255,255,255,.75);display:flex;flex-direction:column;align-items:center;
  font-family:'Bricolage Grotesque',sans-serif;line-height:1.1;animation:carimbar .35s cubic-bezier(.2,.8,.2,1) both}
.carimbo b{font-size:20px;font-weight:800}
.carimbo small{font-size:12px}

.chip{display:inline-block;margin-top:30px;font-family:'IBM Plex Mono',monospace;font-size:11px;
  font-weight:600;letter-spacing:.1em;padding:7px 14px;border-radius:999px;
  background:var(--tinta);color:var(--amarelo);transition:background .3s,color .3s}
.chip.cliente{background:#D9F5D0;color:#0B3B22}
.legenda-passo{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;max-width:460px}
.legenda-passo strong{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(20px,5vw,26px);line-height:1.15}
.legenda-passo span{font-size:16px;color:#4A4D55}
.controles{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px}
.bolinhas{display:flex;align-items:center;gap:7px}
.bolinha{width:12px;height:12px;padding:0;border-radius:999px;border:2px solid var(--tinta);
  background:#fff;transition:width .3s,background .3s,border-color .3s}
.bolinha.feito{background:var(--tinta)}
.bolinha.agora{width:34px;background:var(--tinta)}
.bolinha.cliente{border-color:var(--verde)}
.bolinha.cliente.feito,.bolinha.cliente.agora{background:var(--verde)}
.botao-pausa{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;
  border:1.5px solid #D5CEBF;background:#fff;font-weight:600;font-size:15px}
.botao-pausa svg{width:15px;height:15px;fill:var(--tinta)}

/* testar */
.lado-a-lado{margin-top:34px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:40px}
.grade-demo{padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:11px;background:#fff}
.item-demo{display:flex;flex-direction:column;gap:5px;font-size:12.5px;min-width:0}
.foto-demo{position:relative;height:92px;border-radius:12px}
.foto-demo b{position:absolute;top:6px;left:6px;background:var(--tinta);color:#fff;font-size:11px;
  font-weight:700;padding:3px 8px;border-radius:999px}
.linha-preco{display:flex;align-items:center;justify-content:space-between;gap:4px}
.linha-preco em{font-style:normal;color:var(--verde);font-weight:700;font-size:12.5px;white-space:nowrap}
.mais-menos{display:flex;gap:4px}
.mais-menos button{width:27px;height:27px;padding:0;border-radius:50%;border:none;background:var(--verde);
  color:#fff;font-size:16px;font-weight:700;line-height:1;flex:none}
.mais-menos button[data-acao=menos]{background:#fff;color:var(--tinta);border:1.5px solid #DCD5C7}
.barra-demo{margin:0 12px 12px;padding:13px 15px;border-radius:16px;background:var(--zap);color:#073B22;
  display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:700}
.conversa{flex:1 1 320px;min-width:0;max-width:420px;background:#ECE5DA;border-radius:22px;overflow:hidden}
.conversa-topo{background:#0B6B4A;color:#fff;padding:14px 18px;display:flex;align-items:center;gap:11px}
.conversa-topo > span:last-child{display:flex;flex-direction:column}
.conversa-topo strong{font-size:15px}
.conversa-topo small{font-size:12px;color:#CDEBDD}
.conversa-corpo{padding:18px;min-height:250px;display:flex;flex-direction:column}
.conversa .balao-enviado{max-width:340px;width:100%;font-size:15px}
.conversa [data-linhas]{display:flex;flex-direction:column;margin:8px 0}
.conversa [data-linhas] span{animation:surgir .35s ease-out both}
.vazio-msg{color:var(--suave);font-style:italic}

/* temas */
.grade-temas{margin-top:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.cartao-tema{background:#fff;border:1px solid #E0D8C8;border-radius:18px;padding:24px}
.cartao-tema h3{font-size:19px;font-weight:800;margin-bottom:8px}
.cartao-tema p{margin:0;font-size:15px;line-height:1.55;color:#4A4D55}

/* planos */
.grade-planos{margin-top:36px;width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:18px;align-items:stretch;text-align:left}
.plano{background:#fff;border:1px solid #E0D8C8;border-radius:22px;padding:30px;
  display:flex;flex-direction:column;gap:18px}
.plano-destaque{background:var(--tinta);color:#FFFBF5;border-color:var(--tinta)}
.topo-plano{display:flex;align-items:center;justify-content:space-between;gap:8px}
.nome-plano{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--suave)}
.plano-destaque .nome-plano{color:var(--amarelo)}
.selo-plano{font-size:11px;font-weight:700;letter-spacing:.08em;padding:5px 10px;border-radius:999px;
  background:var(--amarelo);color:var(--tinta)}
.preco-plano{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:48px;line-height:1;letter-spacing:-.04em}
.preco-plano small{font-size:17px;font-weight:600;letter-spacing:0;color:var(--suave)}
.plano-destaque .preco-plano small{color:#B8BBC2}
.plano ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15.5px;color:#3D4047}
.plano-destaque ul{color:#E3E4E8}
.plano li::before{content:'✓ ';color:var(--verde);font-weight:700}
.plano-destaque li::before{color:var(--amarelo)}
.plano .apagado{color:#8A8D94}
.plano .apagado::before{content:'';}
.plano .botao{margin-top:auto}

/* dúvidas */
.duvidas{margin-top:28px;display:flex;flex-direction:column;gap:10px}
details{background:#fff;border:1px solid #E0D8C8;border-radius:16px;padding:18px 22px}
summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:16px;font-weight:600;font-size:17px}
summary::-webkit-details-marker{display:none}
.mais{font-size:26px;font-weight:400;color:var(--verde);transition:transform .2s;line-height:1}
details[open] .mais{transform:rotate(45deg)}
details p{margin:12px 0 0;font-size:16px;line-height:1.6;color:#4A4D55}

/* chamada final */
.chamada{padding-bottom:clamp(56px,9vw,92px)}
.bloco-escuro{background:var(--tinta);color:#FFFBF5;border-radius:26px;
  padding:clamp(44px,7vw,84px) 28px;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:22px}
.bloco-escuro h2{font-size:clamp(32px,5.2vw,64px);line-height:.95;letter-spacing:-.04em;max-width:760px}
.bloco-escuro p{margin:0;font-size:18px;line-height:1.6;color:#C9CBD1;max-width:480px}

/* rodapé */
.rodape-site{border-top:1px solid var(--borda);padding:28px 0}
.linha-rodape{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  font-size:14px;color:var(--suave)}
.marca-rodape{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19px;color:var(--tinta)}
.marca-rodape small{font-family:Inter,sans-serif;font-weight:400;font-size:14px;color:var(--suave)}
.links-rodape{display:flex;flex-wrap:wrap;gap:18px}
.links-rodape a{color:var(--suave);text-decoration:none}
.links-rodape a:hover{text-decoration:underline}

@keyframes surgir{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes descer{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes carimbar{from{opacity:0;transform:scale(1.5)}to{opacity:1;transform:none}}
@media(max-width:600px){.so-grande{display:none}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

.entrada{min-height:100svh;display:flex;flex-direction:column}
.entrada-topo{padding-block:22px}
.entrada-topo .dentro{display:flex;justify-content:center}
.entrada-miolo{flex:1;display:flex;align-items:flex-start;justify-content:center;
  padding-block:clamp(24px,6vw,56px) clamp(40px,8vw,80px)}
.cartao-entrada{width:100%;max-width:420px;display:flex;flex-direction:column;gap:22px;text-align:center}
.cartao-entrada h1{font-weight:800;font-size:clamp(28px,6vw,40px);line-height:1.05}
.cartao-entrada > p{margin:0;font-size:16.5px;line-height:1.6;color:#4A4D55}
.cartao-entrada form{display:flex;flex-direction:column;gap:10px;text-align:left}
.cartao-entrada label{font-weight:600;font-size:14px}
.cartao-entrada input{font:inherit;font-size:17px;padding:16px 18px;border-radius:14px;
  border:2px solid #E0D8C8;background:#fff;color:var(--tinta);width:100%}
.cartao-entrada input:focus{border-color:var(--tinta);outline:none}
.cartao-entrada input:focus-visible{outline:3px solid var(--amarelo);outline-offset:2px}
.cartao-entrada .botao{width:100%;margin-top:4px;border:none}
.campo-grande{font-size:30px!important;font-weight:700;letter-spacing:.4em;text-align:center;
  font-family:'IBM Plex Mono',monospace;padding:18px 10px!important}
.ajuda{margin:0;font-size:14.5px;color:var(--suave)}
.ajuda a{color:var(--verde);font-weight:600}
.alinha{display:flex;flex-direction:column;gap:12px;align-items:center}
.link-simples{background:none;border:none;padding:6px;font:inherit;font-size:14.5px;
  color:var(--verde);font-weight:600;cursor:pointer;text-decoration:underline}
.recado{padding:14px 16px;border-radius:14px;font-size:15px;line-height:1.5;text-align:left}
.recado-erro{background:#FBE9E5;color:#8C2F20;border:1px solid #EBC6BC}
.recado-ok{background:#E3F6DC;color:#15603F;border:1px solid #BFE4B3}
.marca-forte{font-weight:700}
.rodape-entrada{padding-block:24px;text-align:center;font-size:13.5px;color:var(--suave)}
.selo-seguro{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--suave)}
.selo-seguro svg{width:15px;height:15px;stroke:var(--verde);fill:none;stroke-width:2}