/* ============================================================
   DIEGO DUARTE FOTOGRAFIA — LANDING PAGE
   Identidade: brand-board.html (preto profundo + dourado/cobre)
   Organização: variáveis → base → componentes → seções → responsivo
   ============================================================ */

/* ---------- 1. VARIÁVEIS ---------- */
:root {
  --preto: #0D0D0F;
  --preto-2: #060607;
  --grafite: #1A1A1C;
  --grafite-2: #141416;
  --bronze: #8A5A2B;
  --cobre: #A5691F;
  --ouro: #C79A5E;
  /* variante clara do ouro, para texto sobre imagem: o --ouro não alcança
     contraste AAA sobre o véu do hero */
  --ouro-claro: #EBCB99;
  /* marfim quente, cor de papel creme — tom ÚNICO das frases do hero.
     Não usar --marfim ali: é frio demais e lê como branco sobre a foto. */
  --creme-hero: #F1E3C8;
  /* corpo de texto sobre vídeo — mais claro que --areia pelo mesmo motivo */
  --texto-sobre-video: #E9E4DA;
  --areia: #D6C2A1;
  --marfim: #F6F4EF;
  --cinza-texto: #A9A49B;
  --linha: rgba(214, 194, 161, 0.14);
  --linha-forte: rgba(214, 194, 161, 0.3);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Montserrat', -apple-system, Helvetica, Arial, sans-serif;

  --pad-x: clamp(20px, 6vw, 96px);
  --pad-y: clamp(72px, 11vw, 150px);
  --largura-max: 1240px;

  --transicao: 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}

/* ---------- 2. BASE ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Blindagem do atributo [hidden]: várias regras abaixo (.btn, .cookie-banner-
   opcoes, .oferta-detalhes etc.) definem `display` explícito, e um seletor
   de classe tem mais especificidade que `[hidden]` — sem isto, elementos
   escondidos via `el.hidden = true` (o padrão usado em todo o JS do site)
   continuariam visíveis. Encontrado testando o banner de cookies: os
   checkboxes e o botão "Salvar" apareciam mesmo com `hidden` aplicado. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--preto);
  color: var(--marfim);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 3px;
}

.container {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
/* Largura reduzida pra texto de leitura longa (hoje só o FAQ) — o
   .container comum (1240px) deixa linha longa demais pra perguntas e
   respostas em prosa. */
.container-estreito { max-width: 860px; }

.secao { padding-top: var(--pad-y); padding-bottom: var(--pad-y); position: relative; }

/* rótulo de seção (mesma linguagem do brand board) */
.rotulo {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: 24px;
}

.titulo {
  font-size: clamp(32px, 4.6vw, 56px);
  color: var(--marfim);
  max-width: 18ch;
}
.titulo em { font-style: normal; color: var(--ouro); }

.texto-apoio {
  margin-top: 22px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--cinza-texto);
  max-width: 52ch;
}

/* ---------- 3. BOTÕES ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 16px 34px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform var(--transicao), background var(--transicao), color var(--transicao), box-shadow var(--transicao);
}
/* CTAs usam só tons de ouro — bronze fica reservado para elementos
   decorativos (linhas, gradientes de fundo, bordas), nunca em botões ou
   texto essencial (requisito de contraste). */
.btn-ouro {
  background: linear-gradient(120deg, var(--ouro) 0%, var(--ouro-claro) 55%, var(--ouro) 100%);
  background-size: 200% 100%;
  color: #14100A;
}
.btn-ouro:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(199, 154, 94, 0.35); }
.btn-contorno {
  background: transparent;
  color: var(--areia);
  border: 1px solid var(--linha-forte);
}
.btn-contorno:hover { border-color: var(--ouro); color: var(--ouro); }

.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- 4. HEADER ---------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad-x);
  /* backdrop-filter faltava aqui: background/padding/border-color já
     transicionavam suave, mas o blur do fundo mudava instantâneo — dava
     exatamente a sensação de "entrar/sair de soco" relatada, porque uma
     parte do efeito era suave e a outra não. */
  transition: background var(--transicao), padding var(--transicao), border-color var(--transicao),
    backdrop-filter var(--transicao), -webkit-backdrop-filter var(--transicao);
  border-bottom: 1px solid transparent;
  background: transparent;
}
.header.rolado {
  background: rgba(13, 13, 15, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--linha);
  padding-top: 12px;
  padding-bottom: 12px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.logo-dd {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--ouro);
  letter-spacing: -0.38em;
  padding-right: 0.38em;
}
.logo-nome {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.18em;
  color: var(--marfim);
}
.logo-nome small {
  display: block;
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.5em;
  color: var(--ouro);
  margin-top: 3px;
}

.header .btn { min-height: 44px; padding: 10px 22px; font-size: 11px; }

.header-acoes {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Mais evidente que uma opção puramente discreta (pedido do usuário), mas
   ainda claramente secundário ao "Falar com Diego" — borda e texto em ouro
   em vez do contorno neutro padrão, com um fundo bem sutil pra não passar
   despercebido em cima do vídeo. Fica ao lado do CTA principal do header
   (antes ficava empilhado embaixo dele) e some sozinho assim que a seção
   do hero é ultrapassada (mesmo gatilho que dá fundo ao header — ver
   js/main.js, seção 8): depois disso não há mais nada para "pular". */
.hero-pular {
  min-height: 44px;
  padding: 10px 16px;
  background: rgba(199, 154, 94, 0.12);
  border: 1px solid var(--ouro);
  color: var(--ouro-claro);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--transicao), color var(--transicao), background var(--transicao), opacity var(--transicao), visibility var(--transicao);
}
.hero-pular:hover { background: rgba(199, 154, 94, 0.22); color: var(--marfim); }
.hero-pular.oculto { opacity: 0; visibility: hidden; width: 0; padding: 0; border: none; overflow: hidden; }
body.modo-estatico .hero-pular { display: none; }
@media (max-width: 480px) {
  /* nome do fotógrafo já some no header nesta largura (ver responsivo). Sem
     este ajuste, de ~401 a ~475px os dois textos quebram em duas linhas
     dentro do próprio botão (medido) — compacto o bastante pra caber numa
     linha só em qualquer largura de celular comum, sem cortar texto. */
  .hero-pular { padding: 9px 10px; font-size: 10px; letter-spacing: 0.04em; }
  .header .btn { padding: 9px 14px; font-size: 10px; }
  .header-acoes { gap: 8px; }
}

