/* =============================================================
   SHELL — a faixa promocional, o topo e o rodapé, compartilhados
   pela landing (/) e pela página de pacotes (/precos).

   Nasceu quando a /precos apareceu: até 10/09 a landing era arquivo
   único e o shell vivia no <style> inline dela. Com duas páginas, o
   inline viraria duas cópias que divergem sem ninguém notar — foi o
   que aconteceu na Sites, e é o motivo do shell.css de lá (f4d6e55).
   Aqui é a fonte única: mudou aqui, mudou nas duas.

   Regras de convivência, herdadas da Sites (shell.css:1-24), porque
   este arquivo entra em páginas com <style> inline próprio:

   1. NENHUM reset global de tipografia. Nada de `p{margin:0}`,
      `a{color:inherit}` ou estilo em `body`/`h1`: quem define o corpo
      do texto é a página hospedeira. O `*{box-sizing}` fica porque o
      layout do shell depende dele e ele não pinta nada.
   2. NENHUM token genérico `--ink`. O shell consome apenas os tokens
      `--food-*` do food-theme.css, sem interferir nos tokens das páginas.
   3. `font-family` DECLARADA em todo componente. Herdar do body faria
      o botão sair em Inter numa página e em Jakarta na outra — a
      diferença mais fácil de passar batido numa revisão.
   4. Nenhuma página redeclara `--topo-h`/`--topo-shift` no <style>
      inline: a media de 520px os reescreve AQUI, e uma redeclaração
      depois do <link> anularia a reescrita sem erro visível.

   A paleta e os aliases semânticos ficam em food-theme.css. O shell usa
   tinta nas ações Food, creme nas superfícies escuras e branco técnico
   somente no botão de WhatsApp.
   ============================================================= */

:root{
  /* espaço — grade 4px */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e7:48px; --e8:64px;

  /* tipo */
  --t-eyebrow:11px; --t-body:15px;

  /* camada */
  --z-sticky:40;

  /* altura ocupada pelo topo; o hero das duas páginas usa a mesma medida
     para ficar por trás dele */
  --topo-h:112px; --topo-shift:-112px;

  --fs:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --fe:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --r:12px; --r-btn:12px; --r-pill:9999px; --r-in:10px;
}

*{box-sizing:border-box;}

/* skip link — o primeiro Tab de qualquer página do shell */
.pular{position:absolute;left:-9999px}
.pular:focus{background:var(--food-action);color:var(--food-on-color);left:var(--e4);padding:var(--e3) var(--e4);border-radius:var(--r-in);top:var(--e3);z-index:20}

.wrap{max-width:1120px;margin:0 auto;padding:0 var(--e5);}

/* ---------- LOCKUP — construção do guia (cap. 02) ----------
   wordmark = 0,538 do símbolo · sufixo = 0,58 do wordmark
   respiro símbolo↔wordmark = 0,1 do símbolo · wordmark↔sufixo = 0,25em
   mínimo: símbolo 24px · "M" ≥ 16px. O text-stroke faz o ultra-black. */
.lockup{display:inline-flex;align-items:center;}
.lockup .wm{display:flex;flex-direction:column;align-items:flex-start;line-height:1;}
.word{font-family:var(--fs);font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  line-height:1;-webkit-text-stroke:.04em currentColor;paint-order:stroke fill;color:var(--food-ink);}
/* cap. 07: "food" tem 4 letras — .42em para casar a largura sob o wordmark.
   O margin negativo remove o espaço fantasma depois da última letra. */
.suf{font-family:var(--fs);font-weight:700;text-transform:uppercase;letter-spacing:.42em;margin-right:-.42em;line-height:1;}
/* Base do Tasks e da Sites: 25px × 1,857 = 46,4px (68d572f). */
.lk-head{font-size:25px;gap:.1857em;}
.lk-head svg{height:1.857em;width:1.857em;}
/* Token namespaced, não var(--ink): ver regra 2 no topo do arquivo. */
.lk-head .word{font-size:1em;color:var(--food-ink);}
.lk-head .suf{font-size:.58em;color:var(--food-action);margin-top:.25em;}
@media(max-width:860px){.lk-head .wm{display:none;}}

/* ---------- faixa promocional + topo ----------
   Estrutura da Sites, tokens da Food. O ticker roda 32s e para no hover;
   são 4 grupos idênticos porque o keyframe anda -25% — um grupo exato.

   O topo é um cartão creme flutuando sobre o hero. A navegação permanece
   em tinta e o WhatsApp conserva as cores da marca de terceiro. */
.announcement{align-items:center;background:var(--food-ink);color:var(--food-inverse);display:flex;height:44px;
  overflow:hidden;text-decoration:none;white-space:nowrap;}
