/* Home (PCGBUR-31): o que so a home usa. Carrega depois do theme.css (template-home.php -> paginas/home.css); a ordem relativa das regras foi preservada. */
 /* por dentro: a moldura do mapa tem overflow e cortava o de fora */
.pcg-cardapio__grade:focus-visible{ outline-offset: -3px; }
/* icone de traco ao lado do titulo, como "BURGERS" no A4. E cenario, nao ocupa espaco (cliente, PCGBUR-27): em linha ele
   entrava na conta e empurrava o titulo centralizado para a esquerda. Fica fora do h2, absoluto, pendurado na ponta direita
   da caixa do titulo (item de grid: tem a largura do texto; uma linha, entao 80% da altura = .8em do titulo). */
.pcg-burgers__titulo{ position: relative; }
.pcg-h2__ico{ position: absolute; left: 100%; top: 10%; height: 80%; width: auto; margin-left: max(8px, .7vw); pointer-events: none; }

/* ── Hero: modo empilhado (padrao) ────────────────────────────────────── */
.pcg-hero__palco{ position: relative; padding-top: var(--topo-h); }
.pcg-hero__poster{ width: 100%; aspect-ratio: 16 / 9; max-height: 62svh; object-fit: cover; }
.pcg-hero__canvas, .pcg-hero__scrim, .pcg-hero__dica{ display: none; }
.pcg-momento{ padding: clamp(32px, 6vw, 72px) var(--gutter); max-width: 52rem; }
.pcg-momento + .pcg-momento{ border-top: 1px solid var(--linha); }
.pcg-momento > * + *{ margin-top: 18px; }

.pcg-hero__titulo{
  font: 400 clamp(3.2rem, 8.6vw, 6rem)/.95 var(--f-display);
  text-transform: uppercase; letter-spacing: .005em;
  text-shadow: 0 1px 2px rgba(18, 15, 12, .9), 0 2px 24px rgba(18, 15, 12, .7);
}
/* Letreiro "Burger Lovers Society": CAIXA-ALTA em tres linhas (BURGER / LOVERS / SOCIETY), como no cardapio A4.
   08/11/2026: saiu a Tilt Neon (tubo de neon). Agora e letreiro de marquise de show: Anton em placas altas e estreitas,
   tracking aberto para cada letra ser uma lampada, nucleo creme-quente e halo dourado em camadas. O halo e
   text-shadow fixo; o flicker so mexe na opacity de cada letra (theme.js, SplitText). */
.pcg-neon{
  font: 400 clamp(3.4rem, 6vw, 5.75rem)/.98 var(--f-display);
  text-transform: uppercase; letter-spacing: .06em;
  color: #FFEFC2;
  text-shadow:
    0 0 1px #FFF8E1,
    0 0 .05em #F2D48E,
    0 0 .14em rgba(226, 192, 122, .6),
    0 0 .32em rgba(202, 165, 95, .5),
    0 0 .7em rgba(160, 118, 48, .45);
}
.pcg-hero__selo{ width: clamp(72px, 7vw, 104px); height: auto; mix-blend-mode: lighten; }
/* espera do acendimento: some ate o GSAP montar; se o JS morrer, aparece sozinho em 2,5 s */
/* Entrada (PCGBUR-10): palco escuro (sem poster) e textos de apoio guardados ate os ingredientes chegarem */
html.intro.cine .pcg-hero__poster, html.intro.cine .pcg-hero__acento, html.intro.cine .pcg-hero__sub, html.intro.cine .pcg-hero__dica{ opacity: 0; }
.cine .pcg-hero__acento, .cine .pcg-hero__sub{ transition: opacity .7s var(--ease) .5s; }
/* O letreiro espera APAGADO (10%, o mesmo das letras antes do flicker), nao invisivel, e o 01 nao espera o motor: assim
   o titulo pinta no 1o paint e e o LCP ali (PCGBUR-31). Antes o LCP era a 1a letra que aparecia quando o home.js rodava,
   ~600 ms depois, e o PSI somava ao LCP tudo que baixou nesse meio (6-9 s simulados). */
.neon-espera .pcg-neon, .neon-espera .pcg-hero__selo{ opacity: 0; animation: pcg-aparece 0s 2.5s forwards; }
.neon-espera .pcg-neon{ opacity: .1; }
@keyframes pcg-aparece{ to { opacity: 1; } }
.pcg-neon__l{ will-change: opacity; }

.pcg-hero__acento{
  /* era pincel (Permanent Marker) torto; agora e o grito da casa em Lato Black, aberta e dourada: le como set list */
  font: 900 clamp(1.0625rem, 1.6vw, 1.375rem)/1.2 var(--f-texto); letter-spacing: .22em; text-transform: uppercase;
  color: var(--ouro-vivo); transform-origin: left;
}
.pcg-hero__frase{
  font: 400 clamp(2.4rem, 5.6vw, 4.4rem)/1 var(--f-display);
  text-transform: uppercase; letter-spacing: .005em; text-shadow: 0 1px 2px rgba(18, 15, 12, .9), 0 2px 24px rgba(18, 15, 12, .7);
}
.pcg-hero__sub{ color: var(--texto-2); font-size: clamp(1.0625rem, 1.4vw, 1.25rem); max-width: 34ch; }
.pcg-momento .pcg-acoes{ margin-top: 28px; }

/* ── Hero: modo cinema ────────────────────────────────────────────────── */
.cine .pcg-hero{ height: var(--altura); }
.cine .pcg-hero__palco{ position: sticky; top: 0; height: 100svh; overflow: hidden; padding: 0; }
.cine .pcg-hero__poster{
  position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto;
  transition: opacity .6s var(--ease);
}
.cine .pcg-hero.tem-frame .pcg-hero__poster{ opacity: 0; }
.cine .pcg-hero__canvas{ display: block; position: absolute; inset: 0; width: 100%; height: 100%; }

/* Parede (PCGBUR-10): as laterais do momento 1 eram preto liso no desktop. Arte da parede da loja a 9% + luz quente atras
   do burger, em 'lighten' (so clareia o fundo escuro, nunca o burger). Mascara: livre no centro e no terco do texto.
   Some entre p .18 e .27, quando entra a camada de show. A imagem esta no palco desde o 1o paint (preload no head,
   functions.php): ela e o LCP do desktop, e esperar o 1o frame (.tem-frame) o deixava em ~2,5 s (12/11/2026).
   Celular: o burger ocupa a tela toda, nao ha lateral vazia. */
.pcg-hero__parede{ display: none; }
@media (min-aspect-ratio: 1/1) {
  .cine .pcg-hero__parede{
    display: block; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: lighten;
    opacity: calc(1 - clamp(0, (var(--p, 0) - .18) / .09, 1));
    background:
      radial-gradient(38% 55% at 50% 50%, rgba(214, 150, 72, .16), transparent 70%),
      radial-gradient(60% 22% at 50% 104%, rgba(226, 192, 122, .14), transparent 70%);
  }
  .cine .pcg-hero__parede::after{
    content: ""; position: absolute; inset: 0; opacity: .09;
    /* WebP 2000px de 16 cores (80 KB, parede-creme.svg tem 380 KB): a 9% e identico ao SVG (print, diferenca maxima 6/255),
       e rasterizar o SVG atrasava ~300 ms o 1o quadro da entrada (11/11/2026) */
    background: url(../../img/marca/parede-creme.webp) 50% 55% / max(1500px, 110%) auto no-repeat;
    mask: radial-gradient(34% 60% at 50% 50%, transparent 55%, #000 85%), linear-gradient(90deg, transparent 0 30%, #000 45%);
    mask-composite: intersect;
  }
}

/* Scrim: laterais e pe escuros, centro (onde fica o burger) limpo. Garante 4.5:1 sem cartao de vidro. */
.cine .pcg-hero__scrim{
  display: block; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, var(--fundo) 0%, rgba(18, 15, 12, .75) 16%, transparent 46%),
    linear-gradient(90deg, rgba(18, 15, 12, .88) 0%, rgba(18, 15, 12, .35) 36%, transparent 50%, rgba(18, 15, 12, .35) 64%, rgba(18, 15, 12, .88) 100%),
    linear-gradient(180deg, rgba(18, 15, 12, .7) 0%, transparent 18%);
}

.cine .pcg-momento{
  --in: clamp(0, (var(--p, 0) - var(--de, 0)) / .07, 1);
  --out: clamp(0, (var(--ate, 1) - var(--p, 0)) / .07, 1);
  position: absolute; inset: calc(var(--topo-h) + 24px) var(--gutter) 12svh;
  max-width: none; padding: 0; border: 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  pointer-events: none;
  opacity: min(var(--in), var(--out));
  transform: translate3d(0, calc((1 - var(--in)) * 48px - (1 - var(--out)) * 48px), 0);
  visibility: hidden;
}
/* O 01 e o estado de p 0: visivel desde o 1o paint, sem esperar o motor (com o letreiro apagado, abaixo, e o LCP) */
.cine .pcg-momento--1{ --in: 1; visibility: visible; }
/* com GSAP o movimento e das linhas (mascara); o momento so faz o fade */
.cine.gs .pcg-momento{ transform: none; }
.cine .pcg-momento--1 > * + *{ margin-top: 14px; }
.cine .pcg-momento--1 .pcg-neon{ margin-top: 10px; }
.cine .pcg-momento.ativo{ visibility: visible; }
/* 03 fica focavel por Tab mesmo antes de aparecer (o JS rola ate o fim); sem clique enquanto invisivel */
.cine .pcg-momento--3{ visibility: visible; }
.cine .pcg-momento--3:not(.ativo) > *{ pointer-events: none; }
.cine .pcg-momento > *{ max-width: min(36rem, 44vw); pointer-events: auto; }
/* 03, a parada final (PCGBUR-21: o 02 saiu e o texto dele veio para ca). Coluna no canto de baixo a esquerda (pedido
   dele), ao lado do burger montado; a direita e do porco e da plateia do show. Botoes lado a lado, maiores que a coluna. */
