/* ==========================================================================
   Kallos Sucos — home.css
   Estilos exclusivos da página inicial (index.html).
   ========================================================================== */


/* --------------------------------------------------------------------------
   Hero
   Os estilos do hero moram em arquivos próprios, um por opção de layout:
     css/hero-1-video.css     — opção 1: vídeo percorrido pelo scroll
     css/hero-2-sabores.css   — opção 2: carrossel vertical de sabores
   index.html carrega apenas a opção ativa. Ver _naopublicar/_arquivo/heros/LEIA-ME.md.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Faixa de diferenciais
   -------------------------------------------------------------------------- */
/* A faixa era um slab de amarelo canario cheio entre o hero e a secao branca.
   Amarelo #ffdd00 e a cor de ENERGIA da marca: no resto do site ele aparece
   sempre em pedaco pequeno — rotulo de rodape, botao, o "6" do numerao — e e
   por isso que funciona. Numa tarja da largura da tela ele deixa de ser
   acento e vira o assunto, e o verde por cima dele ainda vibra: duas cores
   saturadas encostadas, nenhuma cedendo.

   Invertido, cada cor volta ao papel que tem: o verde escuro segura a faixa
   (e amarra com a secao "Cada sabor, por dentro", que ja e desse verde) e o
   amarelo volta a ser o acento, agora nos icones — que e onde ele chama
   atencao para a promessa em vez de competir com ela. */
.faixa {
  background: var(--verde-escuro);
  color: rgba(255, 255, 255, 0.82);
}
.faixa__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem 2rem;
  padding-block: clamp(2rem, 3.5vw, 2.75rem);
}
.faixa__item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.faixa__item svg {
  flex: none;
  color: var(--amarelo);
}
.faixa__item strong {
  display: block;
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 800;
  line-height: 1.25;
}
.faixa__item span {
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.6);
}

/* No celular a faixa caía em UMA coluna e virava uma tarja de ~230px de
   amarelo com quatro linhas empilhadas. E caía por pouco: o auto-fit pede
   200px por coluna mais os 2rem de gap = 432px, contra os 400px de
   container que sobram num aparelho de 440. Faltavam 32px.

   Baixando a coluna pra 140px e o gap pra 1rem os quatro selos entram em
   2x2 e a faixa cai pra ~130px — sem esconder nada, sem JS. O auto-fit
   continua sendo quem decide: abaixo de ~296px de container (aparelhos de
   320) ele volta sozinho pra uma coluna, que ali é o certo mesmo.

   O ícone desce de 30 pra 24px porque numa coluna de 192px cada 6px de
   ícone é 6px a menos pra "Sem açúcar adicionado" não quebrar em três. */
@media (max-width: 480px) {
  .faixa__grade {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.25rem 1rem;
  }
  .faixa__item {
    gap: 0.7rem;
    align-items: start;
  }
  .faixa__item svg {
    width: 24px;
    height: 24px;
    margin-top: 0.1rem;
  }
}

/* --------------------------------------------------------------------------
   Sabores
   -------------------------------------------------------------------------- */
/* 230px e o minimo que deixa os quatro sabores caberem lado a lado num
   monitor de 1400px. Com 260px o quarto cartao descia sozinho para a segunda
   fila e a vitrine ficava torta. */
.sabores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.sabor {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem 1.75rem;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao),
    border-color var(--transicao);
}
.sabor::before {
  content: "";
  position: absolute;
  inset: -40% 0 auto;
  height: 70%;
  background: radial-gradient(60% 60% at 50% 100%, var(--cor-sabor), transparent 70%);
  opacity: 0.16;
  transition: opacity var(--transicao);
}
.sabor:hover,
.sabor:focus-within {
  transform: translateY(-8px);
  border-color: var(--cor-sabor);
  box-shadow: var(--sombra-lg);
}
.sabor:hover::before,
.sabor:focus-within::before { opacity: 0.3; }

.sabor__imagem {
  position: relative;
  display: grid;
  place-items: center;
  height: 260px;
  margin-bottom: 1.5rem;
}
/* min-height/min-width zerados porque item de grid nasce com min-*: auto — o
   tamanho natural da foto (900 px) vencia o height: 100% e a garrafa vazava
   por cima do texto do cartão. */
.sabor__imagem img {
  height: 100%;
  width: auto;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(74, 41, 23, 0.22));
  transition: transform var(--transicao);
}
.sabor:hover .sabor__imagem img,
.sabor:focus-within .sabor__imagem img { transform: scale(1.06) rotate(-2deg); }

.sabor__nome {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.sabor__desc {
  font-size: var(--t-sm);
  color: var(--texto-suave);
  margin-bottom: 1.25rem;
}
.sabor__volumes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.5rem;
}
.sabor__volumes li {
  padding: 0.25rem 0.6rem;
  background: var(--creme);
  border: 1px solid var(--borda);
  border-radius: var(--raio-full);
  font-size: var(--t-xs);
  font-weight: 700;
}
.sabor__cta {
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  font-size: var(--t-sm);
  font-weight: 800;
  color: var(--verde);
}
.sabor__cta svg { transition: translate var(--transicao); }
.sabor:hover .sabor__cta svg,
.sabor:focus-within .sabor__cta svg { translate: 4px 0; }

.sabor__tag {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  padding: 0.3rem 0.7rem;
  background: var(--cor-sabor);
  color: #fff;
  border-radius: var(--raio-full);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   O que tem dentro + visor 360°
   Mesma grade de duas colunas da seção da fazenda, para as duas paradas em
   par lerem como irmãs. O que muda é o fundo verde: aqui o visual é um
   cartão de vidro sobre o verde, não uma foto sangrando.
   -------------------------------------------------------------------------- */
/* Banho de cor do sabor aberto: uma mancha grande atrás da garrafa que muda de
   cor junto com a aba. Gradiente não anima, cor de fundo anima — por isso a
   camada é cor sólida recortada por uma máscara radial, e não um gradiente.
   Sem suporte a máscara ela simplesmente não aparece. */
#dentro { position: relative; overflow: hidden; }
#dentro > .container { position: relative; z-index: 1; }
.dentro__luz { display: none; }
@supports (mask-image: radial-gradient(#000, transparent)) {
  .dentro__luz {
    display: block;
    position: absolute;
    inset: 0;
    background-color: var(--cor-sabor, var(--amarelo));
    opacity: 0.24;
    mask-image: radial-gradient(58% 62% at 72% 55%, #000 0%, transparent 72%);
    transition: background-color 500ms var(--transicao);
    pointer-events: none;
  }
}
@media (max-width: 900px) {
  /* Empilhado, a garrafa vai para baixo: a luz acompanha. */
  .dentro__luz { mask-image: radial-gradient(70% 40% at 50% 78%, #000 0%, transparent 72%); }
}

/* Sem cabeçalho na tela, a seção pode respirar menos por cima: quem abre é a
   fileira de abas. */
#dentro { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

/* Gelos derivando. Mesmas imagens da órbita do hero, aqui em movimento lento e
   opacidade baixa: é textura de fundo, não é o número da seção. */
.dentro__gelos {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.dentro__gelos i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: 1;
  background: center / contain no-repeat;
  opacity: var(--op);
  filter: blur(1px);
  animation: gelo-deriva var(--dur) ease-in-out var(--atraso) infinite;
}
/* Caminhos aqui e não no HTML: url() dentro de custom property resolve
   relativo a ESTE arquivo, e escrito lá o caminho quebrava sem avisar. */
.dentro__gelos i:nth-child(1) { background-image: url(../img/gelo1.webp); }
.dentro__gelos i:nth-child(2) { background-image: url(../img/gelo3.webp); }
.dentro__gelos i:nth-child(3) { background-image: url(../img/gelo5.webp); }
.dentro__gelos i:nth-child(4) { background-image: url(../img/gelo2.webp); }
.dentro__gelos i:nth-child(5) { background-image: url(../img/gelo6.webp); }
@keyframes gelo-deriva {
  0%, 100% { translate: 0 0;        rotate: 0deg;   }
  50%      { translate: -2vw 3.5vh; rotate: 18deg;  }
}
@media (max-width: 900px) {
  /* Empilhado sobra menos margem: só os gelos da borda continuam. */
  .dentro__gelos i:nth-child(n+4) { display: none; }
}

/* Abas de sabor. São pílulas, o mesmo formato dos volumes nos cartões de
   sabor, com a cor do próprio sabor quando ativas. */
.sabor-abas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.sabor-aba {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.4rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--raio-full);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  transition: background-color var(--transicao), border-color var(--transicao),
    color var(--transicao);
}
.sabor-aba .ponto {
  width: 9px;
  height: 9px;
  border-radius: var(--raio-full);
  background: var(--cor-sabor);
}
.sabor-aba:hover { border-color: var(--cor-sabor); }
.sabor-aba[aria-selected="true"] {
  background: var(--cor-sabor);
  border-color: var(--cor-sabor);
  color: var(--verde-escuro);
}
.sabor-aba[aria-selected="true"] .ponto { background: var(--verde-escuro); }

/* Cada painel repete a grade de duas colunas da seção da fazenda. */
.sabor-painel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
/* Só o JS esconde painel — sem ele os três ficam visíveis, empilhados. */
.sabor-painel[hidden] { display: none; }
@media (max-width: 900px) {
  .sabor-painel { grid-template-columns: 1fr; }
}

/* O numerão é o primo grande de .fazenda__numeros: mesma fonte display, mesma
   ideia de número + legenda, no tamanho de quem abre o painel. */
.numerao {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.85rem;
  margin-bottom: 1.25rem;
}
.numerao strong {
  font-family: var(--fonte-display);
  font-size: clamp(3rem, 7vw, 4.75rem);
  line-height: 0.85;
  color: var(--cor-sabor, var(--amarelo));
}
.numerao span {
  font-size: var(--t-lg);
  font-weight: 700;
  color: #fff;
  max-width: 16ch;
}

.sabor-painel__tagline {
  font-family: var(--fonte-display);
  font-size: var(--t-xl);
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.75rem;
}
.sabor-painel__texto-corrido {
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.82);
  max-width: 40rem;
}
.sabor-painel__rotulo {
  margin: 1.75rem 0 0.6rem;
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.sabor-painel__volumes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}
.sabor-painel__volumes li {
  padding: 0.3rem 0.8rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--raio-full);
  font-size: var(--t-xs);
  font-weight: 700;
  color: #fff;
}

/* Fecha a seção em três colunas: a promessa vale para os três sabores, então
   ela fica fora dos painéis. */
.pontos-chave {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.85rem 2rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: clamp(2rem, 4vw, 3rem) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  list-style: none;
}
.pontos-chave li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.82);
}
.pontos-chave svg {
  flex: none;
  margin-top: 2px;
  color: var(--amarelo);
}