.announcement:focus-visible{outline:2px solid var(--food-inverse);outline-offset:-3px;}
.announcement-track{align-items:center;animation:ticker 32s linear infinite;display:flex;
  min-width:max-content;will-change:transform;}
.announcement:hover .announcement-track{animation-play-state:paused;}
.announcement-group{align-items:center;display:flex;gap:var(--e4);height:100%;padding:0 var(--e4) 0 0;}
.announcement-strong{font-family:var(--fe);font-size:13px;font-weight:800;letter-spacing:.025em;
  line-height:1.3;padding-left:var(--e4);text-transform:uppercase;}
.announcement-copy{font-family:var(--fe);color:var(--food-inverse-secondary);font-size:13px;font-weight:600;line-height:1.3;}
.announcement-cta{align-items:center;display:inline-flex;font-family:var(--fe);font-size:13px;
  font-weight:800;gap:var(--e2);letter-spacing:.02em;line-height:1.3;text-transform:uppercase;}
.announcement-dot{background:var(--food-action);border-radius:var(--r-pill);
  box-shadow:0 0 14px rgba(237,95,14,.72);height:7px;width:7px;}
.announcement-separator{font-family:var(--fe);color:var(--food-inverse-muted);font-size:13px;line-height:1.3;}
@keyframes ticker{to{transform:translateX(-25%);}}

.topo{position:sticky;top:0;z-index:var(--z-sticky);background:transparent;
  margin-bottom:var(--topo-shift);padding:var(--e4) var(--e5) var(--e3);
  transition:background-color .24s var(--ease);}
.topo.is-floating{background:transparent;}
/* área de proteção do lockup = 1 m = 0,4 × 46,4 = 18,6px → degrau 24 */
.topo .in{align-items:center;background:var(--food-canvas);border:1px solid var(--food-border);
  border-radius:var(--r);box-shadow:0 0 0 1px rgba(10,10,10,.10),0 20px 48px -28px rgba(0,0,0,.58);display:flex;
  gap:var(--e5);justify-content:space-between;margin:0 auto;max-width:1120px;
  min-height:84px;padding:var(--e4) var(--e5);transition:box-shadow .24s var(--ease),transform .24s var(--ease);}
.topo.is-floating .in{box-shadow:0 0 0 1px rgba(10,10,10,.10),0 24px 58px -20px rgba(10,10,10,.54);transform:translateY(-4px);}
.topo .lockup{flex:none;text-decoration:none;}
section[id],#setup{scroll-margin-top:var(--topo-h);}
.topo-actions{align-items:center;display:flex;gap:var(--e4);}
.topo-links{align-items:center;display:flex;gap:var(--e5);}
/* 12px fora da escala 11/15/17/24/40/64: 15px em caixa alta estoura a barra (194930c) */
.topo-links a{color:var(--food-ink);font-family:var(--fe);font-size:12px;font-weight:700;
  letter-spacing:.08em;text-decoration:none;text-transform:uppercase;}
.topo-links a:hover,.topo-links a[aria-current="page"]{color:var(--food-ink);}
.topo-links a,.topo .btn{white-space:nowrap;}
/* barra da Sites: com "Já sou cliente! Entrar" ela passa de 728px; abaixo de ~840 o menu sai e o
   "Entrar" encurta. Os dois botões ocupam largura fixa e só cabem dentro do cartão a partir de 399px
   (medido de 360 a 400; na Sites eles vazam do cartão nessa faixa): abaixo disso fica só o WhatsApp. */
@media(max-width:840px){.topo-links{display:none!important;}.entrar-longo{display:none;}}
@media(max-width:398px){.topo .btn-nav-outline{display:none;}}
@media(max-width:520px){
  :root{--topo-h:90px;--topo-shift:-90px;}
  .announcement{height:40px;}
  .announcement-strong,.announcement-copy,.announcement-cta,.announcement-separator{font-size:12px;}
  .topo{padding:var(--e3) var(--e4) var(--e2);}
  .topo .in{gap:var(--e4);min-height:70px;padding:var(--e3) var(--e4);}
  .topo .btn-sm{min-height:42px;padding:var(--e3);}
}

/* ---------- botões ----------
   A ação Food escreve sempre em tinta, inclusive no wipe e no :active. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  font-family:var(--fs);font-weight:700;font-size:var(--t-body);letter-spacing:-.01em;line-height:1;
  padding:var(--e4) var(--e5);border-radius:var(--r-btn);border:1.5px solid transparent;cursor:pointer;
  text-decoration:none;position:relative;overflow:hidden;isolation:isolate;min-height:48px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .12s,color .12s;}
.btn .s{transition:transform .26s var(--ease);}
.btn-1{background:var(--food-action);color:var(--food-on-color);}
.btn-1::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--food-action-hover);
  transform:translateX(-101%);transition:transform .42s var(--ease);}
.btn-1:hover::before{transform:translateX(0);}
.btn-1:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(237,95,14,.55);}
.btn-1:hover .s{transform:translateX(4px);}
.btn-1:active{background:var(--food-action-hover);color:var(--food-on-color);}
/* verde do WhatsApp (marca de terceiro) no matiz 142° do #25D366: branco 5,02 e 6,62 no hover.
   Depois de .btn-1, para o wipe e o :active da Food nunca pintarem o botão. */