/* ---------- 5. HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* NÃO adicionar aqui uma camada de escurecimento permanente sobre a hero.
   Já foi tentado: somada ao .hero-veu e à vinheta do .hero-foto, ela lava a
   foto — o pão perde o dourado e a brasa vira cinza. A leitura do texto vem
   da text-shadow da .hero-frase, não de apagar a imagem. */

/* Painel fotográfico do hero — fotografia gastronômica em tela cheia.
   A foto continua aqui como fundo em CSS: é o que aparece se o vídeo falhar,
   no prefers-reduced-motion ou sem JavaScript. */
.hero-foto {
  position: absolute;
  inset: 0;
  background: url("../assets/img/hero-burger.jpg") 88% center / cover no-repeat #0a0a0b;
}

/* Vídeo controlado pelo scroll, ocupando o hero inteiro.
   object-fit: cover amplia o arquivo até sangrar na tela toda: sem tarja
   preta e sem deixar aparente que o vídeo é quadrado. O preço é o corte —
   em tela widescreen sobra pouco do topo e da base do quadro original.
   object-position 46% na vertical privilegia o topo (o fogo) sobre a base. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  /* mantém o quadro estável durante as buscas do scrub */
  will-change: transform;
  transform: translateZ(0);
}

.hero-foto::after {
  /* vinheta permanente e discreta: dá contraste ao header e ao indicador de
     rolagem sem escurecer a imagem. O escurecimento pesado para leitura fica
     no .hero-veu, que só existe enquanto o texto está na tela. */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 6, 2, 0.55) 0%, transparent 18%),
    /* base mais fechada: é onde fica o "role para ver", sem véu por baixo */
    linear-gradient(0deg, rgba(15, 6, 2, 0.86) 0%, rgba(15, 6, 2, 0.45) 12%, transparent 28%),
    radial-gradient(ellipse 100% 92% at 50% 50%, transparent 58%, rgba(15, 6, 2, 0.42) 100%);
}
/* Véu de leitura: entra com o título, sai com ele. Enquanto o texto está na
   tela o fundo é escurecido o suficiente para o contraste passar em AAA;
   depois a imagem volta limpa. */
.hero-veu {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  /* Marrom quente e contido. O 0.74 original virava fundo cinza e matava o
     dourado do pão; o 0.30 que veio depois deixava a 1ª linha da frase em
     4.14:1 sobre o pão claro — abaixo do AA (4.5) e difícil de ler de fato.

     0.44 é o meio-termo medido: leva a pior linha a 5.50:1 e ainda deixa a
     brasa acesa. Se mexer aqui, meça de novo — a 1ª linha cai sobre o ponto
     mais claro do vídeo (RGB 212,129,44) e é ela que manda no contraste. */
  background:
    radial-gradient(ellipse 84% 70% at 50% 50%, rgba(24, 10, 4, 0.44) 0%, rgba(24, 10, 4, 0.33) 44%, rgba(24, 10, 4, 0.15) 78%, transparent 100%),
    linear-gradient(180deg, rgba(24, 10, 4, 0.24) 0%, transparent 32%);
}

/* Desfoque do FUNDO atrás da frase — o que o escurecimento não resolve.
   O contraste WCAG só mede luminância, mas quem embaralha a leitura sobre
   foto é a textura miúda (gergelim, borda de alface, granulado da carne)
   batendo no contorno das letras. Escurecer afunda tudo junto; o blur tira
   só o ruído e mantém o pão dourado.

   É um elemento real (não um ::before do .hero-veu) de propósito, por dois
   motivos: (1) a máscara abaixo atenuaria também o gradiente do véu,
   derrubando o contraste que já medimos; (2) pseudo-elemento não é nó do
   DOM — o GSAP não consegue dar tween nele, então o blur so ligava/desligava
   (via visibility) em vez de entrar e sair suave junto com o escurecimento.
   Como elemento próprio, entra na mesma tween do .hero-veu em
   js/scrollytelling.js, com autoAlpha, sincronizado.

   Custo: o véu só existe nas etapas de texto, e nelas o vídeo está SEMPRE
   congelado — o backdrop-filter nunca roda durante o scrub.

   Sem máscara: a versão com máscara radial (desfoque forte no centro,
   dissolvendo pras bordas) deixava uma emenda visível — em telas estreitas
   e altas (mobile) a elipse cortava bem no meio da área visível, criando
   uma faixa nítida entre duas faixas borradas. Desfoque parelho na imagem
   inteira não tem essa costura. */
