/* ==========================================================================
   PORTO CHOPP — LANDING PAGE DE BUSCA
   --------------------------------------------------------------------------
   Toda cor, tamanho de letra, espaçamento e canto vem de tokens.css, que é
   cópia fiel de design-system/tokens.css. Se um valor precisar mudar, mude lá
   no design system e copie o arquivo de novo para cá.

   Escrito para o celular primeiro. As faixas de tela:
     até 767px      celular: barra fixa de WhatsApp no rodapé da tela
     768px ou mais  some a barra; botão no topo e no fim das seções
     1024px ou mais topo, passos, plantão e fechamento em duas colunas
   (768 e 1024 são --pc-quebra-celular e --pc-quebra-tela; CSS não aceita
   variável dentro de @media, por isso o número aparece escrito.)

   MOVIMENTO: a ideia é "encher o copo". Botões, cartões de marca, números
   dos passos e rótulos de horário se enchem de cor de baixo para cima (ou
   da esquerda para a direita). Quem pede menos movimento no sistema
   (prefers-reduced-motion) recebe a página parada, com as mesmas cores.
   ========================================================================== */

/* PROPOSTA, fora do design system: o tokens.css só tem --pc-transicao
   (160ms). Estes valores de movimento são desta página; se aprovados, vão
   para o tokens.css e para o DESIGN.md. */
:root {
  --lp-curva: cubic-bezier(0.16, 1, 0.3, 1);
  --lp-tempo-estado: 280ms;
  --lp-tempo-enche: 520ms;
  --lp-tempo-entrada: 760ms;
  --lp-tempo-foto: 1600ms;
}

/* ---------- Fontes: só o subset latin, que cobre todo o português ---------- */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fontes/roboto-latin.woff2') format('woff2');
}

/* Roboto Condensed é o provisório da TT Trailers, que ainda não foi licenciada.
   QUANDO A TT TRAILERS CHEGAR: 1) adicione o @font-face dela aqui;
   2) em .titulo, troque "text-transform: uppercase" por
      "font-feature-settings: 'smcp' 1" (o versalete da marca);
   3) os títulos no index.html já estão escritos em caixa mista. */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fontes/roboto-condensed-latin.woff2') format('woff2');
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--pc-esp-5);
}

body {
  margin: 0;
  background: var(--pc-fundo-pagina);
  color: var(--pc-texto);
  font-family: var(--pc-fonte-texto);
  font-size: var(--pc-tam-corpo);
  line-height: var(--pc-altura-corpo);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  /* espaço para a barra fixa do celular não cobrir o rodapé */
  padding-bottom: calc(var(--pc-esp-8) + var(--pc-esp-4) + env(safe-area-inset-bottom));
}

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

picture {
  display: block;
}

p {
  margin: 0;
}

a {
  color: var(--pc-vermelho-acessivel);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

::selection {
  background: var(--pc-vermelho-acessivel);
  color: var(--pc-branco);
}

:focus-visible {
  outline: 3px solid var(--pc-vermelho-acessivel);
  outline-offset: 3px;
}

/* Sobre fundo escuro ou vermelho o anel de foco fica branco. */
.heroi :focus-visible,
.marcas :focus-visible,
.plantao :focus-visible,
.fechamento :focus-visible,
.rodape :focus-visible,
.cabecalho :focus-visible,
.barra-whats :focus-visible {
  outline-color: var(--pc-branco);
}

.pular {
  position: absolute;
  left: var(--pc-margem-lateral);
  top: calc(var(--pc-esp-9) * -1);
  z-index: 20;
  padding: var(--pc-esp-2) var(--pc-esp-4);
  background: var(--pc-branco);
  color: var(--pc-texto);
  font-weight: var(--pc-peso-forte);
}

.pular:focus {
  top: var(--pc-esp-2);
}

/* ---------- Título: condensado, caixa alta, como nos posts ---------- */

.titulo {
  margin: 0;
  font-family: var(--pc-fonte-titulo);
  font-weight: var(--pc-peso-forte);
  font-size: var(--pc-tam-h2);
  line-height: var(--pc-altura-titulo);
  letter-spacing: var(--pc-espaco-letra-titulo);
  text-transform: uppercase;
  text-wrap: balance;
}

.titulo--display {
  font-size: var(--pc-tam-h1);
}

.titulo--peq {
  font-size: var(--pc-tam-h3);
}

/* A pergunta do título fica sozinha na primeira linha, como nos posts
   ("Precisou? / Chama a Porto Chopp!"). */
.titulo-quebra {
  display: block;
}

/* ---------- Texto de apoio sobre fundo escuro (topo e fechamento) ----------
   Sem caixa vermelha: texto branco, e o fato principal em vermelho com um
   traço embaixo. #ff3131 sobre preto dá 5,74:1, passa em qualquer tamanho. */

.heroi-apoio {
  max-width: var(--pc-largura-texto);
  font-size: var(--pc-tam-grande);
  line-height: var(--pc-altura-corpo);
}

.realce {
  color: var(--pc-vermelho);
  font-weight: var(--pc-peso-forte);
  white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  padding-bottom: 2px;
}

/* ---------- Advertência legal ---------- */

.advertencia {
  font-size: var(--pc-tam-micro);
  font-weight: var(--pc-peso-medio);
  line-height: var(--pc-altura-corpo);
}

.advertencia--clara {
  color: var(--pc-texto);
}

/* ---------- Botão: a pílula com círculo branco do post feed-4x5-01 ----------
   Ao passar o mouse, a pílula se enche de baixo para cima (o ::before). */

.botao {
  --botao-enche: var(--pc-preto);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--pc-esp-3);
  min-height: var(--pc-esp-7);
  padding: var(--pc-esp-1) var(--pc-esp-5) var(--pc-esp-1) var(--pc-esp-1);
  border: 2px solid var(--pc-acao);
  border-radius: var(--pc-raio-pilula);
  background: var(--pc-acao);
  color: var(--pc-acao-texto);
  font-family: var(--pc-fonte-texto);
  font-size: var(--pc-tam-corpo);
  font-weight: var(--pc-peso-forte);
  line-height: var(--pc-altura-titulo);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--lp-tempo-estado) var(--lp-curva), border-color var(--lp-tempo-estado) var(--lp-curva), transform var(--pc-transicao);
}

.botao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--botao-enche);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform var(--lp-tempo-enche) var(--lp-curva);
}

.botao:hover::before,
.botao:focus-visible::before {
  transform: scaleY(1);
}

/* Quando o enchimento termina, o fundo da própria pílula assume a mesma cor
   (atraso = duração do enchimento, troca sem trajeto). Assim o estado final
   não depende do ::before e o texto nunca fica da cor do fundo. Ao tirar o
   mouse, o fundo volta na hora e o enchimento desce por cima. */
.botao:hover,
.botao:focus-visible {
  border-color: var(--botao-enche);
  background-color: var(--botao-enche);
  transition: color var(--lp-tempo-estado) var(--lp-curva), border-color var(--lp-tempo-estado) var(--lp-curva), transform var(--pc-transicao), background-color 0s linear var(--lp-tempo-enche);
}

.botao:active {
  transform: scale(0.97);
}

.botao-icone {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(var(--pc-esp-7) - var(--pc-esp-3));
  height: calc(var(--pc-esp-7) - var(--pc-esp-3));
  border-radius: var(--pc-raio-pilula);
  background: var(--pc-branco);
  color: var(--pc-acao);
  transition: background-color var(--lp-tempo-estado) var(--lp-curva), color var(--lp-tempo-estado) var(--lp-curva);
}

