/* ==========================================================================
   Kallos Sucos — layout.css
   Elementos compartilhados entre as páginas: barra superior, cabeçalho,
   navegação, rodapé e botão flutuante de WhatsApp.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Barra superior — SEM USO desde 11/08/2026

   A marcacao saiu de index.html (a faixa verde escura com
   endereco, telefone e redes, acima do cabecalho). Mantenho as regras aqui
   porque o projeto nao esta em controle de versao: para trazer a barra de
   volta basta recolocar o bloco .barra-topo no <body>, antes do <header>,
   e devolver o --topbar-h ao inset do .nav no bloco mobile.

   Atencao: .redes NAO e daqui — o rodape usa a mesma classe.
   -------------------------------------------------------------------------- */
.barra-topo {
  background: var(--verde-escuro);
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--t-xs);
}
.barra-topo__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--topbar-h);
}
.barra-topo__frase {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.barra-topo__frase svg { flex: none; color: var(--amarelo); }

.barra-topo__lado {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.barra-topo a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transicao);
}
.barra-topo a:hover { color: var(--amarelo); }

.redes {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.redes a {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--raio-full);
  background: rgba(255, 255, 255, 0.1);
}
.redes a:hover {
  background: var(--amarelo);
  color: var(--verde-escuro);
}

@media (max-width: 780px) {
  .barra-topo__frase { display: none; }
  .barra-topo__interno { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Cabeçalho + logo
   -------------------------------------------------------------------------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 250, 246, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transicao), border-color var(--transicao),
    background-color var(--transicao);
}
.cabecalho.is-fixo {
  background: rgba(253, 250, 246, 0.97);
  border-bottom-color: var(--borda);
  box-shadow: var(--sombra-sm);
}
.cabecalho__interno {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  transition: transform var(--transicao);
}
.logo:hover { transform: scale(1.03); }
.logo img {
  width: auto;
  height: 46px;
}
@media (max-width: 520px) {
  .logo img { height: 38px; }
}

/* --------------------------------------------------------------------------
   Navegação
   -------------------------------------------------------------------------- */
.nav__lista {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--raio-full);
  color: var(--texto);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transicao), color var(--transicao);
}
.nav__link:hover { background: var(--verde-suave); color: var(--verde); }
.nav__link[aria-current="page"] {
  color: var(--verde);
  background: var(--verde-suave);
}
.nav__link svg { transition: rotate var(--transicao); }
.nav__item--tem-sub[data-aberto="true"] .nav__link svg { rotate: 180deg; }

/* Submenu de sabores */
.nav__item--tem-sub { position: relative; }
.nav__sub {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 240px;
  padding: 0.6rem;
  margin: 0;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-lg);
  opacity: 0;
  visibility: hidden;
  translate: 0 -8px;
  transition: opacity var(--transicao), translate var(--transicao),
    visibility var(--transicao);
}
.nav__item--tem-sub[data-aberto="true"] .nav__sub {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}
.nav__sub a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--raio-sm);
  color: var(--texto);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transicao);
}
.nav__sub a:hover { background: var(--creme); }
.nav__sub .ponto {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--raio-full);
  background: var(--cor-sabor, var(--laranja));
}

.cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Botão hambúrguer */
.hamburguer {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--verde-suave);
  border: none;
  border-radius: var(--raio-sm);
  color: var(--verde);
}
.hamburguer span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transicao), opacity var(--transicao);
}
.hamburguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguer[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Navegação mobile -------------------------------------------------- */
@media (max-width: 1150px) {
  .hamburguer { display: block; }
  .cabecalho__acoes .btn { display: none; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    padding: 1.5rem var(--gutter) 3rem;
    background: var(--creme-fundo);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    translate: 0 -12px;
    transition: opacity var(--transicao), translate var(--transicao),
      visibility var(--transicao);
  }
  .nav.is-aberta {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
  }
  .nav__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
  }
  .nav__link {
    justify-content: space-between;
    padding: 0.95rem 1rem;
    font-size: var(--t-lg);
    border-radius: var(--raio-sm);
  }
  .nav__sub {
    position: static;
    display: none;
    min-width: 0;
    margin: 0.25rem 0 0.5rem 1rem;
    box-shadow: none;
    background: var(--creme);
    opacity: 1;
    visibility: visible;
    translate: none;
  }
  .nav__item--tem-sub[data-aberto="true"] .nav__sub { display: block; }
  .nav__mobile-extra {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--borda);
  }
}
@media (min-width: 1151px) {
  .nav__mobile-extra { display: none; }
}

