/* ==========================================================================
   Casa Brasa - MG Web
   Tokens da marca: paleta e tipografia.

   Este arquivo é a fonte única das duas páginas do projeto - o site
   (index.html) e o manual de identidade (marca/index.html). Se uma cor
   mudar aqui, muda nos dois. Layout não entra neste arquivo.

   Todos os pares de contraste anotados abaixo foram medidos (WCAG 2.1,
   luminância relativa). Os que reprovam estão anotados junto com a
   variante que resolve - é por isso que existem --brasa-clr, --brasa-esc
   e --cinza-ink em vez de uma cor só por papel.
   ========================================================================== */

:root{

  /* ---------- superfícies ---------- */
  --carvao:#141210;      /* fundo escuro. Não é preto puro: puxa para o marrom
                            para conversar com a brasa e com o pão. */
  --carvao-2:#1D1A17;    /* segunda superfície escura (cartão sobre carvão) */
  --creme:#F1EBE1;       /* fundo claro */
  --creme-2:#E5DCCD;     /* superfície clara secundária */

  /* ---------- cor de marca ---------- */
  --brasa:#C8441C;       /* a cor da marca. Área grande, chapéu de seção,
                            fundo de botão, texto grande.
                            Sobre carvão .... 3.80:1 → só ≥24px ou ≥18.66px bold
                            Sobre creme .... 4.12:1 → só ≥24px ou ≥18.66px bold
                            Para texto pequeno use as duas variantes abaixo. */
  --brasa-clr:#E46A3C;   /* a brasa legível em texto pequeno SOBRE ESCURO
                            Sobre carvão .... 5.68:1  AA */
  --brasa-esc:#9B3313;   /* a brasa legível em texto pequeno SOBRE CLARO
                            Sobre creme ..... 6.16:1  AA */

  /* ---------- texto ---------- */
  --cinza:#8C857B;       /* secundário sobre escuro - 5.09:1 sobre carvão  AA */
  --cinza-ink:#665F55;   /* secundário sobre claro
                            Sobre creme ..... 5.35:1  AA
                            Sobre creme-2 ... 4.67:1  AA
                            (o #6B6459 testado antes dava 4.33:1 sobre
                             creme-2 e reprovava - daí o tom mais fechado) */
  --branco:#FFFFFF;      /* texto sobre brasa. Sobre --brasa dá 4.88:1 (AA).
                            Creme sobre brasa dá 4.12:1 e REPROVA: botão de
                            brasa leva branco puro, nunca creme. */

  /* ---------- fios ---------- */
  --fio-claro:rgba(20,18,16,.14);
  --fio-escuro:rgba(241,235,225,.16);

  /* ---------- tipografia ----------
     Uma família só, Archivo variável, usada nos dois extremos do eixo de
     largura: display condensado e pesado (cartaz de chapa), texto em
     largura normal. Os outros projetos da casa pareiam serifa + sans;
     aqui a tensão vem da largura, não do contraste de famílias. */
  --fonte:"Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --wd-display:78;       /* eixo wdth do display  (condensado) */
  --wd-texto:100;        /* eixo wdth do texto    (normal) */

  --fs-mega:clamp(58px,10.5vw,168px);   /* capa do manual, hero do site */
  --fs-h1:clamp(38px,5.6vw,88px);
  --fs-h2:clamp(28px,3.4vw,52px);       /* rótulo de capítulo / seção */
  --fs-h3:clamp(21px,1.9vw,28px);
  --fs-lead:clamp(16.5px,.6vw + 14px,19px);
  --fs-body:16px;
  --fs-ui:15px;
  --fs-meta:12.5px;
  --fs-rotulo:11.5px;                   /* eyebrow / número de capítulo */

  /* ---------- ritmo ----------
     --sect é a distância TOTAL entre dois blocos numa troca de fundo: cada
     seção vizinha entra com --sect-side (metade). Mesma convenção do
     Lucas Barber; sem ela os paddings se somam. */
  --sp-title:clamp(18px,2vw,30px);
  --sp-block:clamp(44px,5vw,72px);
  --sect:clamp(92px,8.6vw,140px);
  --sect-side:calc(var(--sect) / 2);
  --sect-in:clamp(68px,6.6vw,100px);

  --pad:clamp(20px,5.2vw,84px);
  --max:1480px;
  --measure:46ch;

  --e:cubic-bezier(.22,.61,.36,1);
  --e-img:cubic-bezier(.33,.02,.16,1);
}

/* ==========================================================================
   Casa Brasa - MG Web
   Layout do site. A paleta e a tipografia vivem em css/tokens.css, que é
   compartilhado com o manual da marca (marca/index.html).

   O site é o sistema do manual em uso: o padrão do papel vira a faixa que
   corre embaixo do hero, o cardápio é a mesma peça de chapéu de brasa, o
   avatar (símbolo em círculo de brasa) vira o selo, e o capítulo de redes
   sociais dá as peças de tipo que entram no meio das fotos da galeria.

   Regra de superfície que atravessa o arquivo inteiro: cor de marca em texto
   pequeno nunca é --brasa. Sobre escuro usa --brasa-clr, sobre claro usa
   --brasa-esc. --brasa só aparece em área grande ou em display ≥24px.
   Sobre brasa, texto é branco puro (creme reprova em AA).
   ========================================================================== */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--creme);
  color:var(--carvao);
  font-family:var(--fonte);
  font-size:var(--fs-body);
  font-variation-settings:"wdth" var(--wd-texto),"wght" 400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.02;text-wrap:balance}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