.hero-desfoque {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Fallback: modo-estatico é acionado, entre outros, por aparelho fraco —
   justamente onde backdrop-filter custa caro. E ali o véu fica permanente,
   o que deixaria a foto borrada o tempo todo. */
body.modo-estatico .hero-desfoque {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Legenda centralizada — o texto é o assunto da tela nesta etapa.
   As duas frases nunca aparecem juntas: uma entra e sai, depois a outra.
   Por isso o grid tem UMA célula só e as duas ocupam ela — assim a 2ª nasce
   exatamente onde a 1ª morreu, no centro exato da tela, sem empilhar. */
.hero-legenda {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-areas: "frase";
  place-items: center;
  text-align: center;
  padding: 0 var(--pad-x);
  pointer-events: none;
}

/* As duas frases do hero são CONTORNOS SVG, não texto — a entrada é uma chama
   que percorre o desenho de cada letra, e isso exige path. O texto real vive
   no .visualmente-oculto ao lado, para SEO e leitor de tela.

   Consequência: a quebra em 3 linhas está ASSADA no viewBox. Mudar a frase ou
   a quebra não é editar o HTML — é regerar os paths a partir da fonte. */
.hero-frase {
  grid-area: frase;   /* as duas na mesma célula, uma por cima da outra */
  /* estado inicial: o JS assume a partir daqui */
  opacity: 0;
  will-change: opacity, transform;
}

/* Largura equivalente à que o texto tinha: o bloco media ~8,5x o corpo da
   fonte, que ia de 40px a 148px. Mantém a escala de antes sem depender mais
   de font-size nem de ch. */
.hero-desenho {
  display: block;
  width: clamp(340px, 71.4vw, 1258px);
  max-width: 100%;
  height: auto;
  overflow: visible;   /* as faíscas passam do viewBox */
}

/* Sombra de leitura. Era text-shadow; em path só funciona como drop-shadow.
   Duas camadas, não três: cada drop-shadow é um passe de blur próprio e
   estes rodam sobre um SVG do tamanho da tela. A terceira camada (52px)
   custava mais do que somava — o contraste medido vem do .hero-veu.

   Vai no grupo das letras, e não no <svg>: mantém o filtro colado no que
   precisa dele, sem alcançar nada que venha a ser somado ao desenho. */
.hero-letras {
  filter:
    drop-shadow(0 1px 3px rgba(28, 12, 4, 0.5))
    drop-shadow(0 4px 20px rgba(24, 10, 4, 0.55));
}

/* A letra PEGA FOGO, não é contornada: nasce incandescente (fill quente,
   animado pelo JS) e esfria devagar até o creme final. Sem stroke nenhum —
   o contorno certinho lia como "traçado de caneta", não como fogo. */
.hero-glifo {
  fill: var(--creme-hero);
  fill-opacity: 0;
  stroke: none;
}

/* Sem animação não há chama: as letras aparecem prontas e apagadas.
   modo-estatico também cobre aparelho fraco, onde 69 paths animados pesam. */
body.modo-estatico .hero-glifo { fill-opacity: 1; }

/* Sem animação as duas frases ficam visíveis ao mesmo tempo — e aí a célula
   única as sobreporia. Só neste caso elas voltam a empilhar na vertical
   (título+texto sem atraso, requisito de prefers-reduced-motion). */
body.modo-estatico .hero-legenda {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.6vh, 30px);
}
body.modo-estatico .hero-frase { opacity: 1; }
body.modo-estatico .hero-veu { opacity: 1; }
body.modo-estatico .hero-desfoque { opacity: 1; }

.hero-scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  /* precisa ficar ACIMA do véu/desfoque (z-index 3) e da legenda (z-index 4):
     no mobile ele fica visível durante o hero inteiro (js/scrollytelling.js),
     inclusive nas etapas de texto — sem isto, o véu escurecendo e o
     backdrop-filter da leitura o cobriam/apagavam por baixo. */
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero-scroll-texto {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  /* halo escuro próprio: garante leitura tanto sobre a área clara do
     hambúrguer quanto por cima do véu escurecido */
  color: var(--marfim);
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.95),
    0 2px 14px rgba(0, 0, 0, 0.9),
    0 0 28px rgba(0, 0, 0, 0.75);
}
.hero-scroll::after {
  content: "";
  width: 2px;
  height: 44px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--ouro-claro), transparent);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.85);
  animation: scroll-pulse 2.2s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* Dedo (gesto de "arrasta pra cima") e o fluxo de setinhas atrás dele: só
   existem visualmente no mobile — ver troca com a barra ::after e o texto
   no breakpoint 720px, mais abaixo neste arquivo. Escondidos aqui por
   padrão pra não aparecer no desktop. */
.hero-scroll-dedo { display: none; }
.hero-scroll-fluxo { display: none; }

/* ---------- 6. VÍDEO DO HERO CONTROLADO PELO SCROLL ---------- */

/* o poster (1º frame) fica por cima até o vídeo ter um quadro; o JS o esconde */
.scrolly-poster { opacity: 1; transition: opacity 0.45s ease; }
.scrolly-poster.oculto { opacity: 0; pointer-events: none; }

/* a vinheta do hero precisa ficar ACIMA do vídeo (legibilidade do texto) */
.hero-foto::after { z-index: 1; }

/* loading discreto: só aparece enquanto o vídeo ainda não pode ser "esfregado" */
.scrolly-carregando {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(20px, 4vh, 40px);
  z-index: 2;
  display: flex;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.scrolly-carregando.oculto { opacity: 0; }
.scrolly-spinner {
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(214, 194, 161, 0.22);
  border-top-color: var(--ouro);
  border-radius: 50%;
  animation: scrolly-girar 0.9s linear infinite;
}
@keyframes scrolly-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .scrolly-spinner { animation: none; border-top-color: rgba(214, 194, 161, 0.22); }
}

/* CTA que volta no fim do percurso, quando o vídeo chega no último frame */
.scrolly-cta {
  position: absolute;
  bottom: clamp(28px, 6vh, 60px);
  left: 0; right: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
}
.scrolly-cta.visivel { opacity: 1; visibility: visible; transition: opacity 0.6s ease; }

/* sem animação (reduced-motion / aparelho fraco / GSAP fora do ar / sem JS):
   o vídeo sai de cena e fica a foto de fundo do .hero-foto, como antes */
body.modo-estatico .hero-video,
body.modo-estatico .scrolly-carregando,
body.modo-estatico .scrolly-cta { display: none; }

/* ---------- 7. ASSINATURA VISUAL (PORTFÓLIO) ---------- */
.portfolio { background: var(--preto); }

/* Alguém pode chegar direto em #portfolio (link compartilhado, URL digitada,
   "voltar" do navegador) — nesse caso o navegador pula pra cá SEM rolagem
   gradual, e sem isso os filtros de categoria ficariam nascendo escondidos
   atrás do header fixo (~81px rolado). scroll-margin-top é o que o navegador
   respeita nesse pulo direto — dá a folga certa só aqui, sem mexer em mais
   nenhuma seção do site. */
.portfolio { scroll-margin-top: 100px; }

/* ---------- CABEÇALHO DO PORTFÓLIO: COMPACTO ----------
   Aqui o assunto são as fotos, então o cabeçalho cede altura para elas.
   O escopo é `.portfolio` de propósito: `.titulo` é compartilhado por 7
   seções, e as outras têm frases de até 55 caracteres que NÃO cabem em uma
   linha — soltar o max-width globalmente encolheria aquelas para caber ou
   as faria estourar. Aqui a frase tem 38 caracteres e mede 883px numa faixa
   útil de 1048px, então uma linha é seguro.

   Ganho total: ~220px de altura, o equivalente a mais uma fileira de fotos
   visível antes da dobra. */
.portfolio { padding-top: clamp(48px, 5.5vw, 84px); }

/* O padding-bottom padrão de .secao (até 150px) somado ao padding-top já
   reduzido da oferta (seção seguinte) ainda deixava um vão grande de fundo
   preto entre o fim das fotos e "Agenda especial" — reduzido aqui pela
   mesma razão do padding-top acima: o portfólio termina em foto, não
   precisa do respiro generoso que as seções de texto/CTA usam. */
