/* ===========================================================================
   INDIE HOPS - CHOPP TRUCK
   Estilo COMUM às duas páginas da landing:
     index.html      a página do truck
     orcamento.html  o pedido de orçamento
   Aqui mora só o que as duas usam. O que é de uma página só continua no
   <style> dela, para não haver dois lugares onde mexer na mesma coisa.

   Sem build, sem framework, sem npm: este arquivo sobe por FTP como está.

   Linguagem visual: sticker bomb. A marca é verde bandeira, verde mata e
   limão, com lettering de brush. Todo painel, foto e bloco de número é
   tratado como adesivo colado: borda branca de recorte, sombra dura sem
   blur e rotação de um ou dois graus. É o que está pintado no truck.

   Cor: verde bandeira #088038 é a marca, limão #90C020 é a única cor de
   ação da página inteira, verde mata #103018 é a estrutura escura e a
   tinta. A estrela vermelha aparece uma vez, como adesivo, e nunca como
   cor de sistema.

   Raio (regra fixa da página): adesivo/painel/foto = 12px, controle
   (botão, campo, chip) = 8px. Nada de pílula, nada de canto solto.

   Camadas de z-index, só estas: 100 atalho de teclado, 80 barra fixa,
   70 botão flutuante do WhatsApp, 60 textura de grão. Nada mais recebe
   z-index. A foto ampliada é <dialog> com showModal(): ela vai para a
   camada de topo do navegador e fica acima de tudo isto sem número nenhum.
   =========================================================================== */

/* ---------- 1. tokens ---------------------------------------------------- */
:root {
  color-scheme: light;

  /* marca */
  --bandeira: #088038;
  --bandeira-forte: #066b2e;
  --mata: #103018;
  --mata-2: #16401f;
  --limao: #90c020;
  --limao-forte: #7caa17;
  --folha: #28a038;
  --estrela: #e40c18;

  /* superfícies e tinta, neutros puxados para o verde da marca */
  --superficie: #ffffff;
  --plano: #f1f5ee;
  --afundado: #e7ede3;
  --tinta: #103018;
  --tinta-2: #4a5a4c;
  --tinta-3: #66755f;
  --linha: #d8e0d4;
  --linha-forte: #b9c6b5;

  /* tinta sobre o slab escuro */
  --mata-tinta: #f2f7ef;
  --mata-tinta-2: #b4c4b0;
  --mata-linha: #2c4231;

  /* botão de ação: limão com tinta mata. 6,7:1 em qualquer superfície. */
  --acao: var(--limao);
  /* A sombra dura do botão principal: o limão escurecido. Com --mata ela se
     confundia com o fundo do hero, e o botão parecia sem relevo. */
  --acao-sombra: #55780f;
  --acao-forte: var(--limao-forte);
  --acao-tinta: var(--mata);

  --raio: 12px;   /* adesivo, painel, foto */
  --raio-c: 8px;  /* controle */
  --dura: 5px 5px 0 var(--mata);           /* sombra de adesivo */
  --dura-g: 8px 8px 0 var(--mata);
  --ambiente: 0 10px 30px rgba(16, 48, 24, .13);
  --recorte: #ffffff;                       /* borda branca de recorte */

  --borda-foco: 3px;
  --nav-total: 76px;

  --f-corpo: "Archivo", "Segoe UI", system-ui, sans-serif;
  --f-display: "Archivo Black", "Archivo", "Segoe UI", system-ui, sans-serif;
  --f-brush: "Kaushan Script", "Segoe Script", cursive;

  --t-hero: clamp(2.45rem, 7.4vw, 5.25rem);
  --t-h2: clamp(1.85rem, 4.4vw, 3.1rem);
  --t-h3: clamp(1.12rem, 2.1vw, 1.45rem);
  --t-num: clamp(2.1rem, 5.6vw, 3.4rem);
  --t-corpo: clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
  --t-h4: 1.1rem;
  --t-intro: clamp(1.05rem, 2vw, 1.32rem);
  --t-destaque: 1.5rem;
  --t-apoio: 0.98rem;
  --t-peq: 0.9rem;
  --t-micro: 0.75rem;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --secao: clamp(3rem, 6vw, 5rem);
  --larg: 1280px;
}