figure{margin:0}
:focus-visible{outline:2px solid var(--brasa);outline-offset:3px}
/* O header é fixo: sem esta margem a âncora encosta o título embaixo dele. */
section[id]{scroll-margin-top:76px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--brasa);color:var(--branco);
  padding:12px 18px;font-size:var(--fs-ui);
}
.skip:focus{left:12px;top:12px}

/* ---------- foto ----------
   As fotos vêm de bancos diferentes, tiradas em luzes diferentes. O que faz
   elas parecerem do mesmo ensaio é o tratamento: saturação contida e um véu
   de brasa em multiply, que puxa os altos para o quente e os baixos para o
   carvão. Toda foto do site passa por .ph. */
.ph{position:relative;overflow:hidden;background:var(--carvao-2)}
.ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.06)}
.ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(200,68,28,.22),rgba(20,18,16,.26));
  mix-blend-mode:multiply;
}
.ph--v{aspect-ratio:4/5}
.ph--w{aspect-ratio:21/9}

/* Grão fino sobre as superfícies escuras, para a cor chapada não parecer
   tela. É um SVG de ruído embutido; sem imagem externa. */
.grao{position:relative}
.grao::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grao > *{position:relative;z-index:1}

/* ---------- escala de display ----------
   Uma família só, nos dois extremos do eixo de largura. O titular é o
   condensado pesado; o corpo é a largura normal. */
.d-1,.d-2,.hero__t{
  font-variation-settings:"wdth" var(--wd-display),"wght" 800;
  text-transform:uppercase;
  letter-spacing:-.005em;
}
.hero__t{font-size:clamp(54px,7.6vw,128px);line-height:.9}
.d-1{font-size:var(--fs-h1);line-height:.94}
.d-2{font-size:var(--fs-h2)}
.d-1 em,.d-2 em,.hero__t em{font-style:normal;color:var(--brasa)}
/* Sobre carvão a brasa cheia fica em 3.80:1. Nos titulares isso passa
   (texto grande), mas o tom claro lê melhor e mantém a mesma família. */
.hero__t em,.fcta em,.board em{color:var(--brasa-clr)}

.rotulo{
  font-size:var(--fs-rotulo);letter-spacing:.2em;text-transform:uppercase;
  font-variation-settings:"wdth" var(--wd-texto),"wght" 700;
}
.lead{font-size:var(--fs-lead);max-width:var(--measure);line-height:1.55}

/* ---------- reveal ----------
   O elemento nasce visível. O JS só marca .pre no que está abaixo da dobra,
   então sem JS (ou com reduced-motion) a página continua inteira legível. */
.rv{transition:opacity .7s var(--e),transform .7s var(--e)}
.rv.pre{opacity:0;transform:translateY(18px)}
.rv[data-d="1"]{transition-delay:.08s}
.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--brasa);
  /* branco puro, nunca creme: creme sobre brasa dá 4.12:1 e reprova em AA */
  color:var(--branco);
  padding:15px 26px;
  font-size:var(--fs-ui);
  font-variation-settings:"wdth" var(--wd-texto),"wght" 600;
  text-decoration:none;
  border:0;
  transition:background .25s var(--e),color .25s var(--e),transform .25s var(--e);
}
.btn:hover{background:var(--brasa-esc);transform:translateY(-1px)}
.btn--sm{padding:10px 18px;font-size:var(--fs-meta);letter-spacing:.02em}
.btn--lg{padding:18px 34px;font-size:var(--fs-lead)}
.btn--full{width:100%}
.btn--ghost{background:transparent;color:var(--carvao);box-shadow:inset 0 0 0 1px var(--fio-claro)}
.btn--ghost:hover{background:var(--carvao);color:var(--creme)}
/* sobre brasa: botão invertido, branco com texto na cor de marca fechada */
.btn--branco{background:var(--branco);color:var(--brasa-esc)}
.btn--branco:hover{background:var(--carvao);color:var(--creme)}

.lnk{
  font-size:var(--fs-ui);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px;
  transition:opacity .25s var(--e);
}
.lnk:hover{opacity:.62}

/* ---------- assinatura (símbolo + nome) ---------- */
.marca{
  display:inline-flex;align-items:center;gap:.6em;
  text-decoration:none;font-size:19px;
  /* .marca é usada em três fundos diferentes; a cor vem sempre do contexto */
  color:inherit;
}
.marca__sb{width:1.34em;height:auto;flex:none;color:var(--brasa)}
.marca__nome{
  font-variation-settings:"wdth" var(--wd-display),"wght" 500;
  text-transform:uppercase;letter-spacing:.015em;line-height:1;
}
.marca__nome b{font-variation-settings:"wdth" var(--wd-display),"wght" 800}