.portfolio { padding-bottom: clamp(32px, 4vw, 56px); }

.portfolio .rotulo { margin-bottom: 16px; }

/* max-width: none, e não white-space: nowrap — em tela estreita a frase
   precisa poder quebrar em vez de furar o container. */
.portfolio .titulo { max-width: none; }

.portfolio .texto-apoio {
  margin-top: 16px;
  max-width: none;
}

/* ---------- GRADE DO PORTFÓLIO ----------
   13 fotos reais, sem filtro interativo — o agrupamento por assunto (pizzas
   · hambúrguer · sushi · sanduíches/saladas) é só pela ORDEM no HTML, pra
   quem rolar ver o mesmo prato em sequência. Cada grupo abre com uma foto
   maior (nth-child), que funciona como marcador visual do início do grupo
   sem precisar de rótulo/texto — reforça o agrupamento sem virar uma 2ª
   interface.

   Três densidades de coluna (6 → 4 → 2, nos mesmos breakpoints 1024/720
   que o resto do site já usa — ver seção 18. RESPONSIVO), cada uma com o
   próprio conjunto de spans: um span de "3 colunas" pensado pra uma grade
   de 6 vira posição errada numa grade de 4, então os três níveis precisam
   de números próprios, não só o nº de colunas mudando.

   grid-auto-flow: dense em TODOS os níveis: preenche sozinho qualquer buraco
   que um span deixar, então o desenho não depende de eu acertar a conta na
   mão pra 13 itens — o mesmo tipo de ajuste manual que já quebrou uma vez
   nesta seção quando o número de fotos mudou. */
.portfolio-grade {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* altura de linha FIXA — de propósito, sem aspect-ratio no item (ver
     .obra). Com spans variados (1x1, 2x1, 3x2...), aspect-ratio por item
     faz cada um calcular a própria altura a partir da própria largura, e
     dois itens na "mesma linha" (mesmo grid-row) ficam com alturas
     diferentes — foi exatamente isso que abriu um buraco visível no teste.
     Com a altura da linha fixa aqui e object-fit: cover na foto (mais
     abaixo), qualquer combinação de spans preenche a própria célula sem
     depender de conta nenhuma. */
  grid-auto-rows: clamp(110px, 14vw, 190px);
  grid-auto-flow: dense;
  gap: clamp(8px, 1.4vw, 16px);
}
.obra {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  border: none;
  padding: 0;
  text-align: left;
  background: var(--grafite-2);
}
.obra-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
}
.obra:hover .obra-foto, .obra:focus-visible .obra-foto { transform: scale(1.06); }

/* Desktop (>1024px), grade de 6 colunas — 3 blocos:
   1-4 = 1ª LINHA fechada (sanduíche · salada · salada · hambúrguer), agora
        com o sanduíche como DESTAQUE — mesmo tamanho 2x2 das aberturas de
        Pizzas e Sushi (item 5 e 8), em vez do 2x1 de antes. Os outros 3
        da sessão se encaixam ao lado dele, dentro das mesmas 2 linhas que
        o destaque ocupa, sem invadir a linha 3 (onde Pizzas abre):
        sanduíche 2x2 (cols 1-2) + salada-bowl 4x1 no topo (cols 3-6) +
        salada/hambúrguer 2x1 cada embaixo (cols 3-4 e 5-6) = 4+4+2+2 = 12,
        exatamente 6 colunas × 2 linhas — fecha o bloco sem sobrar buraco.
   5-7 = Pizzas em linha própria: feature 2x2 (cols 1-2) + as outras duas
        pizzas 2x2 cada (cols 3-4 e cols 5-6) = 4+4+4 = 12, fecha as 2
        linhas sozinho — o Sushi (8) só começa na linha seguinte, sem
        dividir espaço com as pizzas.
   8-12 = Sushi em linha própria: feature 2x2 (cols 1-2) + as outras 4
        (sushi salmão detalhe · shoyu · petisco · nigiri) 2x1 cada, 2 em cima e 2
        embaixo (cols 3-4 e 5-6, uma linha cada) = 4+2+2+2+2 = 12, fecha
        as 2 linhas sozinho — nada sobra pra uma 3ª linha.
   Spans verificados à mão simulando o algoritmo de auto-placement dense
   (scan linha a linha, esquerda→direita, reiniciando do topo a cada item)
   — só sobra célula vazia na ÚLTIMA linha, que não aparece como buraco
   visível (é o fim da seção). Qualquer novo ajuste aqui precisa repetir
   essa simulação: span errado reabre buraco no meio da grade. */
.obra:nth-child(1)  { grid-column: span 2; grid-row: span 2; }
.obra:nth-child(2)  { grid-column: span 4; grid-row: span 1; }
.obra:nth-child(3)  { grid-column: span 2; grid-row: span 1; }
.obra:nth-child(4)  { grid-column: span 2; grid-row: span 1; }
.obra:nth-child(5)  { grid-column: span 2; grid-row: span 2; }
.obra:nth-child(6)  { grid-column: span 2; grid-row: span 2; }
.obra:nth-child(7)  { grid-column: span 2; grid-row: span 2; }
.obra:nth-child(8)  { grid-column: span 2; grid-row: span 2; }
.obra:nth-child(9)  { grid-column: span 2; grid-row: span 1; }
.obra:nth-child(10) { grid-column: span 2; grid-row: span 1; }
.obra:nth-child(11) { grid-column: span 2; grid-row: span 1; }
.obra:nth-child(12) { grid-column: span 2; grid-row: span 1; }

/* ---------- LIGHTBOX ----------
   Só isso: clicar numa foto abre ela ampliada, centralizada; Esc, o X ou
   clicar no fundo escuro fecha. Sem setas, sem navegar entre fotos, sem
   filtro — o pedido foi simplicidade, não uma segunda interface. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 6vh, 60px) clamp(16px, 5vw, 60px);
  /* 100% opaco, sem canal alpha — testado: com transparência, numa página
     bem rolada (o caso normal — a foto clicada fica lá embaixo no grid) o
     conteúdo por baixo sangrava visualmente em tela estreita. Opaco elimina
     isso por construção. */
  background: var(--preto-2);
}
.lightbox.aberto { display: flex; }

.lightbox-conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  max-height: 100%;
}
.lightbox-foto {
  display: block;
  max-width: min(1400px, 100%);
  max-height: min(80vh, 100%);
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--linha-forte);
  background: var(--preto-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-legenda {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--areia);
  text-align: center;
}