/* O escuro é escolhido, não é inversão: tem os seus próprios passos.
   Vale para a preferência do sistema desde que o usuário não tenha fixado
   o claro, e sempre que ele escolher escuro no botão. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-tema="claro"])) {
    color-scheme: dark;
    --bandeira: #0ca045;
    --bandeira-forte: #0bb54d;
    --mata: #0c1609;
    --mata-2: #16261a;
    --limao: #a9d63a;
    --limao-forte: #b9e04e;
    --folha: #39b64a;
    --estrela: #ff3b45;

    --superficie: #12200f;
    --plano: #0a1408;
    --afundado: #0d1a0b;
    --tinta: #f2f7ef;
    --tinta-2: #b4c4b0;
    --tinta-3: #8ca088;
    --linha: #24361f;
    --linha-forte: #364a30;

    --mata-tinta: #f2f7ef;
    --mata-tinta-2: #b4c4b0;
    --mata-linha: #24361f;

    --acao-tinta: #0c1609;
    --dura: 5px 5px 0 #050d04;
    --dura-g: 8px 8px 0 #050d04;
    --ambiente: 0 10px 30px rgba(0, 0, 0, .5);
    --recorte: #e6efe3;
  }
}

:root[data-tema="escuro"] {
  color-scheme: dark;
  --bandeira: #0ca045;
  --bandeira-forte: #0bb54d;
  --mata: #0c1609;
  --mata-2: #16261a;
  --limao: #a9d63a;
  --limao-forte: #b9e04e;
  --folha: #39b64a;
  --estrela: #ff3b45;

  --superficie: #12200f;
  --plano: #0a1408;
  --afundado: #0d1a0b;
  --tinta: #f2f7ef;
  --tinta-2: #b4c4b0;
  --tinta-3: #8ca088;
  --linha: #24361f;
  --linha-forte: #364a30;

  --mata-tinta: #f2f7ef;
  --mata-tinta-2: #b4c4b0;
  --mata-linha: #24361f;

  --acao-tinta: #0c1609;
  --dura: 5px 5px 0 #050d04;
  --dura-g: 8px 8px 0 #050d04;
  --ambiente: 0 10px 30px rgba(0, 0, 0, .5);
  --recorte: #e6efe3;
}

/* ---------- 2. base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* A calha do scrollbar fica reservada sempre: sem isso a página pula 15px
     para o lado quando a foto ampliada trava a rolagem do fundo. */
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--plano);
  color: var(--tinta);
  font: 400 var(--t-corpo)/1.6 var(--f-corpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  hyphens: auto;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 400;          /* Archivo Black já é o peso */
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
a { color: inherit; }

[hidden] { display: none !important; }

/* foco visível em tudo, nas duas superfícies */
:focus-visible {
  outline: var(--borda-foco) solid var(--limao);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.atalho {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -140%);
  z-index: 100;
  background: var(--limao); color: var(--mata);
  padding: .7rem 1.2rem; border-radius: 0 0 var(--raio-c) var(--raio-c);
  font-weight: 700; font-size: var(--t-peq); text-decoration: none;
}
.atalho:focus { transform: translate(-50%, 0); }

/* grão de serigrafia: uma única camada fixa, sem eventos de ponteiro,
   para não repintar nada que rola */
.grao {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  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='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-tema="escuro"] .grao { opacity: .09; mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-tema="claro"])) .grao { opacity: .09; mix-blend-mode: screen; }
}

/* ---------- 3. primitivas de layout ------------------------------------- */
.env {
  width: 100%; max-width: var(--larg);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.secao { padding-block: var(--secao); }

.sobrelinha {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bandeira);
  margin: 0 0 .85rem;
  max-width: 34ch;
}

.intro {
  color: var(--tinta-2);
  max-width: 56ch;
  margin-top: .8rem;
  font-size: var(--t-corpo);
}

.brush {
  font-family: var(--f-brush);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  /* Kaushan tem olho menor que Archivo Black: sobe um pouco para casar */
  font-size: 1.14em;
  line-height: 1;
  display: inline-block;
  padding-inline: .06em;
  padding-bottom: .12em;   /* folga para a cauda do brush */
  transform: rotate(-2deg);
}

/* ---------- 4. barra fixa ----------------------------------------------- */
.barra {
  position: fixed; inset-inline: 0; top: 0; z-index: 80;
  padding: 14px var(--gutter) 0;
  pointer-events: none;
}
.barra-in {
  pointer-events: auto;
  max-width: var(--larg); margin-inline: auto;
  height: 62px;
  display: flex; align-items: center; gap: 1rem;
  padding: 0 .55rem 0 .55rem;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--ambiente), inset 0 1px 0 rgba(255,255,255,.7);
}
:root[data-tema="escuro"] .barra-in { box-shadow: var(--ambiente), inset 0 1px 0 rgba(255,255,255,.06); }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-tema="claro"])) .barra-in { box-shadow: var(--ambiente), inset 0 1px 0 rgba(255,255,255,.06); }
}