/* O palco do visor: sem moldura. A garrafa fica solta sobre o verde, do mesmo
   jeito que fica solta sobre o gelo no hero — quem dá o volume é a luz atrás
   dela, não uma borda. */
/* Nome do sabor em corpo enorme, vazado, atrás da garrafa. É o que tira a
   seção do "texto + foto": dá escala e faz o painel parecer um pôster.
   --p é a travessia da seção pela tela (0 a 1), escrita pelo main.js: a marca
   sobe devagar enquanto a página desce. */
.sabor-painel__marca {
  position: absolute;
  z-index: 0;
  right: -0.06em;
  top: 50%;
  translate: 0 calc(-50% + (var(--p, 0.5) - 0.5) * -70px);
  font-family: var(--fonte-display);
  font-size: clamp(4.5rem, 13vw, 11rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.16);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 900px) {
  .sabor-painel__marca {
    top: auto;
    bottom: 12%;
    right: -0.04em;
    font-size: clamp(3.5rem, 20vw, 7rem);
  }
}

.visor360 {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: clamp(320px, 42vw, 560px);
  cursor: grab;
  /* pan-y: no celular o arrasto horizontal gira a garrafa e o vertical
     continua rolando a página. */
  touch-action: pan-y;
  user-select: none;
}
/* Mancha de luz na cor do sabor, borrada, atrás da garrafa. É o mesmo truque
   do .hero-luz — círculo com blur pesado —, aqui parado e num tamanho só. */
.visor360::before {
  content: "";
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cor-sabor, var(--amarelo)), transparent 66%);
  opacity: 0.42;
  filter: blur(60px);
  transition: background var(--transicao);
  pointer-events: none;
}
/* Chão: elipse escura e borrada sob a garrafa. Sem ela a garrafa boia no
   verde; com ela a cena tem piso, como o leito de gelo do hero. */
.visor360::after {
  content: "";
  position: absolute;
  bottom: 6%;
  left: 50%;
  translate: -50% 0;
  width: 46%;
  height: 3.5%;
  background: radial-gradient(50% 50%, rgba(0, 0, 0, 0.55), transparent 70%);
  filter: blur(7px);
  pointer-events: none;
}

.visor360:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 8px;
  border-radius: var(--raio-lg);
}
.visor360.is-arrastando { cursor: grabbing; }
.visor360 img {
  position: relative;
  max-height: clamp(300px, 40vw, 540px);
  width: auto;
  pointer-events: none;
  filter: drop-shadow(0 34px 40px rgba(0, 0, 0, 0.5));
  /* Sem a sequência de quadros o giro cai no plano B: rotação por CSS. */
  transform: perspective(900px) rotateY(var(--giro, 0deg));
  transition: transform 80ms linear;
}
.visor360__dica {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  background: rgba(15, 61, 33, 0.72);
  backdrop-filter: blur(8px);
  border-radius: var(--raio-full);
  font-size: var(--t-xs);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  transition: opacity var(--transicao);
}
/* Depois do primeiro arrasto a dica já cumpriu o papel dela. */
.visor360.is-usado .visor360__dica { opacity: 0; }

/* Sem sequência de quadros não há 360° a prometer: a dica troca de texto no
   js/main.js e some daqui a menção ao giro.
   Ver o plano B no bloco do visor em js/main.js. */

/* --- O painel no celular -------------------------------------------------
   Aqui a secao inteira e recomposta, nao so ajustada. No desktop ela e uma
   grade de duas colunas e cada camada tem espaco proprio: as abas em fila,
   a garrafa solta no verde, a marca vazada correndo pela direita, os gelos
   derivando na margem. Empilhado num telefone de 360 px tudo isso cai na
   MESMA coluna estreita e passa a competir: quatro pilulas soltas, uma
   palavra gigante sem contorno, gelos borrados, a garrafa boiando sem chao
   e um bloco de texto com espacamento herdado de outra largura. Nada esta
   errado sozinho; junto vira ruido.

   A recomposicao segue uma regra so: no celular cada coisa ganha uma caixa
   com limite visivel, e o que nao couber numa caixa sai.

     seletor  -> um controle unico 2x2, com moldura propria
     produto  -> um cartao de vidro que segura a garrafa, a luz e a dica
     texto    -> uma coluna com ritmo proprio, tudo alinhado a esquerda
     fundo    -> gelos e marca vazada saem (nao cabem sem virar borrao)
   ------------------------------------------------------------------------ */