.lightbox-fechar {
  position: fixed;
  top: clamp(14px, 2.4vh, 24px);
  right: clamp(14px, 2.4vw, 24px);
  z-index: 2;
  background: rgba(13, 13, 15, 0.55);
  border: 1px solid var(--linha-forte);
  color: var(--marfim);
  width: 44px; height: 44px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: border-color var(--transicao), color var(--transicao);
}
.lightbox-fechar:hover { border-color: var(--ouro); color: var(--ouro); }

/* Setas de navegação entre fotos — mesma linguagem visual do X, fixas nas
   laterais e com área de toque de 44px. */
.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: rgba(13, 13, 15, 0.55);
  border: 1px solid var(--linha-forte);
  color: var(--marfim);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: border-color var(--transicao), color var(--transicao);
}
.lightbox-nav svg { width: 20px; height: 20px; }
.lightbox-nav:hover { border-color: var(--ouro); color: var(--ouro); }
.lightbox-anterior { left: clamp(10px, 2.4vw, 24px); }
.lightbox-proxima { right: clamp(10px, 2.4vw, 24px); }
@media (max-width: 640px) {
  /* mantém 44px de área de toque — só encosta mais perto da borda */
  .lightbox-anterior { left: 6px; }
  .lightbox-proxima { right: 6px; }
}


/* ---------- 10. COMO FUNCIONA ----------
   Layout enxuto (pedido do usuário): rótulo + título no topo, as 4 etapas
   numa linha só, e o CTA logo abaixo — sem foto e sem texto extra. */
.processo { background: var(--preto-2); border-top: 1px solid var(--linha); }
.processo .titulo { max-width: none; font-size: clamp(28px, 3.6vw, 46px); }

.processo-etapas {
  margin-top: clamp(32px, 4vw, 48px);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
}
.processo-etapa {
  border-radius: 14px;
  border: 1px solid var(--linha);
  background: linear-gradient(165deg, rgba(199, 154, 94, 0.06), transparent 55%), var(--grafite-2);
  padding: clamp(20px, 2.2vw, 28px) clamp(18px, 2vw, 24px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}
.processo-etapa-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.processo-num {
  font-family: var(--serif);
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1;
  color: transparent;
  /* ouro (não bronze) e contorno mais grosso: o vazado precisa continuar
     legível em telas escuras/com pouco brilho, sem depender de um traço
     fino demais para se sustentar sozinho. */
  -webkit-text-stroke: 1.4px var(--ouro);
  text-shadow: 0 0 1px rgba(199, 154, 94, 0.5);
}
.processo-icone { display: block; width: 22px; height: 22px; margin-top: 6px; color: var(--ouro); flex-shrink: 0; }
.processo-etapa h3 {
  margin-top: 16px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--marfim);
}
.processo-etapa p {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--cinza-texto);
}

/* ---------- 11. OFERTA (PRODUÇÃO ÚNICA) ----------
   Um card só, propositalmente: nada de grade de pacotes ou comparação de
   preços (requisito nº1 do briefing). Layout de proposta de serviço, não de
   vitrine — por isso o card é UM bloco com borda e respiro generoso, não uma
   grade de "produtos". */
/* Vem logo depois do portfólio, que já fecha com o padding-bottom cheio de
   .secao — com o padding-top padrão aqui os dois somados abriam quase 270px
   de vazio antes do rótulo. Reduzido só aqui, mesma ideia do que o
   .portfolio já faz com o próprio padding-top. */
.oferta { position: relative; overflow: hidden; padding-top: clamp(32px, 4vw, 64px); }
/* Título mais comprido que os outros ("Agenda especial de fotografia
   gastronômica") — o max-width: 18ch padrão do .titulo quebra em 3 linhas.
   max-width: none libera a largura toda do container; o font-size próprio
   (menor que o clamp padrão de 56px) é o que garante 1 linha só até a
   largura útil de ~1048px (mesma faixa medida no .portfolio .texto-apoio). */
.oferta .titulo { max-width: none; font-size: clamp(28px, 3.4vw, 42px); }
.oferta::before {
  /* brilho de fundo discreto — mesma linguagem das outras seções escuras */
  content: "";
  position: absolute;
  right: -20%; top: 10%;
  width: 60%; height: 80%;
  background: radial-gradient(ellipse at center, rgba(138, 90, 43, 0.14), transparent 65%);
  pointer-events: none;
}
.oferta-card {
  position: relative;
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  border: 1px solid var(--linha-forte);
  background: linear-gradient(165deg, rgba(199, 154, 94, 0.05), transparent 60%), var(--grafite-2);
}
.oferta-info, .oferta-acao {
  padding: clamp(36px, 4.5vw, 56px);
}
.oferta-info { border-right: 1px solid var(--linha); }

.oferta-nome {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ouro);
}
.oferta-entrega {
  display: block;
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 500;
  color: var(--marfim);
}
.oferta-itens { list-style: none; margin-top: 32px; }
.oferta-itens li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 14px;
  color: var(--areia);
}
.oferta-itens li:last-child { border-bottom: none; }
.oferta-itens li::before {
  content: "";
  flex-shrink: 0;
  width: 7px; height: 7px;
  background: var(--ouro);
  transform: rotate(45deg);
}

.oferta-nota {
  margin-top: 20px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--cinza-texto);
}

.oferta-detalhes {
  list-style: none;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
}
.oferta-detalhes li {
  position: relative;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--cinza-texto);
}
.oferta-detalhes li::before {
  content: "—";
  position: absolute; left: 0;
  color: var(--linha-forte);
}

.oferta-acao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(6, 6, 7, 0.3);
}
.oferta-preco-rotulo {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cinza-texto);
}
.oferta-preco {
  display: block;
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(44px, 5.2vw, 64px);
  font-weight: 600;
  color: var(--marfim);
  line-height: 1;
}
.oferta-preco small { font-size: 0.45em; font-weight: 500; color: var(--areia); }

/* Disponibilidade: destaque discreto — sem cronômetro, sem piscar, sem
   vermelho de alarme (pedido explícito do briefing). Só um ponto dourado
   estático marcando "atenção aqui" e a cor mudando de leve conforme o
   estado fica mais urgente. */
