/*
 * Tema PCG Burgers (PCGBUR-4). CSS unico do site, fonte comentado. Tokens (cor, fonte) em tokens.css.
 * pcg: CSS unico, embutir por pagina quando o PageSpeed reclamar (docs/padrao-tema.md §8).
 *
 * Origem: a home estatica de estatico/ (07/11/2026), portada em 08/11/2026. Classes pcg-*, BEM simples; nao mudaram
 * no port, com uma excecao: .pcg-btn--brasa virou .pcg-btn--ouro (a brasa saiu do sistema).
 * Layout padrao = empilhado (sem JS ou prefers-reduced-motion). Tudo o que e "cinema" da abertura mora em .cine.
 *
 * ── Utilitarios para as paginas internas (a Fase 2 usa estes, nao inventa outros) ─────────────────────────────
 *   Botoes      .pcg-btn + .pcg-btn--ouro (primario, dourado) | .pcg-btn--linha (secundario, contorno)
 *               + .pcg-btn--grande (CTA de destaque). Varios lado a lado: envolver em .pcg-acoes.
 *               Link de texto com sublinhado dourado: .pcg-link. PHP: pcg_botao( $texto, $url, $variante ).
 *   Titulo      .pcg-h2 (Anton, caixa alta). <span> dentro dele quebra linha e pinta de dourado.
 *               Sem eyebrow (regra 3): nada pequeno acima de titulo.
 *   Hero        get_template_part( 'template-parts/hero-pagina', null, array( 'titulo', 'destaque', 'texto', 'acoes', 'foto', 'icones' ) ):
 *               .pcg-pagina-hero e filhos __foto, __veu, __icones, __texto, __titulo, __sub, __acoes, __migalhas.
 *               Padrao UNICO (09/11/2026, o de Locations): foto propria da pagina em assets/img/heros/ (nunca repetir),
 *               veu escuro + grao, icones da marca discretos por cima, titulo centrado. Args no topo do PHP.
 *               Termina em imagem: a secao seguinte comeca com texto (regra 4). E com CONTEUDO: nunca outro titulo +
 *               descricao logo depois do hero (dele, 09/11/2026); o h2 dessa 1a secao fica .pcg-sr.
 *   Secao       .pcg-secao (respiro vertical + gutter + largura maxima). Modificadores: --superficie (fundo
 *               --superficie), --estreita (coluna de leitura de 46rem). Cabecalho: .pcg-secao__cabeca (h2 + p).
 *   Cartao      .pcg-cartao (superficie, linha, raio) com __midia (imagem 4:3), __corpo, __titulo, __texto.
 *               Grade de cartoes: .pcg-grade (auto-fill, min 260px).
 *   Abertura    <img class="pcg-abre">: ilustracao da marca, so no celular, como carimbo no canto superior direito da
 *               secao, FORA do fluxo (PCGBUR-23: icone empilhado em cima/embaixo do texto abria vao, cliente 11/11/2026).
 *               Sem faixa de foto de borda a borda (reprovada, 08/11/2026).
 *   Acessivel   .pcg-sr (so leitor de tela).
 *   Selos app   get_template_part( 'template-parts/rewards/selos' ): selos oficiais App Store / Google Play (.pcg-selos),
 *               URLs de pcg_app_urls(). Usado na Rewards e no "Get the app" da home.
 *
 * ── Alinhamento (pedido dele, 08/11/2026): o padrao e CENTRALIZADO, desktop e celular ──────────────────────
 *   Cabecalho de secao (titulo + texto de apoio + botao) sempre centrado, botao abaixo do texto. Nunca titulo de um
 *   lado e texto/botao do outro. Fica a esquerda so: corpo de texto longo (post, politica), formulario, listas de
 *   preco do cardapio, conteudo de cartao em grade, a timeline alternada e o CTA do post (burger ao lado).
 *   O hero de pagina (.pcg-pagina-hero) centra sempre.
 */

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-padding-top: calc(var(--topo-h) + 16px); color-scheme: dark; scrollbar-color: #4a3f33 var(--fundo); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html{ scroll-behavior: smooth; }
}
body{
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 1.0625rem/1.6 var(--f-texto);
  overflow-x: clip;
  caret-color: var(--ouro-vivo);
}
img{ max-width: 100%; display: block; }
a{ color: inherit; }
button, input, select, textarea{ font: inherit; } /* sem isso o botao cai no Arial do navegador (regra 2) */
/* toque: sem espera de duplo toque nos controles; destaque do toque em ouro discreto (o padrao azul/cinza nao e da marca) */
a, button{ touch-action: manipulation; -webkit-tap-highlight-color: rgba(202, 165, 95, .2); }
p{ margin: 0; }
h1, h2, h3{ margin: 0; font-weight: 400; text-wrap: balance; }
address{ font-style: normal; }
::selection{ background: var(--ouro); color: var(--fundo); }
:focus-visible{ outline: 2px solid var(--ouro-vivo); outline-offset: 3px; border-radius: 2px; }
/* so o scroll-padding do html: somado a um scroll-margin nas secoes, a ancora parava 160px abaixo do topo (medido) */

