/* atendeQR · landing page
   Paleta Manga & Petróleo · Bricolage Grotesque + Figtree */
:root{
  --petroleo:#0B2A33; --petroleo-2:#123C47; --petroleo-3:#1E4A55;
  --manga:#FF9F2E; --manga-esc:#9C5200;
  --turquesa:#2EC4B6;
  --nuvem:#FBF8F4; --areia:#F1EBE3; --linha:#E2D9CD;
  --ardosia:#3E5A60; --nevoa:#BFD8D5; --nevoa-2:#DCEBEA;
  --verde:#3DCB86;
  --t-titulo:"Bricolage Grotesque", "Arial Black", sans-serif;
  --t-texto:"Figtree", Arial, sans-serif;
  --largura:1180px;
  --raio:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--nuvem);color:var(--petroleo);font:400 18px/1.55 var(--t-texto);text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-family:var(--t-titulo);letter-spacing:-0.03em;line-height:1}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--manga);outline-offset:3px;border-radius:6px}

.pular{position:absolute;left:16px;top:-60px;background:var(--manga);color:var(--petroleo);padding:10px 16px;border-radius:10px;font-weight:700;z-index:50;text-decoration:none}
.pular:focus{top:12px}

.largura{max-width:var(--largura);margin:0 auto;padding:0 20px}

/* botões */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:999px;font:700 17px/1.1 var(--t-texto);text-decoration:none;border:2px solid transparent;transition:transform .18s ease, background-color .18s ease, color .18s ease;text-align:center}
.bt:hover{transform:translateY(-2px)}
.bt:active{transform:translateY(0)}
.bt-manga{background:var(--manga);color:var(--petroleo)}
.bt-manga:hover{background:#FFB24F}
.bt-petroleo{background:var(--petroleo);color:var(--manga)}
.bt-petroleo:hover{background:var(--petroleo-2)}
.bt-linha{border-color:var(--nevoa);color:var(--nuvem)}
.bt-linha:hover{border-color:var(--manga);color:var(--manga)}
.bt-linha-clara{border-color:var(--petroleo-3);color:var(--nuvem);background:transparent}
.bt-linha-clara:hover{border-color:var(--manga);color:var(--manga)}
.bt-sm{min-height:44px;padding:10px 20px;font-size:15px}
.bt-grande{min-height:64px;padding:18px 36px;font-size:20px}
@media (prefers-reduced-motion:reduce){.bt,.bt:hover{transition:none;transform:none}}

/* topo */
.topo{position:sticky;top:0;z-index:40;background:var(--petroleo);border-bottom:1px solid var(--petroleo-3)}
.topo-in{max-width:var(--largura);margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:20px}
.topo-logo{display:flex;flex:none}
.topo-logo img{height:38px;width:auto}
.menu{margin-left:auto;display:flex;align-items:center;gap:6px}
.menu a:not(.bt){color:var(--nevoa);text-decoration:none;font-weight:600;font-size:15px;padding:10px 12px;border-radius:10px}
.menu a:not(.bt):hover{color:var(--nuvem);background:var(--petroleo-2)}
.menu-bt{display:none;margin-left:auto;background:none;border:0;color:var(--nuvem);width:48px;height:48px;border-radius:12px;cursor:pointer;align-items:center;justify-content:center}
@media (max-width:920px){
  .menu-bt{display:inline-flex}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--petroleo);flex-direction:column;align-items:stretch;padding:8px 20px 20px;border-bottom:1px solid var(--petroleo-3)}
  .menu.aberto{display:flex}
  .menu a:not(.bt){padding:14px 8px;font-size:17px}
  .menu .bt{margin-top:8px}
}