.oferta-disponibilidade {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 10px 16px;
  border: 1px solid var(--linha-forte);
  font-size: 13px;
  font-weight: 500;
  color: var(--ouro-claro);
}
.oferta-disponibilidade::before {
  content: "";
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ouro);
}
.oferta-disponibilidade[data-estado="ultima"] {
  color: var(--marfim);
  border-color: var(--ouro);
}
.oferta-disponibilidade[data-estado="ultima"]::before { background: var(--cobre); }
.oferta-disponibilidade[data-estado="encerrada"] {
  color: var(--cinza-texto);
  border-color: var(--linha);
}
.oferta-disponibilidade[data-estado="encerrada"]::before { background: var(--cinza-texto); }

.oferta-acao .btn { margin-top: 22px; width: 100%; }

.oferta-personalizada {
  margin-top: 20px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--cinza-texto);
}
.oferta-personalizada a {
  display: inline-block;
  margin-top: 4px;
  color: var(--areia);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--linha-forte);
}
.oferta-personalizada a:hover { color: var(--ouro); text-decoration-color: var(--ouro); }

.oferta-complementar {
  list-style: none;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--linha);
}
.oferta-complementar li {
  position: relative;
  padding-left: 16px;
  font-size: 12px;
  line-height: 2;
  color: var(--cinza-texto);
}
.oferta-complementar li::before {
  content: "—";
  position: absolute; left: 0;
  color: var(--linha-forte);
}

/* ---------- 13. PERGUNTAS FREQUENTES ----------
   Acordeão com <button>+aria-expanded (não <details>) pra poder animar a
   altura suavemente: a resposta é um grid de 1 linha que vai de 0fr a 1fr
   (técnica clássica pra animar "height: auto"). O overflow:hidden no <p> é
   o que permite o 0fr colapsar de verdade — sem ele o grid respeita o
   min-content do texto e a linha nunca fecha. Sem JS, o <noscript> no
   <head> força grid-template-rows:1fr em todas: nada fica inacessível. */
/* sem isto, o título herda max-width:18ch do padrão global e quebra em 3
   linhas curtas bem antes de usar a largura toda do container-estreito
   (860px) — sobra espaço vazio à direita mesmo sem necessidade. */
.faq .titulo { max-width: none; }
.faq-lista { margin-top: clamp(40px, 5vw, 64px); }
.faq-item { border-bottom: 1px solid var(--linha); }
.faq-item:first-child { border-top: 1px solid var(--linha); }
.faq-pergunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 2px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 500;
  color: var(--marfim);
  transition: color var(--transicao);
}
.faq-pergunta:hover, .faq-pergunta:focus-visible { color: var(--ouro); }
.faq-pergunta svg {
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: var(--ouro);
  transition: transform var(--transicao);
}
.faq-pergunta[aria-expanded="true"] svg { transform: rotate(180deg); }

.faq-resposta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}
.faq-item.aberto .faq-resposta { grid-template-rows: 1fr; }
/* overflow:hidden precisa estar no item de grid DIRETO (este wrapper), sem
   padding nele — com box-sizing:border-box (global do site), um padding
   aqui teria colapsado só o texto e travado a altura no tamanho do próprio
   padding (~22px sobrando visível mesmo fechado, foi exatamente o bug que
   apareceu no teste). Padding fica no <p> de dentro, que aí sim é clipado
   por inteiro por este wrapper quando a linha da grade vai a 0fr. */
.faq-resposta-inner { overflow: hidden; }
.faq-resposta p {
  margin: 0;
  padding: 0 32px 22px 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--cinza-texto);
}

/* ---------- 14. CHAMADA FINAL ----------
   Simplificada a pedido do usuário: preço, disponibilidade e proposta
   personalizada já estão na seção Oferta — repetir tudo aqui era
   redundante. Agora é só a foto em tela cheia com o botão centralizado por
   cima, como fechamento visual da página. */
.final {
  position: relative;
  min-height: 56svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-top: 1px solid var(--linha);
}
/* <img> de verdade (era background CSS): permite loading="lazy" real e
   servir o WebP já gerado — a versão anterior baixava o JPEG de 523KB
   inteiro assim que a página abria, mesmo a seção estando fora da tela. */
.final-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
/* gradiente em elemento próprio: ::after não renderiza sobre <img>
   (elemento substituído, sem conteúdo gerado) — por isso saiu do
   .final-foto::after de antes e virou esta div irmã. */
.final-veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(6, 6, 7, 0.82) 0%, rgba(6, 6, 7, 0.4) 48%, rgba(6, 6, 7, 0.6) 100%);
}
.final-cta {
  position: relative;
  z-index: 1;
  padding: clamp(48px, 8vw, 96px) var(--pad-x);
}

/* ---------- 15. FOOTER ---------- */
.footer {
  background: var(--preto-2);
  border-top: 1px solid var(--linha);
  padding: clamp(48px, 6vw, 72px) var(--pad-x) 32px;
}
.footer-grade {
  max-width: var(--largura-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
}
.footer h4 {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: 18px;
}
/* .footer li entra por causa do #footer-regiao: é texto solto dentro do
   <li> (sem <a> nem <p>), então sem esta regra ele cairia no tamanho
   padrão do navegador em vez do texto pequeno/discreto do resto do rodapé
   — foi exatamente o que aconteceu até este ajuste. */
.footer p, .footer a, .footer li {
  font-size: 13px;
  color: var(--cinza-texto);
  text-decoration: none;
  line-height: 2.1;
}
.footer a:hover { color: var(--areia); }
.footer a { display: inline-block; padding: 3px 0; }
.footer ul { list-style: none; }

/* Link do rodapé feito de <button> (reabre o banner de cookies) — mesma
   linguagem visual dos links ao redor, sem herdar estilo de botão. */
.footer-link-botao {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 3px 0;
  font: inherit;
  font-size: 13px;
  color: var(--cinza-texto);
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  text-align: left;
}
.footer-link-botao:hover { color: var(--areia); }
.footer-base {
  max-width: var(--largura-max);
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--linha);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(169, 164, 155, 0.55);
}

/* ---------- 16. WHATSAPP FLUTUANTE ---------- */
.wa-flutuante {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 70;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--ouro-claro), var(--ouro));
  color: #14100A;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
  /* respiro do gesto do sistema (home indicator/barra de navegação) — a
     bolha nunca fica colada nela nem escondida atrás dela */
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}
.wa-flutuante.visivel { opacity: 1; visibility: visible; transform: translateY(0); }
.wa-flutuante svg { width: 26px; height: 26px; }
.wa-flutuante:hover { transform: translateY(-3px); }