.botao-icone svg {
  width: var(--pc-esp-5);
  height: var(--pc-esp-5);
  fill: currentColor;
  transition: transform var(--lp-tempo-estado) var(--lp-curva);
}

.botao:hover .botao-icone svg,
.botao:focus-visible .botao-icone svg {
  transform: rotate(-12deg) scale(1.1);
}

/* Sobre fundo preto, a pílula se enche de branco, para não sumir no preto. */
.botao--sobre-escuro {
  --botao-enche: var(--pc-branco);
}

.botao--sobre-escuro:hover,
.botao--sobre-escuro:focus-visible {
  color: var(--pc-acao);
}

.botao--sobre-escuro:hover .botao-icone,
.botao--sobre-escuro:focus-visible .botao-icone {
  background: var(--pc-acao);
  color: var(--pc-branco);
}

/* Versão de contorno, para as perguntas prontas: três botões vermelhos
   cheios em sequência brigariam entre si. Ela se enche de vermelho. */
.botao--linha {
  --botao-enche: var(--pc-acao);
  background: var(--pc-branco);
  color: var(--pc-acao);
}

.botao--linha .botao-icone {
  background: var(--pc-acao);
  color: var(--pc-branco);
}

.botao--linha:hover,
.botao--linha:focus-visible {
  color: var(--pc-branco);
}

.botao--linha:hover .botao-icone,
.botao--linha:focus-visible .botao-icone {
  background: var(--pc-branco);
  color: var(--pc-acao);
}

.botao--peq {
  min-height: var(--pc-esp-7);
  padding: var(--pc-esp-2) var(--pc-esp-5);
}

/* No celular a barra fixa já carrega o botão geral; os botões gerais das
   seções só aparecem do tablet para cima. */
.so-computador {
  display: none;
}

/* ---------- Faixa xadrez: o material da chopeira (post feed-4x5-10) ----------
   Duas camadas para usar só tokens: o branco embaixo e o vermelho recortado
   em quadrados por uma máscara. */

.xadrez-borda {
  position: relative;
}

.xadrez-borda::before,
.xadrez-borda::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--pc-esp-4);
  pointer-events: none;
}

.xadrez-borda::before {
  background: var(--pc-branco);
}

.xadrez-borda::after {
  background: var(--pc-vermelho);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='8' height='8'/%3E%3Crect x='8' y='8' width='8' height='8'/%3E%3C/svg%3E") 0 0 / var(--pc-esp-4) var(--pc-esp-4) repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='8' height='8'/%3E%3Crect x='8' y='8' width='8' height='8'/%3E%3C/svg%3E") 0 0 / var(--pc-esp-4) var(--pc-esp-4) repeat-x;
}

/* Versão fina, para a borda de cima da barra fixa do celular. Ali os
   quadrados usam o mesmo vermelho da barra: dois vermelhos diferentes lado a
   lado parecem erro de impressão (DESIGN.md, seção 1). */
.xadrez-borda--fina::before,
.xadrez-borda--fina::after {
  height: var(--pc-esp-2);
}

.xadrez-borda--fina::after {
  background: var(--pc-vermelho-acessivel);
  -webkit-mask-size: var(--pc-esp-2) var(--pc-esp-2);
  mask-size: var(--pc-esp-2) var(--pc-esp-2);
}

/* ---------- Estrutura das seções ---------- */

.secao {
  padding: var(--pc-esp-8) 0;
}

.secao-miolo {
  width: 100%;
  max-width: var(--pc-largura-pagina);
  margin: 0 auto;
  padding: 0 var(--pc-margem-lateral);
}

.secao-apoio {
  margin-top: var(--pc-esp-3);
  max-width: var(--pc-largura-texto);
  color: var(--pc-texto-suave);
  font-size: var(--pc-tam-grande);
}

/* ---------- Cabeçalho ----------
   "Porto Alegre" fica junto da marca, pequeno e com o marcador de lugar;
   o menu fica do outro lado, em caixa normal. Os dois não se confundem. */

.cabecalho {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pc-esp-5);
  padding: var(--pc-esp-4) var(--pc-margem-lateral);
  transition: background-color var(--lp-tempo-estado) var(--lp-curva);
}

.cabecalho-marca-grupo {
  display: flex;
  align-items: center;
  gap: var(--pc-esp-4);
}

.cabecalho-marca {
  width: auto;
  height: var(--pc-esp-7);
}

.cabecalho-cidade {
  display: inline-flex;
  align-items: center;
  gap: var(--pc-esp-1);
  color: var(--pc-branco);
  font-size: var(--pc-tam-peq);
  font-weight: var(--pc-peso-medio);
  text-shadow: var(--pc-sombra-texto);
}

/* O marcador é gráfico, não texto: o #ff3131 sobre a foto escurecida basta. */
.cabecalho-cidade svg {
  width: var(--pc-esp-4);
  height: var(--pc-esp-4);
  fill: var(--pc-vermelho);
}

/* Botão "Menu" do celular e do tablet. Nasce escondido (atributo hidden) e o
   pagina.js mostra: sem JavaScript ele não teria função. */
.menu-botao {
  display: inline-flex;
  align-items: center;
  gap: var(--pc-esp-2);
  min-height: var(--pc-esp-7);
  margin-left: auto;
  padding: 0 var(--pc-esp-4);
  border: 2px solid var(--pc-branco);
  border-radius: var(--pc-raio-pilula);
  background: transparent;
  color: var(--pc-branco);
  font-family: var(--pc-fonte-texto);
  font-size: var(--pc-tam-corpo);
  font-weight: var(--pc-peso-forte);
  text-shadow: var(--pc-sombra-texto);
  cursor: pointer;
}

.menu-botao[hidden] {
  display: none;
}

/* Três traços que viram um X quando o menu abre. */
.menu-botao-icone,
.menu-botao-icone::before,
.menu-botao-icone::after {
  display: block;
  width: var(--pc-esp-4);
  height: 2px;
  background: currentColor;
  transition: transform var(--lp-tempo-estado) var(--lp-curva), background-color var(--lp-tempo-estado) var(--lp-curva);
}

.menu-botao-icone {
  position: relative;
}

.menu-botao-icone::before,
.menu-botao-icone::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-botao-icone::before {
  top: calc(var(--pc-esp-1) * -1.5);
}

.menu-botao-icone::after {
  top: calc(var(--pc-esp-1) * 1.5);
}

.menu-aberto .menu-botao-icone {
  background: transparent;
}

.menu-aberto .menu-botao-icone::before {
  transform: translateY(calc(var(--pc-esp-1) * 1.5)) rotate(45deg);
}

.menu-aberto .menu-botao-icone::after {
  transform: translateY(calc(var(--pc-esp-1) * -1.5)) rotate(-45deg);
}

/* Celular de 320 a 389px: só o ícone, para caber ao lado de "Porto Alegre".
   O nome "Menu" continua para leitor de tela. */
@media (max-width: 389px) {
  .menu-botao {
    padding: 0 var(--pc-esp-3);
  }

  .menu-botao-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Com o menu aberto, o cabeçalho ganha fundo preto e a lista desce por
   baixo dele, descobrindo-se de cima para baixo. */
.cabecalho.menu-aberto {
  background: var(--pc-preto);
}

.cabecalho-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: grid;
  padding: 0 var(--pc-margem-lateral) var(--pc-esp-5);
  background: var(--pc-preto);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--lp-tempo-enche) var(--lp-curva), visibility 0s linear var(--lp-tempo-enche);
}

.menu-aberto .cabecalho-menu {
  visibility: visible;
  clip-path: inset(0);
  transition: clip-path var(--lp-tempo-enche) var(--lp-curva), visibility 0s;
}