/* ---------- header ----------
   Três tons, trocados pelo JS conforme a seção sob o header. O padrão é
   dark porque a primeira seção é o hero escuro. */
.hdr{
  position:fixed;inset:0 0 auto;z-index:60;
  transition:background .35s var(--e),box-shadow .35s var(--e);
}
.hdr__in{
  max-width:var(--max);margin-inline:auto;
  padding:18px var(--pad);
  display:flex;align-items:center;gap:clamp(16px,3vw,48px);
}
.hdr[data-tone="dark"]{color:var(--creme)}
.hdr[data-tone="light"]{color:var(--carvao)}
.hdr[data-tone="brasa"]{color:var(--branco)}
.hdr[data-tone="brasa"] .marca__sb{color:var(--carvao)}
.hdr[data-tone="brasa"] .btn{background:var(--carvao);color:var(--creme)}
.hdr.is-stuck{backdrop-filter:saturate(140%) blur(10px)}
.hdr[data-tone="dark"].is-stuck{background:rgba(20,18,16,.88);box-shadow:0 1px 0 var(--fio-escuro)}
.hdr[data-tone="light"].is-stuck{background:rgba(241,235,225,.9);box-shadow:0 1px 0 var(--fio-claro)}
.hdr[data-tone="brasa"].is-stuck{background:rgba(200,68,28,.94);box-shadow:0 1px 0 rgba(0,0,0,.12)}

.nav{display:flex;gap:clamp(14px,2vw,30px);margin-left:auto}
.nav a{
  text-decoration:none;font-size:var(--fs-meta);
  text-transform:uppercase;letter-spacing:.14em;
  font-variation-settings:"wdth" var(--wd-texto),"wght" 600;
  opacity:.78;transition:opacity .25s var(--e);
}
.nav a:hover{opacity:1}

.hdr__act{display:flex;align-items:center;gap:12px}
.tx-sm{display:none}

.burger{
  display:none;width:42px;height:42px;
  background:none;border:0;padding:0;cursor:pointer;color:inherit;
  position:relative;
}
.burger span{
  position:absolute;left:11px;width:20px;height:1.5px;background:currentColor;
  transition:transform .3s var(--e),opacity .3s var(--e);
}
.burger span:nth-child(1){top:19px}
.burger span:nth-child(2){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* ---------- menu mobile ---------- */
.menu{
  position:fixed;inset:0;z-index:55;
  background:var(--carvao);color:var(--creme);
  opacity:0;transition:opacity .32s var(--e);
}
.menu.is-open{opacity:1}
.menu__in{
  height:100%;padding:clamp(96px,16vh,140px) var(--pad) var(--pad);
  display:flex;flex-direction:column;justify-content:space-between;gap:40px;
}
.menu__nav{display:flex;flex-direction:column;gap:clamp(8px,2vh,18px)}
.menu__nav a{
  display:flex;align-items:baseline;gap:16px;text-decoration:none;
  font-size:clamp(30px,9vw,54px);line-height:1;
  font-variation-settings:"wdth" var(--wd-display),"wght" 800;
  text-transform:uppercase;
}
.menu__nav em{
  font-style:normal;font-size:var(--fs-rotulo);letter-spacing:.16em;
  color:var(--brasa-clr);
  font-variation-settings:"wdth" var(--wd-texto),"wght" 600;
}
.menu__foot p{margin-top:16px;font-size:var(--fs-meta);color:var(--cinza);line-height:1.6}
body.menu-open{overflow:hidden}

/* ---------- 2. hero ----------
   Duas colunas: texto sobre carvão à esquerda, foto sangrando até a borda
   direita. O selo (símbolo no círculo de brasa, o mesmo avatar do manual)
   monta a emenda entre as duas. Atrás do texto, o símbolo em carvão-2 sobre
   carvão: só textura, não leitura. */
.hero{
  background:var(--carvao);color:var(--creme);
  padding-top:76px;overflow:hidden;
}
.hero__in{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  min-height:min(calc(100svh - 76px),860px);
  padding-left:max(var(--pad),calc((100% - var(--max)) / 2));
}
.hero__txt{
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(48px,7vw,96px) clamp(28px,5vw,80px) clamp(40px,5vw,64px) 0;
}
.hero__ghost{
  position:absolute;left:-8%;top:-2%;width:min(62vw,680px);
  color:var(--carvao-2);pointer-events:none;z-index:0;
}
/* :not(.hero__ghost): o símbolo de fundo é absoluto e precisa continuar assim;
   sem a exclusão esta regra o traria para o fluxo e ele viraria 600px de altura. */
.hero__txt > :not(.hero__ghost){position:relative;z-index:1}
.hero__cima{color:var(--brasa-clr);margin-bottom:clamp(16px,2.2vw,26px)}
.hero__side{
  margin-top:clamp(24px,3.4vw,44px);
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,3vw,48px);
}
.hero__side p{max-width:40ch;color:var(--creme);font-size:var(--fs-lead);line-height:1.55}
.hero__cta{display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap}