/* coordenação de elementos flutuantes (requisito nº13): nunca dois ao mesmo
   tempo — barra mobile da oferta e banner de cookies têm prioridade sobre a
   bolha redonda. */
body.oferta-flutuante-ativa .wa-flutuante,
body.cookie-banner-ativo .wa-flutuante,
body.cookie-banner-ativo .oferta-flutuante { display: none; }

/* Escondido por padrão (desktop): a barra só ganha estilo/exibição real
   dentro do breakpoint mobile (18. RESPONSIVO, 720px) — requisito nº13
   ("exibir apenas no mobile"). Sem isso viraria uma div solta no fim da
   página em telas largas. */
.oferta-flutuante { display: none; }

/* ---------- 17. ANIMAÇÕES DE ENTRADA (leves) ---------- */
.revelar {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.revelar.visivel { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; transition: none; }
  .hero-scroll::after { animation: none; }
  .btn, .obra-foto, .wa-flutuante { transition: none; }
  .faq-resposta, .faq-pergunta svg { transition: none; }
}

/* ---------- 18. RESPONSIVO ---------- */
@media (max-width: 1024px) {
  /* 4 cards numa linha só ficam apertados demais abaixo de 1024px — passa
     para 2×2. */
  .processo-etapas { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }
  .footer-grade { grid-template-columns: 1fr 1fr; }

  /* oferta: abaixo de 1024px o card empilha — info em cima, preço/CTA
     embaixo (ordem do requisito nº12: preço e botão continuam visíveis
     sem exigir muita rolagem, já que a lista de itens é curta). */
  .oferta-card { grid-template-columns: 1fr; }
  .oferta-info { border-right: none; border-bottom: 1px solid var(--linha); }

  /* portfólio, nível tablet: 4 colunas — os spans de 6 colunas não fazem
     sentido numa grade mais estreita, por isso cada nível tem os próprios
     números. 1-4 = 1ª linha fechada, sanduíche como destaque 2x2 (mesmo
     tratamento do desktop e igual às aberturas de Pizzas/Sushi): sanduíche
     2x2 (cols 1-2) + salada-bowl 2x1 no topo (cols 3-4) + salada e
     hambúrguer 1x1 cada embaixo (col 3 e col 4) = 4+2+1+1 = 8, exatamente
     4 colunas × 2 linhas, fecha o bloco sem buraco. 5-7 = Pizzas em linha
     própria: feature 2x2 (cols 1-2) + as outras duas 2x1 empilhadas
     (cols 3-4, uma em cada linha) = 4+2+2 = 8, fecha sozinho sem dividir
     linha com o Sushi. 8-12 = Sushi em linha própria: feature 2x2
     (cols 1-2) + as outras 4 (sushi salmão detalhe · shoyu · petisco · nigiri) 1x1
     cada, 2 em cima e 2 embaixo (col 3 e col 4) = 4+1+1+1+1 = 8, fecha
     sozinho sem sobrar pra uma 3ª linha. */
  .portfolio-grade { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(120px, 20vw, 180px); }
  .obra:nth-child(1)  { grid-column: span 2; grid-row: span 2; }
  .obra:nth-child(2)  { grid-column: span 2; grid-row: span 1; }
  .obra:nth-child(3)  { grid-column: span 1; grid-row: span 1; }
  .obra:nth-child(4)  { grid-column: span 1; grid-row: span 1; }
  .obra:nth-child(5)  { grid-column: span 2; grid-row: span 2; }
  .obra:nth-child(6)  { grid-column: span 2; grid-row: span 1; }
  .obra:nth-child(7)  { grid-column: span 2; grid-row: span 1; }
  .obra:nth-child(8)  { grid-column: span 2; grid-row: span 2; }
  .obra:nth-child(9)  { grid-column: span 1; grid-row: span 1; }
  .obra:nth-child(10) { grid-column: span 1; grid-row: span 1; }
  .obra:nth-child(11) { grid-column: span 1; grid-row: span 1; }
  .obra:nth-child(12) { grid-column: span 1; grid-row: span 1; }
}