.cabecalho-menu a {
  position: relative;
  padding: var(--pc-esp-4) 0;
  border-bottom: 1px solid var(--pc-texto-suave);
  color: var(--pc-branco);
  font-family: var(--pc-fonte-titulo);
  font-size: var(--pc-tam-h3);
  font-weight: var(--pc-peso-forte);
  line-height: var(--pc-altura-titulo);
  text-decoration: none;
}

/* O traço vermelho embaixo do link cresce da esquerda ao passar o mouse. */
.cabecalho-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--pc-esp-1);
  height: 2px;
  background: var(--pc-vermelho);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--lp-tempo-estado) var(--lp-curva);
}

.cabecalho-menu a:hover::after,
.cabecalho-menu a:focus-visible::after {
  transform: scaleX(1);
}

/* ---------- 1. Topo ---------- */

.heroi {
  position: relative;
  overflow: hidden; /* o canvas das bolhas não sai da seção */
  background: var(--pc-preto);
  color: var(--pc-branco);
}

/* Bolhas de gás no fundo preto (pagina.js, item 8). O canvas cobre a seção
   inteira, mas fica embaixo da foto e do texto, que vêm depois no HTML: no
   computador as bolhas aparecem no preto da esquerda e somem por baixo da
   foto; no celular e no tablet, no preto abaixo dela. O efeito original
   sumia abaixo de 640px; aqui aparece também no celular, a pedido. */
.bolhas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.heroi-midia {
  position: relative;
  /* 36% da tela (mínimo 192px): com as cidades, o preço e a nota, o texto
     do topo cresceu, e a advertência precisa caber acima da barra fixa. */
  height: 36svh;
  min-height: calc(var(--pc-esp-9) * 2);
  max-height: calc(var(--pc-esp-9) * 5);
  overflow: hidden;
}

/* O quadro da foto é um pouco maior que a janela dela: a folga é o espaço
   do leve movimento de profundidade na rolagem (pagina.js). */
.heroi-quadro {
  position: absolute;
  inset: -6% 0 0;
  will-change: transform;
}

/* O véu é o do design system. No celular ele ganha uma segunda camada que
   termina em preto: o título passa por cima da borda da foto, e sem ela a
   borda corta o título numa linha reta. Função de leitura, não enfeite. */
.heroi-midia::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, var(--pc-preto)), var(--pc-veu-foto);
}

/* No celular o recorte é só o copo, alinhado por baixo: a parte que fica
   atrás do título é o chopp e a pingadeira, que são escuros. */
.heroi-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

.heroi-texto {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--pc-esp-3);
  margin-top: calc(var(--pc-esp-9) * -1);
  padding: 0 var(--pc-margem-lateral) var(--pc-esp-7);
}

.heroi .titulo {
  text-shadow: var(--pc-sombra-texto);
}

/* Onde a Porto Chopp entrega, acima do título (texto pedido pelo cliente).
   Em caixa normal: é informação para quem é de Canoas ou Viamão, não
   enfeite de título. */
.heroi-cidades {
  text-wrap: balance; /* cinco cidades em duas linhas parelhas, sem "Viamão" sozinho */
  font-size: var(--pc-tam-corpo);
  font-weight: var(--pc-peso-medio);
  line-height: var(--pc-altura-corpo);
  text-shadow: var(--pc-sombra-texto);
}

/* Tema do grupo de anúncio (js/tema.js). Enquanto o tema não entra, o que
   ele troca fica invisível: o padrão nunca aparece para depois mudar. A
   troca acontece enquanto o HTML chega, antes de a página pintar. */
.tema-trocando .heroi-titulo,
.tema-trocando .heroi-segunda-linha,
.tema-trocando .heroi-foto,
.tema-trocando .itens-lista,
.tema-trocando [data-texto-tema] .botao-texto {
  visibility: hidden;
}

/* Foto do tema: o recorte (ferramentas/foto-tema.py) põe o copo no centro,
   então ela fica centrada no quadro em todos os tamanhos de tela. A padrão
   é alinhada por baixo, por causa do enquadramento dela. */
.tema-foto .heroi-foto {
  object-position: 50% 50%;
}

/* No computador o quadro da foto sobe 12% acima do topo (folga do movimento
   de profundidade): a foto do tema desce um pouco para a espuma aparecer. */
@media (min-width: 1024px) {
  .tema-foto .heroi-foto {
    object-position: 50% 40%;
  }
}

/* Preço e frase do tema são duas frases. No computador correm juntas, como
   um parágrafo só; no celular viram degraus separados (bloco logo abaixo). */
.heroi-preco,
.heroi-plantao {
  display: inline;
}

.heroi-cidades svg {
  display: none;
}

/* Celular: o topo era um bloco branco de onze linhas. Agora são quatro
   degraus com o mesmo texto: onde (etiqueta pequena com o marcador), o quê
   (título um degrau menor, quatro linhas em vez de cinco), quanto (o preço
   grande, em vermelho) e o resto em branco apagado, que lê mas não pesa. */
@media (max-width: 767px) {
  .heroi {
    /* Branco misturado com o preto do fundo: 78% dá 11:1 de contraste, acima
       dos 4,5:1. Sem color-mix, volta ao branco. */
    --heroi-apagado: color-mix(in srgb, var(--pc-branco) 78%, var(--pc-preto));
  }

  /* As cinco cidades, logo abaixo, dizem mais que o "Porto Alegre" daqui. */
  .cabecalho-cidade {
    display: none;
  }

  .heroi-cidades {
    display: flex;
    align-items: flex-start;
    gap: var(--pc-esp-2);
    font-size: var(--pc-tam-peq);
  }

  .heroi-cidades svg {
    display: block;
    flex: none;
    width: var(--pc-esp-4);
    height: var(--pc-esp-4);
    fill: var(--pc-vermelho);
  }

  .heroi-cidades svg {
    margin-top: 0.15em;
  }

  .heroi .titulo--display {
    font-size: var(--pc-tam-h2);
  }

  .heroi .heroi-apoio {
    display: grid;
    gap: var(--pc-esp-2);
    font-size: var(--pc-tam-corpo);
    color: var(--heroi-apagado);
  }

  .heroi-preco {
    display: block;
  }

  /* O preço é o único vermelho do texto do topo. Altura de linha 1 para o
     número grande não abrir um vão na linha em que está. */
  .heroi .realce {
    font-family: var(--pc-fonte-titulo);
    font-size: var(--pc-tam-h2);
    letter-spacing: var(--pc-espaco-letra-titulo);
    line-height: 1;
  }

  .heroi-plantao {
    display: block;
    font-size: var(--pc-tam-peq);
  }
}

/* Celular baixo (até 600px de altura útil): a foto encolhe para 30% da tela,
   para a advertência caber acima da barra fixa. */
@media (max-width: 767px) and (max-height: 600px) {
  .heroi-midia {
    height: 30svh;
    min-height: calc(var(--pc-esp-9) * 1.5);
  }
}

/* Com tema, o título tem uma linha a mais: a foto encolhe já a partir de
   640px de altura útil (360x621 cobria a advertência). */
@media (max-width: 767px) and (max-height: 640px) {
  .tema-ativo .heroi-midia {
    height: 30svh;
    min-height: calc(var(--pc-esp-9) * 1.5);
  }
}

/* ---------- 1b. Itens, logo abaixo do topo ---------- */

/* Três fatos curtos, cada um com o "certo" vermelho. Continua o preto do
   topo, separado por um fio: lê como parte da oferta, não como seção nova. */
