/* ==========================================================================
   VAMOS SERVIR BRASÍLIA — sistema visual (extraído de vamosservirbrasilia.com.br)
   ========================================================================== */
:root{
  --navy:#091D47;
  --navy-deep:#071736;
  --royal:#1855E1;
  --blue-sec:#1B4CD0;
  --cream:#F5F1E8;
  --green:#84BC4D;
  --green-dark:#23430F;
  --black:#121212;
  --line:rgba(245,241,232,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:'Sora',sans-serif;background:var(--navy);color:var(--cream);overflow-x:clip;-webkit-font-smoothing:antialiased}

/* ---- tipografia da marca ---- */
.display{font-family:'Archivo',sans-serif;font-stretch:118%;font-weight:900;text-transform:uppercase;line-height:.96}
.it{font-family:'Archivo',sans-serif;font-stretch:74%;font-style:italic;font-weight:800}
.eyebrow{font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:.35em;text-transform:uppercase;font-size:.72rem;opacity:.85}

/* ---- textura ---- */
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")}

.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.arr{display:inline-block;width:.78em;height:.78em;vertical-align:-2%}
.arr svg{display:block;width:100%;height:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- botões ---- */
.btn{display:flex;align-items:center;justify-content:center;gap:.55em;font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;padding:22px 34px;font-size:1.08rem;cursor:pointer;border:none;width:100%;max-width:520px;transition:transform .15s ease,filter .15s ease}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
.btn-royal{background:var(--royal);color:var(--cream)}
.btn-dark{background:var(--black);color:var(--cream)}
.btn-green{background:var(--green);color:var(--green-dark)}

/* ---- lockup da marca (recriado em type, escala sem perder qualidade) ---- */
.lockup{display:inline-flex;flex-direction:column;line-height:.86;text-decoration:none;color:var(--cream);font-size:var(--lock,26px)}
.lockup .l1{display:flex;align-items:center;gap:.14em;font-family:'Archivo',sans-serif;font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:1em}
.lockup .l1 em{font-family:'Archivo',sans-serif;font-stretch:74%;font-style:italic;font-weight:800;color:var(--royal)}
.lockup .l1 .arr{color:var(--royal);width:.72em;height:.72em}
.lockup .l2{font-family:'Archivo',sans-serif;font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:1.28em;color:var(--cream)}

/* ---- faixa animada ---- */
.marquee{background:#fff;overflow:hidden;height:36px}
.marquee-track{display:flex;width:max-content;animation:scroll 20s linear infinite}
.marquee-track img{height:36px;width:auto;display:block;flex:none}
@keyframes scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---- selo comunidades oficiais ---- */
.selo{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:rgba(7,23,54,.6);padding:9px 18px;border-radius:999px;font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:.66rem;color:var(--cream)}
.selo .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(132,188,77,.7);animation:pulse 2.4s ease-out infinite;flex:none}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(132,188,77,0)}100%{box-shadow:0 0 0 0 rgba(132,188,77,0)}}
@media(prefers-reduced-motion:reduce){.selo .dot{animation:none}}

/* ---- rodapé ---- */
footer{background:var(--black);padding:64px 24px 52px}
.f-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.f-name{font-size:1.5rem;font-weight:700}
.f-name span{font-weight:400}
.f-role{font-family:'Archivo',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:.75rem;opacity:.7;margin-top:14px;line-height:1.8}
.f-bottom{max-width:1100px;margin:48px auto 0;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center;border-top:1px solid rgba(245,241,232,.12);padding-top:30px}
.f-ig{color:var(--cream);text-decoration:none;font-weight:600;opacity:.85}
.f-ig:hover{opacity:1}
.f-mote{font-family:'Archivo',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;opacity:.6}
@media(max-width:860px){.f-grid{grid-template-columns:1fr;justify-items:start}}

/* ==========================================================================
   CELULAR — correções de toque e de zoom
   --------------------------------------------------------------------------
   Auditado em 375px em 10/09/2026. Três problemas reais, medidos, não no olho:

   1. ZOOM DO iOS. O Safari dá zoom sozinho ao tocar num campo com fonte
      menor que 16px, e depois a página fica torta. Não existe como desligar
      isso sem travar o zoom do usuário, que é recurso de acessibilidade e não
      se tira de ninguém. A saída certa é o campo ter 16px de verdade.

   2. ALVOS PEQUENOS. Links de 16 a 20px de altura. A recomendação da Apple e
      do Google é 44px; abaixo disso o dedo erra. Resolvido com área de toque,
      não com fonte maior: o texto continua do tamanho do desenho.

   3. ATRASO DE 300ms. Sem `touch-action: manipulation` o navegador espera para
      ver se é toque duplo antes de acionar o botão.
   ========================================================================== */
@media (max-width:768px){
  input[type=text],input[type=tel],input[type=email],input[type=search],
  input[type=date],input[type=number],select,textarea{
    font-size:16px!important;
  }
}

button,.btn,a.btn,[role=button],input[type=checkbox],input[type=radio],select{
  touch-action:manipulation;
}

/* Área de toque sem mexer no tamanho do texto: o link cresce por dentro. */
.voltar,.f-ig,.f-bottom a,footer a:not(.lockup):not(.btn){
  display:inline-flex;align-items:center;
  min-height:44px;
}
.lockup{min-height:44px}

/* Caixa de aceite: dedo, não ponteiro de mouse. */
input[type=checkbox]{
  width:24px;height:24px;min-width:24px;min-height:24px;
  accent-color:var(--green);cursor:pointer;
}

/* O rótulo inteiro vira alvo, que é o jeito mais fácil de marcar com o polegar. */
.aceite-box label,label.aceite{cursor:pointer}

/* Nada de seleção acidental ao segurar o botão para rolar. */
.btn{-webkit-tap-highlight-color:rgba(245,241,232,.18);user-select:none}

/* Respeita quem pediu menos movimento no sistema. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}