.hero__ph{position:relative;min-height:540px}
.hero__ph .ph{position:absolute;inset:0}
.hero__ph .ph img{position:absolute;inset:0}
.hero__ph .ph::after{
  background:
    linear-gradient(to right,rgba(20,18,16,.55),rgba(20,18,16,0) 38%),
    linear-gradient(160deg,rgba(200,68,28,.22),rgba(20,18,16,.3));
}

.selo{
  position:absolute;z-index:3;
  width:clamp(104px,11.5vw,156px);aspect-ratio:1;border-radius:50%;
  background:var(--brasa);color:var(--branco);
  display:grid;place-items:center;
  box-shadow:0 0 0 clamp(6px,.8vw,10px) var(--carvao);
}
.selo svg{width:54%;height:auto}
.hero__ph .selo{left:0;bottom:clamp(40px,7vw,96px);transform:translateX(-50%)}

/* ---------- faixa ----------
   O papel do hambúrguer em movimento: o nome e as três informações que fazem
   alguém entrar, repetidos numa fita de brasa. Duas cópias do conteúdo, a
   segunda escondida do leitor de tela, para o loop fechar em -50%. */
.faixa{
  background:var(--brasa);color:var(--branco);
  overflow:hidden;padding:clamp(12px,1.4vw,18px) 0;
  border-block:1px solid rgba(0,0,0,.14);
}
.faixa__t{display:flex;width:max-content;animation:faixa 34s linear infinite}
.faixa__t ul{display:flex;flex:none}
.faixa__t li{
  display:inline-flex;align-items:center;gap:clamp(18px,2.4vw,40px);
  padding-right:clamp(18px,2.4vw,40px);
  white-space:nowrap;
  font-size:clamp(17px,1.7vw,24px);text-transform:uppercase;letter-spacing:.02em;
  font-variation-settings:"wdth" var(--wd-display),"wght" 800;
}
.faixa__t svg{width:1.05em;height:auto;color:var(--carvao)}
@keyframes faixa{to{transform:translateX(-50%)}}
.faixa:hover .faixa__t{animation-play-state:paused}

/* ---------- 3. a casa ----------
   A foto vertical monta sobre um bloco de brasa deslocado para baixo e para
   a esquerda: a cor de marca como área, não como detalhe. */
.casa{background:var(--creme);padding:var(--sect-side) var(--pad)}
.casa__grid{
  max-width:var(--max);margin-inline:auto;
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(28px,5vw,100px);align-items:center;
}
.casa__txt .rotulo{color:var(--brasa-esc);margin-bottom:var(--sp-title)}
.casa__txt .lead{margin-top:var(--sp-title)}
.casa__nums{
  margin-top:var(--sp-block);
  display:grid;gap:clamp(14px,2vw,22px);
}
.casa__nums div{
  display:grid;grid-template-columns:110px 1fr;gap:clamp(12px,2vw,24px);
  padding-top:14px;border-top:1px solid var(--fio-claro);
}
.casa__nums dt{
  font-size:var(--fs-rotulo);letter-spacing:.16em;text-transform:uppercase;
  color:var(--brasa-esc);
  font-variation-settings:"wdth" var(--wd-texto),"wght" 700;
  padding-top:3px;
}
.casa__nums dd{color:var(--cinza-ink);font-size:var(--fs-ui)}
.casa__fig{position:relative;padding:0 0 clamp(26px,3.4vw,52px) clamp(26px,3.4vw,52px)}
.casa__fig::before{
  content:"";position:absolute;left:0;bottom:0;
  width:72%;height:64%;background:var(--brasa);
}
.casa__fig .ph{position:relative}

/* ---------- 4. cardápio ----------
   A peça do manual em tamanho de página: chapéu de brasa, corpo em carvão,
   item em corpo, preço em display condensado com numeral tabular. A coluna
   da direita mostra o item sob o cursor. */
.menu-s{background:var(--creme-2);padding:var(--sect-side) var(--pad)}
.menu-s__head{
  max-width:var(--max);margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(14px,3vw,40px);margin-bottom:var(--sp-block);
}
.menu-s__nota{max-width:40ch;font-size:var(--fs-ui);color:var(--cinza-ink)}

.board{
  max-width:var(--max);margin-inline:auto;
  background:var(--carvao);color:var(--creme);
  display:grid;grid-template-columns:1fr .6fr;
}
.board__topo{
  grid-column:1 / -1;
  background:var(--brasa);color:var(--branco);
  padding:13px clamp(24px,3.6vw,56px);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;
  font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase;
  font-variation-settings:"wdth" var(--wd-texto),"wght" 700;
}
.board__topo span{display:inline-flex;align-items:center;gap:12px}
.board__topo svg{width:20px;height:auto;color:var(--carvao)}
.board__lista{padding:clamp(10px,1.6vw,22px) clamp(24px,3.6vw,56px) clamp(20px,3vw,44px)}