.marca { display: flex; align-items: center; text-decoration: none; border-radius: var(--raio-c); }
.marca img {
  /* proporção livre: cortar em caixa fixa comia o "INDIE" do logo */
  height: 34px; width: auto;
  object-fit: contain;
}
/* O logo é verde escuro; sobre a barra clara ele precisa clarear, igual ao
   que a tela de entrada do sistema faz. */
.barra .marca img { filter: brightness(1.75) saturate(1.1); }

.barra nav { margin-inline-start: auto; display: flex; align-items: center; gap: .35rem; }
.barra nav a {
  text-decoration: none;
  font-size: var(--t-peq); font-weight: 500;
  color: var(--tinta-2);
  padding: .55rem .7rem; border-radius: var(--raio-c);
  transition: color .25s cubic-bezier(.16,1,.3,1), background-color .25s cubic-bezier(.16,1,.3,1);
}
.barra nav a:hover { color: var(--tinta); background: var(--plano); }

@media (max-width: 919px) {
  /* Os links de seção saem; o pedido de orçamento e o Entrar ficam. Antes
     tudo sumia e a barra fixa passava 9,7 telas carregando só o logo. */
  .barra nav a:not(.btn-cta):not(.btn-entrar) { display: none; }
  .barra nav { margin-inline-start: auto; }
}

/* Pedir orçamento: a ação da página, na cor de ação. */
.barra nav a.btn-cta {
  display: inline-flex; align-items: center;
  min-height: 44px;
  margin-inline-start: .35rem;
  padding: .5rem 1rem;
  border-radius: var(--raio-c);
  background: var(--acao); color: var(--acao-tinta);
  border: 2px solid var(--acao);
  font-size: var(--t-peq); font-weight: 700;
  white-space: nowrap;
}
.barra nav a.btn-cta:hover { background: var(--acao-forte); border-color: var(--acao-forte); color: var(--acao-tinta); }

/* Entrar: acesso do dono ao sistema. Contorno, para não disputar com o
   orçamento o olhar de quem chegou para contratar. */
.barra nav a.btn-entrar {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px;
  padding: .5rem .85rem;
  border-radius: var(--raio-c);
  background: transparent; color: var(--tinta);
  border: 2px solid var(--linha-forte);
  font-size: var(--t-peq); font-weight: 600;
  white-space: nowrap;
}
.barra nav a.btn-entrar:hover { border-color: var(--tinta-2); background: var(--plano); }

.rot-curto { display: none; }
@media (max-width: 919px) {
  .rot-longo { display: none; }
  .rot-curto { display: inline; }
}

/* ---------- 5. botões --------------------------------------------------- */
.btn {
  --off: 4px;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem .85rem .85rem 1.25rem;
  border: 2px solid var(--mata);
  border-radius: var(--raio-c);
  font: 700 .98rem/1 var(--f-corpo);
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1),
              background-color .3s cubic-bezier(.16,1,.3,1);
}
.btn-1 {
  background: var(--acao); color: var(--acao-tinta);
  box-shadow: var(--off) var(--off) 0 var(--acao-sombra);
}
.btn-1:hover { background: var(--acao-forte); transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--acao-sombra); }
.btn-1:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--acao-sombra); }

.btn-2 {
  background: transparent; color: var(--tinta);
  border-color: var(--linha-forte);
  padding-inline: 1.25rem;
}
.btn-2:hover { background: var(--afundado); transform: translate(-1px, -1px); }
.btn-2:active { transform: translate(1px, 1px); }

/* seta dentro da própria caixa, colada na borda interna direita.
   Quadrada, porque a página inteira é de canto reto. */
.btn-ico {
  display: grid; place-items: center;
  width: 26px; height: 26px; flex: none;
  border-radius: 5px;
  background: rgba(16,48,24,.16);
  transition: transform .3s cubic-bezier(.16,1,.3,1), background-color .3s cubic-bezier(.16,1,.3,1);
}
.btn:hover .btn-ico { transform: translateX(3px); background: rgba(16,48,24,.26); }