@media (max-width: 620px) {

  /* 1. FUNDO — o que sai.

        Os gelos e a marca vazada sao textura de MARGEM: no desktop moram na
        area que sobra ao lado das duas colunas. Empilhado nao sobra margem,
        entao os dois passam a atravessar o conteudo. O gelo vira uma mancha
        cinza atras do texto e a palavra vazada (contorno de 1.5px em branco
        16%) na largura de um telefone nao le como palavra — le como borrao
        atras da garrafa. Escala de poster precisa de espaco de poster. */
  .dentro__gelos { display: none; }
  .sabor-painel__marca { display: none; }

  /* A mancha de cor do sabor fica: ela nao tem forma nem borda para competir,
     e e o que mantem a troca de aba visivel no fundo da secao. Sobe para a
     altura do cartao da garrafa, que agora e o topo da secao. */
  .dentro__luz { mask-image: radial-gradient(85% 34% at 50% 30%, #000 0%, transparent 74%); }

  #dentro { padding-block: 2.75rem 3.25rem; }

  /* 2. SELETOR — quatro pilulas soltas viram um controle so.

        O problema das pilulas nao era a quebra de linha, era serem quatro
        objetos flutuando sem nada que os declare um grupo. Cada uma com sua
        borda, num vao de 0.5rem, sobre um fundo que tambem tem manchas: o
        olho conta quatro coisas, nao um seletor.

        O agrupamento e um trilho: uma caixa recuada, com as quatro pilulas
        FOLGADAS dentro dela. A tentativa anterior colava as celulas e as
        separava por linha de 1px — agrupava, mas o resultado tinha cara de
        tabela: quatro retangulos duros, e o ativo preenchido de canto a
        canto virava um bloco de cor pesado ao lado dos outros tres.

        Sem divisoria e com folga, quem agrupa passa a ser o trilho (fundo
        proprio, sombra interna, um raio maior que o das pilulas) e o ativo
        volta a ser uma pilha macia flutuando dentro dele. Continua sendo UM
        objeto, que era o ponto, so que agora com forma arredondada em vez de
        grade. */
  .sabor-abas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem;
    padding: 0.3rem;                /* a folga que solta as pilulas do trilho */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* raio do trilho > raio da pilula, senao os cantos ficam concentricos
       errados e o conjunto parece torto */
    border-radius: calc(var(--raio) + 0.3rem);
    /* leve rebaixo: e o que diz "as pilulas estao DENTRO de algo" sem
       precisar de borda forte */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
    margin-bottom: 1.75rem;
  }
  .sabor-aba {
    justify-content: center;
    padding: 0.75rem 0.5rem;
    border: 0;
    border-radius: var(--raio);
    background: transparent;        /* inativa nao desenha nada: o trilho ja desenha */
    font-size: var(--t-xs);
    color: rgba(255, 255, 255, 0.72);
  }
  /* :hover nao existe no toque e deixava borda presa depois do tap */
  .sabor-aba:hover { border-color: transparent; }
  .sabor-aba[aria-selected="true"] {
    background: var(--cor-sabor);
    /* a sombra e o que faz a pilula parecer POUSADA no trilho em vez de
       recortada nele */
    box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.5);
  }
  /* Nas inativas o ponto e a unica cor: sem fundo proprio, ele passa a ser o
     que identifica o sabor. Um anel em volta o destaca do verde. */
  .sabor-aba .ponto {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
  }
  .sabor-aba[aria-selected="true"] .ponto { box-shadow: none; }

  /* 3. PRODUTO — a garrafa ganha um palco com borda.

        No desktop a garrafa fica solta sobre o verde de proposito, e funciona
        porque ha vazio em volta dela delimitando a cena. Empilhada, o mesmo
        "solto" vira "sem chao": ela aparece no meio de um vao alto, entre as
        abas e o texto, sem nada dizendo onde a cena comeca e acaba.

        O cartao de vidro resolve as duas coisas de uma vez: separa produto de
        texto e faz o vao virar respiro proposital. E o mesmo material da
        dica de arraste e do cabecalho, entao nao e um elemento novo na
        pagina — e o vidro que a home ja usa, agora segurando a garrafa. */
  .visor360 {
    order: -1;                      /* a garrafa vem ANTES do texto — ver 4. */
    min-height: 0;                  /* a altura passa a sair do conteudo */
    padding: 1.5rem 1rem 3.25rem;   /* o vao de baixo e o berco da dica */
    margin-bottom: 2rem;
    background: linear-gradient(170deg,
                rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 62%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--raio-lg);
    overflow: hidden;               /* segura a luz e a sombra dentro */
  }
  /* Dentro de uma caixa com borda a garrafa pode crescer: antes ela era
     ~40vw de altura num palco aberto e ficava pequena para o espaco que
     ocupava. Agora o palco tem limite e ela preenche. */
  .visor360 img { max-height: min(48vh, 340px); }
  /* A luz do sabor era um circulo de 78% com blur 60px — num cartao estreito
     ela vazava pelas bordas e o overflow a cortava em quadrado. Mais larga e
     mais fraca, ela vira halo atras da garrafa. */
  .visor360::before { width: 108%; opacity: 0.34; filter: blur(48px); }
  /* O chao acompanha a garrafa maior e sobe acima do berco da dica */
  .visor360::after { bottom: 2.8rem; width: 52%; }
  /* A dica sobe para dentro do cartao: encostada no fundo ela lia como
     legenda da secao, nao como instrucao do visor. */
  .visor360__dica { bottom: 1.15rem; }

  /* 4. ORDEM — a garrafa antes do texto.

        As abas trocam o painel inteiro, mas no empilhamento a garrafa caia
        ~500 px abaixo delas: a pessoa tocava em "Uva" e o produto que mudou
        estava fora da tela. O unico retorno visivel do toque era o texto — e
        texto nao e o que se espera ver ao escolher um sabor. Com o cartao em
        primeiro, tocar numa aba troca a IMAGEM logo abaixo do dedo. O vao da
        grade vai a zero porque agora quem separa produto de texto e a margem
        do proprio cartao. */
  .sabor-painel { gap: 0; }

  /* 5. TEXTO — uma coluna com ritmo proprio.

        O espacamento aqui vinha todo do desktop, onde a coluna tem ~500 px e
        o olho percorre pouco. Numa coluna de 300 px as mesmas margens dao
        blocos que nao se agrupam: o rotulo "DISPONIVEL EM" ficava tao longe
        do paragrafo quanto as pilulas ficavam dele. Agora o espaco DENTRO de
        um grupo e menor que o espaco ENTRE grupos, que e o que faz uma
        coluna longa parecer organizada em vez de solta. */

  /* O numerao: com 'align-items: baseline' o "6" alinhava pela linha de base
     da PRIMEIRA linha da legenda; como a legenda quebra em duas no celular,
     o numero ficava pendurado na metade de cima. Centrado le junto com o
     bloco. E cresce: 15vw contra os 7vw do desktop, onde 7vw rende 76 px
     numa tela larga mas aqui rendia 25 px e o clamp segurava no piso. */
  .numerao {
    align-items: center;
    gap: 0.1rem 0.7rem;
    margin-bottom: 0.85rem;
  }
  .numerao strong { font-size: clamp(3.4rem, 15vw, 4.5rem); }
  .numerao span { max-width: 15ch; font-size: var(--t-base); }

  .sabor-painel__tagline { margin-bottom: 0.5rem; }          /* colado no numerao */
  .sabor-painel__texto-corrido { font-size: var(--t-sm); }

  .sabor-painel__rotulo { margin: 1.5rem 0 0.55rem; }        /* abre grupo novo */
  .sabor-painel__volumes { gap: 0.35rem; margin-bottom: 1.5rem; }

  /* O CTA fecha o painel na largura toda: meio-botao encostado a esquerda
     era mais um objeto de tamanho arbitrario numa coluna que ja tinha
     varios. Cheio, ele vira a linha final do bloco. */
  .sabor-painel__texto .btn {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  /* 6. FECHO — a lista de promessas.
        Em coluna unica os itens ficavam com 2 rem de vao lateral herdados da
        grade de tres colunas, o que abria buracos entre marcador e texto. */
  .pontos-chave {
    gap: 0.9rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
  }
}

/* --------------------------------------------------------------------------
   Sobre / fazenda Boitanga
   -------------------------------------------------------------------------- */
.fazenda {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
@media (max-width: 900px) {
  .fazenda { grid-template-columns: 1fr; }
}

.fazenda__visual {
  position: relative;
  aspect-ratio: 4 / 3.4;
  border-radius: var(--raio-lg);
  overflow: hidden;
  /* Cor de fundo enquanto a foto carrega — o tom escuro do solo no rodapé. */
  background: #2a1c12;
  box-shadow: var(--sombra-lg);
}
.fazenda__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fazenda__legenda {
  position: absolute;
  inset: auto 1.25rem 1.25rem;
  z-index: 2;
  padding: 0.85rem 1.15rem;
  background: rgba(15, 61, 33, 0.72);
  backdrop-filter: blur(8px);
  border-radius: var(--raio);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 600;
}

.fazenda__numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--borda);
}
.fazenda__numeros div strong {
  display: block;
  font-family: var(--fonte-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1;
  color: var(--verde);
}
.fazenda__numeros div span {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
}

/* --- A fazenda no celular ------------------------------------------------ */
@media (max-width: 620px) {

  /* A legenda era 'inset: auto 1.25rem 1.25rem' - os tres lados presos, so o
     topo solto -, entao ela ESTICAVA de ponta a ponta da foto. Numa tela
     larga a foto e larga e a barra fica discreta; num celular ela vira uma
     tarja escura atravessando a imagem inteira, com metade dela vazia.
     Soltando a direita ela encolhe ate o texto e volta a ser o que e: uma
     etiqueta no canto da foto, nao um rodape dela. */
  .fazenda__legenda {
    inset: auto auto 1rem 1rem;
    padding: 0.6rem 0.9rem;
  }

  /* Os tres numeros. Duas correcoes somadas:

     1. O tamanho. 'clamp(1.75rem, 3vw, 2.5rem)': 3vw num aparelho de 362
        rende 11px, entao o clamp segurava no PISO de 1,75rem o tempo todo -
        o mesmo defeito do numerao do painel de sabores. O vw so passa a
        valer acima de ~1030px de tela, ou seja, nunca no celular. Com 9vw
        ele volta a responder de verdade (~33px aqui).

     2. O aperto. Com gap de 1rem sobravam ~97px por coluna, e
        "CONSERVANTES" pede ~106px em 13px com 0,06em de entreletra - a
        coluna do meio era espremida pra terceira caber. Fechando o gap e
        afrouxando a entreletra (0,06 -> 0,02em, que e o que a caixa alta
        pequena precisa de fato) a palavra passa a caber com folga e as tres
        colunas voltam a ser iguais.

     O 'align-items: start' e pra quando a legenda do meio quebra em duas
     linhas: sem ele o grid estica as tres celulas e os numeros deixam de
     assentar na mesma linha. */
  .fazenda__numeros {
    gap: 0.5rem;
    align-items: start;
    margin-top: 1.75rem;
    padding-top: 1.75rem;
  }
  .fazenda__numeros div strong { font-size: clamp(1.9rem, 9vw, 2.5rem); }
  .fazenda__numeros div span {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    line-height: 1.3;
  }
}

/* --------------------------------------------------------------------------
   Processo (da fruta ao copo)
   -------------------------------------------------------------------------- */
.processo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  counter-reset: passo;
}
.processo__passo {
  position: relative;
  counter-increment: passo;
  padding-top: 3.5rem;
}
.processo__passo::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--fonte-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--amarelo);
  line-height: 1;
}
/* linha pontilhada ligando os passos */
.processo__passo:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: 3.5rem;
  right: -1.5rem;
  border-top: 2px dashed rgba(255, 255, 255, 0.25);
}
@media (max-width: 767px) {
  .processo__passo:not(:last-child)::after { display: none; }
}
/* O ícone só entra no celular. No desktop os quatro passos ficam lado a lado
   ligados pela linha tracejada, e essa fileira já se lê como processo — o
   ícone ali seria enfeite competindo com a linha, que passa exatamente na
   altura em que ele ficaria. */