.cd__item{border-bottom:1px solid var(--fio-escuro)}
.cd__item:last-child{border-bottom:0}
.cd__item a{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"n nome pre" ". desc .";
  column-gap:clamp(14px,2vw,26px);
  align-items:baseline;
  padding:clamp(18px,2.4vw,28px) 0;
  text-decoration:none;
  transition:padding-left .3s var(--e),color .3s var(--e);
}
.cd__item a:hover,.cd__item.is-on a{padding-left:10px;color:var(--brasa-clr)}
.cd__n{
  grid-area:n;
  font-size:var(--fs-rotulo);letter-spacing:.12em;color:var(--cinza);
  font-variation-settings:"wdth" var(--wd-texto),"wght" 600;
}
.cd__nome{
  grid-area:nome;
  font-size:clamp(22px,2.2vw,32px);line-height:1.05;text-transform:uppercase;
  font-variation-settings:"wdth" var(--wd-display),"wght" 800;
}
.cd__desc{
  grid-area:desc;margin-top:6px;
  font-size:var(--fs-ui);color:var(--cinza);max-width:44ch;
}
/* Preço em display condensado com numeral tabular: as colunas alinham
   sozinhas, sem precisar de largura fixa. */
.cd__pre{
  grid-area:pre;
  font-size:clamp(22px,2.2vw,32px);
  font-variation-settings:"wdth" var(--wd-display),"wght" 800;
  font-variant-numeric:tabular-nums;
  color:var(--brasa-clr);
}
.cd__pre::before{content:"R$ ";font-size:.55em;letter-spacing:.04em}

.board__ph{position:relative;min-height:100%;background:var(--carvao-2)}
.board__ph .ph{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--e-img)}
.board__ph .ph img{position:absolute;inset:0}
.board__ph .ph.is-on{opacity:1}

.board__pe{
  grid-column:1 / -1;
  border-top:1px solid var(--fio-escuro);
  padding:16px clamp(24px,3.6vw,56px);
  display:flex;flex-wrap:wrap;gap:8px clamp(20px,3vw,44px);
  font-size:var(--fs-ui);color:var(--cinza);
}
.board__pe b{
  color:var(--creme);font-variant-numeric:tabular-nums;
  font-variation-settings:"wdth" var(--wd-display),"wght" 700;
}

/* ---------- 5. a brasa ----------
   A única prancha inteira na cor de marca. Numerais em display no tamanho
   de cartaz, em carvão sobre brasa (3.74:1 - passa como texto grande). Todo
   texto pequeno aqui é branco puro. */
.brs{background:var(--brasa);color:var(--branco);padding:var(--sect-side) var(--pad);overflow:hidden}
.brs__in{max-width:var(--max);margin-inline:auto}
.brs__head{
  display:grid;grid-template-columns:1fr auto;align-items:end;
  gap:clamp(20px,3vw,48px);
}
.brs__head .rotulo{color:var(--carvao);margin-bottom:var(--sp-title)}
.brs .d-1 em{color:var(--carvao)}
.brs__head p{max-width:36ch;font-size:var(--fs-lead);line-height:1.5}
.brs__passos{
  margin-top:var(--sp-block);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,52px);
}
.brs__passos li{border-top:1px solid rgba(255,255,255,.4);padding-top:clamp(16px,2vw,28px)}
.brs__n{
  display:block;
  font-size:clamp(72px,9.5vw,160px);line-height:.82;
  font-variation-settings:"wdth" var(--wd-display),"wght" 800;
  color:var(--carvao);letter-spacing:-.02em;
  margin-bottom:clamp(16px,2vw,28px);
}
.brs__passos h3{
  font-size:var(--fs-h3);text-transform:uppercase;
  font-variation-settings:"wdth" var(--wd-display),"wght" 800;
}
.brs__passos p{margin-top:8px;max-width:38ch;font-size:var(--fs-ui);line-height:1.55}
.brs__fig{margin-top:var(--sp-block)}
.brs__fig .ph::after{background:linear-gradient(160deg,rgba(200,68,28,.28),rgba(20,18,16,.3))}

/* ---------- 6. embalagem ----------
   A marca virando objeto. Cada peça é uma FOTO de embalagem real com a
   assinatura aplicada por cima em mix-blend-mode:multiply - o mesmo que a
   tinta faz no papel: escurece o que está embaixo em vez de tapar, então a
   impressão pega a textura, o vinco e a sombra da peça. É o que separa isto
   de um desenho de caixa em CSS, que lê como diagrama e não como produto.

   As medidas em cqw (container query) fazem a assinatura crescer junto com a
   peça: em % do próprio quadro, não do viewport. Sem isso a marca escorregava
   do lugar certo da foto a cada largura de tela.

   Linhas: 5+7 e 7+5 colunas de 12. As proporções (5/4 e 7/4) foram escolhidas
   para as duas peças de uma linha terem a MESMA altura - a razão bate com o
   número de colunas. */