.cine .pcg-momento--3{ bottom: 6svh; }
.cine .pcg-momento--3 > *{ max-width: min(23rem, 25vw); }
.cine .pcg-momento--3 > .pcg-acoes{ max-width: none; flex-wrap: nowrap; margin-top: 20px; }
.cine .pcg-momento--3 .pcg-hero__frase{ font-size: clamp(2rem, 3vw, 2.75rem); }
/* scrim proprio do momento: some junto com ele. isolation obrigatorio: com opacity 1 o momento NAO cria contexto
   de empilhamento, e o z-index -1 jogava o scrim para tras do canvas (era por isso que a cebola aparecia no celular) */
.cine .pcg-momento--3{ isolation: isolate; } /* no 1 so no retrato: no desktop o selo (lighten) precisa do fundo de fora */
.cine .pcg-momento::before{ content: ""; position: absolute; z-index: -1; pointer-events: none; }
.cine .pcg-momento--3::before{
  inset: calc(-1 * (var(--topo-h) + 24px)) 55% -6svh calc(-1 * var(--gutter));
  background: linear-gradient(270deg, transparent, rgba(18, 15, 12, .82) 38%, rgba(18, 15, 12, .92));
}

/* Selo "100% Angus" junto do texto do 03. Entra em carimbo (timeline rock do JS). */
.pcg-momento__selo{ width: clamp(96px, 9.5vw, 140px); height: auto; }

/* Camada de show do 02 e 03 (so .gs.cine: com GSAP e sem reduced-motion; no modo empilhado ela nao existe, porque a arte
   de borda foi feita para o palco de tela cheia e solta ficaria boiando entre blocos de texto).
   Sem z-index nem transform na camada: os amps e a plateia usam screen contra o canvas (o preto do PNG some).
   Ordem no palco: canvas < scrim < camada < veu < momentos (o scrim proprio do 02 fica por cima dela). */
.pcg-rock{ display: none; }
.gs.cine .pcg-rock.carregar{ display: block; position: absolute; inset: 0; pointer-events: none; visibility: hidden; }
.gs.cine .pcg-rock.ativo{ visibility: visible; }
.pcg-rock img{ position: absolute; max-width: none; margin: 0; user-select: none; }
.pcg-rock.ativo img, .pcg-rock.ativo .pcg-rock__feixe, .pcg-rock.ativo .pcg-rock__flash{ will-change: transform, opacity; }

/* luz: holofotes e flashes. A mascara apaga o terco central (o burger nunca recebe luz por cima) */
.pcg-rock__luz{
  position: absolute; inset: 0; overflow: hidden;
  mask-image: linear-gradient(90deg, #000 0 24%, transparent 33% 67%, #000 76%);
}
/* cone de luz: conic-gradient com bordas suaves (sem clip-path nem blur), vertice em --fx no topo */
.pcg-rock__feixe{
  --fx: 8vw;
  position: absolute; top: -4%; left: calc(var(--fx) - 30vw); width: 60vw; height: 100%; opacity: 0;
  transform-origin: 50% 0;
  background: conic-gradient(from 166deg at 50% 0, transparent, rgba(255, 224, 150, .34) 14deg, transparent 28deg);
  mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .55) 45%, transparent 88%);
}
.pcg-rock__feixe--2{ --fx: 20vw; }
.pcg-rock__feixe--3{ --fx: 92vw; }
.pcg-rock__flash{
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(42% 60% at 6% 0%, rgba(255, 236, 196, .5), rgba(232, 180, 90, .14) 45%, transparent 75%);
}
.pcg-rock__flash--dir{ background: radial-gradient(42% 60% at 94% 0%, rgba(255, 236, 196, .5), rgba(232, 180, 90, .14) 45%, transparent 75%); }

/* amps: pilhas nas bordas, um pedaco fora da tela (translate fixo; o GSAP so faz a entrada em transform) */
.pcg-rock__amp{ bottom: 0; height: 90svh; width: auto; mix-blend-mode: screen; opacity: 0; }
.pcg-rock__amp--esq{ left: 0; translate: -24% 0; }
.pcg-rock__amp--dir{ right: 0; translate: 24% 0; }

/* vaca de cortes: entre o amp e o burger. Largura = espaco ate a borda do burger no frame "cover"
   (borda esquerda do burger = 50vw - 20,57% da largura do frame, que e max(100vw, 177,8svh)) */
.pcg-rock__vaca{
  left: 3vw; top: 33%; height: auto; opacity: .22;
  width: min(330px, calc(45vw - max(20.57vw, 36.57svh)));
  clip-path: inset(0 100% 0 0);
}
.pcg-rock__brilho, .pcg-rock__voo{ left: var(--x); top: var(--y); width: var(--w); height: auto; opacity: 0; }
/* cintilar: propriedades individuais (scale/rotate) nao brigam com o transform do GSAP; para fora da janela ativa */
.pcg-rock__brilho{ animation: pcg-cintila 2.6s var(--d, 0s) ease-in-out 1 paused; } /* uma volta: infinito parado na tela reprovava o 2.2.2 (PCGBUR-6) */
.pcg-rock.ativo .pcg-rock__brilho{ animation-play-state: running; }
@keyframes pcg-cintila{ 0%, 100% { scale: 1; rotate: 0deg; } 45% { scale: .62; rotate: 18deg; } 60% { scale: 1.08; rotate: 8deg; } }