body.nav-travada { overflow: hidden; }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
.rodape {
  background: var(--marrom-escuro);
  color: rgba(255, 255, 255, 0.76);
  font-size: var(--t-sm);
}
.rodape__grade {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 5vw, 4.5rem);
}
@media (max-width: 980px) {
  .rodape__grade { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .rodape__grade { grid-template-columns: 1fr; }
}

.rodape h3 {
  font-family: var(--fonte-corpo);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amarelo);
  margin-bottom: 1.15rem;
}
.rodape a {
  color: rgba(255, 255, 255, 0.76);
  text-decoration: none;
  transition: color var(--transicao);
}
.rodape a:hover { color: var(--amarelo); }

.rodape__marca img {
  height: 54px;
  width: auto;
  /* o logo é marrom sobre creme: no fundo escuro ele ganha um cartão claro */
  padding: 0.55rem 0.85rem;
  background: var(--creme-fundo);
  border-radius: var(--raio-sm);
}
.rodape__bio {
  margin: 1.25rem 0;
  max-width: 32ch;
  line-height: 1.7;
}
.rodape .redes a { background: rgba(255, 255, 255, 0.12); }
.rodape .redes a:hover { background: var(--amarelo); color: var(--marrom-escuro); }

.rodape__links {
  display: grid;
  gap: 0.7rem;
  margin: 0;
}

.rodape__loja {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.rodape__loja:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.rodape__loja strong {
  display: block;
  color: #fff;
  font-weight: 700;
}
.rodape__loja span {
  display: block;
  font-size: var(--t-xs);
  line-height: 1.55;
}
/* Cidades atendidas só por entrega, sem loja física. */
.rodape__loja-atende {
  margin-top: 0.2rem;
  color: rgba(255, 255, 255, 0.72);
  font-style: italic;
}
.rodape__loja a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  font-weight: 700;
  color: var(--amarelo);
}

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--t-xs);
}
.rodape__base p { margin: 0; }

/* --- O rodape no celular -------------------------------------------------
   Em coluna unica o rodape passava de 1300px: mais alto que a secao de FAQ
   inteira, so para repetir links e enderecos que a pagina ja deu. E um
   rodape nao e conteudo, e o fecho — quando ele fica mais longo que as
   secoes, a pagina parece nao terminar.

   Nada e removido. O que muda e que cada grupo para de ser UMA COLUNA de
   uma coisa por linha:

     marca      -> logo e redes dividem a mesma linha, a bio embaixo
     links      -> a lista vira duas colunas dentro do proprio grupo
     lojas      -> cidade e telefone na mesma linha, endereco embaixo
     base       -> centralizada, as duas frases coladas

   Sao quatro trocas de "uma coluna" por "duas colunas" no mesmo espaco. O
   rodape cai para perto de um terco da altura sem perder uma linha de texto.
   ------------------------------------------------------------------------ */