.btn-wa{background:#128040;color:var(--food-white);}
.btn-wa::before{background:#0D6B35;}
.btn-wa:hover{box-shadow:0 16px 32px -12px rgba(18,128,64,.55);color:var(--food-white);}
.btn-wa:active{background:#0D6B35;color:var(--food-white);}
.btn-sm{padding:var(--e3) var(--e4);font-size:var(--t-body);min-height:44px;}
/* "Já sou cliente! Entrar" da Sites. Depois do .btn de propósito: o shorthand `border` dele reseta o
   border-color. Na Sites o contorno é roxo; na Food é tinta, como o guia pede para contorno e foco. */
.btn-nav-outline{background:transparent;border-color:var(--food-ink);color:var(--food-ink);gap:var(--e1);}
.btn-nav-outline:hover{background:rgba(10,10,10,.06);box-shadow:none;transform:none;}
.btn:active{transform:scale(.98);}
.btn:focus-visible{outline:2px solid var(--food-ink);outline-offset:3px;}

/* ---------- rodapé — padrão do ecossistema Módulo ----------
   Mesma estrutura de Módulo Tasks, Marketing e Sites:
   coluna-marca ("é uma marca da:" + logo Módulo) + colunas de links + base.
   Adaptação da unidade: o rótulo vai no damasco, onde cada unidade usa
   seu próprio acento. */
.site-footer{background:var(--food-ink);color:var(--food-inverse);padding:var(--e7) 0 var(--e8);}
.f-grid{display:grid;gap:var(--e7);
  grid-template-columns:minmax(220px,1.35fr) repeat(2,minmax(132px,.75fr));}
@media(max-width:900px){ .f-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:520px){ .f-grid{grid-template-columns:1fr;} }
.f-grid .h{color:var(--food-inverse-muted);font-family:var(--fe);font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:.14em;margin-bottom:var(--e3);text-transform:uppercase;}
.f-grid a{color:var(--food-inverse-secondary);display:block;font-family:var(--fs);font-size:var(--t-body);
  font-weight:500;line-height:1.55;padding:var(--e1) 0;text-decoration:none;transition:color .2s;}
.f-grid a:hover{color:var(--food-inverse);}
.f-grid a:focus-visible{outline:2px solid var(--food-action-hover);outline-offset:2px;border-radius:2px;}
/* Tracking em .08em: em caixa alta o DS pede mais, mas numa frase o espaço
   entre palavras vira rio. Fica no mínimo que ainda respira. */
.footer-parent{color:var(--food-action-hover);font-family:var(--fe);font-size:var(--t-eyebrow);
  font-weight:700;letter-spacing:.08em;margin:0 0 var(--e3);text-transform:uppercase;}
.f-grid .footer-brand{color:var(--food-inverse);display:inline-flex;padding:0;}
.footer-logo{align-items:center;display:inline-flex;gap:11px;}
.footer-logo-symbol{color:var(--food-inverse);height:30px;width:30px;}
.footer-logo-word{color:var(--food-inverse);font-family:var(--fs);font-size:18px;font-weight:800;
  letter-spacing:.02em;line-height:1;paint-order:stroke fill;text-transform:uppercase;
  -webkit-text-stroke:.04em currentColor;}
.footer-copy{color:var(--food-inverse-muted);font-family:var(--fs);font-size:var(--t-body);line-height:1.55;
  margin:var(--e4) 0 0;max-width:36ch;}
.f-base{border-top:1px solid var(--food-inverse-border);color:var(--food-inverse-muted);display:flex;flex-wrap:wrap;
  font-family:var(--fs);font-size:var(--t-body);line-height:1.55;gap:var(--e4);
  justify-content:space-between;margin-top:var(--e7);padding-top:var(--e5);}

/* Escopado ao shell, não `*`: as páginas hospedeiras têm o
   `*{transition:none!important}` no inline delas, mas `*` não alcança
   pseudo-elemento — o wipe do .btn-1::before continuava animando. */
@media(prefers-reduced-motion:reduce){
  .topo,.topo .in,.btn,.btn .s,.btn-1::before,.f-grid a{transition:none!important;}
  .announcement-track{animation:none!important;}
}