.processo__icone { display: none; }
.processo__passo h3 { margin-bottom: 0.6rem; }
.processo__passo p {
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.78);
}

/* --------------------------------------------------------------------------
   Formatos / embalagens
   -------------------------------------------------------------------------- */
/* Foto + embalagens lado a lado. Antes eram quatro cartões brancos numa seção
   branca: sobrava borda de 1px para separar tudo, as garrafas saíam pequenas e
   a seção não tinha o peso visual das vizinhas. A foto resolve o peso; as duas
   fileiras de duas resolvem o tamanho das garrafas.

   O título ficou acima, na largura toda, e não dentro da coluna: dentro dela a
   coluna crescia uns 280 px e a foto — que vem de um vídeo de 720p — tinha de
   ser ampliada quase 2x para acompanhar, virando um borrão. */
.formatos-par {
  display: grid;
  /* Coluna da direita um pouco maior: é ela que precisa de largura para as
     garrafas não voltarem a ficar pequenas. */
  grid-template-columns: 0.82fr 1.18fr;
  /* stretch, não center: a foto acompanha a altura das duas fileiras. Centrada,
     ela ficava baixinha e boiando no meio de uma coluna bem mais alta. */
  align-items: stretch;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.formatos-visual {
  position: relative;
  height: 100%;
  min-height: 340px;
  border-radius: var(--raio-lg);
  overflow: hidden;
  /* Cor enquanto a foto carrega — o marrom do toco no primeiro plano. */
  background: #3a2a1c;
  box-shadow: var(--sombra-lg);
}
.formatos-visual__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Clipe e moldura são os dois em pé (9:16 dentro de ~0,62): o cover só apara
     um pouco de céu e de chão, com a garrafa firme no meio. */
  object-position: 50% 50%;
}
/* Faixa chapada na base, e não a pílula solta da seção da fazenda: o gerador
   do vídeo carimba a marca dele no canto de baixo, a uns 12% da altura do
   quadro. Uma pílula com a altura do texto passava por baixo e deixava o
   carimbo à mostra; um degradê cobria, mas com o carimbo ainda espiando por
   trás do que era translúcido. Chapada não tem essa dúvida — o que está debaixo
   dela não aparece, ponto.

   Altura em %, não em px, porque a moldura muda bastante de tamanho entre o
   desktop e o celular: a faixa acompanha em vez de virar uma tarja pesada nas
   molduras pequenas. O carimbo termina a ~11,6% da altura do painel, e os 14%
   cobrem isso sem subir mais do que o necessário — mais alta, a faixa começa a
   comer a base da garrafa.

   Não adianta baixar muito daqui: a frase em duas linhas ocupa ~98px e vira o
   piso da faixa. Para encolher de verdade, o caminho é a frase em uma linha
   só. E não desça de 12%: aí o carimbo do gerador volta a aparecer. */
.formatos-visual__legenda {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 14%;
  padding: 1.15rem 1.5rem 1.25rem;
  background: var(--marrom-escuro);
  /* Mesma família do .olho das seções: régua amarela em cima, frase em
     Fraunces e o fecho em amarelo, como as frases da seção de vídeo. */
  font-family: var(--fonte-display);
  font-size: clamp(1rem, 0.85rem + 0.5vw, 1.2rem);
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  text-wrap: balance;
}
.formatos-visual__legenda::before {
  content: "";
  width: 2rem;
  height: 2px;
  margin-bottom: 0.6rem;
  background: var(--amarelo);
}
.formatos-visual__legenda em {
  font-style: normal;
  color: var(--amarelo-claro);
}

.formatos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: end;
  row-gap: 1.75rem;
}
.formato {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

/* Sem vão horizontal entre as colunas de propósito: as bordas de baixo se
   encostam e viram um traço de chão só, na base das garrafas. O respiro entre
   as embalagens vem da largura da imagem, não do grid — com gap, o traço
   quebraria no meio da fileira. */
.formato__foto {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(110, 62, 37, 0.18);
}
.formato__foto img {
  width: 86%;
  height: auto;
  /* Sombra curta e baixa: com deslocamento maior a garrafa flutua acima do
     traço em vez de estar apoiada nele. */
  filter: drop-shadow(0 6px 10px rgba(74, 41, 23, 0.24));
  transition: transform var(--transicao);
}
.formato:hover .formato__foto img { transform: translateY(-6px); }

.formato strong {
  font-family: var(--fonte-display);
  font-size: 1.35rem;
}
.formato span {
  font-size: var(--t-xs);
  color: var(--texto-suave);
}

/* Empilhado no celular. Este bloco fica DEPOIS das regras que ele sobrescreve:
   mesma especificidade, então quem vem por último ganha — e o min-height da
   foto precisa mesmo cair aqui. Com ele de pé, a altura mínima de 340 px
   passava a mandar na proporção e era a LARGURA que crescia
   (340 x 4/3.4 = 400 px), estourando a coluna no celular. */
@media (max-width: 900px) {
  .formatos-par { grid-template-columns: 1fr; }
  .formatos-visual {
    height: auto;
    min-height: 0;
    /* Empilhada a moldura segue em pé, porque o clipe é 9:16 — deitada, o
       cover jogaria fora quase toda a altura do vídeo e sobraria uma faixa.
       Um pouco menos alta que no desktop, e com teto de largura, para não
       empurrar as embalagens para longe da dobra. */
    aspect-ratio: 3 / 4;
    max-width: 420px;
    margin-inline: auto;
  }

  /* Teto para as garrafas não virarem cartaz nas duas colunas largas do
     tablet: a escala entre os volumes continua, o tamanho é que para de
     crescer junto com a coluna. */
  .formato__foto img { max-width: 250px; }
}

/* --------------------------------------------------------------------------
   Para quem é — fecha a seção dos formatos
   Pílulas, não cartões: é uma lista de perfis, e cartão aqui competiria com
   as embalagens logo acima.
   -------------------------------------------------------------------------- */
.publico {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: clamp(2rem, 4vw, 3rem) 0 0;
  border-top: 1px solid var(--borda);
  list-style: none;
}
.publico__item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.15rem 1.25rem;
  background: var(--verde-suave);
  border-radius: var(--raio);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.35;
}
.publico__item svg { flex: none; color: var(--verde); }

/* --------------------------------------------------------------------------
   O rótulo — ingredientes + tabela nutricional
   -------------------------------------------------------------------------- */
.ingredientes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
/* Mesmo cartão dos sabores — borda, raio grande e o salto no hover —, só que
   sem a garrafa: aqui o que carrega o cartão é o ícone. */