.itens-tema {
  background: var(--pc-preto);
  color: var(--pc-branco);
}

.itens-lista {
  display: grid;
  gap: var(--pc-esp-3);
  margin-top: 0;
  margin-bottom: 0;
  padding-top: var(--pc-esp-5);
  padding-bottom: var(--pc-esp-6);
  border-top: 1px solid var(--pc-texto-suave);
  list-style: none;
}

.itens-lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--pc-esp-2);
  font-weight: var(--pc-peso-medio);
  line-height: var(--pc-altura-corpo);
  text-wrap: pretty; /* evita "litro" ou "chopp" sozinho na última linha */
}

.itens-lista svg {
  flex: none;
  width: var(--pc-esp-5);
  height: var(--pc-esp-5);
  fill: var(--pc-vermelho);
}

@media (min-width: 768px) {
  .itens-lista {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    column-gap: var(--pc-esp-6);
  }
}

/* ---------- 2. Do pedido à busca ---------- */

.passos-grade {
  display: grid;
  gap: var(--pc-esp-6);
}

/* A foto grande, parada ao lado dos passos, só existe no computador. */
.passos-foto {
  display: none;
}

.passos-conteudo {
  display: grid;
  gap: var(--pc-esp-6);
}

.passos-lista {
  display: grid;
  gap: var(--pc-esp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.passo {
  display: grid;
  grid-template-columns: var(--pc-esp-7) 1fr;
  column-gap: var(--pc-esp-4);
  row-gap: var(--pc-esp-5);
  align-items: start;
}

.passo p {
  grid-column: 2;
  padding-top: var(--pc-esp-2);
  font-size: var(--pc-tam-grande);
  transition: color var(--lp-tempo-enche) var(--lp-curva);
}

/* No celular a foto do entregador entra dentro do passo 2, que é o que ela mostra. */
.passo-foto {
  grid-column: 1 / -1;
  margin: 0 calc(var(--pc-margem-lateral) * -1);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.passo-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* Número grande (32px): conta como texto grande, então pode usar o #ff3131.
   Sem JavaScript, todos aparecem cheios. Com ele (classe "vivo"), cada número
   se enche de vermelho quando o passo chega ao meio da tela. */
.passos-num {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: var(--pc-esp-7);
  height: var(--pc-esp-7);
  background: var(--pc-vermelho);
  color: var(--pc-branco);
  font-family: var(--pc-fonte-titulo);
  font-size: var(--pc-tam-h2);
  font-weight: var(--pc-peso-forte);
  line-height: var(--pc-altura-titulo);
}

.passos-num > span {
  position: relative;
  z-index: 1;
  transition: color var(--lp-tempo-enche) var(--lp-curva);
}

.passos-lista.vivo .passos-num {
  background: var(--pc-branco);
  box-shadow: inset 0 0 0 2px var(--pc-borda);
  color: var(--pc-texto-suave);
}

.passos-lista.vivo .passos-num::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pc-vermelho);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform var(--lp-tempo-enche) var(--lp-curva);
}

.passos-lista.vivo .passo p {
  color: var(--pc-texto-suave);
}

.passos-lista.vivo .passo.cheio .passos-num::before {
  transform: scaleY(1);
}

.passos-lista.vivo .passo.cheio .passos-num > span {
  color: var(--pc-branco);
}

.passos-lista.vivo .passo.cheio p {
  color: var(--pc-texto);
}

/* ---------- 3. Chopes: o quadro de marcas sobre a foto dos barris ---------- */

.marcas {
  position: relative;
  overflow: hidden;
  background: var(--pc-preto);
  color: var(--pc-branco);
}

.marcas-fundo {
  position: absolute;
  inset: 0;
}

.marcas-fundo picture {
  position: absolute;
  inset: -10% 0;
  will-change: transform;
}

.marcas-fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A foto vira textura: 88% de preto por cima, para logo e texto brancos lerem
   e para o lacre de outra marca não aparecer atrás da Delta. */
.marcas-fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pc-preto);
  opacity: 0.88;
}

.marcas-miolo {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--pc-esp-6);
  padding-top: var(--pc-esp-8);
  padding-bottom: var(--pc-esp-8);
}

.marcas .secao-apoio {
  color: var(--pc-branco);
}

/* No celular as logos ficam a 62% do tamanho do computador: são nove
   marcas em lista, e a seção não pode virar um corredor. */
.marcas {
  --escala-logo: 0.62;
}

.marcas-quadro {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pc-texto-suave);
}

.marca {
  border-bottom: 1px solid var(--pc-texto-suave);
}

/* Cada marca é um botão para o WhatsApp. Ao passar o mouse, o cartão se
   enche de vermelho de baixo para cima; a logo sobe um pouco. */
.marca-cartao {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--pc-esp-4);
  height: 100%;
  padding: var(--pc-esp-5) var(--pc-esp-4);
  color: var(--pc-branco);
  text-decoration: none;
}

.marca-cartao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pc-vermelho-acessivel);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform var(--lp-tempo-enche) var(--lp-curva);
}

.marca-cartao:focus-visible::before,
.marca.no-centro .marca-cartao::before {
  transform: scaleY(1);
}

/* A logo é uma máscara pintada com a cor do texto: branca no quadro escuro,
   continua branca no cartão vermelho. Cada uma tem a altura que equilibra o
   peso visual com as outras (--altura-logo, no index.html).
   O arquivo da logo (mask-image) fica no style de cada cartão, no index.html:
   escrito lá, o caminho vale a partir da página, como o das fotos. */
.marca-logo {
  display: block;
  height: calc(var(--altura-logo) * var(--escala-logo, 1));
  aspect-ratio: var(--proporcao);
  max-width: 100%;
  background: currentColor;
  -webkit-mask-position: 0 50%;
  mask-position: 0 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: transform var(--lp-tempo-enche) var(--lp-curva);
}

.marca-cartao:focus-visible .marca-logo,
.marca.no-centro .marca-logo {
  transform: translateY(calc(var(--pc-esp-1) * -1));
}

/* Ficha do chopp: estilo, teor e amargor (tabela do cliente). */
.marca-ficha {
  max-width: var(--pc-largura-texto);
  line-height: var(--pc-altura-corpo);
}

.marcas-outras {
  margin-top: var(--pc-esp-4);
  font-family: var(--pc-fonte-texto);
  font-size: var(--pc-tam-peq);
  font-weight: var(--pc-peso-forte);
  letter-spacing: var(--pc-espaco-letra-rotulo);
  line-height: var(--pc-altura-titulo);
  text-transform: uppercase;
}

/* Delta: quadro de torneiras. A logo e o selo de um lado; os cinco chopes e a
   linha dos sazonais do outro, uma linha por chopp. Cada linha é um botão de
   WhatsApp e se enche de vermelho como os cartões de marca. */
.delta {
  display: grid;
  gap: var(--pc-esp-5);
}

.delta-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--pc-esp-4);
}

.delta-estilos {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pc-texto-suave);
}

.estilo {
  border-bottom: 1px solid var(--pc-texto-suave);
}

.estilo-cartao {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--pc-esp-4);
  row-gap: var(--pc-esp-1);
  padding: var(--pc-esp-4) var(--pc-esp-3);
  color: var(--pc-branco);
  text-decoration: none;
}

.estilo-cartao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pc-vermelho-acessivel);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform var(--lp-tempo-enche) var(--lp-curva);
}

.estilo-cartao:focus-visible::before,
.estilo.no-centro .estilo-cartao::before {
  transform: scaleY(1);
}

.estilo-cartao:focus-visible {
  outline-offset: -5px;
}