.emb{background:var(--carvao);color:var(--creme);padding:var(--sect-side) var(--pad);overflow:hidden}
.emb__in{max-width:var(--max);margin-inline:auto}
.emb__head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:clamp(20px,3vw,48px)}
.emb__head .rotulo{color:var(--brasa-clr);margin-bottom:var(--sp-title)}
.emb .d-1 em{color:var(--brasa-clr)}
.emb__head p{max-width:40ch;font-size:var(--fs-lead);line-height:1.5;color:var(--creme)}

.pecas{
  margin-top:var(--sp-block);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(16px,2.2vw,34px) clamp(12px,1.6vw,24px);
}
/* O container fica no item da grade, NÃO na peça. Com container-type na
   mesma caixa que isola a mistura, o Chrome deixa de pintar a foto por baixo
   do multiply e a célula fica só com a cor de fundo. A largura do item é a
   mesma da peça, então as medidas em cqw não mudam. */
.pc{container-type:inline-size}
.pc--5{grid-column:span 5}
.pc--7{grid-column:span 7}
.pc--12{grid-column:1 / -1}

.peca{
  position:relative;overflow:hidden;
  /* isolation: a mistura multiply da assinatura tem de ficar presa à peça,
     senão ela se mistura com o carvão da seção e some. */
  isolation:isolate;
  /* kraft, e não carvão: enquanto a foto ainda não pintou, a célula fica da
     cor do papel em vez de quase preta, e a impressão por cima continua
     legível em vez de sumir. */
  background:#141210;
}
.peca img{width:100%;height:100%;object-fit:cover;display:block}
/* Tratamento mais leve que o .ph do resto do site: aqui a peça é o assunto,
   e o véu de brasa cheio comia o contraste da impressão. */
.peca img{filter:saturate(.92) contrast(1.04)}
.peca .zoom{transform:scale(var(--s));transform-origin:var(--ox) var(--oy)}

.ap{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);
  /* skewY inclina a impressão para o mesmo plano da face fotografada. Sem
     ele a marca fica chapada sobre uma caixa em perspectiva e denuncia a
     montagem. Só as peças em ângulo usam --sk. */
  transform:translate(-50%,-50%) rotate(var(--r,0deg)) skewY(var(--sk,0deg));
  mix-blend-mode:multiply;
  display:flex;flex-direction:column;align-items:center;gap:.42em;
  line-height:1;pointer-events:none;
}
/* Só o símbolo, nunca o nome. A assinatura completa sobre a foto lê como
   arte colada por cima: o nome em tipo vetorial perfeito não tem como se
   sujar no papel, e é isso que entrega a montagem. O símbolo sozinho é
   também como a marca aparece de verdade numa embalagem barata.

   A tinta é --brasa-esc, não --brasa: sobre papel pardo a brasa cheia perde
   contraste e boia. A variante fechada é a mesma cor impressa em uma cor só,
   que é o que o manual já prevê para superfície clara. */
.ap svg{width:100%;height:auto;color:var(--brasa-esc)}
/* A trama do papel: o nome repetido na diagonal. inset negativo porque o
   bloco é girado - sem folga, os cantos do quadro ficariam vazios. */
/* A trama do papel: o nome repetido na diagonal.
   inset -36% não é enfeite: girado a 24 graus, o bloco precisa ser maior que
   a peça nos dois eixos, senão sobram cantos vazios. Para 7/4, a altura
   necessária é ~1,6x a da peça.
   align-content:space-between espalha as 12 linhas pela altura inteira; com
   align-content:center elas se juntavam numa faixa no meio do quadro. */
.trama{
  position:absolute;inset:-36%;
  /* brasa fechada, não a cheia: sobre kraft a brasa cheia quase some, e a
     trama precisa ser lida como impressão de fundo, não como cor de tela. */
  mix-blend-mode:multiply;color:var(--brasa-esc);
  transform:rotate(-24deg);
  display:grid;align-content:space-between;
  /* SEM opacity aqui. opacity < 1 junto com mix-blend-mode agrupa o elemento
     numa camada própria antes de misturar, e o multiply passa a escurecer a
     célula inteira em vez de só as letras - a foto do papel virava um
     retângulo quase preto. Para clarear a tinta, mude a cor, não a opacidade. */
  pointer-events:none;
}
.trama span{
  display:block;text-align:center;white-space:nowrap;
  font-size:2.1cqw;letter-spacing:.1em;text-transform:uppercase;
  font-variation-settings:"wdth" var(--wd-texto),"wght" 800;
}
.trama span:nth-child(even){transform:translateX(4cqw)}

.peca__lg{margin-top:14px;font-size:var(--fs-ui);color:var(--cinza);line-height:1.5;max-width:44ch}
.peca__lg--wide{max-width:72ch}
.peca__lg b{display:block;color:var(--creme);font-variation-settings:"wdth" var(--wd-texto),"wght" 700}