/* iframe (mapa): o :focus nao acende com o foco DENTRO dele; o theme.js poe a classe (PCGBUR-6) */
iframe.pcg-foco-iframe{ outline: 2px solid var(--ouro-vivo); outline-offset: -3px; } /* faixa que rola no celular: o painel recorta o anel de fora */
.pcg-sr{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pcg-pular{
  position: fixed; left: 16px; top: -100px; z-index: 100;
  background: var(--ouro); color: var(--fundo); padding: 12px 18px; font-weight: 700; text-decoration: none;
}
.pcg-pular:focus-visible{ top: 12px; }

/* ── Botoes e links ───────────────────────────────────────────────────── */
.pcg-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 1.4em;
  border-radius: var(--raio); border: 1px solid transparent;
  font: 900 .9375rem/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease);
}
.pcg-btn:active{ transform: scale(.97); }
.pcg-btn--ouro{ background: var(--ouro); color: var(--fundo); }
@media (hover: hover) { .pcg-btn--ouro:hover{ background: var(--ouro-vivo); }
}
.pcg-btn--linha{ border-color: rgba(247, 237, 218, .45); color: var(--texto); }
@media (hover: hover) { .pcg-btn--linha:hover{ border-color: var(--ouro); color: var(--ouro-vivo); }
}
.pcg-btn--grande{ min-height: 56px; padding: 0 2em; font-size: 1.0625rem; }
.pcg-acoes{ display: flex; flex-wrap: wrap; gap: 12px; }

.pcg-link{
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ouro); font-weight: 700; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 6px;
  transition: color .2s var(--ease), text-underline-offset .2s var(--ease);
}
@media (hover: hover) { .pcg-link:hover{ color: var(--ouro-vivo); text-underline-offset: 9px; }
}