.estilo-nome {
  font-family: var(--pc-fonte-titulo);
  font-size: var(--pc-tam-h3);
  font-weight: var(--pc-peso-forte);
  line-height: var(--pc-altura-titulo);
  text-transform: uppercase;
}

.estilo-ficha {
  grid-column: 1;
  font-size: var(--pc-tam-corpo);
  line-height: var(--pc-altura-corpo);
}

.estilo .marca-pedir {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.estilo.no-centro .marca-pedir svg {
  transform: rotate(-12deg) scale(1.1);
}

/* Selo de 12px: texto pequeno, então o vermelho acessível. No cartão cheio
   de vermelho ele inverte para branco, para não sumir. */
.marca-selo {
  padding: var(--pc-esp-2) var(--pc-esp-3);
  background: var(--pc-vermelho-acessivel);
  color: var(--pc-branco);
  font-size: var(--pc-tam-micro);
  font-weight: var(--pc-peso-forte);
  letter-spacing: var(--pc-espaco-letra-rotulo);
  line-height: var(--pc-altura-titulo);
  text-transform: uppercase;
  transition: background-color var(--lp-tempo-estado) var(--lp-curva), color var(--lp-tempo-estado) var(--lp-curva);
}

.marca-cartao:focus-visible .marca-selo,
.marca.no-centro .marca-selo {
  background: var(--pc-branco);
  color: var(--pc-vermelho-acessivel);
}

.marca-pedir {
  display: inline-flex;
  align-items: center;
  gap: var(--pc-esp-2);
  font-size: var(--pc-tam-peq);
  font-weight: var(--pc-peso-forte);
}

.marca-pedir svg {
  width: var(--pc-esp-5);
  height: var(--pc-esp-5);
  fill: currentColor;
  transition: transform var(--lp-tempo-estado) var(--lp-curva);
}

.marca.no-centro .marca-pedir svg {
  transform: rotate(-12deg) scale(1.1);
}

/* Celular: uma linha baixa por chopp. Antes, nome, ficha de duas linhas e
   "Escolher" por extenso davam 109px por estilo da Delta e 150px por marca:
   2.305px de seção, três telas e meia. Agora a ficha é curta ("4,5% · 8 IBU";
   o texto de cima explica o IBU), o pedido é só o ícone do WhatsApp (o nome
   continua para leitor de tela) e as outras marcas põem logo e ficha lado a
   lado. O vermelho no meio da tela continua, um por vez. */
@media (max-width: 767px) {
  .marcas {
    --apagado: color-mix(in srgb, var(--pc-branco) 78%, var(--pc-preto));
  }

  .marcas-miolo {
    gap: var(--pc-esp-5);
  }

  .ficha-rotulo {
    display: none;
  }

  .marca-pedir-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .delta {
    gap: var(--pc-esp-4);
  }

  .delta-cabeca {
    align-items: center;
  }

  .estilo-cartao {
    padding: var(--pc-esp-3);
    row-gap: 0;
  }

  .estilo-ficha,
  .marca-ficha {
    text-wrap: balance;
    font-size: var(--pc-tam-peq);
    color: var(--apagado);
    transition: color var(--lp-tempo-estado) var(--lp-curva);
  }

  /* No vermelho, o cinza claro perde contraste: a ficha volta ao branco. */
  .estilo.no-centro .estilo-ficha,
  .marca.no-centro .marca-ficha,
  .estilo-cartao:focus-visible .estilo-ficha,
  .marca-cartao:focus-visible .marca-ficha {
    color: var(--pc-branco);
  }

  .marca-cartao {
    grid-template-columns: var(--pc-esp-9) minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--pc-esp-4);
    padding: var(--pc-esp-3);
  }

  /* O rótulo pertence à lista de baixo: mais perto dela que da Delta. */
  .marcas-outras {
    margin-top: 0;
    margin-bottom: calc(var(--pc-esp-3) * -1);
  }
}

/* Passar o mouse só vale onde existe mouse. No toque, o :hover "gruda"
   depois de tocar e somaria um segundo cartão vermelho ao do meio da tela. */
@media (hover: hover) {
  .marca-cartao:hover::before,
  .estilo-cartao:hover::before {
    transform: scaleY(1);
  }

  .marca-cartao:hover .marca-logo {
    transform: translateY(calc(var(--pc-esp-1) * -1));
  }

  .marca-cartao:hover .marca-pedir svg,
  .estilo-cartao:hover .marca-pedir svg {
    transform: rotate(-12deg) scale(1.1);
  }
}

.marcas-rodape {
  display: grid;
  gap: var(--pc-esp-3);
}

/* Setas e barra da galeria: só existem do tablet para cima (pagina.js tira
   o hidden quando sobram marcas fora da tela). */
.marcas-controles {
  display: flex;
  align-items: center;
  gap: var(--pc-esp-3);
}

.marcas-controles[hidden] {
  display: none;
}

/* A barra se enche da esquerda conforme a galeria anda: cheia = fim. */
.marcas-progresso {
  flex: 1;
  height: 2px;
  margin-right: var(--pc-esp-3);
  background: var(--pc-texto-suave);
}

.marcas-progresso span {
  display: block;
  height: 100%;
  background: var(--pc-vermelho);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--lp-tempo-estado) var(--lp-curva);
}

.marcas-seta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--pc-esp-7);
  height: var(--pc-esp-7);
  border: 2px solid var(--pc-branco);
  border-radius: var(--pc-raio-pilula);
  background: transparent;
  color: var(--pc-branco);
  cursor: pointer;
  transition: color var(--lp-tempo-estado) var(--lp-curva), opacity var(--lp-tempo-estado) var(--lp-curva);
}

.marcas-seta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pc-branco);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform var(--lp-tempo-enche) var(--lp-curva);
}

.marcas-seta:not(:disabled):hover::before,
.marcas-seta:focus-visible::before {
  transform: scaleY(1);
}

.marcas-seta:not(:disabled):hover,
.marcas-seta:focus-visible {
  color: var(--pc-vermelho-acessivel);
}

.marcas-seta svg {
  width: var(--pc-esp-5);
  height: var(--pc-esp-5);
  fill: currentColor;
}

.marcas-seta--voltar svg {
  transform: scaleX(-1);
}

.marcas-seta:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---------- 4. Plantão: a prova central da página ---------- */

.plantao {
  padding-top: calc(var(--pc-esp-8) + var(--pc-esp-4));
  background: var(--pc-preto);
  color: var(--pc-branco);
}

.plantao .secao-apoio {
  color: var(--pc-branco);
}

.plantao-grade {
  display: grid;
  gap: var(--pc-esp-7);
}

.plantao-texto {
  display: grid;
  gap: var(--pc-esp-4);
}

.plantao-texto .secao-apoio {
  margin-top: 0;
}

.plantao-legenda {
  margin: 0 0 var(--pc-esp-4);
  font-size: var(--pc-tam-peq);
  font-weight: var(--pc-peso-medio);
  letter-spacing: var(--pc-espaco-letra-rotulo);
  text-transform: uppercase;
}

.horarios {
  display: grid;
  gap: var(--pc-esp-5);
  margin: 0;
}

.horario {
  display: grid;
  justify-items: start;
  gap: var(--pc-esp-2);
}

/* Rótulo do dia no vermelho acessível (#d92b2b, 4,85:1): no computador os
   dias comuns ficam em 18px, abaixo do limite de texto grande, e o #ff3131
   reprovaria ali. Uma cor só em toda a tabela. */