/* hero */
.hero{background:var(--petroleo);color:var(--nuvem);overflow:hidden;position:relative}
.hero::after{content:"";position:absolute;right:-180px;bottom:-220px;width:620px;height:620px;background:url("img/favicon.svg") center/contain no-repeat;opacity:.04;pointer-events:none}
.hero-in{max-width:var(--largura);margin:0 auto;padding:64px 20px 72px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;position:relative;z-index:1}
.selo{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--nevoa);margin-bottom:22px}
.ponto{width:10px;height:10px;border-radius:50%;background:var(--turquesa);box-shadow:0 0 0 0 rgba(46,196,182,.55);animation:pulsar 2.2s ease-out infinite}
@keyframes pulsar{0%{box-shadow:0 0 0 0 rgba(46,196,182,.55)}70%{box-shadow:0 0 0 12px rgba(46,196,182,0)}100%{box-shadow:0 0 0 0 rgba(46,196,182,0)}}
.hero h1{font-size:clamp(48px,7.4vw,96px);font-weight:800;letter-spacing:-0.05em;line-height:.92}
.hero h1 em{font-style:normal;color:var(--manga);display:block}
.hero-sub{margin-top:26px;font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--nevoa-2);max-width:560px}
.hero-acoes{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}
.hero-fatos{margin:30px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:15px;font-weight:600;color:var(--nevoa)}
.hero-fatos li{display:flex;align-items:center;gap:8px}
.hero-fatos li::before{content:"";width:16px;height:16px;flex:none;background:var(--manga);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L21 7.5l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L21 7.5l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat}

.hero-cena{position:relative;display:flex;justify-content:center;min-height:560px}
.fone{margin:0;background:#06191F;border:10px solid #1E4A55;border-radius:44px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.4)}
.fone img{width:100%;height:100%;object-fit:cover;object-position:top}
.fone-hero{width:min(300px,62vw);aspect-ratio:390/780;transform:rotate(-3deg)}
.fila{list-style:none;margin:0;padding:0;position:absolute;right:-6px;bottom:28px;width:min(300px,64vw);display:flex;flex-direction:column;gap:12px}
.chamado{display:grid;grid-template-columns:1fr auto;gap:2px 12px;background:var(--petroleo-2);border:1px solid var(--petroleo-3);border-radius:18px;padding:14px 16px;box-shadow:0 18px 40px rgba(0,0,0,.35), inset 4px 0 0 var(--nevoa)}
.chamado-urgente{box-shadow:0 18px 40px rgba(0,0,0,.35), inset 4px 0 0 var(--manga)}
.chamado-ok{box-shadow:0 18px 40px rgba(0,0,0,.35), inset 4px 0 0 var(--verde)}
.ch-mesa{font:800 22px/1 var(--t-titulo);letter-spacing:-0.02em;color:var(--nuvem)}
.ch-tempo{font:700 18px/1 var(--t-texto);font-variant-numeric:tabular-nums;color:var(--nevoa);align-self:center}
.chamado-urgente .ch-tempo{color:var(--manga)}
.ch-tempo-ok{color:var(--verde);font-size:15px}
.ch-motivo{grid-column:1/-1;font-size:14px;color:var(--nevoa)}

/* seções */
.secao{padding:96px 0}
.secao-clara{background:var(--nuvem)}
.secao-areia{background:var(--areia)}
.secao-escura{background:var(--petroleo);color:var(--nuvem)}
.secao-manga{background:var(--manga);color:var(--petroleo)}
.sobre{font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--manga-esc);margin-bottom:14px}
.sobre-manga{color:var(--manga)}
.sobre-petroleo{color:var(--petroleo)}
.titulo{font-size:clamp(34px,4.6vw,60px);font-weight:800;max-width:880px}
.titulo-grande{font-size:clamp(40px,6vw,80px)}
.corpo{font-size:19px;line-height:1.6;color:var(--ardosia);max-width:560px}
.corpo-claro{color:var(--nevoa-2)}
.fonte{margin-top:28px;font-size:14px;line-height:1.5;color:var(--ardosia);max-width:820px}
.fonte-petroleo{color:var(--petroleo);opacity:.85;margin-top:14px}