@media (max-width: 620px) {
  .rodape__grade {
    /* os grupos seguem empilhados: quem vira duas colunas e o conteudo
       DENTRO de cada um, e nao os grupos entre si. Lado a lado, "Navegacao"
       (7 itens) e "Nossos sucos" (4) deixariam tres linhas de buraco embaixo
       do menor — o vazio ragged que faz rodape parecer mal montado. */
    grid-template-columns: 1fr;
    gap: 1.6rem;
    padding-block: 2.25rem 1.5rem;
  }

  /* --- Marca ---
     Logo, bio e redes eram tres faixas empilhadas para dois objetos pequenos
     e um paragrafo. Logo e redes cabem na mesma linha (um em cada ponta), e
     a bio passa por baixo dos dois. */
  .rodape__marca {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.9rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .rodape__marca img { grid-area: 1 / 1; height: 44px; }
  .rodape__marca .redes { grid-area: 1 / 2; justify-self: end; }
  .rodape__bio {
    grid-area: 2 / 1 / 3 / -1;
    margin: 0;
    max-width: none;
    font-size: var(--t-xs);
    line-height: 1.6;
  }

  .rodape h3 { margin-bottom: 0.7rem; }

  /* --- Listas de links ---
     Onze links, um por linha, gastavam mais de 400px. Em duas colunas viram
     seis linhas. O corpo cai para 0,875rem porque e o tamanho em que o link
     mais longo ("A fazenda Boitanga") ainda cabe em meia largura sem quebrar
     — link partido em duas linhas dentro de uma coluna estreita e o que faz
     a lista parecer bagunçada. */
  .rodape__links {
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem 1rem;
    font-size: 0.875rem;
  }

  /* --- Lojas ---
     O endereco completo esta na secao "Onde nos encontrar", logo acima, e
     agora em carrossel. Aqui ele e referencia rapida: a cidade e o telefone
     — que e a acao — sobem para a mesma linha, e o endereco fica como
     legenda embaixo. As divisorias saem: com os blocos ja curtos, elas
     viravam mais linha na tela do que separacao util. */
  .rodape__loja {
    padding-bottom: 0.7rem;
    margin-bottom: 0.7rem;
    /* cidade na esquerda, telefone na direita, endereco atravessando */
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.15rem 0.75rem;
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
  .rodape__loja strong { grid-column: 1; font-size: 0.9375rem; }
  .rodape__loja a {
    grid-area: 1 / 2;
    margin-top: 0;
    font-size: 0.875rem;
    white-space: nowrap;
  }
  .rodape__loja span {
    grid-column: 1 / -1;
    font-size: 0.75rem;
    line-height: 1.45;
  }

  /* --- Base ---
     Duas frases de credito ancoradas a esquerda, uma em cada linha, com
     1,5rem de recuo em cima e embaixo. Centralizadas e coladas elas lem como
     assinatura, que e o que sao. */
  .rodape__base {
    justify-content: center;
    text-align: center;
    gap: 0.3rem;
    padding-block: 1.1rem;
    font-size: 0.75rem;
  }
  .rodape__base p { flex: 0 0 100%; }
}

/* --------------------------------------------------------------------------
   Botão flutuante de WhatsApp

   O que estava errado não era a cor nem o desenho: era a PROPORÇÃO. O disco
   saía de 22px de glifo mais 1rem de recuo dos dois lados = 54px, ou seja o
   glifo ocupava 41% do disco. Botão de aplicativo de verdade fica perto de
   52%, e é essa diferença que fazia a marca ler como uma marquinha perdida
   no meio de uma moeda verde em vez de um botão.

   Com a proporção certa o resto é acabamento, e cada peça resolve uma coisa:

     gradiente        o verde chapado é uma mancha; com claro em cima e fundo
                      embaixo o disco ganha volume e parece um objeto
     filete de dentro  1px branco fecha a borda — sem ele o disco encosta no
                      fundo sem nenhuma linha dizendo onde ele acaba
     sombra em duas    uma curta e escura que cola o botão na tela, e uma
                      longa e VERDE que espalha a cor por baixo. A antiga era
                      uma só, marrom e com 60px de desfoque: numa peça de
                      54px isso não é sombra, é borrão

   Sem anel branco em volta de propósito: o botão é fixo e passa por cima de
   seção creme e de seção verde-escura enquanto a página rola. Um anel claro
   fica bonito no creme e vira auréola no verde.
   -------------------------------------------------------------------------- */
.zap {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  background: linear-gradient(165deg, #41e37c 0%, #25d366 46%, #1bb757 100%);
  color: #05341a;
  border-radius: var(--raio-full);
  font-size: var(--t-sm);
  font-weight: 800;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 10px 22px -6px rgba(7, 94, 45, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.16);
  /* filter e não background-color: gradiente não interpola, então mudar o
     verde no hover daria um salto seco. Brilho e saturação animam. */
  transition: transform var(--transicao), filter var(--transicao);
}
.zap:hover {
  transform: translateY(-3px) scale(1.02);
  filter: saturate(1.12) brightness(1.06);
}
/* No toque não existe hover: o afundar é o único retorno de que o dedo pegou */
.zap:active { transform: translateY(0) scale(0.97); }

/* O glifo vai BRANCO, e nao na cor do rotulo. Na cor do texto ele lia como
   um carimbo escuro no meio do verde; branco ele vira a marca do WhatsApp,
   que e o que a pessoa reconhece antes de ler qualquer coisa.

   O rotulo continua verde-escuro de proposito: branco sobre o #25d366 da
   marca da ~2,3:1 de contraste e o texto some no sol. Icone e texto podem
   ter cores diferentes aqui porque cada um resolve um problema — o icone
   identifica, o texto informa. No celular o rotulo nem aparece (ver o
   @media abaixo), entao o botao fica exatamente o disco verde com a marca
   branca. */
.zap svg {
  flex: none;
  color: #fff;
  /* a bolha tem o rabinho embaixo à esquerda, então o peso do desenho cai um
     fio abaixo do centro geométrico. 1px para cima devolve o centro óptico */
  margin-top: -1px;
}

@media (max-width: 560px) {
  .zap span { display: none; }
  /* medida fechada em vez de recuo: com padding o disco dependia do tamanho
     do glifo, e era assim que a proporção tinha escapado. Agora o disco tem
     56px, o glifo 29 — 52% — e um não pode andar sem o outro. */
  .zap {
    width: 56px;
    height: 56px;
    padding: 0;
  }
  .zap svg { width: 29px; height: 29px; }
}