.horario dt {
  padding: var(--pc-esp-2) var(--pc-esp-3);
  background: var(--pc-vermelho-acessivel);
  font-family: var(--pc-fonte-titulo);
  font-size: var(--pc-tam-h3);
  font-weight: var(--pc-peso-forte);
  line-height: var(--pc-altura-titulo);
  text-transform: uppercase;
}

/* Hora em caixa normal: "8h às 18h" (em caixa alta viraria "8H", grafia errada). */
.horario dd {
  margin: 0;
  font-family: var(--pc-fonte-titulo);
  font-size: var(--pc-tam-h3);
  line-height: var(--pc-altura-titulo);
}

/* Sexta e sábado vêm primeiro e maiores: é o dia das festas e do plantão
   até meia-noite, o fato que a página promete no título. */
.horario--destaque {
  padding-bottom: var(--pc-esp-5);
  border-bottom: 1px solid var(--pc-branco);
}

.horario--destaque dd {
  font-size: var(--pc-tam-h1);
  font-weight: var(--pc-peso-forte);
  white-space: nowrap;
}

/* ---------- 5. Pergunta direto ---------- */

.perguntas-lista {
  margin: var(--pc-esp-6) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pc-borda);
}

.pergunta {
  display: grid;
  gap: var(--pc-esp-4);
  padding: var(--pc-esp-6) 0;
  border-bottom: 1px solid var(--pc-borda);
}

/* Ao passar o mouse na linha, a pergunta fica vermelha e anda um pouco:
   mostra qual botão vai junto com ela. */
.pergunta h3 {
  transition: color var(--lp-tempo-estado) var(--lp-curva), transform var(--lp-tempo-estado) var(--lp-curva);
}

.pergunta:hover h3 {
  color: var(--pc-vermelho-acessivel);
  transform: translateX(var(--pc-esp-2));
}

.pergunta-texto {
  display: grid;
  gap: var(--pc-esp-3);
  max-width: var(--pc-largura-texto);
}

.pergunta-destaque {
  font-weight: var(--pc-peso-forte);
}

/* O "a partir de" em "Quanto custa?" com o mesmo peso de número do topo:
   quem chega pelo menu acha o valor antes de ler a frase. #ff3131 em 32px
   é texto grande (3,66:1 sobre branco, mínimo 3:1). */
.pergunta-preco {
  text-wrap: pretty; /* evita "chopeira.*" sozinha na última linha */
}

.pergunta-preco strong {
  font-family: var(--pc-fonte-titulo);
  font-size: var(--pc-tam-h2);
  font-weight: var(--pc-peso-forte);
  line-height: var(--pc-altura-titulo);
  color: var(--pc-vermelho);
  white-space: nowrap;
}

.pergunta-nota {
  color: var(--pc-texto-suave);
  font-size: var(--pc-tam-peq);
}

/* A origem do R$ 14,30 fica colada ao preço que ela explica. */
.pergunta-preco + .pergunta-origem {
  margin-top: calc(var(--pc-esp-2) * -1);
}

/* Cidades atendidas: lista curta, com o marcador na cor da marca. */
.area-lista {
  display: grid;
  gap: var(--pc-esp-1);
  margin: 0;
  padding-left: var(--pc-esp-5);
}

.area-lista li::marker {
  color: var(--pc-vermelho-acessivel);
}

/* ---------- 6. Avaliações ---------- */

.avaliacoes {
  background: var(--pc-fundo-suave);
}

.avaliacoes-estatico {
  display: grid;
  gap: var(--pc-esp-5);
  margin-top: var(--pc-esp-5);
}

.avaliacoes-nota {
  color: var(--pc-texto-suave);
  font-size: var(--pc-tam-grande);
}

.depoimentos {
  display: grid;
  gap: var(--pc-esp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cartão branco com a régua vermelha em cima, como a borda do copo. */
.depoimento {
  display: flex;
  flex-direction: column;
  gap: var(--pc-esp-4);
  padding: var(--pc-esp-6) var(--pc-esp-5) var(--pc-esp-5);
  border-top: 4px solid var(--pc-vermelho);
  background: var(--pc-branco);
}

/* Estrelas: gráfico, não texto; o leitor de tela ouve "5 de 5 estrelas". */
.depoimento-estrelas {
  display: flex;
  gap: 2px;
  color: var(--pc-vermelho);
}

.depoimento-estrelas svg {
  width: var(--pc-esp-5);
  height: var(--pc-esp-5);
  fill: currentColor;
}

.depoimento blockquote {
  margin: 0;
}

/* Texto como a pessoa escreveu, inclusive as quebras de linha. */
.depoimento blockquote p {
  font-size: var(--pc-tam-grande);
  line-height: var(--pc-altura-corpo);
  white-space: pre-line;
}

.depoimento-autor {
  margin-top: auto;
  font-weight: var(--pc-peso-forte);
}

.depoimento-autor span {
  margin-left: var(--pc-esp-2);
  color: var(--pc-texto-suave);
  font-weight: var(--pc-peso-medio);
}

/* Sobre o cinza da seção (#f5f5f5), o vermelho acessível dá 4,44:1, abaixo
   dos 4,5:1. Com 8% de preto a mais: cerca de 5:1, a mesma cor a olho. */
.avaliacoes-link {
  display: inline-flex;
  align-items: center;
  gap: var(--pc-esp-1);
  color: color-mix(in srgb, var(--pc-vermelho-acessivel) 92%, var(--pc-preto));
}

.avaliacoes-link svg {
  width: var(--pc-esp-5);
  height: var(--pc-esp-5);
  fill: currentColor;
  transition: transform var(--lp-tempo-estado) var(--lp-curva);
}

.avaliacoes-link:hover svg,
.avaliacoes-link:focus-visible svg {
  transform: translateX(var(--pc-esp-1));
}

/* Visível só para leitor de tela. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.link-forte {
  justify-self: start;
  font-weight: var(--pc-peso-forte);
}

/* ---------- 7. Fechamento ---------- */

.fechamento {
  position: relative;
  overflow: hidden;
  background: var(--pc-preto);
  color: var(--pc-branco);
}

.fechamento-midia {
  position: relative;
}

.fechamento-foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 60% 50%;
}

/* Mesmo princípio do topo: a foto termina em preto, sem linha dura. */
.fechamento-midia::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, var(--pc-preto));
}

.fechamento-texto {
  position: relative;
  display: grid;
  gap: var(--pc-esp-5);
  padding: var(--pc-esp-6) var(--pc-margem-lateral) var(--pc-esp-8);
}

.numero-whats {
  font-size: var(--pc-tam-grande);
  font-weight: var(--pc-peso-medio);
}

/* ---------- Rodapé, com a privacidade ---------- */

.rodape {
  padding: var(--pc-esp-7) 0 var(--pc-esp-8);
  background: var(--pc-preto);
  color: var(--pc-branco);
  font-size: var(--pc-tam-peq);
}

.rodape-grade {
  display: grid;
  gap: var(--pc-esp-6);
}

.rodape-marca {
  width: auto;
  height: var(--pc-esp-8);
}

/* 70 caracteres por linha: acima disso o olho perde o começo da linha seguinte. */
.rodape-texto,
.privacidade {
  display: grid;
  gap: var(--pc-esp-3);
  max-width: 70ch;
}

.selo-18 {
  display: flex;
  align-items: center;
  gap: var(--pc-esp-3);
  font-weight: var(--pc-peso-medio);
}

.selo-18-marca {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--pc-esp-7);
  height: var(--pc-esp-7);
  border: 2px solid var(--pc-branco);
  border-radius: var(--pc-raio-pilula);
  font-family: var(--pc-fonte-titulo);
  font-size: var(--pc-tam-grande);
  font-weight: var(--pc-peso-forte);
}