.ingrediente {
  padding: 2rem 1.75rem;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  transition: transform var(--transicao), box-shadow var(--transicao),
    border-color var(--transicao);
}
.ingrediente:hover {
  transform: translateY(-8px);
  border-color: var(--laranja);
  box-shadow: var(--sombra-lg);
}
.ingrediente__icone {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: 1.25rem;
  background: var(--laranja-suave);
  border-radius: var(--raio);
  color: var(--laranja-escuro);
  transition: transform var(--transicao);
}
.ingrediente:hover .ingrediente__icone { transform: rotate(-6deg) scale(1.06); }
.ingrediente h3 { margin-bottom: 0.6rem; }
.ingrediente p {
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

/* --- Os ingredientes no celular ------------------------------------------
   O cartao e uma PILHA: icone, titulo, texto, um debaixo do outro. Numa
   grade de tres colunas isso e certo - a coluna e estreita e nao ha para
   onde ir. Empilhado no celular vira desperdicio: o quadrado de 60px do
   icone ocupa uma linha inteira de ~80px com a largura toda do cartao vazia
   ao lado dele, e isso tres vezes.

   Aqui o cartao vira LINHA: icone e titulo dividem a primeira faixa, e o
   texto passa por baixo dos dois, na largura inteira. Duas coisas melhoram
   de uma vez - a altura cai de ~256px pra ~170px por cartao (~255px na
   secao), e o paragrafo ganha medida: em 330px ele fecha em 3 linhas, contra
   as 4 que faria espremido ao lado do icone.

   O layout em linha nasceu para a pilha vertical, mas continua valendo dentro
   do carrossel (ver o fim do arquivo): num cartao de ~300px o icone ao lado do
   titulo ainda economiza a faixa de 80px que ele ocupava sozinho. */
@media (max-width: 620px) {
  .ingrediente {
    display: grid;
    /* auto = o icone pede a largura dele e nao cede; 1fr = o titulo fica com
       todo o resto da faixa */
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0 1rem;
    padding: 1.25rem;
  }
  .ingrediente__icone {
    width: 46px;
    height: 46px;
    /* o respiro debaixo do icone era o que separava ele do titulo na pilha;
       agora eles sao lado a lado e quem separa e o gap da coluna */
    margin-bottom: 0;
  }
  .ingrediente h3 { margin-bottom: 0; }
  /* 1 / -1: o texto atravessa as duas colunas em vez de comecar depois do
     icone. E o que devolve a medida de leitura inteira pro paragrafo. */
  .ingrediente p {
    grid-column: 1 / -1;
    margin-top: 0.7rem;
  }

  /* Toque nao tem hover e o translateY GRUDAVA no cartao depois do tap -
     mesmo conserto que os cartoes de sabor precisaram. */
  .ingrediente:hover {
    transform: none;
    border-color: var(--borda);
    box-shadow: none;
  }
  .ingrediente:hover .ingrediente__icone { transform: none; }
}

.nutri {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.nutri__caixa {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
  overflow: hidden;
}
/* A tabela tem largura mínima: em telas estreitas ela rola dentro da caixa
   em vez de espremer as quatro colunas. */
.nutri__rolagem { overflow-x: auto; }
.nutri table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.nutri__titulo {
  padding: 1.35rem 1.75rem;
  background: linear-gradient(120deg, var(--verde) 0%, var(--verde-escuro) 100%);
  color: #fff;
  font-family: var(--fonte-display);
  font-size: var(--t-lg);
  font-weight: 600;
  text-align: left;
}
.nutri th,
.nutri td {
  padding: 0.85rem 1.75rem;
  text-align: right;
  border-bottom: 1px solid var(--borda);
}
.nutri thead th {
  background: var(--creme);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.nutri thead th.nutri__componente { text-align: left; }
.nutri tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--texto);
}
/* Subitem do carboidrato: o recuo é o que diz que ele pertence à linha acima. */
.nutri tbody th.nutri__filha {
  padding-left: 3.25rem;
  font-weight: 500;
  color: var(--texto-suave);
}
.nutri tbody tr:last-child th,
.nutri tbody tr:last-child td { border-bottom: none; }
.nutri tbody tr:hover { background: var(--amarelo-suave); }
.nutri__destacada th,
.nutri__destacada td {
  background: var(--verde-suave);
  font-weight: 800;
}
.nutri__destacada:hover th,
.nutri__destacada:hover td { background: var(--amarelo-suave); }
.nutri__nota {
  font-size: var(--t-xs);
  color: var(--texto-suave);
  line-height: 1.6;
  max-width: 60rem;
}
/* [DORMENTE] Dica de arraste da tabela.

   Existia porque a tabela rolava no celular: com min-width de 520px o corte na
   borda parecia defeito, e a linha explicava que era rolagem. A tabela deixou
   de rolar (ver o @media logo abaixo), então a dica virou um pedido de gesto
   que não faz nada — e some com o 'display: none' desta regra, que agora não
   tem mais nenhum @media para desligá-lo.

   Para reativar: devolva o min-width à tabela e acrescente
   '.nutri__dica { display: flex; }' dentro do @media. A marcação continua em
   index.html, marcada com o mesmo aviso. */
.nutri__dica {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-top: -0.75rem;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--texto-suave);
}
/* --- A tabela no celular -------------------------------------------------
   Ela NÃO rola. A rolagem era o remédio errado para o problema certo: as
   quatro colunas não cabiam porque o padding era de desktop (1,75rem dos dois
   lados = 224px só de recuo, 43% da tabela), não porque os dados fossem
   largos demais. Consertado o recuo e o corpo, a tabela inteira cabe até num
   aparelho de 320px — a soma das larguras mínimas dá 271px contra os 278
   disponíveis — e some junto com a rolagem tudo o que ela custava: a coluna
   %VD invisível, o nome do componente desaparecendo ao rolar, e a dica
   pedindo um gesto a mais.

   O corpo desce a 12,5px no aparelho mais estreito. É pequeno, e é a troca
   consciente: numa tabela de dados, ver a linha inteira de uma vez vale mais
   que ler cada célula confortavelmente. O clamp devolve o tamanho conforme a
   tela abre, e em 620px ele já voltou ao corpo normal de 16px.

   O 'overflow-x: auto' segue no .nutri__rolagem de propósito, mudo: se um dia
   entrar uma linha com um rótulo muito mais longo, o navegador rola em vez de
   estourar a caixa. É rede de segurança, não o plano.                     */
@media (max-width: 620px) {
  /* min-width: 0 desarma o piso de 520px que forçava a rolagem */
  .nutri table {
    min-width: 0;
    font-size: clamp(0.78rem, 3.4vw, 1rem);
  }
  .nutri th,
  .nutri td { padding: 0.7rem 0.45rem; }
  /* a subitem só precisa recuar VISIVELMENTE mais que a irmã; 3,25rem do
     desktop comeria um terço da coluna aqui */
  .nutri tbody th.nutri__filha { padding-left: 1.1rem; }
  /* "45 kcal" quebrando em "45" / "kcal" dobrava a altura da linha inteira */
  .nutri td { white-space: nowrap; }
  /* a entreletra de 0,06em é medida de rótulo grande; no cabeçalho miúdo ela
     só rouba os pixels que a coluna não tem */
  .nutri thead th {
    font-size: 0.68rem;
    letter-spacing: 0.02em;
  }
  .nutri__titulo { padding: 1.1rem 1.25rem; font-size: var(--t-sm); }
}

/* --------------------------------------------------------------------------
   Consumo e conservação
   -------------------------------------------------------------------------- */
.consumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
/* Na faixa do tablet o auto-fit dá três colunas e sobra um cartão sozinho na
   segunda fileira. São quatro cartões: 2 x 2 fecha melhor. */
@media (min-width: 761px) and (max-width: 1100px) {
  .consumo { grid-template-columns: repeat(2, 1fr); }
}
.consumo__cartao {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.75rem;
  background: var(--creme);
  border: 1px solid var(--borda);
  /* A tarja laranja à esquerda é o que separa esses cartões de instrução dos
     cartões de produto da página. */
  border-left: 4px solid var(--laranja);
  border-radius: var(--raio);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.consumo__cartao:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra);
}
.consumo__cartao h3 {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--t-lg);
}
.consumo__cartao h3 svg { flex: none; color: var(--laranja); }
.consumo__cartao p {
  font-size: var(--t-sm);
  color: var(--texto-suave);
}
.consumo__cartao p.consumo__temp {
  font-family: var(--fonte-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--verde);
}

/* --------------------------------------------------------------------------
   FAQ — acordeão
   -------------------------------------------------------------------------- */