@media (max-width: 720px) {
  /* Mobile troca a barrinha vertical + texto (que sugerem "role" mas
     apontam pra baixo) por só uma mão arrastando pra CIMA — mais literal
     pro gesto de swipe que a página pede aqui — com um fluxo de setinhas
     subindo atrás dela pra reforçar a direção. Fica visível o percurso
     inteiro (js/scrollytelling.js já mantém o indicador na tela até o
     CTA aparecer). */
  .hero-scroll::after { display: none; }
  .hero-scroll-texto { display: none; }
  /* Safari mobile: a barra de baixo do navegador pode cobrir os 28px
     originais perto da borda — sobe mais uns 25% de folga (~9svh) pra
     ficar acima da barra sem invadir a foto do hambúrguer. Desktop
     mantém o bottom:28px original (regra base, lá em cima). */
  .hero-scroll { bottom: calc(28px + 9svh); }
  /* Mão e setinhas compartilham a MESMA animação (mesmo nome, sem delay
     entre elas) — é o que garante o fade in/out e o deslocamento andarem
     sempre juntos; antes cada uma tinha timing próprio e dessincronizava. */
  .hero-scroll-dedo,
  .hero-scroll-fluxo {
    animation: dedo-sobe 2s ease-in-out infinite;
  }
  .hero-scroll-dedo {
    /* oculta temporariamente, a pedido — só a seta por enquanto, pra ver
       como fica sem a mão. Reativar: display:block. */
    display: none;
    width: 31px;
    height: 42px;
    /* imagem pronta (assets/img/dedo-swipe.png), recolorida por script
       pra bater com o creme da frase do hero (--creme-hero) */
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.85));
  }
  @keyframes dedo-sobe {
    0%   { transform: translateY(10px); opacity: 0; }
    20%  { opacity: 1; }
    75%  { transform: translateY(-18px); opacity: 1; }
    100% { transform: translateY(-24px); opacity: 0; }
  }

  /* Fluxo de setinhas atrás da mão, reforçando a direção do gesto — mesma
     cor do texto do hero (--creme-hero). */
  .hero-scroll-fluxo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
  }
  .fluxo-seta {
    width: 24px;
    height: 9px;
    overflow: visible;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
  }
  .fluxo-seta path {
    fill: none;
    stroke: var(--creme-hero);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .footer-grade { grid-template-columns: 1fr; gap: 36px; }
  .footer-base { flex-direction: column; }
  /* no desktop 56svh cabe bem; no celular essa altura vira quase a tela
     toda, deixando a foto gigante atrás do botão. Reduzida só aqui. */
  .final { min-height: 36svh; }
  /* "Ver disponibilidade no WhatsApp" (fim do scroll do hero) é só
     desktop — no mobile quem faz esse papel é a barra fixa "Consultar
     datas" (.oferta-flutuante). As duas nunca podem aparecer juntas
     (pedido do usuário); .oferta-flutuante já é só mobile por padrão
     (display:none fora deste breakpoint), então bastava esconder esta
     aqui pros dois lados ficarem mutuamente exclusivos. */
  .scrolly-cta { display: none; }
  /* cards de "Como funciona" numa coluna só — 2 colunas nessa largura
     apertam demais o título/ícone de cada card. */
  .processo-etapas { grid-template-columns: 1fr; }

  /* portfólio, nível mobile: 2 colunas. Os 4 da 1ª linha (1-4) NÃO cabem
     numa linha só aqui — 4 fotos numa grade de 2 colunas é fisicamente
     2 linhas de 2, não tem como ser diferente. Viram um bloco 2×2, que é a
     aproximação mais fiel do pedido nesta largura. 5 e 8 (abrem Pizzas e
     Sushi) ganham banner de largura cheia — marca o início de cada bloco
     seguinte sem precisar de texto/rótulo. */
  .portfolio-grade { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(140px, 40vw, 220px); gap: 8px; }
  .obra:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .obra:nth-child(5), .obra:nth-child(8) { grid-column: span 2; }

  .header .logo-nome { display: none; }
  /* o desenho toma a largura útil; a proporção vem do viewBox. */
  .hero-desenho { width: 100%; }
  /* Aumenta o texto só no mobile (pedido do usuário) via transform no
     PRÓPRIO desenho (não no .hero-frase pai): mexer em width/max-width
     descentralizava o desenho (empurrava pra um lado em vez de crescer a
     partir do centro — foi exatamente o bug relatado); e colocar o scale
     no .hero-frase brigaria com o transform que o JS já anima nele (a
     saída do texto usa translateY, que sobrescreveria o scale). No
     .hero-desenho não há conflito — o JS nunca mexe no transform dele —,
     e scale() cresce a partir do centro sem alterar a caixa usada na
     centralização do grid. */
  .hero-desenho { transform: scale(1.12); transform-origin: center; }
  /* o véu precisa ser mais fechado na vertical em telas estreitas */
  .hero-veu {
    background:
      radial-gradient(ellipse 130% 58% at 50% 50%, rgba(24, 10, 4, 0.52) 0%, rgba(24, 10, 4, 0.42) 46%, rgba(24, 10, 4, 0.18) 78%, transparent 100%),
      linear-gradient(180deg, rgba(24, 10, 4, 0.28) 0%, transparent 30%);
  }
  .btn { width: 100%; max-width: 380px; }
  .header .btn { width: auto; }
  .scrolly-cta .btn { width: auto; max-width: none; }
  .wa-flutuante { right: 16px; bottom: 16px; width: 54px; height: 54px; }

  /* CTA flutuante da oferta (requisito nº13): só mobile, some com a página,
     e some assim que aparece — pra não competir com o círculo de WhatsApp já
     fixo no canto (ver seção 11 do main.js, que troca essa classe no body). */
  .oferta-flutuante {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 65;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(6, 6, 7, 0.96);
    border-top: 1px solid var(--linha-forte);
    transform: translateY(100%);
    transition: transform 0.4s ease;
  }
  .oferta-flutuante.visivel { transform: translateY(0); }
  .oferta-flutuante a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 16px;
    background: linear-gradient(120deg, var(--ouro) 0%, var(--ouro-claro) 55%, var(--ouro) 100%);
    color: #14100A;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-align: center;
  }
  .oferta-flutuante button {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border: 1px solid var(--linha-forte);
    background: transparent;
    color: var(--cinza-texto);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
  }
  .oferta-flutuante { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .oferta-flutuante { transition: none; }
  /* precisa vir DEPOIS do bloco 720px (linha 1267) que liga a animação —
     cascata por ordem, mesma especificidade: regra que aparece depois
     vence. Colocar isto antes daquele bloco reativaria o dedo mesmo com
     a preferência de movimento reduzido ligada. */
  .hero-scroll-dedo { animation: none; }
}

/* ---------- 19. UTILITÁRIOS ---------- */
.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 20. BANNER DE CONSENTIMENTO DE COOKIES ----------
   Sempre acima de tudo (até do lightbox) — é a única decisão que bloqueia
   o carregamento de tags externas, então precisa estar visível e alcançável
   por teclado assim que aparece. Some a barra flutuante da oferta e a
   bolha de WhatsApp enquanto está aberto (ver seção 16 e regra em
   body.cookie-banner-ativo, mais acima). */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  background: rgba(6, 6, 7, 0.97);
  border-top: 1px solid var(--linha-forte);
  padding: 20px var(--pad-x) calc(20px + env(safe-area-inset-bottom, 0px));
  backdrop-filter: blur(10px);
}
.cookie-banner-conteudo {
  max-width: var(--largura-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
}
.cookie-banner-texto {
  flex: 1 1 420px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--cinza-texto);
}
.cookie-banner-opcoes {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding-top: 4px;
}
.cookie-opcao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 13px;
  color: var(--areia);
  cursor: pointer;
}
.cookie-opcao input {
  width: 18px; height: 18px;
  accent-color: var(--ouro);
  cursor: pointer;
}
.cookie-banner-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cookie-banner-acoes .btn {
  min-height: 44px;
  padding: 12px 22px;
  font-size: 11px;
}
@media (max-width: 720px) {
  .cookie-banner-acoes { width: 100%; }
  .cookie-banner-acoes .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}

/* Abre espaço no fim da página do tamanho do banner — sem isso ele cobriria
   o que estivesse no rodapé (link, FAQ) enquanto aberto (requisito nº13).
   A altura real vem de js/main.js (ResizeObserver simplificado: medida na
   abertura), guardada nesta variável. */
body.cookie-banner-ativo { padding-bottom: var(--altura-cookie-banner, 0px); }