.privacidade {
  padding-top: var(--pc-esp-5);
  border-top: 1px solid var(--pc-texto-suave);
}

.privacidade-titulo {
  margin: 0;
  font-family: var(--pc-fonte-titulo);
  font-size: var(--pc-tam-grande);
  font-weight: var(--pc-peso-forte);
  letter-spacing: var(--pc-espaco-letra-rotulo);
  text-transform: uppercase;
}

/* ---------- Barra fixa de WhatsApp (só celular) ---------- */

.barra-whats {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: calc(var(--pc-esp-2) * 2) var(--pc-margem-lateral) calc(var(--pc-esp-2) + env(safe-area-inset-bottom));
  background: var(--pc-vermelho-acessivel);
  box-shadow: var(--pc-sombra-flutuante);
}

.barra-whats-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pc-esp-3);
  min-height: var(--pc-esp-7);
  color: var(--pc-branco);
  font-size: var(--pc-tam-grande);
  font-weight: var(--pc-peso-forte);
  text-decoration: none;
}

.barra-whats-link .botao-icone {
  color: var(--pc-vermelho-acessivel);
}

.barra-whats-link:active .botao-icone svg {
  transform: rotate(-12deg) scale(1.1);
}

/* ---------- Banner de consentimento ---------- */

.consentimento {
  position: fixed;
  left: var(--pc-margem-lateral);
  right: var(--pc-margem-lateral);
  bottom: calc(var(--pc-esp-8) + var(--pc-esp-5) + env(safe-area-inset-bottom));
  z-index: 11;
  display: grid;
  gap: var(--pc-esp-3);
  padding: var(--pc-esp-4);
  background: var(--pc-branco);
  color: var(--pc-texto);
  border-radius: var(--pc-raio-m);
  box-shadow: var(--pc-sombra-3);
  font-size: var(--pc-tam-peq);
}

.consentimento-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pc-esp-3);
}

/* ==========================================================================
   768px ou mais: tablet e computador
   ========================================================================== */

@media (min-width: 768px) {
  body {
    padding-bottom: 0;
  }

  .barra-whats {
    display: none;
  }

  .so-computador {
    display: inline-flex;
  }

  .secao {
    padding: var(--pc-esp-9) 0;
  }

  .plantao {
    padding-top: calc(var(--pc-esp-9) + var(--pc-esp-4));
  }

  .secao-miolo {
    padding: 0 var(--pc-esp-6);
  }

  .cabecalho {
    padding: var(--pc-esp-5) var(--pc-esp-6);
  }

  .heroi-midia {
    height: 56svh;
  }

  .heroi-foto {
    object-position: 50% 70%;
  }

  .heroi-texto {
    padding: 0 var(--pc-esp-6) var(--pc-esp-8);
  }

  .titulo--display {
    font-size: var(--pc-tam-display);
  }

  .passo-foto {
    margin: 0;
    aspect-ratio: 3 / 2;
  }

  /* A Delta vira duas colunas: logo e selo à esquerda, as linhas dos chopes
     à direita, ocupando o dobro. */
  .delta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
    column-gap: var(--pc-esp-8);
  }

  .delta-cabeca {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Galeria que rola para o lado. --cartao é a largura de um cartão: 2,3
     cartões por tela no tablet, 4,3 no computador. A fração que sobra mostra
     a ponta do próximo, sinal de que tem mais. */
  .marcas {
    --escala-logo: 1;
  }

  /* A galeria sangra até a borda direita da tela (margem negativa do tamanho
     da sobra lateral): o cartão da ponta é cortado pela janela, não no meio
     do conteúdo, e lê como "tem mais". A seção tem overflow hidden, então
     nada vaza para a página. */
  .marcas-quadro {
    --cartao: calc(100% / 2.3);
    margin-right: calc((100% - 100vw) / 2);
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-bottom: 1px solid var(--pc-texto-suave);
    cursor: grab;
  }

  .marcas-quadro::-webkit-scrollbar {
    display: none;
  }

  /* Enquanto o mouse arrasta, o encaixe desliga para a galeria seguir a mão. */
  .marcas-quadro.arrastando {
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
  }

  .marca {
    flex: 0 0 var(--cartao);
    scroll-snap-align: start;
    border-bottom: 0;
    border-right: 1px solid var(--pc-texto-suave);
  }

  .marca:last-child {
    border-right: 0;
  }


  /* Dentro da galeria o anel de foco fica para dentro, senão a rolagem corta. */
  .marca-cartao:focus-visible {
    outline-offset: -5px;
  }

  /* Cartões lado a lado: as logos menores ficam centradas numa faixa da
     altura da Brahma (64px), para o texto de todas começar na mesma linha,
     e o "Escolher" desce para o pé do cartão. */
  .marca-cartao {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .marca .marca-logo {
    margin-block: calc((var(--pc-esp-8) - var(--altura-logo)) / 2);
  }

  .marca-pedir {
    margin-top: auto;
  }

  .marcas-miolo {
    padding-top: var(--pc-esp-9);
    padding-bottom: var(--pc-esp-9);
  }

  .consentimento {
    left: auto;
    bottom: var(--pc-esp-5);
    right: var(--pc-esp-5);
    max-width: calc(var(--pc-largura-texto) / 1.6);
  }
}

/* ==========================================================================
   1024px ou mais: computador
   ========================================================================== */

@media (min-width: 1024px) {
  .menu-botao {
    display: none;
  }

  .cabecalho-menu {
    position: static;
    display: flex;
    gap: var(--pc-esp-6);
    margin-left: auto;
    padding: 0;
    background: none;
    visibility: visible;
    clip-path: none;
    transition: none;
  }

  .cabecalho-menu a {
    padding: var(--pc-esp-2) 0;
    border-bottom: 0;
    font-family: var(--pc-fonte-texto);
    font-size: var(--pc-tam-corpo);
    font-weight: var(--pc-peso-medio);
    line-height: var(--pc-altura-corpo);
    text-shadow: var(--pc-sombra-texto);
  }

  .cabecalho .botao {
    margin-left: var(--pc-esp-4);
  }

  /* Títulos de seção um degrau acima, para não sumirem diante do topo. */
  .secao .titulo:not(.titulo--peq):not(.titulo--display),
  .marcas .titulo {
    font-size: var(--pc-tam-h1);
  }

  /* Topo: a foto ocupa a direita e se dissolve no preto da esquerda, sem a
     linha dura entre as duas metades. A máscara só controla a transparência. */
  .heroi {
    display: block;
    min-height: min(100svh, calc(var(--pc-esp-9) * 9));
  }

  .heroi-midia {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 68%;
    height: auto;
    min-height: 0;
    max-height: none;
    /* A foto some no preto sem linha: a opacidade começa a subir devagar
       (curva acelerando) e só chega a 100% em 64% da largura. Uma rampa
       reta deixava ver onde a foto começa. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.04) 12%, rgb(0 0 0 / 0.14) 22%, rgb(0 0 0 / 0.32) 32%, rgb(0 0 0 / 0.56) 42%, rgb(0 0 0 / 0.8) 52%, black 64%);
    mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.04) 12%, rgb(0 0 0 / 0.14) 22%, rgb(0 0 0 / 0.32) 32%, rgb(0 0 0 / 0.56) 42%, rgb(0 0 0 / 0.8) 52%, black 64%);
  }

  /* O "PORTO CHOPP" do copo fica a 72% da altura da foto. Para ele chegar
     perto do meio da tela, a foto se alinha pela base e o quadro sobra 12%
     para cima (essa sobra também é a folga do movimento de profundidade,
     que desce a foto conforme a rolagem). */
  .heroi-quadro {
    inset: -12% 0 0;
  }

  .heroi-midia::after {
    background: var(--pc-veu-foto);
  }

  .heroi-foto {
    object-position: 50% 100%;
  }

  .heroi-texto {
    min-height: inherit;
    max-width: calc(var(--pc-largura-texto) + var(--pc-esp-9));
    align-content: center;
    margin-top: 0;
    padding: calc(var(--pc-esp-9) + var(--pc-esp-6)) var(--pc-esp-6) var(--pc-esp-8);
  }

  /* Passos: a foto fica parada à esquerda enquanto os passos rolam à direita. */
  .passos-grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--pc-esp-8);
    align-items: start;
  }

  .passos-foto {
    display: block;
    position: sticky;
    top: var(--pc-esp-8);
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
  }

  .passos-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
    transition: transform var(--lp-tempo-foto) var(--lp-curva);
  }

  .passos-foto:hover img {
    transform: scale(1.04);
  }

  .passo-foto {
    display: none;
  }

  .passos-conteudo {
    padding-bottom: var(--pc-esp-9);
  }

  .passos-lista {
    gap: var(--pc-esp-9);
  }

  .passo p {
    font-size: var(--pc-tam-h3);
  }

  .marcas-quadro {
    --cartao: calc(100% / 4.3);
  }

  .marca-cartao {
    padding: var(--pc-esp-6) var(--pc-esp-5);
  }

  /* Plantão com escala própria: a frase de um lado, os horários do outro. */
  .plantao {
    padding-bottom: calc(var(--pc-esp-9) * 1.5);
  }

  .plantao-grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--pc-esp-9);
    align-items: center;
  }

  /* Os outros dias viram linhas de quadro de horário: dia à esquerda, hora
     à direita. Em três colunas, "Segunda e terça" quebrava em duas linhas. */
  .horarios {
    row-gap: var(--pc-esp-4);
  }

  .horario:not(.horario--destaque) {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--pc-esp-5);
  }

  .horario:not(.horario--destaque) dd {
    justify-self: end;
  }

  .horario--destaque dd {
    font-size: var(--pc-tam-display);
  }

  .horario:not(.horario--destaque) dt {
    font-size: var(--pc-tam-grande);
  }

  .pergunta {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) calc(var(--pc-esp-9) * 3.25);
    align-items: start;
    column-gap: var(--pc-esp-7);
  }

  .pergunta .botao {
    justify-self: stretch;
    white-space: nowrap;
  }

  .depoimentos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Fechamento: a foto à direita também se dissolve no preto. */
  .fechamento {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .fechamento-midia {
    order: 2;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 38%);
    mask-image: linear-gradient(90deg, transparent 0%, black 38%);
  }

  .fechamento-midia::after {
    content: none;
  }

  .fechamento-foto {
    height: 100%;
    aspect-ratio: auto;
  }

  .fechamento-texto {
    order: 1;
    align-content: center;
    padding: var(--pc-esp-9) var(--pc-esp-8) var(--pc-esp-9) var(--pc-esp-6);
  }

  .rodape-grade {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--pc-esp-8);
    align-items: start;
  }

  .privacidade {
    grid-column: 2;
  }
}