.faq {
  max-width: 52rem;
  margin-inline: auto;
  display: grid;
  gap: 0.75rem;
}
.faq__item {
  background: var(--creme);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  transition: border-color var(--transicao), box-shadow var(--transicao),
    background-color var(--transicao);
}
.faq__item:has(.faq__gatilho[aria-expanded="true"]) {
  background: var(--branco);
  border-color: var(--verde);
  box-shadow: var(--sombra);
}
.faq__gatilho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 1.5rem;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--fonte-display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--texto);
  cursor: pointer;
}
.faq__gatilho:hover { color: var(--verde); }
/* O sinal é um "+" que vira "−": a barra vertical gira e some. */
.faq__sinal {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--verde-suave);
  border-radius: var(--raio-full);
  color: var(--verde);
  transition: background-color var(--transicao);
}
.faq__gatilho[aria-expanded="true"] .faq__sinal {
  background: var(--verde);
  color: #fff;
}
.faq__sinal::before,
.faq__sinal::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transicao), opacity var(--transicao);
}
.faq__sinal::before { width: 13px; height: 2px; }
.faq__sinal::after { width: 2px; height: 13px; }
.faq__gatilho[aria-expanded="true"] .faq__sinal::after {
  transform: rotate(90deg);
  opacity: 0;
}
/* Abre animando de 0fr para 1fr: a altura do painel não precisa ser medida
   em JS e a transição funciona com qualquer tamanho de resposta. */