/* Selos das lojas de app (template-parts/rewards/selos.php): Rewards e home. Alinhamento herda do pai. */
.pcg-selos{ display: grid; gap: 14px; justify-items: inherit; }
.pcg-selos__linha{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: inherit; }
.pcg-selos__link{ display: block; border-radius: 8px; transition: transform .25s var(--ease); }
.pcg-selos__link img{ display: block; height: 52px; width: auto; }
@media (hover: hover) { .pcg-selos__link:hover{ transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) { .pcg-selos__link{ transition: none; }
}
.pcg-selos__nota{ color: var(--texto-mudo); font-size: .9375rem; max-width: 40ch; }
.pcg-selos__nota .pcg-link{ min-height: 0; text-underline-offset: 4px; }

.pcg-h2{
  /* Anton e condensada e alta: entrelinha 1 (as caixas-altas nao se tocam) e tracking levemente aberto */
  font: 400 clamp(2.6rem, 6vw, 5rem)/1 var(--f-display);
  text-transform: uppercase; letter-spacing: .005em;
}
.pcg-h2 span{ display: block; color: var(--ouro); }


/* ── Topo ─────────────────────────────────────────────────────────────────
   Padrao Kingdom Sushi (ks-thema, KGS-68), com codigo proprio e sem jQuery:
   - desktop (>= 992px): logo, menu primary em linha e o botao "Order Online";
   - celular: barra fixa com logo, link "Menu" e botao "Order" sempre visiveis, mais o icone que abre a gaveta
     (#pcg-nav) com o resto do menu, o "Order Online" e as redes. A mesma <nav> e o menu do desktop e a gaveta.
   Gaveta fechada sai do Tab por visibility (CSS); foco preso, Esc e aria-expanded moram no theme.js. */
/* Logado no WP: o topo fixo desce para baixo da barra do admin (32px; 46px ate 782px, medida do core). */
body.admin-bar{ --wp-bar: 32px; }
@media (max-width: 782px) { body.admin-bar{ --wp-bar: 46px; }
}
.pcg-topo{
  position: fixed; inset: var(--wp-bar, 0px) 0 auto; z-index: 50; height: calc(var(--topo-h) + env(safe-area-inset-top));
  display: flex; align-items: center; gap: clamp(12px, 2.2vw, 32px);
  padding: env(safe-area-inset-top) var(--gutter) 0;
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
/* fundo solido, sem backdrop-filter: o blur sobre o canvas que repinta e caro no celular */
.pcg-topo.rolou{ background: rgba(18, 15, 12, .94); border-color: var(--linha); }
.pcg-topo__marca{ margin-right: auto; display: flex; align-items: center; min-height: 44px; padding: 6px 0; flex: none; }
.pcg-topo__marca img{ height: 34px; width: auto; }
.pcg-topo__cta{ min-height: 44px; flex: none; }

/* lista do menu (wp_nav_menu ou fallback): no desktop, em linha */
.pcg-nav__lista{ list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(10px, 1.6vw, 26px); }
.pcg-nav__lista a{
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; font: 700 .9375rem/1 var(--f-texto); letter-spacing: .02em; color: var(--texto-2);
  transition: color .2s var(--ease);
}
/* pagina atual: barra dourada sob o item (o WP poe aria-current="page" no link) */
.pcg-nav__lista a::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--ouro);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.pcg-nav__lista a[aria-current="page"]{ color: var(--texto); }
.pcg-nav__lista a[aria-current="page"]::after{ transform: scaleX(1); }
@media (hover: hover) { .pcg-nav__lista a:hover{ color: var(--ouro-vivo); } .pcg-nav__lista a:hover::after{ transform: scaleX(1); }
}
.pcg-nav__cabeca, .pcg-nav__extra, .pcg-topo__acoes, .pcg-topo__abrir{ display: none; }

/* botao-icone do topo e da gaveta: 44px, contorno discreto */
.pcg-topo__abrir, .pcg-nav__fechar{
  width: 44px; height: 44px; place-items: center; flex: none; padding: 0;
  background: none; border: 1px solid var(--linha); border-radius: var(--raio); color: var(--texto); cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
@media (hover: hover) { .pcg-topo__abrir:hover, .pcg-nav__fechar:hover{ border-color: var(--ouro); color: var(--ouro-vivo); }
}

@media (max-width: 991.98px) {
  .pcg-topo{ gap: 10px; }
  .pcg-topo__marca img{ height: 28px; }
  .pcg-topo__cta{ display: none; }
  .pcg-topo__abrir{ display: grid; }
  /* "Menu" (link simples) + "Order" (botao dourado pequeno), sempre visiveis */
  .pcg-topo__acoes{ display: flex; align-items: center; gap: 4px; }
  .pcg-topo__link{
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
    font: 900 .8125rem/1 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--texto);
  }
  .pcg-topo__acoes .pcg-btn{ min-height: 44px; padding: 0 14px; font-size: .8125rem; }

  /* Gaveta: tela cheia, entra pela direita. Fechada = visibility hidden (fora do Tab e da arvore de acessibilidade). */
  .pcg-nav{
    position: fixed; inset: var(--wp-bar, 0px) 0 0; z-index: 60;
    display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
    padding: env(safe-area-inset-top) var(--gutter) calc(32px + env(safe-area-inset-bottom));
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(202, 165, 95, .12), transparent 60%),
      var(--fundo);
    visibility: hidden; opacity: 0; transform: translate3d(24px, 0, 0);
    transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s .4s;
  }
  .pcg-nav.aberta{ visibility: visible; opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s; }
  .pcg-nav__cabeca{
    display: flex; align-items: center; justify-content: space-between; flex: none;
    height: var(--topo-h); border-bottom: 1px solid var(--linha);
  }
  .pcg-nav__cabeca img{ height: 28px; width: auto; }
  .pcg-nav__fechar{ display: grid; }
  .pcg-nav__lista{ flex-direction: column; gap: 0; padding: 12px 0 8px; }
  .pcg-nav__lista a{
    width: 100%; min-height: 60px; border-bottom: 1px solid var(--linha);
    font: 400 2.125rem/1 var(--f-display); letter-spacing: .015em; text-transform: uppercase; color: var(--texto);
  }
  .pcg-nav__lista a::after{ left: auto; right: 0; top: 50%; bottom: auto; width: 10px; height: 10px; border-radius: 50%; transform: translateY(-50%) scale(0); }
  .pcg-nav__lista a[aria-current="page"]{ color: var(--ouro-vivo); }
  .pcg-nav__lista a[aria-current="page"]::after{ transform: translateY(-50%) scale(1); }
  .pcg-nav__extra{ display: grid; gap: 28px; padding-top: 28px; }
  .pcg-nav__extra .pcg-btn{ width: 100%; }
  .pcg-nav__redes{ list-style: none; margin: 0 0 0 -11px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
  /* icones como no rodape (PCGBUR-6): alvo de 44px, nome no aria-label */
  .pcg-nav__redes a{ display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-weight: 700; color: var(--texto-2); text-decoration: none; }
  @media (hover: hover){ .pcg-nav__redes a:hover { color: var(--ouro-vivo); } }
  /* gaveta aberta: a pagina atras nao rola */
  html.menu-aberto{ overflow: hidden; }
}
@media (max-width: 380px) {
  .pcg-topo__link{ padding: 0 6px; }
  .pcg-topo__acoes .pcg-btn{ padding: 0 10px; }
}

/* Paginas internas: o conteudo comeca abaixo do topo fixo (a home tem a abertura de tela cheia, que ja conta com ele) */
body:not(.pcg-home) #pcg-main{ padding-top: var(--topo-h); }

/* Celular (retrato): frames 720x960 ja recortados; texto em cima (02) ou embaixo (01, 03) com scrim forte */
@media (max-aspect-ratio: 1 / 1) {
  /* tela baixa em pe (iPhone SE com as barras do Safari, ~550px): sem o selo o burger ganha 86px de vao (PCGBUR-26) */
  @media (max-height: 620px){
    .cine .pcg-momento--3 { --selo3: 0px; }
    .cine .pcg-momento__selo { display: none; }
  }
}

/* ── Secoes ───────────────────────────────────────────────────────────── */
main{ overflow-x: clip; }
/* rodape: sem z-index (criaria contexto e o selo com lighten mostraria o quadrado preto); o solto vem antes no DOM */
.pcg-rodape__grade, .pcg-rodape__fim{ position: relative; }

/* Elementos soltos: ingredientes e icones nas margens, 3 profundidades. O GSAP move y/rotacao na rolagem;
   blur so nas pontas (fundo e perto) para dar profundidade de campo. Nunca atras de paragrafo. */
.pcg-solto{
  position: absolute; z-index: 1; left: var(--x); top: var(--y); width: var(--w); height: auto;
  rotate: var(--r, 0deg); pointer-events: none; user-select: none; margin: 0; max-width: none;
}
.pcg-solto--fundo{ filter: blur(2.5px); opacity: .5; }
.pcg-solto--perto{ filter: blur(1.2px) drop-shadow(0 22px 24px rgba(0, 0, 0, .55)); }
@media (max-width: 760px) {
  .pcg-solto--so-desk{ display: none; }
  .pcg-solto{ width: calc(var(--w) * .55); left: min(var(--x), calc(100% - var(--w) * .4)); }
}
/* combo: um degrau abaixo do quadro, com o traco das fritas da marca no lugar do rotulo */
/* Cupom do combo (PCGBUR-25): borda tracejada de cupom, preco grande em Anton. Hero do /menu/ e lineup da home.
   --combo-acento = cor da borda e do preco (ouro; creme sobre as cores claras do lineup no celular). */
.pcg-combo{
  --combo-acento: var(--ouro);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 14px;
  width: fit-content; max-width: 100%; padding: 12px 18px 12px 14px; text-align: left;
  border: 2px dashed var(--combo-acento); border-radius: var(--raio);
  background: color-mix(in srgb, var(--ouro) 12%, rgba(18, 15, 12, .55));
}
.pcg-combo__ico{ grid-row: 1 / span 2; width: 34px; height: auto; }
.pcg-combo__nome{ font: 400 1.5rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; color: var(--texto); }
.pcg-combo__desc{ grid-column: 2; font-size: .875rem; line-height: 1.35; color: var(--texto-2); max-width: 30ch; }
.pcg-combo__preco{
  grid-column: 3; grid-row: 1 / span 2; padding-left: 14px; border-left: 1px solid color-mix(in srgb, var(--combo-acento) 45%, transparent);
  font: 400 2.5rem/1 var(--f-display); color: var(--combo-acento); font-variant-numeric: tabular-nums lining-nums;
} /* fecho do bloco: o link do cardapio inteiro, embaixo dos precos e do combo (PCGBUR-27) */
.pcg-combo--hero{ margin: 8px auto 4px; }
@media (max-width: 760px) {
  .pcg-combo{ gap: 2px 12px; padding: 10px 14px 10px 12px; }
  .pcg-combo__ico{ width: 28px; }
  .pcg-combo__nome{ font-size: 1.25rem; }
  .pcg-combo__desc{ font-size: .8125rem; }
  .pcg-combo__preco{ font-size: 2rem; padding-left: 12px; }
}

/* Rodape (refeito 08/11/2026): blocos no padrao Kingdom, cada um um menu (rodape-1..4).
   marca (selo, frase, redes, selos do app) | About us | Quick access | Order | Contact (sempre por ultimo).
   >=1100: 5 colunas. 900-1099: marca em faixa (selo+frase a esquerda, redes+app a direita) e 4 blocos.
   <900: centrado, blocos 2 por linha. Fim: desktop credito | legais | copyright (row-reverse); celular copyright primeiro.
   O e-mail nunca quebra (ele, PCGBUR-39): os blocos nao ficam mais estreitos que o proprio texto (max-content) e o
   Contact cresce tirando dos outros; a 1100 sobram ~58px. Rotulo de menu bem mais longo pede descer o corte de 1100. */
.pcg-rodape{ position: relative; overflow-x: clip; padding: clamp(40px, 5vw, 64px) var(--gutter) calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); color: var(--texto-2); }
.pcg-rodape__grade{
  max-width: var(--largura); margin-inline: auto;
  display: grid; grid-template-columns: minmax(300px, 1.6fr) repeat(4, minmax(max-content, 1fr)); gap: 32px 40px; align-items: start;
}
.pcg-rodape__marca{ display: grid; justify-items: start; align-content: start; gap: 12px; }
.pcg-rodape__marca img{ width: 80px; height: auto; mix-blend-mode: lighten; } /* fundo preto do selo some no --fundo */
.pcg-rodape__frase{ margin: 0; max-width: 30ch; color: var(--texto-2); text-wrap: pretty; }
.pcg-rodape__redes{ list-style: none; margin: 6px 0 0 -11px; padding: 0; display: flex; gap: 4px; } /* no fim do bloco Contact; -11px alinha o icone ao texto */
.pcg-rodape__redes a{ justify-content: center; width: 44px; color: var(--texto); }
/* selos do app: desenho proprio (contorno dourado, icone de traco, rotulo em duas linhas), nao o selo oficial */
.pcg-rodape__apps{ list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pcg-rodape .pcg-rodape__app{
  gap: 10px; min-height: 48px; padding: 6px 14px 6px 12px;
  border: 1px solid var(--ouro); border-radius: var(--raio); color: var(--texto);
  font: 700 1rem/1.1 var(--f-texto); white-space: nowrap;
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.pcg-rodape__app svg{ flex: none; color: var(--ouro); }
.pcg-rodape__app span{ display: grid; }
.pcg-rodape__app small{ font-size: .6875rem; font-weight: 400; letter-spacing: .02em; color: var(--texto-2); }
.pcg-rodape__h{ font: 900 .8125rem/1.4 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); margin: 0 0 6px; }
.pcg-rodape a:not(.pcg-btn){ text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.pcg-rodape__lista a{ min-width: 44px; }
.pcg-rodape a:focus-visible{ outline: 2px solid var(--ouro-vivo); outline-offset: 2px; }
@media (hover: hover) {
  .pcg-rodape__lista a:hover, .pcg-rodape__legal a:hover{ color: var(--ouro-vivo); text-decoration: underline; text-underline-offset: 4px; }
  .pcg-rodape__redes a:hover{ color: var(--ouro-vivo); }
  .pcg-rodape .pcg-rodape__app:hover{ border-color: var(--ouro-vivo); background-color: rgba(202, 165, 95, .08); }
  .pcg-rodape__fim a:hover{ color: var(--texto); }
}
.pcg-rodape__lista{ list-style: none; margin: 0; padding: 0; }
.pcg-rodape__lista a[href^="mailto:"]{ white-space: nowrap; }
.pcg-rodape__fim{
  max-width: var(--largura); margin: 32px auto 0; padding-top: 12px; border-top: 1px solid var(--linha);
  font-size: .875rem; color: var(--texto-mudo);
  display: flex; flex-wrap: wrap; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 0 24px;
}
.pcg-rodape__fim p{ margin: 0; }
.pcg-rodape__fim p a{ color: inherit; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding-block: 12px; margin-block: -12px; }
.pcg-rodape__legal{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 20px; }
.pcg-rodape__legal a{ min-width: 44px; justify-content: center; color: var(--texto-2); }

/* ── Responsivo ───────────────────────────────────────────────────────── */
@media (max-width: 1099.98px) {
  .pcg-rodape__grade{ grid-template-columns: repeat(4, minmax(max-content, 1fr)); }
  .pcg-rodape__marca{ grid-column: 1 / -1; grid-template-columns: 80px minmax(0, 30ch) 1fr; align-items: center; column-gap: 20px; }
  .pcg-rodape__marca img{ grid-row: span 2; }
  .pcg-rodape__frase{ grid-column: 2; grid-row: span 2; }
  .pcg-rodape__apps{ grid-column: 3; justify-self: end; margin: 0; }
}
@media (max-width: 480px) {
  .pcg-acoes .pcg-btn{ flex: 1 1 auto; }
}

/* Pause/Play do que gira sozinho (2.2.2, PCGBUR-6): criado pelo theme.js em [data-pcg-movimento]. Fica embaixo do
   carrossel, no estilo das setas (so o icone dourado): por cima, cobria a arte da promocao (ele, PCGBUR-49). 32px > alvo minimo de 24. */
.pcg-pausa{
  display: grid; place-items: center; width: 32px; height: 32px; margin: 12px auto 0; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%; background: none; color: var(--ouro);
}
@media (hover: hover) { .pcg-pausa:hover{ color: var(--ouro-vivo); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after{ transition-duration: .01ms !important; animation: none !important; }
}
@media (max-width: 899.98px) {
  .pcg-h2{ text-align: center; text-wrap: balance; }

  /* celular: About | Quick | Order numa linha so (3 links cada); Contact, o ultimo, na linha inteira (o e-mail nao cabe em 1/3) */
  .pcg-rodape__grade{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; text-align: center; }
  .pcg-rodape__h{ letter-spacing: .06em; }
  .pcg-rodape__marca{ margin-bottom: 12px; }
  .pcg-rodape__legal{ column-gap: 12px; }
  .pcg-rodape__marca{ grid-template-columns: none; justify-items: center; }
  .pcg-rodape__marca img, .pcg-rodape__frase{ grid-row: auto; grid-column: auto; }
  .pcg-rodape__apps{ grid-column: auto; justify-self: center; justify-content: center; }
  .pcg-rodape__redes{ justify-content: center; margin-left: 0; }
  /* Contact (ultimo) ocupa a linha inteira: o e-mail nao cabe em meia coluna a 390 */
  .pcg-rodape__bloco:last-child{ grid-column: 1 / -1; }
  .pcg-rodape__bloco:last-child .pcg-rodape__lista{ display: flex; flex-wrap: wrap; justify-content: center; column-gap: 24px; }
  .pcg-rodape__fim{ flex-direction: column; align-items: center; text-align: center; padding-top: 8px; }
}

/* ── Regra 4 na home (08/11/2026): emendas do celular ──────────────────────────────────────────────────────
   A 390px a emenda entre secoes nunca e imagem→imagem nem texto→texto. Ordem resultante no celular:
   abertura (img) → lineup (txt … txt) → mais (txt … txt)
   → pedido (foto … txt) → unidades (txt … txt) → prova (plateia img … txt) → faq (txt … txt; a foto saiu na PCGBUR-33, ficaram carimbos dos dois lados do titulo)
   Desde o PCGBUR-23 (11/11/2026) a ilustracao .pcg-abre e carimbo de canto fora do fluxo e nao conta como imagem na
   emenda: o cliente preferiu perder o separador a ter icone abrindo vao entre os textos.
   → rodape (selo img … txt). Mexeu numa secao? Refazer a conta e conferir por print. */

/* Ilustracao da marca na abertura da secao, so no celular. Substituiu os interludios de foto e a foto dos donos (pedido
   dele, 08/11/2026). Desde o PCGBUR-23 (11/11/2026) e carimbo no canto superior direito, fora do fluxo: empilhada acima
   do titulo ela abria um vao de ~150px. Fica na linha do titulo, a direita (o titulo longo ganha recuo para nao passar por baixo).
   Uso: <img class="pcg-abre" ... alt="" aria-hidden="true">. */
.pcg-abre{ display: none; }
@media (max-width: 760px) {
  .pcg-abre{ display: block; position: absolute; top: 0; right: 0; width: auto; height: 48px; margin: 0; rotate: 8deg; opacity: .85; pointer-events: none; }
  /* na linha do titulo, nao no respiro de cima: solto no topo parecia icone que "so foi para o lado" (cliente, 11/11) */
  .pcg-secao > .pcg-abre{ top: calc(var(--secao-y) - 4px); right: var(--gutter); }
  .pcg-secao:has(> .pcg-abre) h2.pcg-h2{ padding-inline: 52px; } /* titulo longo quebra antes de passar por baixo do icone */
  .pcg-lk__secao{ position: relative; }
  /* Links: o titulo tem filetes dos dois lados; eles encurtam 52px e o icone ocupa o fim da linha */
  .pcg-lk__secao > .pcg-abre{ top: -6px; height: 40px; }
  .pcg-lk__secao:has(> .pcg-abre) > .pcg-lk__h{ padding-inline: 52px; }
}

/* Manifesto: a foto dos donos nao entra aqui (fica no pedido); o palco segue como fundo. */

/* ── Utilitarios das paginas internas ─────────────────────────────────────────────────────────────────── */
.pcg-secao{ position: relative; padding: var(--secao-y) max(var(--gutter), (100% - var(--largura)) / 2); }
.pcg-secao--superficie{ background: var(--superficie); }
.pcg-secao--estreita > *{ max-width: 46rem; }
.pcg-secao__cabeca{ display: grid; gap: 20px; justify-items: center; text-align: center; max-width: 44rem; margin: 0 auto clamp(28px, 4vw, 48px); }
.pcg-secao__cabeca p{ color: var(--texto-2); font-size: 1.1875rem; max-width: 46ch; text-wrap: balance; }
.pcg-secao p + p{ margin-top: 1em; }

/* Hero de pagina interna (09/11/2026, pedido dele): UM padrao, no modelo do hero de Locations. Camadas, de tras pra
   frente: __foto (a foto propria da pagina, tom quente) → __veu (gradiente escuro + vinheta atras do texto + grao) →
   __icones (traco dourado da marca, discreto, por cima da foto) → __texto (centrado). Sem objeto embaixo do titulo.
   Contraste: o veu deixa o fundo atras do texto <= luminancia .05 (titulo, dourado e sub >= 4.5:1, medido por pixel).
   Celular: baixo (texto + 1 botao), termina em imagem: a secao seguinte comeca com texto (regra 4). */
.pcg-pagina-hero{
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; place-items: center; text-align: center;
  min-height: clamp(360px, 44vh, 520px);
  padding: clamp(56px, 6vw, 96px) max(var(--gutter), (100% - var(--largura)) / 2);
  background: var(--fundo);
}
.pcg-pagina-hero__foto{ position: absolute; inset: 0; z-index: -3; margin: 0; }
.pcg-pagina-hero__foto img{
  width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 50%);
  filter: sepia(.2) saturate(.92) brightness(.9);
}
.pcg-pagina-hero__veu{ position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 64% at 50% 52%, rgb(18 15 12 / .74), rgb(18 15 12 / .42) 62%, transparent),
    linear-gradient(180deg, rgb(18 15 12 / .52) 0%, rgb(18 15 12 / .46) 50%, rgb(18 15 12 / .86) 90%, var(--fundo) 100%);
}
.pcg-pagina-hero__veu::after{ /* grao de filme: estatico, sem animacao */
  content: ""; position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.pcg-pagina-hero__icones{ position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pcg-pagina-hero__icones img{ position: absolute; height: auto; opacity: .2; }
.pcg-pagina-hero__icones img:nth-child(1){ left: 5%;  top: 16%;    width: clamp(64px, 8vw, 128px); rotate: -12deg; }
.pcg-pagina-hero__icones img:nth-child(2){ right: 6%; bottom: 14%; width: clamp(72px, 9vw, 140px); rotate: 10deg; }
.pcg-pagina-hero__icones img:nth-child(3){ right: 15%; top: 12%;   width: clamp(28px, 3.4vw, 56px); rotate: 8deg; }
.pcg-pagina-hero__icones img:nth-child(4){ left: 15%; bottom: 12%; width: clamp(28px, 3.4vw, 56px); rotate: -6deg; }
.pcg-pagina-hero__texto{ position: relative; display: grid; gap: 18px; justify-items: center; max-width: 54rem; }
.pcg-pagina-hero__titulo{
  font: 400 clamp(2.75rem, 6vw, 5.5rem)/.95 var(--f-display); text-transform: uppercase; letter-spacing: .005em;
  text-wrap: balance; text-shadow: 0 2px 24px rgb(18 15 12 / .6);
}
.pcg-pagina-hero__titulo span{ display: block; color: var(--ouro-vivo); } /* sobre foto: o dourado claro (o --ouro pedia veu mais pesado p/ 4.5:1) */
.pcg-pagina-hero__sub{ color: var(--texto); font-size: clamp(1.0625rem, 1.4vw, 1.25rem); max-width: 46ch; text-wrap: balance; }
.pcg-pagina-hero__acoes{ justify-content: center; margin-top: 6px; }
.pcg-pagina-hero__migalhas ol{ display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
.pcg-pagina-hero__migalhas li + li::before{ content: "/"; margin-right: 10px; color: var(--texto-2); }
.pcg-pagina-hero__migalhas a{ color: var(--texto); text-underline-offset: 4px; }
.pcg-pagina-hero__migalhas a:hover{ color: var(--ouro-vivo); }
.pcg-pagina-hero__migalhas [aria-current]{ color: var(--ouro-vivo); }
@media (max-width: 767.98px) {
  .pcg-pagina-hero{ min-height: 248px; padding: 40px var(--gutter) 44px; }
  .pcg-pagina-hero__veu{ background:
    radial-gradient(ellipse 80% 62% at 50% 50%, rgb(18 15 12 / .74), rgb(18 15 12 / .46) 70%, transparent),
    linear-gradient(180deg, rgb(18 15 12 / .5) 0%, rgb(18 15 12 / .5) 60%, rgb(18 15 12 / .86) 92%, var(--fundo) 100%); }
  .pcg-pagina-hero__texto{ gap: 14px; }
  .pcg-pagina-hero__titulo{ font-size: clamp(2.5rem, 11vw, 3.25rem); }
  .pcg-pagina-hero__sub{ font-size: 1rem; }
  .pcg-pagina-hero__acoes > :not(:first-child){ display: none; } /* 1 botao so: o resto ja esta no topo fixo */
  .pcg-pagina-hero__icones img{ opacity: .16; }
  .pcg-pagina-hero__icones img:nth-child(1){ left: -10px; top: 8px; width: 64px; }
  .pcg-pagina-hero__icones img:nth-child(2){ right: -8px; bottom: 6px; width: 68px; }
  .pcg-pagina-hero__icones img:nth-child(3){ right: 10px; top: 14px; width: 26px; }
  .pcg-pagina-hero__icones img:nth-child(4){ display: none; }
}

/* Cartao: superficie, linha fina e raio pequeno. Midia opcional em 4:3. Nunca cartao dentro de cartao. */
.pcg-cartao{
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
}
.pcg-cartao__midia{ margin: 0; }
.pcg-cartao__midia img{ width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.pcg-cartao__corpo{ flex: 1; display: grid; align-content: start; gap: 12px; padding: 24px; }
.pcg-cartao__titulo{ font: 400 clamp(1.5rem, 2vw, 1.875rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: .015em; }
.pcg-cartao__texto{ color: var(--texto-2); }
.pcg-cartao__corpo > .pcg-btn, .pcg-cartao__corpo > .pcg-link{ justify-self: start; margin-top: 4px; }
.pcg-grade{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: clamp(16px, 2vw, 28px); }

/* Pagina generica (page.php): conteudo do editor numa coluna de leitura */
.pcg-conteudo{ max-width: 46rem; }
.pcg-conteudo > * + *{ margin-top: 1em; }
.pcg-conteudo h2, .pcg-conteudo h3{ margin-top: 1.6em; font-family: var(--f-display); text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.pcg-conteudo h2{ font-size: clamp(2rem, 3.6vw, 2.75rem); }
.pcg-conteudo h3{ font-size: 1.625rem; }
.pcg-conteudo a{ color: var(--ouro); text-underline-offset: 4px; }
.pcg-conteudo ul, .pcg-conteudo ol{ padding-left: 1.2em; }

/* ── Lightbox (<dialog> de template-parts/gallery/lightbox.php + assets/js/lightbox.js): /gallery/ e /menu/ ────────────── */
.pcg-lb{
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(18, 15, 12, .96); color: var(--texto); overflow: hidden;
}
.pcg-lb:not([open]){ display: none; }
.pcg-lb::backdrop{ background: rgba(0, 0, 0, .8); }
.pcg-lb__caixa{ position: relative; height: 100%; display: grid; place-items: center; padding: 64px 16px 16px; }
.pcg-lb__fig{ margin: 0; display: grid; gap: 16px; justify-items: center; max-width: min(100%, 1100px); max-height: 100%; min-height: 0; }
.pcg-lb__img{ width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 240px); object-fit: contain; border-radius: var(--raio); }
.pcg-lb__leg{ text-align: center; display: grid; gap: 6px; max-width: 40rem; }
.pcg-lb__titulo{ font: 400 clamp(1.5rem, 4vw, 2.25rem)/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: var(--ouro); }
.pcg-lb__desc{ color: var(--texto-2); font-size: .9375rem; line-height: 1.5; }
.pcg-lb__cont{ color: var(--texto-mudo); font-size: .8125rem; letter-spacing: .08em; }
.pcg-lb__fechar, .pcg-lb__seta{
  position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; cursor: pointer;
  background: rgba(28, 24, 20, .85); color: var(--texto); border: 1px solid var(--linha); border-radius: 50%;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.pcg-lb__seta[hidden]{ display: none; }
.pcg-lb__fechar{ top: 12px; right: 12px; }
.pcg-lb__seta{ top: 50%; translate: 0 -50%; }
.pcg-lb__seta--ant{ left: 12px; }
.pcg-lb__seta--prox{ right: 12px; }
@media (hover: hover) { .pcg-lb__fechar:hover, .pcg-lb__seta:hover{ border-color: var(--ouro); color: var(--ouro-vivo); }
}
@media (max-width: 767.98px) {
  /* setas viram barra embaixo: nao cobrem a foto */
  .pcg-lb__caixa{ padding-bottom: 80px; }
  .pcg-lb__seta{ top: auto; bottom: 16px; translate: none; }
  .pcg-lb__img{ max-height: calc(100dvh - 260px); }
}
html:has(.pcg-lb[open]){ overflow: hidden; }
.pcg-lb__img{ opacity: 0; transition: opacity .25s var(--ease); }
.pcg-lb__img.is-pronta{ opacity: 1; }
.pcg-lb{ overscroll-behavior: contain; }

/* ── Acordeao de perguntas (/faq/ e home, PCGBUR-32): <details> nativo, o "+" vira "-" ao abrir ─────────────── */
.pcg-faq__lista { border-top: 1px solid var(--linha); }

.pcg-faq__item { border-bottom: 1px solid var(--linha); }
.pcg-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 64px; padding: 18px 0; cursor: pointer; list-style: none;
}
.pcg-faq__item summary::-webkit-details-marker { display: none; }
.pcg-faq__item h3 { font: 700 clamp(1.0625rem, 1.4vw, 1.25rem)/1.35 var(--f-texto); color: var(--texto); text-wrap: pretty; transition: color .2s var(--ease); }
/* "+" desenhado com duas barras; a vertical some ao abrir */
.pcg-faq__item summary::after {
  content: ""; flex: none; width: 16px; height: 16px;
  background: linear-gradient(var(--ouro), var(--ouro)) center / 100% 2px no-repeat, linear-gradient(var(--ouro), var(--ouro)) center / 2px 100% no-repeat;
  transition: background-size .3s var(--ease), rotate .3s var(--ease);
}
.pcg-faq__item[open] summary::after { background-size: 100% 2px, 2px 0; rotate: 180deg; }
@media (hover: hover) { .pcg-faq__item summary:hover h3 { color: var(--ouro-vivo); } }
.pcg-faq__item summary:focus-visible { outline-offset: 4px; }

.pcg-faq__item p { color: var(--texto-2); max-width: 62ch; padding: 0 40px 24px 0; text-wrap: pretty; }
.pcg-faq__item p a { color: var(--ouro-vivo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
@media (hover: hover) { .pcg-faq__item p a:hover { color: var(--texto); } }
@media (prefers-reduced-motion: no-preference) {
  .pcg-faq__item[open] p { animation: pcg-faq-abre .35s var(--ease); }
}
@keyframes pcg-faq-abre { from { opacity: 0; translate: 0 -6px; } }
@media (max-width: 899.98px) { .pcg-faq__item p { padding-right: 0; } }