/* Em telas muito largas, o texto do topo e do fechamento acompanha a
   margem do resto da página em vez de grudar na borda da janela. */
@media (min-width: 1280px) {
  .heroi-texto,
  .fechamento-texto,
  .cabecalho {
    padding-left: max(var(--pc-esp-6), calc((100vw - var(--pc-largura-pagina)) / 2 + var(--pc-esp-6)));
  }

  .heroi-texto {
    max-width: calc((100vw - var(--pc-largura-pagina)) / 2 + var(--pc-largura-texto) + var(--pc-esp-9));
  }
}

/* ==========================================================================
   MOVIMENTO — só para quem não pediu menos movimento no sistema
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* Entrada do topo: a foto assenta, o título sobe linha a linha como o
     chopp subindo no copo, e o traço do "plantão até meia-noite" se enche.
     Nada aqui começa transparente: o texto aparece no primeiro quadro e só
     se move. Esconder o texto na entrada atrasava a primeira pintura em
     0,4 s no celular (Lighthouse), e esta página vive de anúncio pago. */
  .heroi-foto {
    animation: foto-assenta var(--lp-tempo-foto) var(--lp-curva) both;
  }

  .heroi-titulo .titulo-quebra {
    animation: linha-sobe var(--lp-tempo-entrada) var(--lp-curva) both;
  }

  .heroi-titulo .titulo-quebra + .titulo-quebra {
    animation-delay: 120ms;
  }

  .heroi .heroi-apoio {
    animation: linha-sobe var(--lp-tempo-entrada) var(--lp-curva) 240ms both;
  }

  .heroi .realce {
    animation: traco-enche 900ms var(--lp-curva) 700ms both;
  }

  /* A barra do celular sobe da borda logo depois que a página abre. */
  .barra-whats {
    animation: barra-sobe 560ms var(--lp-curva) 450ms both;
  }

  /* Seções que entram ao rolar. Só valem com a classe "anima-pronta", que o
     pagina.js põe depois de marcar como já reveladas as partes que estão na
     tela: se o JavaScript falhar, nada fica escondido.
     A transição fica só no estado "revelado": esconder é instantâneo (o que
     está fora da tela some de uma vez), e só a entrada tem trajeto. */
  .anima-pronta [data-revela]:not(.revelado) {
    opacity: 0;
    transform: translateY(var(--pc-esp-6));
  }

  .anima-pronta [data-revela].revelado {
    transition: opacity var(--lp-tempo-entrada) var(--lp-curva), transform var(--lp-tempo-entrada) var(--lp-curva);
    transition-delay: calc(var(--i, 0) * 90ms);
  }

  /* Fotos dos passos e do fechamento: em vez de subir, se descobrem de
     baixo para cima, como o chopp enchendo o copo, e assentam do zoom. */
  .anima-pronta [data-revela="foto"]:not(.revelado) {
    opacity: 1;
    transform: none;
    clip-path: inset(100% 0 0 0);
  }

  .anima-pronta [data-revela="foto"].revelado {
    clip-path: inset(0);
    transition: clip-path var(--lp-tempo-foto) var(--lp-curva);
  }

  .anima-pronta [data-revela="foto"]:not(.revelado) img {
    transform: scale(1.12);
  }

  .anima-pronta [data-revela="foto"].revelado img {
    transition: transform var(--lp-tempo-foto) var(--lp-curva);
  }

  /* Os rótulos dos dias se enchem da esquerda quando o horário aparece. */
  .anima-pronta .horario:not(.revelado) dt {
    clip-path: inset(0 100% 0 0);
  }

  .anima-pronta .horario.revelado dt {
    transition: clip-path var(--lp-tempo-entrada) var(--lp-curva);
    transition-delay: calc(var(--i, 0) * 90ms + 200ms);
  }
}

@keyframes foto-assenta {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

@keyframes linha-sobe {
  from { transform: translateY(0.35em); }
  to { transform: none; }
}

@keyframes traco-enche {
  from { background-size: 0 2px; }
  to { background-size: 100% 2px; }
}

@keyframes barra-sobe {
  from { transform: translateY(100%); }
  to { transform: none; }
}

/* Quem pede menos movimento no sistema não recebe rolagem suave, transição
   nem animação. As cores e os estados (passos cheios, cartão vermelho)
   continuam, só que sem o trajeto. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}