.faq__painel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.faq__painel.is-aberto { grid-template-rows: 1fr; }
.faq__painel > div { overflow: hidden; }
.faq__painel p {
  padding: 0 1.5rem 1.5rem;
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

/* --- O FAQ no celular ----------------------------------------------------
   A medida do gatilho vinha do desktop: 1,25rem de fonte display numa caixa
   de 52rem, onde a pergunta cabe em UMA linha. Num telefone a mesma fonte
   quebra quase toda pergunta em duas linhas e, com 1,25rem de recuo em cima
   e embaixo, cada item fechado passava dos 90px — seis deles davam mais de
   uma tela inteira de perguntas que ninguem abriu ainda.

   Uma lista fechada e um INDICE: ela precisa ser percorrida, nao lida. Entao
   o item encolhe ate caber mais ou menos uma pergunta por linha e a lista
   toda passa a caber na tela — que e o que faz alguem escolher uma. O texto
   da resposta nao encolhe junto: esse sim e para ler.                      */
@media (max-width: 620px) {
  .faq { gap: 0.5rem; }
  .faq__gatilho {
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    font-size: 1.0625rem;
    line-height: 1.25;
  }
  /* 26px mantem o alvo de toque no botao inteiro (a linha toda e clicavel) e
     tira 4px de altura de cada item */
  .faq__sinal { width: 26px; height: 26px; }
  .faq__sinal::before { width: 11px; }
  .faq__sinal::after { height: 11px; }
  .faq__painel p { padding: 0 1rem 1.1rem; }
}

.faq__saida {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.faq__saida p {
  font-family: var(--fonte-display);
  font-size: var(--t-lg);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Lojas / onde comprar
   -------------------------------------------------------------------------- */
.lojas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.loja {
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.loja:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-lg);
}
/* Foto da fachada. O gradiente continua aqui de propósito: como a imagem é
   lazy, ele é o que aparece no lugar dela enquanto não carrega — e some
   sozinho atrás do object-fit assim que a foto entra. */
.loja__foto {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background:
    radial-gradient(70% 70% at 30% 20%, rgba(255, 221, 0, 0.3), transparent 60%),
    linear-gradient(150deg, #35c46a, #1a5a33);
}
.loja__corpo {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
}
.loja__cidade {
  font-size: 1.35rem;
  margin: 0;
}
.loja__linha {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--t-sm);
  color: var(--texto-suave);
}
.loja__linha svg {
  flex: none;
  margin-top: 3px;
  color: var(--laranja);
}
/* O texto vem sempre dentro de um <span>: como a linha é flex, qualquer tag
   solta no meio da frase (<strong>, <small>) viraria um item de flex à parte
   e a frase quebraria fora de ordem. */
.loja__linha > span {
  min-width: 0;
}
.loja__zap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  font-weight: 800;
  text-decoration: none;
  color: var(--verde);
}

/* --------------------------------------------------------------------------
   Faixa de cobertura por entrega
   Cidades sem loja que um representante atende. Some visualmente do padrão
   dos cards de propósito — verde cheio contra os cards brancos — porque é
   outra categoria de informação: rota, não endereço.
   -------------------------------------------------------------------------- */
.cobertura {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1.1rem, 2.5vw, 2rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.4rem, 3vw, 2.1rem);
  border-radius: var(--raio-lg);
  color: #fff;
  background:
    radial-gradient(75% 130% at 6% 0%, rgba(255, 221, 0, 0.26), transparent 60%),
    linear-gradient(135deg, var(--verde-claro) -30%, var(--verde) 35%, var(--verde-escuro) 100%);
  box-shadow: var(--sombra);
}
.cobertura__selo {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: var(--raio-full);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--amarelo);
}
.cobertura__texto h3 {
  margin: 0 0 0.3rem;
  font-size: var(--t-xl);
  color: #fff;
}
.cobertura__texto p {
  margin: 0 0 0.85rem;
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.82);
}
.cobertura__texto p strong {
  color: #fff;
  font-weight: 700;
}
.cobertura__cidades {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cobertura__cidades li {
  padding: 0.32rem 0.95rem;
  border-radius: var(--raio-full);
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cobertura__cta {
  flex: none;
}

/* Abaixo de 900px o botão desce para a linha de baixo; no celular o selo
   sai da frente do texto e a faixa vira uma coluna só. */
@media (max-width: 900px) {
  .cobertura {
    grid-template-columns: auto 1fr;
  }
  /* Botão desce para a segunda linha, mas alinhado com o texto (coluna 2) e
     não com o selo — senão fica pendurado na margem esquerda. */
  .cobertura__cta {
    grid-column: 2 / -1;
    justify-self: start;
  }
}
@media (max-width: 560px) {
  .cobertura {
    grid-template-columns: 1fr;
  }
  .cobertura__selo {
    width: 48px;
    height: 48px;
  }
  /* Coluna única: o botão volta para a coluna 1 (2/-1 criaria uma coluna
     implícita) e ocupa a largura toda. */
  .cobertura__cta {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

/* --------------------------------------------------------------------------
   Cinema — vídeo controlado pelo scroll
   A seção tem altura --altura-scroll; dentro dela um painel de 100vh fica
   fixo (sticky) e o tempo do vídeo acompanha o quanto já se rolou.
   Começa oculta: o JS só revela se o arquivo de vídeo carregar de fato.
   -------------------------------------------------------------------------- */
.cinema {
  /* O vídeo instalado tem 10s. A área rolável é (--altura-scroll - 100vh),
     ou seja 320vh para percorrer 10s — dá um ritmo confortável.
     Aumentar deixa o efeito mais lento e detalhado; diminuir acelera. */
  --altura-scroll: 420vh;
  display: none;
  position: relative;
  height: var(--altura-scroll);
  background: var(--verde-escuro);
}
.cinema.is-pronto { display: block; }

.cinema__painel {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.cinema__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* o vídeo é decorativo: o texto por cima é que carrega a mensagem */
  pointer-events: none;
}

/* Véu escuro para o texto ter contraste sobre qualquer quadro do vídeo */
.cinema__veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(15, 61, 33, 0.85) 0%, rgba(15, 61, 33, 0.15) 45%, rgba(15, 61, 33, 0.55) 100%);
}

.cinema__conteudo {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
  color: #fff;
}

/* As frases se sobrepõem na mesma área: o JS acende uma por vez */
.cinema__frases {
  display: grid;
  place-items: center;
  min-height: 12rem;
}
.cinema__frase {
  grid-area: 1 / 1;
  max-width: 26ch;
  margin: 0;
  font-family: var(--fonte-display);
  font-size: var(--t-3xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  opacity: 0;
  translate: 0 28px;
  transition: opacity 520ms ease, translate 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cinema__frase.is-ativa {
  opacity: 1;
  translate: 0 0;
}
.cinema__frase em {
  display: block;
  font-style: normal;
  color: var(--amarelo);
}

/* Barra de progresso do vídeo */
.cinema__progresso {
  position: absolute;
  inset: auto 0 clamp(1.5rem, 4vw, 3rem);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.75rem;
}
.cinema__trilho {
  width: min(420px, 62vw);
  height: 4px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: var(--raio-full);
  overflow: hidden;
}
.cinema__preenchimento {
  height: 100%;
  width: 0%;
  background: var(--amarelo);
  border-radius: var(--raio-full);
}
.cinema__dica {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  transition: opacity var(--transicao);
}
.cinema.is-rolando .cinema__dica { opacity: 0; }
.cinema__dica svg { animation: descer 1.8s ease-in-out infinite; }

@keyframes descer {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 5px; }
}

/* No celular o scrub é desligado (ver main.js): a seção vira um bloco normal
   com o vídeo em laço, sem os 320vh de rolagem. */
.cinema.is-simples {
  height: auto;
  min-height: 78vh;
}
.cinema.is-simples .cinema__painel {
  position: static;
  height: auto;
  min-height: 78vh;
  padding-block: clamp(4rem, 12vw, 7rem);
}
.cinema.is-simples .cinema__frase {
  opacity: 1;
  translate: none;
  position: static;
}
.cinema.is-simples .cinema__frases {
  grid-auto-flow: row;
  gap: 1.5rem;
  min-height: 0;
}
.cinema.is-simples .cinema__frase { grid-area: auto; }
.cinema.is-simples .cinema__progresso { display: none; }



/* ==========================================================================
   CARROSSÉIS DO CELULAR
   Fica no FIM do arquivo de propósito. @media não soma especificidade: o que
   decide entre '.processo { display: grid }' e '.processo { display: flex }'
   é a ordem de origem. No meio do arquivo este bloco perdia para a definição
   de .processo (que vem depois, com a seção dela) e a seção continuava em
   pilha — os pontinhos apareciam, porque o JS não depende disso, e era só o
   layout que não virava. Qualquer trilho novo entra aqui pelo mesmo motivo.
   ========================================================================== */

/* --- Carrosséis do celular ------------------------------------------------
   Duas seções viram trilho abaixo de 620px, pelo mesmo motivo mas com
   justificativas diferentes:

   .sabores   quatro cartões de produto de ~430px. São itens do mesmo tipo,
              comparáveis, que a pessoa PERCORRE para escolher um.

   .processo  quatro passos numerados. Aqui o argumento é outro: em duas
              colunas a descrição cai para ~21 caracteres por linha, e medida
              confortável começa nos ~45. No trilho o cartão fica com 84% da
              tela e o texto volta para ~36 — mais curto E mais legível que a
              coluna única, que é o raro caso em que não se troca uma coisa
              pela outra. Deslizar para frente ainda por cima É o gesto do
              processo.

   O que NÃO virou carrossel, de propósito: os selos da faixa e os três
   ingredientes. Aqueles valem lidos juntos — "fruta integral, vitamina C, e
   nada mais" é uma frase só, partida em três. Cartão de produto se percorre;
   promessa se lê inteira.

   Sem JS para rolar: quem faz isso é o scroll-snap nativo, que já vem com a
   inércia e o atrito certos do aparelho. O JS só desenha os pontinhos.

   A sangria é o truque de sempre: o trilho é filho do .container (que tem
   'padding-inline: var(--gutter)'), então puxa esse recuo de volta com margem
   negativa para chegar na borda da tela e devolve o mesmo valor como padding.
   Resultado: o primeiro cartão nasce alinhado com o título, mas os seguintes
   passam sangrando até a borda em vez de morrer numa canaleta.              */
@media (max-width: 620px) {
  .sabores,
  .processo,
  .ingredientes,
  .consumo,
  .lojas {
    display: flex;
    overflow-x: auto;
    /* segura o "pull to refresh" e a navegação por gesto do navegador
       quando a pessoa chega no fim do trilho */
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .sabores::-webkit-scrollbar,
  .processo::-webkit-scrollbar,
  .ingredientes::-webkit-scrollbar,
  .consumo::-webkit-scrollbar,
  .lojas::-webkit-scrollbar { display: none; }

  /* O .revelar entra com 'opacity: 0' e só acende quando o observador vê o
     elemento NA JANELA. Num trilho horizontal os itens 3 e 4 nascem fora
     dela, então acenderiam só quando a pessoa deslizasse até eles — e com um
     deslize VERTICAL de 24px, que é o que o .revelar anima, no meio de um
     gesto horizontal. Dentro do trilho eles já entram acesos; quem anima a
     chegada da seção continua sendo o cabeçalho, que está fora do trilho. */
  .sabores .revelar,
  .processo .revelar,
  .ingredientes .revelar,
  .consumo .revelar,
  .lojas .revelar { opacity: 1; translate: none; }

  /* --- Sabores --- */
  .sabores {
    gap: 1rem;
    /* o de baixo é para a sombra do :focus-within não ser cortada pelo
       overflow, o de cima para a folga do mesmo jeito */
    padding-block: 0.5rem 1rem;
  }
  /* 82% deixa ~56px do próximo cartão aparecendo num aparelho de 440. Esse
     pedaço é o que diz "tem mais coisa aqui" — sem ele o carrossel parece um
     cartão único e ninguém desliza. Não vale subir para 90%: a borda do
     vizinho some e a affordance vai junto. */
  .sabor {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  /* Toque não tem hover: o translateY(-8px) GRUDAVA no cartão depois do tap e
     ele ficava pendurado até tocar em outro. O :focus-within segue valendo —
     ali o levantar é resposta a teclado, e útil. */
  .sabor:hover { transform: none; }

  /* --- Processo --- */
  /* 84% e não 82%: o passo não tem borda nem fundo, é número e texto soltos
     sobre o verde. Sem a moldura para marcar onde um acaba, quem faz esse
     trabalho é o "02" gigante do vizinho aparecendo na beirada — e ele
     precisa de menos espaço que um cartão inteiro para ser reconhecido. */
  .processo {
    gap: 1.25rem;
    padding-block: 0 0.5rem;
  }
  /* O passo vira CARTÃO. Solto sobre o verde ele era número e texto no vazio
     — "parece que só tem texto" — e a borda ainda resolve uma segunda coisa:
     sem ela, o pedaço do vizinho espiando na beirada podia ler como frase
     cortada em vez de próximo item. Com a moldura fica claro que é outro.

     O vidro é o mesmo par que as abas de sabor e as pílulas de volume usam
     nesta seção verde (branco a 5-6% de fundo, 14-18% de borda): nenhuma
     cor nova entra na página por causa disto. */
  /* --- Ingredientes --- */
  /* 82% como os sabores, e nao 84% como os passos: o cartao tem borda
     propria, entao a moldura ja diz onde ele acaba e a beirada do vizinho
     pode ser mais estreita sem virar ambiguidade. */
  .ingredientes {
    gap: 1rem;
    padding-block: 0.25rem 0.75rem;
  }
  .ingrediente {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  /* --- Consumo --- */
  /* Os quatro cartoes tem alturas bem diferentes - o de refrigeracao carrega
     o "2 °C a 5 °C" em corpo 1,75rem que os outros nao tem. Empilhados isso
     nao aparece; lado a lado num trilho, um cartao mais curto que o vizinho
     fica obvio. O flex resolve sozinho: 'align-items' e stretch por padrao,
     entao os quatro saem da altura do mais alto. E de graca, mas so porque o
     trilho e flex - a grade antiga igualava por FILEIRA, nao pelo conjunto. */
  .consumo {
    gap: 1rem;
    padding-block: 0.25rem 0.75rem;
  }
  .consumo__cartao {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  .consumo__cartao:hover { transform: none; box-shadow: none; }

  /* --- Lojas ---
     Tres cartoes empilhados gastavam quase uma tela e meia so para dizer
     "temos tres lojas", e a terceira so existia para quem rolasse ate ela.
     No trilho as tres cabem numa olhada e a comparacao "qual e a mais perto
     de mim" vira um gesto em vez de rolagem.

     82% como sabores e ingredientes: o cartao tem borda e fundo branco, a
     moldura ja diz onde ele acaba. */
  .lojas {
    gap: 1rem;
    padding-block: 0.25rem 0.75rem;
  }
  .loja {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  /* Toque nao tem hover: o translateY(-6px) grudava no cartao depois do tap */
  .loja:hover { transform: none; box-shadow: none; }
  /* A foto e o que mais gasta altura no cartao. Em 16/10 num cartao de
     ~295px ela sozinha comia 184px; em 16/9 continua sendo uma faixa de
     fachada confortavel. */
  .loja__foto { aspect-ratio: 16 / 9; }
  .loja__corpo { padding: 1.25rem; gap: 0.6rem; }

  /* --- Processo --- */
  .processo__passo {
    flex: 0 0 84%;
    scroll-snap-align: start;
    padding: 4.75rem 1.4rem 1.6rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--raio-lg);
  }
  /* O número acompanha o recuo do cartão: em 'top/left: 0' ele encostaria na
     borda de vidro. E cresce de 2,5 para 3rem — dentro da moldura ele deixa
     de ser rótulo solto e vira o cabeçalho do cartão. */
  .processo__passo::before {
    top: 1.25rem;
    left: 1.4rem;
    font-size: 3rem;
  }

  /* O ícone ancora o canto oposto ao número, e é ele que tira o cartão do
     "só texto". A caixa de 46px é a mesma medida do ícone dos ingredientes,
     e por isso as duas seções lêem como parentes.

     Fica em amarelo sobre vidro, não amarelo chapado: cheio, ele brigaria
     com o número — que é a informação de verdade aqui — e o cartão passaria
     a ter dois pontos amarelos disputando o olho. */
  .processo__icone {
    display: grid;
    place-items: center;
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--raio);
    color: var(--amarelo);
  }
}

/* Os pontinhos. Nascem escondidos e o JS liga: sem script os trilhos ainda
   rolam com o dedo, então o que não pode é sobrar um controle morto na tela.
   Fora do @media de propósito — quem decide se aparecem é o JS, que ouve a
   mesma media query e desmonta tudo ao voltar para a grade. */
.carrossel-pontos {
  display: none;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 1rem;
}
.carrossel-pontos.is-ativo { display: flex; }

/* 24x24 de área de toque com um ponto de 8px desenhado dentro: o alvo mínimo
   confortável não cabe num ponto do tamanho que o ponto precisa ter. Daí o
   ::before em vez de dimensionar o próprio botão. */
.carrossel-ponto {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.carrossel-ponto::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 8px;
  height: 8px;
  border-radius: var(--raio-full);
  background: currentColor;
  opacity: 0.3;
  transition: width var(--transicao), opacity var(--transicao);
}
/* o ativo vira tracinho, não só muda de opacidade: a forma diferente
   sobrevive ao daltonismo e ao sol na tela, a cor sozinha não */
.carrossel-ponto[aria-current="true"]::before {
  width: 20px;
  opacity: 1;
}
/* currentColor acima é o que faz um mesmo componente servir as duas seções:
   no creme dos sabores ele herda o marrom do texto, no verde do processo
   herda o branco. Sem isso seriam dois blocos de regra para o mesmo ponto. */
.sabores-nav { color: var(--texto-suave); }
.processo-nav { color: #fff; }
.processo-nav .carrossel-ponto[aria-current="true"]::before { background: var(--amarelo); }
.sabores-nav .carrossel-ponto[aria-current="true"]::before { background: var(--verde); }
.ingredientes-nav { color: var(--texto-suave); }
.ingredientes-nav .carrossel-ponto[aria-current="true"]::before { background: var(--laranja-escuro); }
.consumo-nav { color: var(--texto-suave); }
.consumo-nav .carrossel-ponto[aria-current="true"]::before { background: var(--laranja); }

.carrossel-ponto:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: var(--raio-full);
}

/* --------------------------------------------------------- */
/* -- begin:: Seletor das tabelas nutricionais                */
/*                                                            */
/* A faixa de botoes nasce ESCONDIDA e so aparece quando o     */
/* main.js escreve .nutri--com-abas no bloco. O motivo esta    */
/* do outro lado: sem script as quatro tabelas ficam           */
/* empilhadas e visiveis, e um seletor ali seria um controle   */
/* que nao controla nada. Informacao de rotulo nao pode        */
/* depender de JavaScript para ser lida - o seletor e conforto */
/* quando ha script, nao condicao para ver o dado.             */
/* --------------------------------------------------------- */
.nutri-abas { display: none; }
.nutri--com-abas .nutri-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Cada balao carrega a cor da propria fruta, no mesmo --cor-sabor inline que
   o menu de sabores e os cartoes de produto ja usam (index.html, os
   #painel-* e os .sabor). Antes os quatro eram brancos iguais e o ativo
   ficava verde - o mesmo verde de todo o resto da pagina, sem relacao nenhuma
   com o produto selecionado. Agora a laranja acende laranja, a uva acende
   roxo, e o pontinho diz de que fruta e cada balao mesmo apagado.

   Sao TRES variaveis por fruta, e cada uma existe por um motivo:

   --cor-sabor         a cor viva da fruta. Pontinho, borda do hover e fundo
                       do balao aceso. E ela que faz a laranja parecer laranja.
   --cor-sabor-texto   a cor do NOME em cima do fundo aceso. Branco sobre
                       #f5901e da 2,4:1 e sobre #9ac31c da 2,1:1 - reprovado.
                       Entao laranja, tangerina e limonada acendem com texto
                       quase preto (7,1 / 6,0 / 8,1) e so a uva, que e escura,
                       acende com branco (9,3).
   --cor-sabor-escura  versao legivel da fruta sobre BRANCO, para o texto do
                       hover. A viva ali daria 2,4:1; esta da 4,6 ou mais.

   A tentacao era escurecer a cor viva e usar branco em cima nos quatro. Nao
   da: escurecidas, #f5901e e #f5761e viram o mesmo marrom e a limonada vira
   verde-oliva - some justamente a identidade que a cor foi buscar. */
.nutri-aba {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--branco);
  color: var(--texto-suave);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
    transform 0.18s ease, box-shadow 0.18s ease;
}
/* O pontinho da fruta. E o mesmo recurso do <i class="ponto"> do menu de
   sabores, aqui feito em ::before para nao mexer na marcacao das abas. Ele
   e o que diz que os quatro baloes sao frutas e nao filtros quaisquer. */
.nutri-aba::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--cor-sabor, var(--verde));
  transition: background 0.18s ease, transform 0.18s ease;
}
.nutri-aba:hover {
  border-color: var(--cor-sabor, var(--verde));
  color: var(--cor-sabor-escura, var(--verde-escuro));
  transform: translateY(-1px);
  box-shadow: var(--sombra-sm);
}
.nutri-aba[aria-selected="true"] {
  background: var(--cor-sabor, var(--verde));
  border-color: var(--cor-sabor, var(--verde));
  color: var(--cor-sabor-texto, #fff);
  font-weight: 700;
  box-shadow: var(--sombra-sm);
}
/* No balao aceso o pontinho vivo sumiria dentro do fundo da mesma cor; ele
   assume a cor do texto e vira o furinho que marca qual esta selecionado. */
.nutri-aba[aria-selected="true"]::before {
  background: currentColor;
  transform: scale(1.15);
}
.nutri-aba[aria-selected="true"]:hover { transform: none; }
/* O anel de foco global e verde e quadrado (raio 4px). Aqui ele acompanha a
   pilula e pega a cor da fruta; no balao aceso entra para dentro e usa a cor
   do proprio nome, que ja e a que contrasta com aquele fundo. */
.nutri-aba:focus-visible {
  outline: 3px solid var(--cor-sabor-escura, var(--verde-acao));
  outline-offset: 2px;
  border-radius: 999px;
}
.nutri-aba[aria-selected="true"]:focus-visible {
  outline-color: currentColor;
  outline-offset: -5px;
}

/* Toque nao tem hover, e o translateY GRUDAVA no balao depois do tap - o
   mesmo conserto que os cartoes de sabor e de ingrediente precisaram. */
@media (hover: none) {
  .nutri-aba:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--borda);
    color: var(--texto-suave);
  }
  .nutri-aba[aria-selected="true"]:hover {
    border-color: var(--cor-sabor, var(--verde));
    color: var(--cor-sabor-texto, #fff);
    box-shadow: var(--sombra-sm);
  }
}

/* Ingredientes por produto, no pe da propria tabela. Antes havia uma frase
   so para os quatro ("suco de fruta integral"), que era verdade para dois
   deles - a uva leva agua e a limonada leva acucar. Cada tabela agora
   carrega a lista que e dela. */
.nutri__ingredientes {
  padding: 1rem 1.75rem 1.25rem;
  border-top: 1px solid var(--borda);
  font-size: var(--t-xs);
  color: var(--texto-suave);
  line-height: 1.6;
}

/* Lugar reservado para a tangerina, que ainda nao tem ficha tecnica. */
.nutri__vazia {
  padding: 1.5rem 1.75rem;
  color: var(--texto-suave);
  font-style: italic;
  text-align: left;
}

@media (max-width: 719.98px) {
  .nutri__ingredientes { padding: 0.9rem 1.25rem 1.1rem; }
  .nutri__vazia { padding: 1.25rem; }
}
/* --------------------------------------------------------- */
/* -- end:: Seletor das tabelas nutricionais                  */
/* --------------------------------------------------------- */