/* ---------- 6. rodapé ---------------------------------------------------- */
.rodape { background: var(--mata); color: var(--mata-tinta); padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.rodape-grade { display: grid; grid-template-columns: 1fr; gap: 2.25rem; align-items: start; }
@media (min-width: 760px) { .rodape-grade { grid-template-columns: auto 1fr; column-gap: clamp(2.5rem, 6vw, 5rem); } }
.rodape-logo { border-radius: var(--raio); width: 200px; height: auto; filter: brightness(1.75) saturate(1.1); }
.dominio {
  font-family: var(--f-display); font-size: clamp(1.5rem, 4vw, 2.1rem);
  letter-spacing: -.03em; color: var(--mata-tinta); text-decoration: none;
  display: inline-block; line-height: 1.15;
}
.dominio:hover { color: var(--limao); }
/* O domínio e a frase logo abaixo são um par: o espaço entre eles é menor que
   o espaço até a lista de links. */
.rodape p { color: var(--mata-tinta-2); max-width: 46ch; margin-top: .3rem; font-size: var(--t-apoio); }
.rodape-links { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; margin-top: 1.6rem; padding: 0; list-style: none; }
.rodape-links a { font-size: var(--t-peq); color: var(--mata-tinta-2); text-decoration: none; }
.rodape-links a:hover { color: var(--limao); text-decoration: underline; text-underline-offset: 3px; }
/* A linha da lei e o CNPJ fecham a página no centro: são recado de rodapé,
   não conteúdo que alguém lê em coluna. */
/* As duas últimas linhas fecham a página no centro dela, e não no centro da
   coluna de texto: `.rodape p` limita a 46ch, e era esse limite que deixava
   o CNPJ e o aviso de 18 anos parecendo tortos, presos à esquerda. */
.rodape .rodape-fim {
  max-width: none;
  margin: clamp(1.4rem, 3vw, 2.2rem) auto 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--mata-linha);
  font-size: var(--t-micro);
  color: var(--mata-tinta-2);
  text-align: center;
  line-height: 1.5;
}
.rodape .rodape-fim span { display: block; margin-top: .2rem; color: var(--mata-tinta-2); }

/* ---------- 7. movimento ------------------------------------------------- */
/* Quem pediu menos movimento não recebe nenhum: o estado final é o normal. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- 8. botão flutuante do WhatsApp -------------------------------- */
/*
   Fica no canto de baixo à direita, nas duas páginas. Verde da marca, e não o
   verde do WhatsApp: a página inteira é verde, e um segundo verde ali vira
   remendo. O ícone é um balão de conversa, que diz o mesmo sem copiar a
   marca de outro. O <dialog> da foto ampliada abre na camada de cima do
   navegador, então continua por cima deste botão sem precisar de z-index.
*/
.zap-flutua {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 40;
  /* Só o ícone, em qualquer tela: o botão fica no canto o tempo todo e uma
     pastilha com texto rouba espaço de leitura. O nome continua no
     aria-label, para quem usa leitor de tela. */
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 0;
  border-radius: 999px;
  background: var(--bandeira); color: #fff;
  font: 700 var(--t-peq)/1 var(--fonte-titulo, inherit);
  letter-spacing: .01em;
  text-decoration: none;
  box-shadow: 0 8px 22px rgb(16 48 24 / .35), 0 0 0 2px #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.zap-flutua:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgb(16 48 24 / .42), 0 0 0 2px #fff; }
.zap-flutua:focus-visible { outline: 3px solid var(--limao); outline-offset: 3px; }
.zap-flutua svg { width: 26px; height: 26px; flex: none; }
/* O nome fica só para o leitor de tela. */
.zap-flutua span {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* No telefone o botão cai no mesmo canto da seta "próxima foto" da galeria.
   Enquanto a galeria está na tela, ele sai da frente. */
.zap-flutua.zap-escondido { opacity: 0; pointer-events: none; transform: translateY(10px); }
@media (prefers-reduced-motion: reduce) {
  .zap-flutua { transition: none; }
  .zap-flutua:hover { transform: none; }
  .zap-flutua.zap-escondido { transform: none; }
}

/* ---------- 9. impressão ------------------------------------------------- */
@media print {
  .barra, .grao, .zap-flutua { display: none; }
  body { background: #fff; color: #000; }
}

/* ---------- cervejômetro: o placar dos estilos -------------------------- */
/*
 * Aqui o número é o conteúdo. Sem descrição de estilo: quem quer saber o que
 * é uma Weiss pergunta no WhatsApp, e quem chega na página quer ver que o
 * truck roda de verdade.
 */
.cervejometro .cel { text-align: center; }
.cervejometro .cel h3 { margin-bottom: .1rem; }
.cervejometro .cel .litros {
  margin-top: .25rem;
  font-size: var(--t-h3);
  line-height: 1.1;
  color: var(--bandeira);
}