/* ---------- 7. galeria ----------
   Mosaico fixo, sem carrossel. As peças de tipo entre as fotos são os
   modelos de post do manual (recado em display, símbolo, preço): a galeria
   é o feed da casa, não uma pasta de fotos. */
.gal{background:var(--creme);padding:var(--sect-side) var(--pad)}
.gal__in{max-width:var(--max);margin-inline:auto}
.gal__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:var(--sp-block);
}
.gal__head p{max-width:40ch;font-size:var(--fs-ui);color:var(--cinza-ink)}
.mos{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:clamp(150px,17vw,250px);grid-auto-flow:dense;
  gap:clamp(8px,1vw,14px);
}
.mos > *{position:relative;overflow:hidden}
.mos .ph{height:100%}
.mos .ph img{position:absolute;inset:0}
.mos--2x2{grid-column:span 2;grid-row:span 2}
.mos--2w{grid-column:span 2}
.mos--2h{grid-row:span 2}
.tile{display:grid;place-items:center;text-align:center;padding:clamp(16px,2vw,28px)}
.tile--brasa{background:var(--brasa);color:var(--branco)}
.tile--carvao{background:var(--carvao);color:var(--brasa)}
.tile--creme{background:var(--creme-2);color:var(--carvao)}
.tile__ch{
  font-size:clamp(24px,2.8vw,44px);line-height:.92;text-transform:uppercase;
  font-variation-settings:"wdth" var(--wd-display),"wght" 800;
}
.tile__pre{
  font-size:clamp(34px,4vw,64px);line-height:.9;
  font-variation-settings:"wdth" var(--wd-display),"wght" 800;
  font-variant-numeric:tabular-nums;color:var(--brasa-esc);
}
.tile__pre small{font-size:.42em;letter-spacing:.06em;vertical-align:.7em;margin-right:.1em}
.tile__pe{
  margin-top:10px;font-size:var(--fs-rotulo);letter-spacing:.16em;text-transform:uppercase;
  font-variation-settings:"wdth" var(--wd-texto),"wght" 700;
}
.tile--brasa .tile__pe{color:var(--branco)}
.tile--creme .tile__pe{color:var(--cinza-ink)}
.tile svg{width:46%;height:auto}

/* ---------- 7. onde e horário ---------- */
.loc{background:var(--creme-2);padding:var(--sect-side) var(--pad)}
.loc__grid{
  max-width:var(--max);margin-inline:auto;
  display:grid;grid-template-columns:1fr .9fr;
  gap:clamp(28px,5vw,90px);align-items:start;
}
.loc__txt .rotulo{color:var(--brasa-esc);margin-bottom:var(--sp-title)}
.loc__info{margin-top:var(--sp-block);display:grid;gap:clamp(14px,2vw,22px)}
.loc__info div{
  display:grid;grid-template-columns:150px 1fr;gap:clamp(12px,2vw,24px);
  padding-top:14px;border-top:1px solid var(--fio-claro);
}
.loc__info dt{
  font-size:var(--fs-rotulo);letter-spacing:.16em;text-transform:uppercase;
  color:var(--cinza-ink);
  font-variation-settings:"wdth" var(--wd-texto),"wght" 700;
  padding-top:3px;
}
.loc__info dd{font-size:var(--fs-ui);line-height:1.55}
.loc__info strong{font-variation-settings:"wdth" var(--wd-texto),"wght" 700}
.loc__cta{margin-top:var(--sp-block);display:flex;flex-wrap:wrap;gap:14px}

.loc__map{position:relative;aspect-ratio:1;overflow:hidden;background:var(--creme)}
.loc__map svg{width:100%;height:100%}
.loc__map .selo{
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(72px,7vw,96px);box-shadow:0 0 0 clamp(10px,1.4vw,18px) rgba(200,68,28,.18);
}
.loc__pin{
  position:absolute;left:50%;top:50%;transform:translate(-50%,clamp(52px,5.4vw,72px));
  background:var(--carvao);color:var(--creme);
  padding:6px 12px;font-size:var(--fs-rotulo);letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;
  font-variation-settings:"wdth" var(--wd-texto),"wght" 700;
}

/* ---------- 8. cta final ---------- */
.fcta{
  position:relative;isolation:isolate;
  background:var(--carvao);color:var(--creme);
  padding:calc(var(--sect-side) + 30px) var(--pad);
  min-height:min(80svh,680px);
  display:grid;align-items:center;
  overflow:hidden;
}
.fcta__media{position:absolute;inset:0;z-index:-2}
.fcta__media .ph{position:absolute;inset:0}
.fcta__media .ph img{position:absolute;inset:0}
.fcta__media .ph::after{
  background:
    linear-gradient(to right,var(--carvao) 6%,rgba(20,18,16,.72) 46%,rgba(20,18,16,.18) 100%),
    linear-gradient(160deg,rgba(200,68,28,.2),rgba(20,18,16,.25));
}
.fcta__body{position:relative;max-width:var(--max);margin-inline:auto;width:100%}
.fcta__body .rotulo{color:var(--brasa-clr);margin-bottom:var(--sp-title)}
.fcta__body p{margin:var(--sp-title) 0 clamp(24px,3vw,38px);max-width:42ch;font-size:var(--fs-lead);color:var(--creme)}