/* números */
.numeros{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.numero{border-top:3px solid var(--petroleo);padding-top:22px}
.num{font:800 clamp(56px,7vw,92px)/.9 var(--t-titulo);letter-spacing:-0.05em;color:var(--petroleo);margin-bottom:14px}
.numero p:not(.num){font-size:18px;color:var(--ardosia);max-width:320px}

/* passos */
.passos{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.passo{display:flex;flex-direction:column}
.passo-img{height:440px;border-radius:var(--raio);background:var(--petroleo);display:flex;align-items:center;justify-content:center;padding:28px;margin-bottom:22px}
.passo-img-placa img{max-height:100%;width:auto;border-radius:14px}
.fone-p{height:440px;width:auto;aspect-ratio:390/760;margin:0 auto 22px;border-width:8px;border-radius:36px;box-shadow:0 24px 50px rgba(11,42,51,.22)}
.fone-escuro{background:#06191F}
.passo-n{font:800 18px/1 var(--t-titulo);color:var(--petroleo);background:var(--manga);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;margin-bottom:14px}
.passo h3{font-size:28px;margin-bottom:10px}
.passo p:not(.passo-n){color:var(--ardosia);font-size:17px}

/* recursos */
.recursos{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.lista-recursos{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:18px}
.lista-recursos li{font-size:17px;line-height:1.55;color:var(--nevoa);padding-left:30px;position:relative}
.lista-recursos li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:4px;background:var(--manga)}
.lista-recursos strong{color:var(--nuvem)}
.tela-tv{margin:0}
.tela-tv img{border-radius:16px;border:8px solid var(--petroleo-3);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.tela-tv figcaption{margin-top:14px;font-size:15px;color:var(--nevoa)}

/* gestão */
.gestao{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.tela-desk{margin:0}
.tela-desk img{border-radius:16px;border:1px solid var(--linha);box-shadow:0 30px 70px rgba(11,42,51,.18)}
.gestao-txt{display:flex;flex-direction:column;gap:18px}

/* conta */
.conta{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:c}
.conta li{background:var(--petroleo);color:var(--nuvem);border-radius:var(--raio);padding:24px 22px;display:flex;flex-direction:column;gap:8px;position:relative}
.conta li:not(:last-child)::after{content:"";position:absolute;right:-12px;top:50%;width:10px;height:10px;border-top:3px solid var(--petroleo);border-right:3px solid var(--petroleo);transform:translateY(-50%) rotate(45deg);z-index:1}
.conta li:last-child{background:var(--nuvem);color:var(--petroleo)}
.conta-num{font:800 clamp(30px,3.2vw,42px)/1 var(--t-titulo);letter-spacing:-0.03em;color:var(--manga)}
.conta li:last-child .conta-num{color:var(--petroleo)}
.conta li span:last-child{font-size:16px;color:var(--nevoa)}
.conta li:last-child span:last-child{color:var(--ardosia)}
.cenario{margin-top:28px;background:rgba(11,42,51,.08);border-radius:var(--raio);padding:28px;max-width:860px}
.cenario-tit{font:800 24px/1.1 var(--t-titulo);letter-spacing:-0.02em;margin-bottom:10px}
.cenario p:not(.cenario-tit){font-size:18px}

/* produtos */
.produtos{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.produto{background:var(--areia);border-radius:var(--raio);padding:30px;display:flex;flex-direction:column;gap:14px}
.produto-destaque{background:var(--petroleo);color:var(--nuvem)}
.produto h3{font-size:34px;font-weight:800}
.sobrenome{display:block;font:600 15px/1.2 var(--t-texto);letter-spacing:0;color:var(--ardosia);margin-bottom:6px}
.produto-destaque .sobrenome{color:var(--nevoa)}
.produto p:not(.status){color:var(--ardosia);font-size:17px;flex:1}
.produto-destaque p:not(.status){color:var(--nevoa-2)}
.status{align-self:flex-start;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--linha);color:var(--petroleo)}
.status-ok{background:var(--manga);color:var(--petroleo)}
.link-seta{font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--manga-esc)}
.produto-destaque .link-seta{color:var(--manga)}
.link-seta::after{content:"→";transition:transform .18s ease}
.link-seta:hover::after{transform:translateX(4px)}

/* planos */
.planos{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.plano{background:var(--petroleo-2);border:1px solid var(--petroleo-3);border-radius:var(--raio);padding:32px;display:flex;flex-direction:column;gap:16px;position:relative}
.plano h3{font-size:26px;font-weight:700;color:var(--nevoa)}
.preco{font:800 64px/1 var(--t-titulo);letter-spacing:-0.04em;color:var(--nuvem);display:flex;align-items:baseline;gap:4px}
.moeda{font-size:24px;letter-spacing:0;font-weight:700}
.periodo{font:600 17px/1 var(--t-texto);letter-spacing:0;color:var(--nevoa)}
.preco-txt{font-size:34px;line-height:1.05}
.plano ul{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:12px;flex:1}
.plano li{font-size:16px;color:var(--nevoa-2);padding-left:26px;position:relative}
.plano li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;background:var(--turquesa);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L21 7.5l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L21 7.5l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.plano-pro{background:var(--manga);border-color:var(--manga);color:var(--petroleo)}
.plano-pro h3,.plano-pro .preco,.plano-pro .periodo{color:var(--petroleo)}
.plano-pro li{color:var(--petroleo)}
.plano-pro li::before{background:var(--petroleo)}
.plano-tag{position:absolute;top:-14px;left:32px;background:var(--petroleo);color:var(--manga);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px}

/* etapas */
.etapas{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.etapas li{border-top:3px solid var(--petroleo);padding-top:20px;display:flex;flex-direction:column;gap:10px}
.etapa-n{font:800 54px/1 var(--t-titulo);color:var(--manga-esc);letter-spacing:-0.04em}
.etapas h3{font-size:24px}
.etapas p{color:var(--ardosia);font-size:17px}

/* teste */
.teste-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:56px;align-items:center}
.teste .titulo{margin-bottom:18px}
.teste .bt{margin-top:28px}
.qr-caixa{background:var(--nuvem);color:var(--petroleo);border-radius:var(--raio);padding:22px;display:flex;flex-direction:column;align-items:center;gap:12px;font-weight:600;font-size:15px}
.qr{width:200px;height:200px}
.qr svg{width:100%;height:100%;display:block}

/* dúvidas */
.duvidas{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.faq{display:flex;flex-direction:column}
.faq details{border-top:1px solid var(--linha)}
.faq details:last-child{border-bottom:1px solid var(--linha)}
.faq summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;font:700 20px/1.3 var(--t-titulo);letter-spacing:-0.01em;position:relative;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;border-right:3px solid var(--manga-esc);border-bottom:3px solid var(--manga-esc);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 0 24px;color:var(--ardosia);font-size:17px;max-width:620px}

/* contato */
.contato-in{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.contato .corpo{color:var(--petroleo);max-width:620px}
.contato-alt{font-size:16px;font-weight:600}

/* rodapé */
.rodape{background:var(--petroleo);color:var(--nevoa);padding:44px 0}
.rodape-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.rodape-in img{height:32px;width:auto}
.rodape-pe{margin-left:auto;font-size:14px}

/* revelar ao rolar */
.revela{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
.revela.visivel{opacity:1;transform:none}
.sem-js .revela{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.revela{opacity:1;transform:none;transition:none}.ponto{animation:none}}

/* responsivo */
@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:48px;padding-top:48px}
  .hero-cena{min-height:520px}
  .recursos,.gestao,.duvidas,.teste-in{grid-template-columns:1fr;gap:40px}
  .conta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .conta li:nth-child(2)::after{display:none}
  .etapas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  body{font-size:17px}
  .secao{padding:72px 0}
  .numeros,.passos,.produtos,.planos{grid-template-columns:1fr}
  .passos{gap:44px}
  .passo-img,.fone-p{height:400px}
  .planos{gap:28px}
  .qr-caixa{display:none}
  .rodape-pe{margin-left:0;width:100%}
}
@media (max-width:520px){
  .hero-acoes .bt{width:100%}
  .conta{grid-template-columns:1fr}
  .conta li::after{display:none}
  .etapas{grid-template-columns:1fr}
  .fila{right:-4px;bottom:0}
  .hero-cena{min-height:500px;justify-content:flex-start}
  .chamado{padding:12px 14px}
}