/* plateia: sobe pela base. A mascara deixa a esquerda vazia, onde fica o texto do 03 (frase e botoes) */
.pcg-rock__plateia{
  left: 0; bottom: 0; width: 100%; height: auto; mix-blend-mode: screen;
  /* intersect: esquerda vazia (texto) e topo apagado (a nevoa da foto nao e preto puro e marcava a borda) */
  mask-image: linear-gradient(90deg, transparent 0 66%, #000 80%), linear-gradient(180deg, transparent 0 40%, #000 72%);
  mask-composite: intersect;
}
.pcg-rock__porco{
  right: 3vw; top: 13%; height: auto; opacity: .32;
  clip-path: inset(100% 0 0 0);
  width: min(320px, calc(45vw - max(20.57vw, 36.57svh)));
}

/* Celular (retrato): menos coisa. Sem holofote, vaca, porco, diamante e selo do 03; amps pequenos na faixa do burger
   (entre o texto do 02, em cima, e o do 03, embaixo), quase todo fora da tela; doodles nas faixas livres. */
@media (max-aspect-ratio: 1 / 1) {
  .pcg-rock__luz .pcg-rock__feixe, .pcg-rock__so-desk{ display: none; }
  /* a nevoa do pe do amp nao e preto puro: sem o esmaecido, a caixa da imagem aparecia sobre o burger */
  .pcg-rock__amp{ bottom: auto; top: 36svh; height: 26svh; mask-image: linear-gradient(180deg, transparent, #000 18%, #000 62%, transparent); }
  .pcg-rock__amp--esq{ translate: -50% 0; }
  .pcg-rock__amp--dir{ translate: 50% 0; }
  .pcg-rock__brilho, .pcg-rock__voo{ left: var(--xm, var(--x)); top: var(--ym, var(--y)); width: calc(var(--w) * .8); }
  /* so as pontas das maos, abaixo dos botoes do 03 */
  .pcg-rock__plateia{ width: 120%; left: -10%; mask-image: linear-gradient(180deg, transparent 0 74%, #000 94%); mask-composite: add; }
  .pcg-rock__flash{ background: radial-gradient(70% 34% at 0% 50%, rgba(255, 236, 196, .4), transparent 70%); }
  .pcg-rock__flash--dir{ background: radial-gradient(70% 34% at 100% 50%, rgba(255, 236, 196, .4), transparent 70%); }
  .pcg-rock__luz{ mask-image: none; }
  .pcg-momento__selo{ width: 76px; }
}

/* Ponte abertura → lineup (so com .viagem, ligada pelo JS: GSAP e sem reduced-motion).
   Veu: o palco apaga entre p .97 e 1 enquanto o recorte fixo acende por cima do burger do canvas; ao rolar, o palco
   (ja escuro) sobe sem levar uma copia do burger junto. */
.pcg-hero__veu{ display: none; }
.viagem .pcg-hero__veu{
  /* apaga para o palco do 1o slide do lineup (--luz-ponte, do JS; a mesma conta da .pcg-burger__faixa), nao para o preto */
  --lz: var(--luz-ponte, #8E3A44);
  display: block; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 40% 42% at 50% 52%, color-mix(in srgb, var(--lz) 46%, transparent), color-mix(in srgb, var(--lz) 12%, transparent) 62%, transparent),
    color-mix(in srgb, var(--lz) 22%, var(--fundo));
  opacity: clamp(0, (var(--p, 0) - .97) / .03, 1);
}
/* Recorte fixo: caixa do tamanho do burger no canvas (px do JS, so no refresh); a viagem e transform + opacity */
.pcg-viagem{
  position: fixed; left: 0; top: 0; z-index: 45; /* acima da fumaca do cursor (40), abaixo do topo (50) */
  pointer-events: none; transform-origin: 0 0; opacity: 0; visibility: hidden;
}
.pcg-viagem img{ position: relative; width: 100%; height: 100%; max-width: none; filter: drop-shadow(0 28px 32px rgba(0, 0, 0, .55)); }
.cine .pcg-hero__dica{
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  position: absolute; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); translate: -50% 0;
  font: 700 .8125rem/1.4 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2);
  opacity: clamp(0, 1 - var(--p, 0) * 25, 1);
  pointer-events: none; /* transparente ela seguia por cima do botao do momento 3 no celular e roubava o clique (PCGBUR-6) */
}
.pcg-hero__dica span{ width: 1px; height: 36px; background: linear-gradient(var(--ouro), transparent); animation: pcg-dica 1.8s var(--ease) 2; /* 2 voltas (3,6 s): infinito reprovava o 2.2.2 (PCGBUR-6) */ transform-origin: top; }
/* parada depois do inicio da rolagem: com opacity 0 ela seguia animando a abertura inteira */
.pcg-hero.andou .pcg-hero__dica span{ animation: none; }
@keyframes pcg-dica{ 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

@media (max-aspect-ratio: 1 / 1) {
  /* O scrim de baixo serve so aos momentos 01 e 03 (texto embaixo). No 02 (texto em cima, burger no meio e embaixo)
     ele apaga: some entre p .30 e .36 e volta entre .74 e .80 (o 02 vai de ~.38 a ~.70). */
  /* PCGBUR-12: no 01 o burger inteiro fica entre o topo e o titulo (theme.js, encaixe()). O scrim de cima ia ate 36% da
     tela e apagava o pao de cima: agora so a faixa do topo fixo. O de baixo (34% solido, ate 58%) cobria o burger
     do tomate para baixo: fica so no 03; o texto do 01 tem o scrim proprio, que comeca no titulo (--titulo-y). */
  .cine .pcg-hero__scrim{
    background: linear-gradient(180deg, var(--fundo) 0, rgba(18, 15, 12, .8) var(--topo-h), transparent calc(var(--topo-h) + 9svh));
  }
  /* PCGBUR-21: o poster e "cover" (burger grande) e o canvas encaixa o burger entre o topo e o titulo: mostrar os dois
     fazia o burger trocar de tamanho na carga. O poster so serve de frame 0 ao canvas (theme.js); o canvas entra em fade. */
  .cine .pcg-hero__poster{ visibility: hidden; }
  .cine .pcg-hero__canvas{ opacity: 0; transition: opacity .6s var(--ease); }
  .cine .pcg-hero.tem-frame .pcg-hero__canvas{ opacity: 1; }
  .cine .pcg-hero__scrim::after{
    content: ""; position: absolute; inset: 0;
    /* PCGBUR-21: no pe do 03 so ficam os botoes (o texto subiu); o scrim alto apagava o burger montado */
    background: linear-gradient(0deg, var(--fundo) 0%, rgba(18, 15, 12, .85) 14%, transparent 30%);
    opacity: clamp(0, (var(--p, 0) - .74) / .06, 1);
  }
  .cine .pcg-momento{ inset: calc(var(--topo-h) + 12px) var(--gutter) 9svh; }
  .cine .pcg-momento > *{ max-width: 100%; }
  /* 03 (PCGBUR-21): selo e texto em cima, os dois botoes no pe, sempre lado a lado (cliente) */
  .cine .pcg-momento--3{ justify-content: flex-start; }
  .cine .pcg-momento--3 > .pcg-acoes{ margin-top: auto; align-self: stretch; }
  .cine .pcg-momento--3 .pcg-btn{ flex: 1 1 auto; min-width: 0; padding-inline: .9em; font-size: .8125rem; letter-spacing: .05em; }
  .cine .pcg-momento--1{ isolation: isolate; }
  .cine .pcg-momento--1::before{
    /* do pe do palco ate 56px acima do titulo; solido (.88) a partir do titulo: o burger acima fica limpo */
    inset: auto calc(-1 * var(--gutter)) -9svh; height: calc(100svh - var(--titulo-y, 55svh) + 56px);
    background: linear-gradient(0deg, var(--fundo) 0, rgba(18, 15, 12, .88) calc(100% - 56px), transparent);
  }
  /* o 01 pinta antes do JS: sem --titulo-y medido, o scrim nascia com 55svh e encolhia (CLS 0,077); so aparece medido */
  .cine .pcg-hero:not([style*="--titulo-y"]) .pcg-momento--1::before{ visibility: hidden; }
  .cine .pcg-momento--3::before{
    /* so atras do selo e do texto no topo; o burger no meio fica limpo (os botoes no pe usam o scrim::after do palco) */
    /* medido em vw, como o texto (frase em vw, 2 linhas): solido ate logo abaixo do subtitulo em 360-430px.
       Em % da altura o fade comecava no meio do subtitulo e o pao aparecia atras dele (2:1 no pior pixel, medido).
       86px = selo (76) + o espaco ate a frase */
    inset: calc(-1 * (var(--topo-h) + 12px)) calc(-1 * var(--gutter)) auto; height: calc(var(--topo-h) + 12px + var(--selo3, 86px) + 52vw);
    background: linear-gradient(180deg, var(--fundo) 0, rgba(18, 15, 12, .92) calc(var(--topo-h) + 12px + var(--selo3, 86px) + 34vw), transparent);
  }
  .cine .pcg-momento--3 .pcg-hero__sub{ text-shadow: 0 1px 2px var(--fundo), 0 0 18px var(--fundo); line-height: 1.4; }
  /* compacto: com 18px entre as linhas o "...and the King." encostava na cebola do frame */
  .cine .pcg-momento--3 > * + *{ margin-top: 10px; }
  .cine .pcg-hero__titulo{ font-size: clamp(2.6rem, 11.5vw, 3.8rem); }
  .cine .pcg-hero__frase{ font-size: clamp(2.1rem, 10vw, 3.4rem); }
  /* frase sempre em 2 linhas (cabe ate ~8vw de 360 a 430px, medido): com 3 o subtitulo descia para cima do pao.
     stretch: com a largura "fit-content" do flex, o autoSplit do SplitText re-quebrava na largura da propria linha e
     uma palavra caia para a terceira linha */
  .cine .pcg-momento--3 .pcg-hero__frase{ font-size: 7.8vw; align-self: stretch; }
}

/* Celular deitado (paisagem baixa, ~390px de altura): o layout de desktop nao cabia. O selo do 01 subia por cima do logo,
   a frase do 02 vazava pelo pe e a do 03 cruzava o burger. Sem selos, tipo menor e o 03 em coluna a esquerda. */
@media (min-aspect-ratio: 1 / 1) and (max-height: 520px) {
  .cine .pcg-momento{ inset: calc(var(--topo-h) + 8px) var(--gutter) 6svh; }
  .cine .pcg-momento > * + *, .cine .pcg-momento--1 > * + *{ margin-top: 8px; }
  .cine .pcg-hero__selo, .cine .pcg-momento__selo, .cine .pcg-hero__dica{ display: none; }
  .cine .pcg-momento--1 .pcg-neon{ font-size: 2.6rem; margin-top: 0; }
  .cine .pcg-hero__acento{ font-size: 1rem; }
  .cine .pcg-hero__sub{ font-size: 1rem; line-height: 1.45; }
  .cine .pcg-momento--3 .pcg-hero__frase{ font-size: 1.75rem; }
  .cine .pcg-momento--3 > *{ max-width: 32vw; }
  .cine .pcg-momento--3 > .pcg-acoes{ max-width: none; margin-top: 12px; }
  /* scrim do 03 mais largo e mais forte: o holofote e o amp passavam por tras do rotulo (1,4:1 no pior pixel, medido) */
  .cine .pcg-momento--3::before{
    inset: calc(-1 * (var(--topo-h) + 8px)) auto -6svh calc(-1 * var(--gutter)); width: 62vw;
    background: linear-gradient(90deg, rgba(18, 15, 12, .9) 0 52%, transparent);
  }
} /* soltos e faixas nao vazam a largura */
.pcg-burgers, .pcg-mais, .pcg-pedido, .pcg-unidades, .pcg-prova, .pcg-hfaq{
  position: relative; padding: var(--secao-y) var(--gutter);
}

/* Camadas compartilhadas: fundo de imagem (z 0) < faixa de fumaca e soltos (z 1) < texto (z 2) */
.pcg-fundo{ position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; display: block; }
.pcg-fundo img{ position: absolute; left: 0; top: -8%; width: 100%; height: 116%; max-width: none; object-fit: cover; }
.pcg-fundo::after{ content: ""; position: absolute; inset: 0; }
.pcg-burgers__cabeca, .pcg-lineup, .pcg-cardapio, .pcg-pedido__miolo, .pcg-pedido__app,
.pcg-unidades__cabeca, .pcg-rota, .pcg-prova > :not(.pcg-fundo):not(.pcg-solto):not(.pcg-sr){
  position: relative; z-index: 2;
}
.pcg-solto--meio{ opacity: .92; }

/* Faixas de fumaca entre secoes: altura zero no fluxo, a imagem atravessa a fronteira. Screen apaga o preto. */
.pcg-fumaca{ position: relative; height: 0; pointer-events: none; }
.pcg-fumaca img{
  position: absolute; z-index: 1; left: 50%; top: 50%; width: max(130vw, 1300px); max-width: none;
  height: clamp(260px, 44vh, 480px); object-fit: cover; /* corta o preto de cima e de baixo: a faixa fica baixa */
  mask-image: radial-gradient(50% 50% at 50% 50%, #000 45%, transparent 100%); /* sem borda reta do recorte */
  translate: -50% -28%; mix-blend-mode: screen; opacity: 0; /* desce para o respiro da secao seguinte: poupa links do pe da anterior */
}
html:not(.gs) .pcg-fumaca{ display: none; }

/* Fumaca do cursor: canvas fixo; teto de .18 no proprio elemento (o JS desenha com 'lighten', que nao acumula) */
.pcg-baforada{
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none;
  mix-blend-mode: screen; opacity: .26; /* sprite tem pico 166/255: efetivo ~.17 */
}

/* Burgers: palco central. Cada slide e um palco com luz propria (--luz): faixa de cor, nome gigante em contorno,
   ingredientes soltos e o burger no centro; o texto fica fora do palco.
   Padrao (sem JS, celular, reduced-motion): carrossel nativo com scroll-snap, um palco de largura 100% por slide.
   >= 900px com GSAP (.palco): a secao tem a altura da tela, os slides se empilham e o JS desliza as camadas na troca
   (setas, arrasto, gesto lateral). Sem pino desde a PCGBUR-32 (12/11/2026): a pagina desce normal. */
.pcg-burgers{ max-width: calc(var(--largura) + 2 * var(--gutter)); margin-inline: auto; padding-bottom: clamp(40px, 6vw, 80px); }
.pcg-burgers__cabeca{ display: grid; gap: 20px; justify-items: center; text-align: center; max-width: 44rem; margin: 0 auto clamp(24px, 4vw, 48px); }

.pcg-lineup{ position: relative; width: 100vw; margin-left: calc(50% - 50vw); display: flex; flex-direction: column; }
.pcg-lineup__trilho{
  list-style: none; margin: 0; padding: 0; display: flex;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.pcg-lineup__trilho::-webkit-scrollbar{ display: none; }

/* Setas, contador (desktop) e pontos (celular). Abaixo do palco no visual, antes da lista no DOM (ordem do Tab). */
.pcg-lineup__ctrl{
  order: 2; display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 20px var(--gutter) 0;
}
.pcg-lineup__ctrl[hidden]{ display: none; }
.pcg-lineup__conta{
  display: none; min-width: 5.5em; text-align: center;
  font: 700 .875rem/1 var(--f-texto); letter-spacing: .14em; color: var(--texto-mudo); font-variant-numeric: tabular-nums;
}
.pcg-lineup__conta span{ color: var(--ouro-vivo); }
.pcg-lineup__pontos{ display: flex; gap: 10px; }
.pcg-lineup__pontos i{
  width: 8px; height: 8px; border-radius: 50%; background: rgba(247, 237, 218, .28);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.pcg-lineup__pontos i.ativo{ background: var(--ouro-vivo); transform: scale(1.3); }

.pcg-burger{
  /* mesma intensidade no desktop (faixa) e no celular (secao inteira, --forca): o burger tem a mesma cor nos dois */
  --forca: 22%;
  --banda: color-mix(in srgb, var(--luz) var(--forca), var(--fundo));
  flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
  display: grid; align-content: start; gap: 24px; min-width: 0;
}
.pcg-burger__palco{ position: relative; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate; }
/* faixa: campo de cor solido (como as bandas do reel) + luz quente atras do burger */
.pcg-burger__faixa{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 42% at 50% 52%, color-mix(in srgb, var(--luz) 46%, transparent), color-mix(in srgb, var(--luz) 12%, transparent) 62%, transparent),
    var(--banda);
}
/* nome gigante em contorno, atras do burger; --eco (no slide) encolhe nome com mais de 8 letras para caber como "Original" */
.pcg-burger__eco{ position: absolute; inset: 0; pointer-events: none; user-select: none; font: 400 calc(30vw * var(--eco, 1))/.85 var(--f-display); }
.pcg-burger__eco > span{
  position: absolute; left: 50%; top: 50%; translate: -50% -56%;
  text-transform: uppercase; white-space: nowrap; letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--luz) 70%, var(--texto));
  opacity: .3;
}
/* caixa = largura do burger (o --k da foto desconta a margem transparente do recorte) */
.pcg-burger__caixa{ position: absolute; left: 11%; top: 50%; width: 78%; aspect-ratio: 3 / 2; margin-top: -26%; }
.pcg-burger__foto{
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: calc(var(--k, 1) * 100%); max-width: none; height: auto;
  filter: drop-shadow(0 28px 32px rgba(0, 0, 0, .55));
}
.sem-foto .pcg-burger__foto{ visibility: hidden; }
.pcg-burger__soltos{ position: absolute; inset: 0; pointer-events: none; }
.pcg-burger__solto{
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; max-width: none;
  rotate: var(--r, 0deg); filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .5));
}

.pcg-burger__solto--traco{ filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); }

/* Texto do slide: so leitura (sem "Order the X", cliente 10/11/2026). Nome -> ingredientes -> quadro de preco -> combo.
   O preco e o fecho do bloco: quadro de cardapio de parede, Single | Double lado a lado entre dois filetes, numero em Anton. */
.pcg-burger__texto{ --filete: color-mix(in srgb, var(--ouro) 32%, transparent); padding: 0 var(--gutter); }
.pcg-burger__nome{ font: 400 clamp(2.75rem, 5vw, 3.6rem)/.95 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.pcg-burger__ing{ margin-top: 12px; color: var(--texto-2); font-size: 1rem; line-height: 1.55; max-width: 20rem; }
.pcg-burger__precos{
  display: grid; grid-template-columns: 1fr 1fr; max-width: 20rem; margin-top: 24px;
  border-block: 1px solid var(--filete);
}
.pcg-burger__precos > div{ padding: 14px 0 12px; }
.pcg-burger__precos > div + div{ padding-left: 22px; border-left: 1px solid var(--filete); }
.pcg-burger__precos dt{ font: 700 .75rem/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-mudo); }
.pcg-burger__precos dd{
  margin: 8px 0 0; font: 400 2.25rem/1 var(--f-display); letter-spacing: .01em; color: var(--ouro);
  font-variant-numeric: tabular-nums lining-nums;
}
.pcg-burger__moeda{ display: inline-block; margin-right: .06em; font-size: .5em; vertical-align: .82em; }
.pcg-burger__combo{ margin-top: 18px; width: 100%; } /* a coluna do lineup tem ~320px: o cupom ocupa ela toda e o nome cabe numa linha */
.pcg-burger__combo .pcg-combo__nome{ font-size: 1.25rem; white-space: nowrap; }
.pcg-burger__combo .pcg-combo__preco{ font-size: 2.125rem; padding-left: 12px; }
.pcg-burger__mais{ margin-top: 10px; }

/* desktop sem palco (reduced-motion ou sem GSAP): texto a esquerda, palco a direita, mesmo carrossel */
@media (min-width: 900px) {
  .pcg-burger{ grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; align-content: center; gap: 0; }
  .pcg-burger__palco{ order: 2; aspect-ratio: 16 / 10; }
  .pcg-burger__caixa{ left: 18%; width: 64%; margin-top: -21.3%; }
  .pcg-burger__eco{ font-size: calc(17vw * var(--eco, 1)); }
  .pcg-burger__texto{ padding: 0 clamp(24px, 3vw, 48px) 0 max(var(--gutter), (100vw - var(--largura)) / 2); }
  .pcg-lineup__ctrl{ justify-content: flex-end; padding-right: max(var(--gutter), (100vw - var(--largura)) / 2); }
  .pcg-lineup__conta{ display: block; }
  .pcg-lineup__pontos{ display: none; }

  /* Palco: a secao ocupa a tela; cada slide e uma camada inteira, o burger no centro (--cx) */
  /* O burger mora no espaco ABAIXO do cabecalho (cliente, 10/11/2026: em notebook ele cobria o subtitulo e o link).
     --livre = base do cabecalho dentro da secao, medida pelo JS (o valor daqui e a reserva sem JS); o burger centra
     nesse vao (--cy) e encolhe se o vao for baixo: a foto mais alta (Elvis, --k 1.258) tem ~.74 da largura de altura. */
  .pcg-burgers.palco{
    --livre: calc(var(--topo-h) + 220px); --pe: 4svh;
    --alto: calc(100svh - var(--livre) - var(--pe)); --cy: calc(var(--livre) + var(--alto) / 2);
    --bw: min(42vw, 80svh, calc(var(--alto) / .74));
    /* coluna de texto com largura fixa na borda da grade; o burger centra na tela, mas nunca encosta nela (no monitor
       largo a coluna ficava com ~236px e o "Single / Double" quebrava em duas linhas: o desalinhado do cliente) */
    --borda: max(var(--gutter), (100vw - var(--largura)) / 2); --txt: 20rem;
    --cx: max(50%, calc(var(--borda) + var(--txt) + 32px + var(--bw) / 2));
    max-width: none; height: 100svh; padding: 0; overflow: visible;
    scroll-margin-top: calc(-1 * (var(--topo-h) + 16px)); /* ancora #burgers chega com a secao no topo */
  }
  .palco .pcg-burgers__cabeca{
    /* centrado no topo do palco: so o titulo (PCGBUR-27); o burger fica no centro, abaixo */
    position: absolute; z-index: 3; top: calc(var(--topo-h) + clamp(8px, 2svh, 24px)); left: 0; right: 0;
    max-width: none; margin: 0; gap: 6px;
  }
  .palco .pcg-burgers__cabeca .pcg-h2{ font-size: clamp(2.2rem, 3.6vw, 3.4rem); }
  .palco .pcg-lineup{ position: absolute; inset: 0; width: auto; margin: 0; display: block; touch-action: pan-y; } /* arrasto lateral vai para o JS (troca o burger) */
  .palco .pcg-lineup__trilho{ position: relative; height: 100%; overflow: visible; scroll-snap-type: none; display: block; }
  .palco .pcg-burger{ position: absolute; inset: 0; display: block; }
  .palco .pcg-burger__palco{ position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; overflow: visible; isolation: auto; }
  .palco .pcg-burger__faixa{
    background:
      radial-gradient(calc(var(--bw) * .78) calc(var(--bw) * .5) at var(--cx) var(--cy), color-mix(in srgb, var(--luz) 46%, transparent), color-mix(in srgb, var(--luz) 12%, transparent) 62%, transparent),
      var(--banda);
  }
  /* o traco do nome some antes do bloco de texto: atras da letra ele derrubava o contraste para 2,4:1 (medido) */
  .palco .pcg-burger__eco{
    font-size: calc(min(24vw, 44svh) * var(--eco, 1));
    mask-image: linear-gradient(90deg, transparent calc(var(--cx) - var(--bw) / 2 - 1%), #000 calc(var(--cx) - var(--bw) / 4));
  }
  .palco .pcg-burger__eco > span{ left: var(--cx); top: var(--cy); }
  .palco .pcg-burger__caixa{ left: calc(var(--cx) - var(--bw) / 2); top: var(--cy); width: var(--bw); margin-top: calc(var(--bw) / -3); }
  /* texto centrado na altura do burger (antes ficava no pe da tela, solto em relacao a ele); translate e propriedade
     separada do transform que o JS escreve no crossfade */
  .palco .pcg-burger__texto{
    position: absolute; z-index: 2; left: var(--borda); top: var(--cy); translate: 0 -50%;
    width: var(--txt); padding: 0;
  }
  /* um degrau claro acima do preco (Anton 2.25rem): com 2.3vw os dois empatavam em ~36px */
  .palco .pcg-burger__nome{ font-size: clamp(2.5rem, 3.3vw, 3.4rem); }
  .palco .pcg-burger__ing{ font-size: .9375rem; }
  .palco .pcg-burger:not(.ativo) .pcg-burger__texto{ pointer-events: none; }
  .palco .pcg-lineup__ctrl{ position: absolute; z-index: 3; right: max(var(--gutter), (100vw - var(--largura)) / 2); bottom: 10svh; padding: 0; }
}
/* notebook estreito: burger um pouco menor (o --cx ja o empurra para a direita da coluna de texto) */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .pcg-burgers.palco{ --bw: min(40vw, 76svh, calc(var(--alto) / .74)); }
}
/* Celular (carrossel nativo): sem faixa retangular. A cor do burger ativo pinta a secao inteira (--luz-ativa e --forca-ativa,
   escritas pelo marcar() do JS) e vira luz atras do burger: um brilho fixo no palco, que nao anda com o arrasto (nao
   ha emenda entre slides) e so troca de cor. As duas variaveis sao registradas para a troca ser uma transicao de 400ms;
   navegador sem @property troca seco. --forca (22%) e o brilho sao os mesmos da faixa do desktop: a cor de cada burger e igual nos dois. */
@property --luz-ativa{ syntax: "<color>"; inherits: true; initial-value: #120F0C; }
@property --forca-ativa{ syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@media (max-width: 899.98px) {
  .pcg-burger__solto{ width: calc(var(--w) * 1.1); }

  .pcg-burgers{
    --tom: color-mix(in srgb, var(--luz-ativa) var(--forca-ativa), var(--fundo));
    isolation: isolate; /* o brilho (z -1) fica sob o titulo e os slides, mas sobre este fundo */
    background: linear-gradient(180deg, var(--fundo), var(--tom) 12%, var(--tom) 88%, var(--fundo));
    transition: --luz-ativa .4s var(--ease), --forca-ativa .4s var(--ease);
  }
  /* com a abertura (cine), o veu da ponte ja apaga o palco para esta mesma cor (--luz-ponte a 22% sobre o fundo): o topo
     preto da secao virava uma faixa escura subindo pela tela no fim da ponte (PCGBUR-12). Comeca direto no tom. */
  .cine .pcg-burgers{ background: linear-gradient(180deg, var(--tom), var(--tom) 88%, var(--fundo)); }
  /* a secao ocupa a tela inteira abaixo do topo fixo, com o conteudo no meio (cliente, PCGBUR-27): sem o paragrafo do
     cabecalho ela ficou mais baixa que a tela dos celulares altos e a secao seguinte aparecia no pe do pouso */
  .pcg-burgers{ min-height: calc(100svh - var(--topo-h)); display: flex; flex-direction: column; justify-content: center; }
  /* brilho: centro no burger (palco 4:3 = 75vw, burger no meio), sobe ate o vao do titulo e desce sob o nome */
  .pcg-lineup::before{
    content: ""; position: absolute; z-index: -1; inset: -120px 0 0; pointer-events: none;
    background: radial-gradient(ellipse 95vw 330px at 50% calc(120px + 37.5vw),
      color-mix(in srgb, var(--luz-ativa) 46%, transparent) 0%,
      color-mix(in srgb, var(--luz-ativa) 12%, transparent) 62%,
      transparent 80%); /* = o brilho da faixa do desktop */
  }
  .pcg-burger__faixa{ display: none; }
  /* sem a faixa, o corte de baixo do palco aparecia na sombra do burger: so o lado continua cortado */
  .pcg-burger__palco{ overflow: visible; overflow-x: clip; }
  /* o trilho (overflow-x auto) corta tambem em cima: o respiro deixa o bacon/cebola que sobem do burger inteiros */
  .pcg-lineup__trilho{ padding-top: 14vw; margin-top: -14vw; }
  /* ...e esse respiro subia por cima do "See the full menu": o trilho recebia o toque e o link nao (PCGBUR-6) */
  .pcg-burgers__cabeca{ z-index: 3; } /* os dois sao z-index 2 e o trilho vem depois no DOM: empate, ele ganhava */
  /* nome em contorno: sem a faixa, o corte na borda do slide aparecia no meio da tela durante o arrasto */
  .pcg-burger__eco{ mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .pcg-burger__eco > span{ -webkit-text-stroke-color: color-mix(in srgb, var(--luz) 30%, var(--texto)); opacity: .32; }

  /* texto sobre a cor: tudo em creme (o ouro e o texto-2 caiam abaixo de 4,5:1 nas cores claras, Waters a pior) */
  .pcg-burger__ing, .pcg-burger__precos dt, .pcg-burger__precos dd, .pcg-burger__combo .pcg-combo__desc, .pcg-burger__mais .pcg-link{ color: var(--texto); }
  .pcg-burger__combo{ --combo-acento: var(--texto); }
  .pcg-burger__texto{ --filete: color-mix(in srgb, var(--texto) 30%, transparent); }
  .pcg-lineup__pontos i{ background: rgba(247, 237, 218, .45); }

  /* PCGBUR-21: nome, ingredientes e precos na tela junto com o burger, no pouso da abertura (cliente). O palco 4:3 (75vw)
     sobrava ~45px vazios em cima e embaixo do burger (52vw, a foto nao mudou de tamanho): agora tem a altura dele mais a
     sombra. Ingredientes na largura toda (menos linhas), espacos e numeros mais justos. Brilho do ::before acompanha. */
  .pcg-burger{ gap: 6px; }
  .pcg-burger__palco{ aspect-ratio: 100 / 60; }
  .pcg-lineup::before{ background-position: 0 -7.5vw; }
  .pcg-burger__nome{ font-size: 2.5rem; }
  .pcg-burger__ing{ margin-top: 6px; font-size: .9375rem; line-height: 1.45; max-width: 24rem; }
  .pcg-burger__precos{ margin-top: 14px; }
  .pcg-burger__precos > div{ padding: 9px 0 8px; }
  .pcg-burger__precos dd{ margin-top: 5px; font-size: 2rem; }
  .pcg-burger__combo{ margin-top: 10px; }
  .pcg-burgers__cabeca{ gap: 14px; margin-bottom: 16px; }
  .pcg-burgers__cabeca .pcg-h2{ font-size: min(2.6rem, 9.4vw); }
}

/* More than burgers: cardapio em abas (uma categoria por vez). Sem JS: categorias empilhadas, cada uma com seu h3.
   Com JS (.abas): os paineis dividem a mesma celula do grid; o inativo fica [hidden] mas com visibility, nao display,
   entao a secao tem sempre a altura da maior categoria e a pagina nao pula ao trocar de aba. */
.pcg-mais{ overflow: clip; }
.pcg-cardapio{ max-width: var(--largura); margin-inline: auto; }
.pcg-mais__cabeca{
  display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
  margin-bottom: clamp(32px, 4vw, 56px);
}

/* Abas: rotulos em display, a ativa acende em creme com a barra dourada */
.pcg-cardapio__abas{
  display: flex; gap: clamp(0px, 1vw, 12px);
  border-bottom: 1px solid var(--linha);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.pcg-cardapio__abas::-webkit-scrollbar{ display: none; }
.pcg-cardapio__abas[hidden]{ display: none; }
.pcg-cardapio__abas [role="tab"]{
  position: relative; flex: none; min-height: 56px; padding: 6px clamp(12px, 1.6vw, 22px) 0;
  background: none; border: 0; cursor: pointer;
  font: 400 clamp(1.25rem, 2vw, 1.75rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; color: var(--texto-mudo);
  transition: color .2s var(--ease);
}
.pcg-cardapio__abas [role="tab"]:first-child{ padding-left: 0; }
.pcg-cardapio__abas [role="tab"]::after{
  content: ""; position: absolute; left: clamp(12px, 1.6vw, 22px); right: clamp(12px, 1.6vw, 22px); bottom: 0; height: 3px;
  background: var(--ouro-vivo); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.pcg-cardapio__abas [role="tab"]:first-child::after{ left: 0; }
@media (hover: hover) { .pcg-cardapio__abas [role="tab"]:hover{ color: var(--texto-2); }
}
.pcg-cardapio__abas [role="tab"][aria-selected="true"]{ color: var(--texto); }
.pcg-cardapio__abas [role="tab"][aria-selected="true"]::after{ transform: scaleX(1); }
/* o contêiner rola: contorno por dentro, senao o overflow corta */
.pcg-cardapio__abas [role="tab"]:focus-visible{ outline-offset: -4px; }

/* ilustracao de traco da categoria (so com abas): em pe sobre a linha das abas, no canto livre a direita */
.pcg-cardapio{ --gap-abas: clamp(28px, 3.5vw, 44px); }
.pcg-cardapio__abas{ margin-bottom: var(--gap-abas); }
.pcg-cardapio__painel{ position: relative; }
.pcg-cardapio__ilu{ display: none; }
.abas .pcg-cardapio__ilu{ display: block; position: absolute; right: 0; bottom: calc(100% + var(--gap-abas)); height: 112px; width: auto; pointer-events: none; }
@media (max-width: 760px) {
  /* celular (PCGBUR-23): carimbo no canto direito do cabecalho, ao lado do titulo, trocando com a aba. Antes ficava
     centrada acima das abas com 112px reservados so para ela (cliente reprovou o vao, 11/11/2026). O painel deixa de
     ser o contexto para a ilustracao se medir pelo .pcg-cardapio (topo do cabecalho). */
  .pcg-cardapio{ position: relative; }
  .abas .pcg-cardapio__painel{ position: static; }
  .abas .pcg-cardapio__ilu{ top: 0; right: 0; bottom: auto; height: 48px; rotate: 8deg; }
}
.pcg-cardapio__cat{ font: 400 clamp(1.75rem, 3vw, 2.5rem)/1 var(--f-display); text-transform: uppercase; color: var(--ouro); margin-bottom: 24px; }
.pcg-cardapio__painel + .pcg-cardapio__painel{ margin-top: clamp(56px, 7vw, 88px); }
/* minmax(0, 1fr): a trilha implicita (auto) crescia ate o max-content do carrossel do celular (4 cartoes = 1260px);
   o trilho ficava do tamanho do conteudo, sem nada para rolar, e o .pcg-mais (clip) cortava o resto: o swipe morria */
.abas .pcg-cardapio__paineis{ display: grid; grid-template-columns: minmax(0, 1fr); }
.abas .pcg-cardapio__painel{ grid-area: 1 / 1; align-self: start; margin: 0; min-width: 0; }
.abas .pcg-cardapio__painel[hidden]{ display: block; visibility: hidden; }
.abas .pcg-cardapio__cat{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.pcg-cardapio__grade{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(32px, 3.5vw, 48px) clamp(16px, 2vw, 28px);
}

/* Cartao: foto 4:5, nome em display, precos por tamanho numa coluna a direita, botao Order pequeno no pe */
.pcg-item{ display: flex; flex-direction: column; min-width: 0; }
.pcg-item__foto{
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--raio);
  background: var(--superficie); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .6);
}
/* sem foto real: icone dourado grande sobre a superficie, no mesmo formato */
.pcg-item__foto--icone{
  display: grid; place-items: center; border: 1px solid var(--linha);
  background: radial-gradient(closest-side, rgba(202, 165, 95, .16), transparent), var(--superficie);
}
.pcg-item__foto--icone img{ width: 52%; height: auto; rotate: -8deg; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .55)); }
.pcg-item__foto--alto img{ width: 30%; }
.pcg-item__foto--espelho img{ rotate: 10deg; scale: -1 1; }
/* sabores sem foto: o proprio nome vira a imagem */
.pcg-item__foto--sabores{
  display: flex; flex-direction: column; justify-content: center; gap: .3em; padding: 0 12%;
  border: 1px solid var(--linha); background: var(--superficie);
  font: 400 clamp(1.4rem, 2.1vw, 2.1rem)/.95 var(--f-display); text-transform: uppercase; color: var(--texto);
}
.pcg-item__foto--sabores span{ rotate: -4deg; }
.pcg-item__foto--sabores span:nth-child(2){ color: var(--ouro-vivo); }
.pcg-item__foto--sabores span:nth-child(3){ color: var(--ouro); }

.pcg-item__corpo{
  flex: 1; margin-top: 18px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; gap: 10px 16px;
}
.pcg-item__nome{ margin: 0; font: 400 clamp(1.375rem, 1.6vw, 1.75rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: .015em; }
/* precos alinhados pelo TOPO do nome, nao pela base (cliente, PCGBUR-27): o topo dos numeros bate com o topo das letras do
   nome. -2px = o que a entrelinha 1.3 do preco (Lato 17px) deixa acima do numero a mais que a do nome (Anton, entrelinha 1);
   medido de 22 a 28px de nome, erro maximo de 1px. */
.pcg-item__precos{
  list-style: none; margin: -2px 0 0; padding: 0; display: grid; gap: 4px; justify-items: end;
  font: 700 .75rem/1.3 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-mudo);
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
.pcg-item__precos b{ margin-left: .5em; color: var(--ouro); font-weight: 900; font-size: 1.0625rem; letter-spacing: .01em; }
.pcg-item__desc{ grid-column: 1 / -1; color: var(--texto-2); font-size: 1rem; line-height: 1.5; max-width: 34ch; }
/* um pedido só, centrado no fim da seção (pedido de 08/11/2026: sem botão por item) */
.pcg-mais__pedido{ display: flex; justify-content: center; margin: clamp(32px, 5vw, 56px) 0 0; }

@media (max-width: 1099.98px) {
  .pcg-cardapio__grade{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* celular: carrossel nativo por categoria (o cartao seguinte espia na borda); a altura e a de um cartao */
@media (max-width: 760px) {
  /* 5 abas nao cabem em 390px: a lista rola de ponta a ponta e o esmaecido da direita avisa que tem mais */
  .pcg-cardapio__abas{
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  .pcg-cardapio__abas.fim{ mask-image: none; }
  .pcg-cardapio__abas [role="tab"]{ font-size: 1.125rem; padding-inline: 10px; }
  .pcg-cardapio__abas [role="tab"]::after{ left: 10px; right: 10px; }
  /* coube na largura: as abas se distribuem de margem a margem, alinhadas aos cartoes (encostadas a esquerda pareciam
     tortas sob o titulo centralizado). Nao coube: space-between vira inicio e a lista rola como antes. */
  .pcg-cardapio__abas{ justify-content: space-between; }
  .pcg-cardapio__abas [role="tab"]:last-child{ padding-right: 0; }
  .pcg-cardapio__abas [role="tab"]:last-child::after{ right: 0; }
  .pcg-cardapio__grade{
    display: flex; gap: 14px; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .pcg-cardapio__grade::-webkit-scrollbar{ display: none; }
  .pcg-item{ flex: 0 0 76vw; scroll-snap-align: start; }
}

/* Pedido direto */
.pcg-pedido{
  background: var(--superficie); overflow: hidden;
  padding-inline: max(var(--gutter), (100% - var(--largura)) / 2);
  /* desktop: foto | conteudo (texto, botoes e app centrados na coluna). celular: titulo em cima, depois a foto (fim do bloco) */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 5vw, 80px);
}
.pcg-pedido__parede{
  position: absolute; inset: 0;
  background: url(../../img/marca/parede-creme.webp) 85% 60% / min(1500px, 140%) auto no-repeat;
  opacity: .06; pointer-events: none;
  transform: translate3d(0, calc(var(--s, 0) * -60px), 0);
  mask-image: linear-gradient(transparent, #000 22%, #000 70%, transparent 96%);
}
/* foto em pe, inteira (4:5, PCGBUR-41): a largura sai da altura da tela (78svh, teto 720px), para a foto caber sempre inteira na
   vista; no celular a largura cheia ja cabe. Mudou o teto? O sizes do pedido.php (576px = 720 x 4/5) acompanha. */
.pcg-pedido__foto{ position: relative; z-index: 2; margin: 0; justify-self: center; width: min(100%, min(78svh, 720px) * 4 / 5); border-radius: var(--raio); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.pcg-pedido__foto img{ display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.pcg-pedido__conteudo{ position: relative; z-index: 2; display: grid; gap: 32px; justify-items: center; text-align: center; }
.pcg-pedido__nota{ margin-inline: auto; text-wrap: pretty; margin-top: 14px; font-size: 1rem; color: var(--texto-mudo); max-width: 44ch; }
.pcg-pedido__texto{ margin-inline: auto; text-wrap: pretty; margin-top: 24px; font-size: clamp(1.1875rem, 1.8vw, 1.375rem); color: var(--texto-2); max-width: 36ch; }
.pcg-pedido .pcg-acoes{ margin-top: 32px; justify-content: center; }
/* o raio e cenario: fica na margem direita, fora da coluna do texto (com o titulo numa linha so, "Order from us.", em
   right 6% ele caia em cima do "US."; a paralaxe o desloca na vertical, entao o que garante e a folga horizontal) */
.pcg-pedido__icone{
  position: absolute; right: 1%; top: 8%; width: clamp(44px, 5vw, 76px); height: auto; opacity: .9;
  transform: translate3d(0, calc(var(--s, 0) * -90px), 0) rotate(10deg);
}
/* notebook: a grade vai ate o gutter e nao sobra margem; o raio encostava no fim do titulo (3 a 5px, medido). Sem lugar, sai. */
@media (min-width: 900px) and (max-width: 1399.98px) { .pcg-pedido__icone{ display: none; }
}
/* app: bloco discreto abaixo dos botoes. Titulo, selos oficiais (os da Rewards, PCGBUR-47) e o link da Rewards, centrados.
   Selo a 44px, abaixo do "Order Now" (56px): dois cabem lado a lado a partir de 375px de tela. */
.pcg-pedido__app{ border-top: 1px solid var(--linha); padding-top: 24px; width: min(100%, 26rem); display: grid; justify-items: center; gap: 16px; }
.pcg-pedido__app h3{ font: 400 1.5rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .015em; }
.pcg-pedido__app .pcg-selos__linha{ justify-content: center; }
.pcg-pedido__app .pcg-selos__link img{ height: 44px; }
/* celular (PCGBUR-42, pedido dele, 13/11/2026): titulo, foto, texto, botoes, app. O titulo mora no .miolo (no desktop ele quebra
   na largura dos botoes): aqui o .conteudo e o .miolo se desfazem (contents) e o titulo sobe com order. Sem o z-index dos filhos,
   a .parede (absoluta) pinta por cima do texto. Espacos: margens, nao gap. */
@media (max-width: 899.98px) {
  .pcg-pedido{ grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .pcg-pedido__conteudo, .pcg-pedido__miolo{ display: contents; }
  .pcg-pedido__miolo > *{ position: relative; z-index: 2; }
  .pcg-pedido .pcg-h2{ order: -1; margin-bottom: 32px; }
  .pcg-pedido__texto{ margin-top: 32px; }
  .pcg-pedido__app{ justify-self: center; margin-top: 32px; }
}

/* Unidades: trilho horizontal de cartoes (scroll-snap nativo). A altura e cabecalho + 1 cartao, com 2 ou 20 lojas.
   Nao pina e nao reaproveita o efeito do lineup: rola dentro de si, setas no desktop, arrasto nativo no toque. */
.pcg-unidades{ max-width: calc(var(--largura) + 2 * var(--gutter)); margin-inline: auto; }
.pcg-unidades__cabeca{
  display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.pcg-unidades__titulo{ display: grid; gap: 20px; justify-items: center; }
.pcg-unidades__titulo p{ color: var(--texto-2); font-size: 1.1875rem; max-width: 46ch; text-wrap: balance; }
/* setas na ponta direita, logo acima do trilho (o mesmo lugar das reviews); escondidas, nao ocupam espaco */
.pcg-unidades__nav{ justify-content: flex-end; margin-bottom: 16px; }
.pcg-rota__setas{ display: flex; gap: 8px; }
.pcg-rota__setas[hidden]{ display: none; }
.pcg-rota__seta{
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; cursor: pointer;
  background: none; color: var(--texto); border: 1px solid rgba(247, 237, 218, .45); border-radius: 50%;
  transition: border-color .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
@media (hover: hover) { .pcg-rota__seta:hover:not(:disabled){ border-color: var(--ouro); color: var(--ouro-vivo); }
}
.pcg-rota__seta:disabled{ opacity: .3; cursor: default; }

.pcg-rota{
  /* 4 cartoes dividem a largura (com 4 lojas o desktop largo nao rola); abaixo de 280px cada, o trilho rola */
  --vao: 16px; --loja: max(280px, (100% - 3 * var(--vao)) / 4);
  list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px;
  display: flex; gap: var(--vao); align-items: stretch;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.pcg-rota::-webkit-scrollbar{ display: none; }
@media (prefers-reduced-motion: no-preference) { .pcg-rota{ scroll-behavior: smooth; }
}
.pcg-loja{
  position: relative; /* o link do nome cobre o cartao (::after); endereco e telefone ficam por cima dele */
  flex: 0 0 var(--loja); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px 24px 24px; background: var(--superficie);
  border: 1px solid var(--linha); border-top: 2px solid var(--ouro); border-radius: var(--raio);
  color: var(--texto-2);
}
.pcg-loja__nome{ font: 400 2rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .015em; color: var(--texto); }
.pcg-loja__nome a{ color: inherit; text-decoration: none; outline: none; transition: color .2s var(--ease); }
.pcg-loja__nome a::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pcg-loja address a, .pcg-loja__contato a{ position: relative; z-index: 1; }
/* sublinhado dourado (o do telefone): sem o "Directions", e ele que diz que o endereco abre a rota */
.pcg-loja address a{ color: inherit; text-decoration: underline; text-decoration-color: var(--ouro); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .2s var(--ease), text-decoration-color .2s var(--ease); }
.pcg-loja{ transition: border-color .2s var(--ease), background-color .2s var(--ease); }
@media (hover: hover) {
  .pcg-loja:has(.pcg-loja__nome a:hover){ background-color: #231E19; border-color: rgba(202, 165, 95, .5); }
  .pcg-loja:has(.pcg-loja__nome a:hover) .pcg-loja__nome a{ color: var(--ouro-vivo); }
  .pcg-loja address a:hover{ color: var(--texto); text-decoration-color: var(--ouro-vivo); }
}
/* o foco do link esticado e o contorno do cartao inteiro */
.pcg-loja:has(.pcg-loja__nome a:focus-visible){ outline: 2px solid var(--ouro-vivo); outline-offset: 3px; }
.pcg-loja__nome span{ display: block; margin-top: 8px; font: 700 .8125rem/1.3 var(--f-texto); letter-spacing: .14em; color: var(--texto-mudo); }
.pcg-loja__status{
  /* abaixo do nome (antes ficava acima, com order -1: era eyebrow, regra 3) */
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 .9375rem/1.4 var(--f-texto); letter-spacing: .02em; color: var(--ouro);
}
.pcg-loja__status--aberta::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ouro-vivo); flex: none; }
.pcg-loja address{ line-height: 1.5; font-size: 1rem; text-wrap: pretty; } /* sem o "C" de "Building C" sozinho na linha */
.pcg-loja__contato{ display: flex; flex-wrap: wrap; gap: 0 20px; }
/* coming soon: mesma largura (o trilho tem ritmo), conteudo minimo e sem destaque. Nome no topo, na linha do nome das
   abertas (cliente, 13/11/2026, PCGBUR-47: no pe do cartao ficava desalinhado) */
.pcg-loja--breve{ background: none; border-style: dashed; border-top: 2px dashed var(--linha); }
.pcg-loja--breve .pcg-loja__nome{ color: var(--texto-mudo); }
.pcg-loja--breve .pcg-loja__status{ color: var(--texto-mudo); }
.pcg-unidades__todas{ display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }
@media (max-width: 760px) {
  .pcg-rota{ --loja: 80vw; --vao: 12px; }
  .pcg-rota__setas{ display: none; }
}

/* Prova */
/* Plateia no terco inferior: o padding de baixo abre espaco para ela; o scrim escurece o topo, onde esta o texto */
.pcg-prova{
  background: var(--superficie); overflow: hidden;
  padding-inline: max(var(--gutter), (100% - var(--largura)) / 2);
  padding-bottom: clamp(180px, 28vw, 420px);
}
.pcg-prova > *{ max-width: var(--largura); margin-inline: auto; }
.pcg-prova > .pcg-fundo, .pcg-prova > .pcg-solto{ max-width: none; margin: 0; }
.pcg-prova__fundo img{ top: auto; bottom: -8%; height: auto; min-height: 72%; object-position: 50% 100%; }
.pcg-prova__fundo::after{
  background: linear-gradient(180deg, var(--superficie) 0%, var(--superficie) 34%, rgba(28, 24, 20, .9) 56%, rgba(28, 24, 20, .25) 82%, rgba(28, 24, 20, 0));
}
@media (max-width: 760px) {
  .pcg-prova{ padding-bottom: 300px; }
  .pcg-prova__fundo img{ width: 180%; left: -40%; min-height: 0; bottom: -4%; }
  .pcg-prova__fundo::after{ background: linear-gradient(180deg, var(--superficie) 0%, var(--superficie) 72%, rgba(28, 24, 20, .3) 90%, rgba(28, 24, 20, 0)); }
}
.pcg-prova__grande{ margin-block: 0; text-align: center; }
.pcg-prova__grande blockquote p{ margin-inline: auto; text-wrap: balance; }
.pcg-prova__lista figure{ margin: 0; }
.pcg-prova blockquote{ margin: 0; }
.pcg-prova__grande blockquote p{
  font: 900 clamp(1.5rem, 3.1vw, 2.5rem)/1.22 var(--f-texto); letter-spacing: -.005em; max-width: 30ch; text-wrap: pretty;
}
.pcg-prova__grande blockquote p::before{
  content: "\201C"; display: block; height: .6em; margin-bottom: .1em;
  font: 400 2.4em/1 var(--f-display); color: var(--ouro);
}
.pcg-prova figcaption{
  margin-top: 20px; font: 900 .8125rem/1.4 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--texto);
}
.pcg-prova figcaption span{ display: block; color: var(--texto-mudo); }
.pcg-prova__lista{
  display: grid; grid-template-columns: 5fr 4fr 3fr; gap: 32px clamp(24px, 4vw, 56px);
  margin-top: clamp(56px, 8vw, 96px);
}
.pcg-prova__lista figure{ border-top: 1px solid var(--linha); padding-top: 24px; text-align: center; }
.pcg-prova__lista:has(> figure:only-child){ grid-template-columns: minmax(0, 1fr); max-width: 40rem; } /* so Google por ora: 1 citacao */
.pcg-prova__lista blockquote p{ margin-inline: auto; text-wrap: balance; }
.pcg-prova__lista blockquote p{ font-size: 1.1875rem; color: var(--texto-2); }

/* Reviews do Trustindex (PCGBUR-16): o trilho das lojas (.pcg-rota + setas no theme.js) com citacoes no lugar de
   cartoes. Sem fundo nem caixa: a mesma linha no topo das citacoes de antes, alinhado a esquerda para ler em coluna. */
.pcg-prova__nav{ display: flex; justify-content: flex-end; margin-top: clamp(48px, 7vw, 88px); margin-bottom: 16px; }
.pcg-prova__nav:has(> [hidden]){ margin-bottom: 0; }
/* sangra ate a borda direita da tela (o review seguinte espia em vez de ser cortado no meio da palavra) */
.pcg-prova > .pcg-prova__rota{
  --loja: 340px; --vao: clamp(24px, 3vw, 40px); --sangra: max(var(--gutter), (100vw - var(--largura)) / 2);
  align-items: start; max-width: none; margin-inline: 0 calc(-1 * var(--sangra));
  padding-inline: 0 var(--sangra); scroll-padding-inline: 0;
}
.pcg-review{ flex: 0 0 var(--loja); scroll-snap-align: start; border-top: 1px solid var(--linha); padding-top: 24px; }
.pcg-review__estrelas{ display: block; color: var(--ouro); margin-bottom: 16px; }
.pcg-review figure{ margin: 0; }
.pcg-review__texto{
  font-size: 1.0625rem; line-height: 1.55; color: var(--texto-2); text-wrap: pretty;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden;
}
.pcg-review__texto.aberto{ display: block; }
.pcg-review__mais{ min-height: 32px; margin-top: 4px; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: .9375rem; }
.pcg-review figcaption{ margin-top: 16px; }
@media (max-width: 760px) {
  .pcg-prova__nav{ margin-top: 48px; }
  /* toque: o trilho vai de borda a borda e o review seguinte espia */
  .pcg-prova > .pcg-prova__rota{ --loja: 80vw; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  /* o home.js poe a altura do review da vez (PCGBUR-33): o cartao vizinho mais alto fica cortado embaixo, sem rolagem vertical no trilho */
  .pcg-prova > .pcg-prova__rota{ overflow-y: hidden; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .pcg-prova > .pcg-prova__rota{ transition: height .3s var(--ease); }
}
@media (max-width: 900px) {
  .pcg-prova__lista{ grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* secao de pedido da home: os dois botoes sempre lado a lado (cliente, PCGBUR-21), como no fim da abertura */
  .pcg-pedido .pcg-acoes{ flex-wrap: nowrap; }
  .pcg-pedido .pcg-acoes .pcg-btn{ min-width: 0; padding-inline: .9em; font-size: .8125rem; letter-spacing: .05em; }
}

/* ── Celular: conteudo centralizado (so < 900px; o desktop nao muda) ───────────────────────────────
   Fica a esquerda de proposito: cartoes do cardapio (precos em coluna), cartoes das lojas (endereco/telefone) e as abas (rolam). */
@media (max-aspect-ratio: 1 / 1) {
  /* abertura: sem o selo PCG; os 3 momentos centralizados. Os scrims do retrato ja sao de borda a borda (simetricos). */
  .pcg-hero__selo{ display: none; }
  .pcg-momento{ text-align: center; }
  .cine .pcg-momento{ align-items: center; text-align: center; }
  .pcg-hero__acento{ transform-origin: center; }
  .pcg-hero__sub{ margin-inline: auto; text-wrap: balance; }
  .pcg-hero__frase{ text-wrap: balance; }
  .pcg-momento .pcg-acoes{ justify-content: center; }
}

@media (max-width: 899.98px) {
  .pcg-burgers__cabeca, .pcg-unidades__titulo{ text-align: center; }
  .pcg-unidades__titulo p{ margin-inline: auto; text-wrap: balance; }
  .pcg-mais__cabeca{ justify-content: center; text-align: center; }
  .pcg-unidades__cabeca{ justify-content: center; }

  .pcg-burger__texto{ text-align: center; }
  .pcg-burger__ing{ margin-inline: auto; text-wrap: balance; }
  .pcg-burger__precos{ margin-inline: auto; }
  .pcg-burger__precos > div + div{ padding-left: 0; } /* centrado: o filete do meio e o eixo, as duas celulas iguais */
  .pcg-burger__combo{ margin-inline: auto; }

  /* o raio ficava em cima do fim do titulo centralizado: sobe para o canto, no respiro do topo */
  .pcg-pedido__icone{ top: 8px; right: 5%; width: 40px; }
  .pcg-pedido__miolo, .pcg-pedido__app{ text-align: center; }
  .pcg-pedido__texto, .pcg-pedido__nota{ margin-inline: auto; text-wrap: pretty; }
  .pcg-pedido .pcg-acoes{ justify-content: center; }

  .pcg-prova__grande, .pcg-prova__lista figure{ text-align: center; }
  .pcg-prova__grande blockquote p, .pcg-prova__lista blockquote p{ margin-inline: auto; text-wrap: balance; }
}

@media (max-width: 760px) { /* titulo longo quebra antes de passar por baixo do icone */
  .pcg-unidades__cabeca{ position: relative; }
  .pcg-mais .pcg-abre{ display: none; } /* ali o carimbo e a ilustracao da aba (.pcg-cardapio__ilu), que troca com a categoria */
  /* Home, lineup (PCGBUR-21): no pouso da abertura o titulo fica no topo da tela, como o resto do menu (cliente). O selo
     sai de cima dele e vira carimbo discreto pendurado sob o titulo, no canto esquerdo livre acima do pao (a direita e
     do desenho do slide). PCGBUR-27: o cabecalho ficou so com o titulo, e com bottom -10px o carimbo caia em cima do "O". */
  .pcg-burgers__cabeca{ position: relative; }
  .pcg-burgers{ padding-top: 24px; } /* o pouso alinha o topo da secao ao topo fixo: 64px vazios empurravam o Elvis */
  .pcg-burgers .pcg-abre{ top: calc(100% + 4px); right: auto; left: 0; bottom: auto; width: 52px; height: auto; rotate: -8deg; opacity: .7; pointer-events: none; }
}

/* Prova no celular: a plateia sobe para o topo (abre a secao com imagem) e as citacoes vem embaixo.
   PCGBUR-44 (13/11/2026, cliente: vao grande demais entre as lojas e o titulo): o topo da foto e preto ate ~45% da
   altura e so a faixa de fumaca aparecia ali. A foto sobe 40vw (o preto sai pela borda; a altura dela e ~100vw, 180% da
   largura) e o respiro cai de 260px para --plateia, em vw para o titulo ficar sempre logo abaixo das cabecas.
   A faixa de fumaca .pcg-fumaca--c nao mudou: continua na emenda, agora sobre o brilho da plateia. O veu nasce na cor
   das lojas (--fundo) e se dissolve: com o brilho encostado na borda, a emenda virava uma linha reta. */
@media (max-width: 760px) {
  .pcg-prova{ --plateia: 44vw; padding-top: var(--plateia); padding-bottom: var(--secao-y); }
  .pcg-prova__fundo img{ top: -40vw; bottom: auto; }
  .pcg-prova__fundo::after{
    background: linear-gradient(180deg, var(--fundo) 0, rgba(18, 15, 12, 0) 16vw, rgba(28, 24, 20, 0) 28vw, rgba(28, 24, 20, .92) var(--plateia), var(--superficie) calc(var(--plateia) + 60px), var(--superficie) 100%);
  }
}
/* titulo da prova: era rotulo pequeno acima da citacao; agora a nota e o proprio h2 */
.pcg-prova__cabeca{ margin-bottom: clamp(32px, 5vw, 56px); display: grid; gap: 14px; justify-items: center; text-align: center; }
.pcg-prova__cabeca p{ color: var(--texto-2); font-size: 1.1875rem; max-width: 46ch; }

/* FAQ da home (PCGBUR-32): o acordeao da /faq/ (theme.css) com as perguntas marcadas em inc/faq.php.
   PCGBUR-33: sem a foto. Desktop: titulo e, embaixo, a folha de tatuagem (os tracos da marca); perguntas e o link a
   direita. A folha e cenario: absoluta numa celula que so tem a altura que sobra, entao nao abre vao nem cresce quando
   uma pergunta abre. Celular: titulo com o carimbo, perguntas, link. */
.pcg-hfaq{
  max-width: calc(var(--largura) + 2 * var(--gutter)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px);
  grid-template-areas: "titulo lista" "arte lista" "arte mais"; grid-template-rows: auto 1fr auto; align-items: start;
}
.pcg-hfaq__titulo{ grid-area: titulo; }
.pcg-hfaq__lista{ grid-area: lista; }
.pcg-hfaq__mais{ grid-area: mais; margin-top: 28px; }
.pcg-hfaq__arte{ grid-area: arte; align-self: stretch; position: relative; }
.pcg-hfaq__flash{ position: absolute; top: clamp(20px, 3vw, 44px); left: 0; width: min(100%, 440px); aspect-ratio: 11 / 7; }
.pcg-hfaq__flash img{
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; max-width: none;
  rotate: var(--r, 0deg); pointer-events: none; user-select: none;
}
@media (max-width: 899.98px) {
  .pcg-hfaq{ grid-template-columns: minmax(0, 1fr); grid-template-areas: "titulo" "lista" "mais"; grid-template-rows: none; }
  .pcg-hfaq__arte, .pcg-hfaq > .pcg-solto{ display: none; }
  .pcg-hfaq__titulo{ margin-bottom: 32px; }
  .pcg-hfaq__titulo, .pcg-hfaq__mais{ text-align: center; }
  .pcg-hfaq__mais{ margin-top: 32px; }
}
@media (max-width: 760px) { /* carimbos na linha do titulo, um de cada lado (padrao .pcg-secao > .pcg-abre do theme.css) */
  .pcg-hfaq > .pcg-abre{ top: calc(var(--secao-y) - 4px); right: var(--gutter); }
  .pcg-hfaq > .pcg-abre--esq{ right: auto; left: var(--gutter); rotate: -10deg; }
  .pcg-hfaq__titulo{ padding-inline: 52px; }
}