/* ---------- 9. rodapé ----------
   O nome no tamanho de fachada, ocupando a largura inteira. É o letreiro
   do manual visto de frente. */
.rod{background:var(--carvao);color:var(--creme);padding:var(--sect-in) var(--pad) clamp(28px,3vw,44px);overflow:hidden}
.rod__in{max-width:var(--max);margin-inline:auto;display:grid;gap:clamp(28px,4vw,56px)}
.rod__giga{
  display:flex;align-items:center;gap:.14em;
  font-size:clamp(58px,13.2vw,214px);line-height:.86;letter-spacing:-.01em;
  text-transform:uppercase;white-space:nowrap;
  font-variation-settings:"wdth" var(--wd-display),"wght" 800;
  padding-bottom:clamp(20px,3vw,44px);border-bottom:1px solid var(--fio-escuro);
}
.rod__giga svg{width:.8em;height:auto;flex:none;color:var(--brasa)}
.rod__giga b{color:var(--brasa)}
.rod__cols{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,64px);align-items:start}
.rod__marca p{margin-top:8px;color:var(--cinza);font-size:var(--fs-ui);line-height:1.6}
.rod__nav{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,34px);justify-content:flex-end}
.rod__nav a{
  text-decoration:none;font-size:var(--fs-meta);
  text-transform:uppercase;letter-spacing:.14em;
  font-variation-settings:"wdth" var(--wd-texto),"wght" 600;
  color:var(--cinza);transition:color .25s var(--e);
}
.rod__nav a:hover{color:var(--creme)}
.rod__fino{
  padding-top:clamp(18px,2.4vw,28px);border-top:1px solid var(--fio-escuro);
  font-size:var(--fs-meta);color:var(--cinza);
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;
}
.rod__fino a{color:var(--brasa-clr)}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */

/* Abaixo daqui a coluna de foto do cardápio some e a lista ocupa a largura
   inteira. O JS lê a mesma largura antes de trocar a foto no hover. */
@media (max-width:1023px){
  .hero__in{grid-template-columns:1fr;padding-left:0;min-height:0}
  .hero__ph{order:-1;min-height:0;aspect-ratio:16/10}
  .hero__ph .selo{left:auto;right:var(--pad);bottom:0;transform:translateY(50%)}
  .hero__txt{padding:clamp(56px,9vw,88px) var(--pad) clamp(40px,6vw,64px)}
  .hero__ghost{left:auto;right:-10%;top:auto;bottom:-6%;width:min(60vw,420px)}
  .board{grid-template-columns:1fr}
  .board__ph{display:none}
  .casa__grid,.loc__grid{grid-template-columns:1fr}
  .casa__fig{max-width:560px}
  .loc__map{max-width:560px}
  .brs__head,.emb__head{grid-template-columns:1fr}
  .rod__cols{grid-template-columns:1fr}
  .rod__nav{justify-content:flex-start}
}

@media (max-width:899px){
  .nav{display:none}
  .burger{display:block}
  .hdr__act{margin-left:auto}
  .br-md{display:none}
  .mos{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(150px,36vw,300px)}
  /* Uma peça por linha: em duas colunas a foto fica pequena demais para a
     impressão ser lida, que é a única razão da seção existir. */
  .pc--5,.pc--7{grid-column:1 / -1}
}

@media (max-width:760px){
  .brs__passos{grid-template-columns:1fr;gap:clamp(24px,5vw,40px)}
  .brs__n{font-size:clamp(64px,18vw,120px)}
}

@media (max-width:600px){
  .tx-lg{display:none}
  .tx-sm{display:inline}
  .marca{font-size:16px}
  .hero__t{font-size:clamp(44px,13vw,64px)}
  .hero__ph{aspect-ratio:4/3}
  .hero__side{flex-direction:column;align-items:flex-start}
  .hero__cta{width:100%}
  .hero__cta .btn{flex:1 1 auto}
  .casa__nums div,.loc__info div{grid-template-columns:1fr;gap:4px}
  /* Com uma coluna só, a descrição precisa começar na margem - o "auto" da
     primeira coluna deixaria de existir e o texto ficaria pendurado. */
  .cd__item a{grid-template-areas:"n nome pre" "desc desc desc"}
  .cd__desc{margin-top:8px}
  .mos{grid-auto-rows:clamp(130px,38vw,220px)}
  /* 13vw: o letreiro inteiro (símbolo + nome) mede ~6em; em 390px cabe até 52px. */
  .rod__giga{font-size:clamp(36px,13vw,52px)}
  .rod__fino{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .rv.pre{opacity:1;transform:none}
  .faixa__t{animation:none;flex-wrap:wrap;width:auto}
  .faixa__t ul[aria-hidden]{display:none}
}

/* Links de contato sem destino mantêm o cursor de link. */
a:not([href]) { cursor: pointer; }