/* O Querubim — folha de estilo do site.
   Preto, branco, azul marinho e dourado. Um olhar modernizado sobre o barroco mineiro.

   Portado do estudo (site/pagina.py + moldura/galeria2.py), com duas mudancas
   de fundo:
   1. o estudo era uma tela fixa de 1440px (era um mockup); aqui ha breakpoints
   2. as 6 variacoes de moldura entram todas, nao so V1 e V3

   REGRA DA CASA (herdada do estudo, onde um defeito foi medido):
   .quadro define a largura; TUDO dentro herda width:100%. Assim a etiqueta e a
   moldura tem exatamente a mesma largura, por construcao. Nunca dimensionar a
   moldura por conta propria (a versao antiga fazia width:largura-68 e a etiqueta
   transbordava 7px de cada lado).

   As classes das molduras sao os proprios valores de Quadro.MOLDURAS
   (cassetta, abobada, medalhao, pendurada, caixa, corriola), para o template
   so ter que imprimir {{ quadro.moldura }}.
*/

/* ------------------------------------------------------------ fontes */
/* TeX Gyre Pagella — Palatino e da Microsoft e nao licencia para web. */
@font-face{font-family:Pagella;src:url("fonts/texgyrepagella-regular.ee927992843e.otf") format('opentype');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Pagella;src:url("fonts/texgyrepagella-bold.37346ecf929b.otf") format('opentype');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Pagella;src:url("fonts/texgyrepagella-italic.4d7ac6783100.otf") format('opentype');
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Pagella;src:url("fonts/texgyrepagella-bolditalic.21201554e719.otf") format('opentype');
  font-weight:700;font-style:italic;font-display:swap}

/* ------------------------------------------------------------ paleta */
:root{
  --azul9:#08192B; --azul8:#0E2A44; --azul7:#10415F;
  --ouro:#C9A45C; --ouroC:#E0BE7C; --ouroT:#7E6224;
  --papel:#F7F4EF; --papelF:#EFE9DE; --pedra:#D9D3C7;
  --azul3:#A9C2D4; --tinta:#231F20; --cinza:#6E6357;
  --parede:#0B2038;
  /* Azul oficial da marca, tirado do arquivo do dono. E de proposito um tom de
     BAIXO contraste contra --azul9: 1,43:1 (o azul7, que estava no hero antes,
     da 3,14:1). Serve para ornamento que deve sussurrar no fundo -- nunca para
     texto, que precisa de contraste. */
  --azulMarca:#003855;
  --wrap:1440px;
  --lat:clamp(20px,4vw,64px);   /* margem lateral */
}

/* A largura de cada quadro e o tamanho do banco (Quadro.tamanho).

   HISTORICO, para nao reintroduzir sem querer: ate 17/set havia aqui um
   mecanismo de FRACAO (--fracao/--vaos vindos do Python) que encolhia a
   parede inteira proporcionalmente para ela nunca quebrar linha. Isso nasceu
   de um defeito real -- abaixo de 1440px a fileira quebrava em 3+1.

   Em 17/set o dono trocou a quebra por CARROSSEL, e a fracao passou a ser o
   oposto do que se quer: ela faz a parede caber sempre, entao nao sobra nada
   para rolar. Saiu daqui, do template e da view. Agora a peca tem um tamanho
   fixo e, quando nao cabe, a fileira desliza. */
.quadro{
  flex:0 0 auto;                                 /* nao encolhe: e o carrossel */
  width:min(calc(var(--w, 300) * 1px), 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:28px}
body{
  background:var(--azul9);color:#fff;font-family:Pagella,Georgia,serif;
  /* O DESENHO DE FUNDO (escolha do dono, 17/set/2026): grade de losangos de
     74px com as pontas encostando e um losango solido de 24px dentro, no tom
     --azul9 um degrau abaixo e a 50% de opacidade. Ver static/cardapio/grade.svg
     (o arquivo traz a medicao: com 50% o traco fica a 5 degraus do fundo).

     Sao DUAS camadas, nesta ordem: o desenho na de CIMA e o brilho dourado na
     de baixo. Se inverter, o brilho clareia justamente as linhas do topo e o
     desenho some onde mais precisa aparecer. Por isso as listas de repeat e de
     size tem dois valores -- um por camada, casados por posicao. */
  background-image:url("grade.133810c43165.svg"),radial-gradient(110% 55% at 50% 0%,rgba(201,164,92,.09),transparent 62%);
  background-repeat:repeat,no-repeat;
  background-size:74px auto,auto;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* height:auto e OBRIGATORIO aqui, nao e enfeite. O <picture> do Django sai com
   width/height proporcionais ao tamanho RESERVADO (ex.: quadro de 320 -> img
   640x640). Sem `height:auto`, o atributo height vira uma altura REAL de 640px
   enquanto o CSS manda width:100% (266px): o aspect-ratio nao se aplica quando
   as duas dimensoes estao definidas, e cada quadro virava uma tira em RETRATO.
   Medido em 17/set, antes do conserto: peca de 320x764 e no celular 170x764 --
   so 18% a 46% da foto visivel (o resto era recorte do object-fit:cover).
   Com height:auto o atributo volta a servir so de reserva de espaco. */
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--lat)}

a:focus-visible{outline:2px solid var(--ouroC);outline-offset:4px}

/* ------------------------------------------------------------ cabecalho */
/* Tres colunas (1fr auto 1fr), escolha do dono em 17/set (opcao A do mockup):
   marca a esquerda, a carta centrada no eixo, a casa/visita na direita. As duas
   colunas 1fr medem igual, entao o grupo do meio cai exato no eixo (medido:
   desvio 0 da tela). Antes era flex/space-between: com o botao fora, sobravam
   754px de vazio entre a marca e o menu, e lia como espacamento inacabado. */
header{
  min-height:104px;display:grid;align-items:center;gap:24px;
  grid-template-columns:1fr auto 1fr;
  border-bottom:1px solid rgba(201,164,92,.22);padding:14px 0;
}
/* O lockup ja traz as asas dentro dele. O cabecalho repetia as asas ao lado
   (asas-ouro.svg + lockup-ouro.svg), entao as asas apareciam duas vezes. */
.marca{display:flex;align-items:center;justify-self:start}
/* o lockup traz "O" sozinho sobre "QUERUBIM" — a quebra e parte da marca */
.marca .lockup{width:clamp(52px,5.6vw,118px);display:block;flex:none}
header .menu-carta{justify-self:center}
header .menu-casa{justify-self:end}
nav{display:flex;gap:clamp(16px,2.2vw,30px);font-size:15px;color:var(--azul3);flex-wrap:wrap;align-items:center}
nav a{border-bottom:1px solid transparent;padding-bottom:2px;transition:color .18s,border-color .18s}
nav a:hover{color:var(--ouroC);border-bottom-color:rgba(201,164,92,.6)}

/* BOTOES DE REDE SOCIAL -- entraram em 17/set/2026 no lugar dos que levavam
   para /galeria/ (pagina removida a pedido do dono). Sao ICONE, sem texto: o
   nome acessivel vem do aria-label/title, no _social.html.

   Por que 38px aqui e 46px no telefone: 44px e o minimo confortavel de ALVO DE
   TOQUE, mas no desktop quem aponta e o mouse, e um circulo de 44px no
   cabecalho ficaria maior que o proprio lockup. No breakpoint de 1000px -- que
   e onde o telefone esta -- o botao cresce.

   ARMADILHA DE ESPECIFICIDADE (ja resolvida, mas facil de quebrar): estes
   botoes moram dentro de `nav`, e `nav a` (0,0,2) tentaria impor
   `border-bottom` transparente e `padding-bottom:2px` neles. `.social` e
   (0,1,0) e vence por CLASSE, sem depender da ordem no arquivo. Se alguem
   trocar o seletor por `nav .social` nao muda nada; se trocar por
   `nav a.social` tambem nao. Mas se escrever o reset como `a` puro, perde.

   O desenho e de LINHA (stroke), entao NAO definir `fill` aqui: um fill solido
   transforma os dois icones em borroes. A cor sai de `color` (currentColor),
   que o CSS pinta e o SVG so obedece. */
.social{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;padding:0;border-radius:50%;
  border:1px solid rgba(201,164,92,.35);color:var(--ouro);
  transition:border-color .18s,background-color .18s,color .18s;
}
.social:hover,.social:focus-visible{
  border-color:var(--ouro);background:rgba(201,164,92,.10);color:var(--ouroC);
}
.social svg{width:19px;height:19px;display:block}
/* O botao "Pedir agora" saiu do cabecalho a pedido do dono (16/set/2026).
   O caminho do pedido continua aberto: os quadros da vitrine trazem
   "Pedir no WhatsApp", e o numero esta na secao Visite. */

/* ------------------------------------------------------------ hero */
/* O padding de baixo encolheu em 17/set junto com o resto do topo: como a frase
   virou uma linha de 23px, o hero ficou curto e o vao de baixo passou a ler
   solto. Somando este padding com o de cima da .sec, o espaco entre a frase e
   a linha da vitrine ia de 107px (51+56) para 74px (18+56) -- contra 44px entre
   a marca e a frase. Nao zerar: o respiro curto ainda separa o bloco. */
.hero{text-align:center;padding:clamp(44px,6vw,74px) 0 clamp(10px,1.4vw,20px)}
.hero .kick{
  font-size:12.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--ouro);
  margin-bottom:clamp(18px,2.5vw,30px);
}
/* A linha do topo tem o TAMANHO DA FRASE QUE ELA SUBSTITUIU. A antiga .lede era
   clamp(16px,1.6vw,19px); este e esse tamanho 20% acima -- 19 x 1,2 = 22,8px.
   (O dono pediu em 17/set: "era para usar o tamanho da escrita que saiu, bem
   menor, cerca de 70% menor". A primeira versao saiu com o tamanho do h1 antigo,
   76px, e ficou 3x maior do que ele queria.)
   Como a frase mede ~15,75 x o tamanho da fonte (23px -> 362px), sobra largura
   de sobra nos 1312px uteis: NAO precisa mais da margem negativa que existia
   aqui quando a linha estava em 74px. As duas cores seguem: base branca e o
   trecho final em <em>, dourado. */
.hero h1{font-size:clamp(18px,1.8vw,23px);line-height:1.5;font-weight:400}
.hero h1 em{font-style:italic;color:var(--ouroC)}
/* A .lede do topo saiu em 17/set a pedido do dono (o topo ficou com uma linha
   so) e a regra foi removida junto, para nao ficar orfa. A chave TOPO.lede
   CONTINUA em conteudo.py: ela alimenta a meta description da pagina. */
/* A marca do hero: as asas azuis por tras do wordmark dourado. O arquivo e do
   dono (marca-hero.svg, 17/set) -- ele montou a composicao e testou cores e
   proporcoes, entao nao mexer nela: as asas ficam no tamanho natural, inteiras
   (pontas visiveis), e cobrem ~63% do bloco de letras. O arquivo e 4,07:1 e traz
   a cor oficial da marca, --azulMarca, de baixo contraste contra o fundo -- foi
   escolha dele, com a medicao na mesa (1,43:1). A 880px de largura a marca fica
   com ~216px de altura e o wordmark com 216px (era 321px no lockup antigo). O
   espaco de baixo separa a marca das frases. */
.hero .marca-hero{width:min(880px,100%);margin:0 auto clamp(28px,3.6vw,44px);display:block}

/* linha que centraliza o selo do Google sob os quadros da vitrine */
.selo-linha{text-align:center;margin-top:clamp(22px,3vw,32px)}

/* ------------------------------------------------------------ titulo de secao */
.sec{display:flex;align-items:center;gap:26px;padding:clamp(36px,4.5vw,56px) 0 30px}
.sec .linha{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(201,164,92,.5))}
.sec .linha.r{background:linear-gradient(270deg,transparent,rgba(201,164,92,.5))}
.sec h2{font-size:15px;letter-spacing:.32em;text-transform:uppercase;color:var(--ouro);
  font-weight:400;text-align:center}
.sec .sub{
  display:block;font-size:12.5px;letter-spacing:.04em;text-transform:none;color:var(--azul3);
  font-style:italic;margin-top:6px;font-weight:400;
}

/* ------------------------------------------------------------ a parede */
/* Em 17/set a fileira virou CARROSSEL, a pedido do dono: antes ela empilhava
   em tela estreita (as 4 pecas da vitrine caíam em 4 linhas) e ele escolheu o
   formato "uma peca e meia, com a seguinte espiando" valendo em TODA largura.

   E feito com o scroll do proprio navegador + scroll-snap, sem JavaScript:
   entao funciona com arrasto, roda do mouse, teclado e leitor de tela -- e
   nao ha script para quebrar.

   `justify-content:safe center` faz as duas coisas: com tudo cabendo (tela
   larga) continua centralizado como era; quando nao cabe, cai para o inicio
   em vez de cortar. Com `center` puro a primeira peca ficaria inalcancavel --
   e a armadilha classica de flex + overflow.

   O padding vertical nao e enfeite: `overflow-x:auto` cria uma area de
   recorte nos dois eixos, e as box-shadow de 40px das molduras seriam
   serradas em cima e embaixo. O padding dá o espaço de volta. */
.parede{
  position:relative;padding:8px 0 12px;
  background:radial-gradient(58% 44% at 50% 34%,rgba(201,164,92,.13),transparent 72%);
}
.fila{
  display:flex;align-items:flex-end;
  --vao:clamp(12px,2.2vw,40px);gap:var(--vao);
  flex-wrap:nowrap;
  justify-content:safe center;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:26px 0 48px;
  scrollbar-width:none;
}
.fila::-webkit-scrollbar{display:none}
.quadro{scroll-snap-align:start}

/* A largura de cada quadro esta definida la em cima, junto de --escala. */
.peca{display:flex;flex-direction:column;width:100%;position:relative}
.peca > *{width:100%}
/* .obra e a caixa da imagem (sem a etiqueta): e nela que a dica de clique
   se apoia, para nao cobrir o texto da etiqueta. */
.obra{position:relative;display:block}
.obra > *{width:100%}

.etq{
  background:var(--papelF);width:100%;padding:13px 16px 15px;text-align:center;
  border-top:1px solid var(--pedra);box-shadow:0 10px 22px rgba(0,0,0,.45);
}
.etq .n{font-size:16px;color:var(--tinta);line-height:1.3}
.etq .d{font-size:12px;color:var(--cinza);font-style:italic;margin-top:3px;line-height:1.4}
.etq .p{font-size:13.5px;color:var(--ouroT);font-weight:700;margin-top:7px;letter-spacing:.1em}

/* -------- a dica de clique: so quando o quadro tem destino */
.quadro.tem-link{cursor:pointer}
.quadro.tem-link .obra{transition:filter .2s}
.quadro.tem-link:hover .obra{filter:brightness(1.06)}
.quadro.tem-link .aviso{
  position:absolute;left:0;right:0;bottom:0;padding:10px 12px;
  background:linear-gradient(180deg,transparent,rgba(8,25,43,.92) 42%);
  color:var(--ouroC);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;opacity:0;transform:translateY(6px);
  transition:opacity .2s,transform .2s;pointer-events:none;
}
.quadro.tem-link:hover .aviso,
.quadro.tem-link:focus-within .aviso{opacity:1;transform:translateY(0)}
/* alvo do link dos quadros: respiro ao chegar pela ancora */
#item-ancora-alvo,.li,.item-card,.gc{scroll-margin-top:34px}

/* ------------------------------------------------------------ as molduras */

/* PROPORCAO DAS FOTOS -- decidido em 17/set/2026, a pedido do dono:
   "gosto mais da segunda versao para as molduras, onde o medalhao vira
   elipse". O quadro passa a ACOMPANHAR a foto, em vez de impor um recorte.

   As 39 fotos da casa sao TODAS 3:2 (5568x3712 -- medido arquivo por arquivo,
   nao estimado), e a familia "paisagem" das derivadas nao recorta nada. Entao
   `aspect-ratio:3/2` aqui e exatamente a proporcao do arquivo: recorte 0%.

   O que mudou -- e o que NAO e defeito, para ninguem "consertar":
     - as quatro molduras quadradas (cassetta, abobada, medalhao, caixa) pediam
       a familia "quadrado" (recorte 1:1 feito na geracao) e o CSS fixava 1/1;
       agora usam "paisagem" como as outras. Ver FAMILIA_DA_MOLDURA em
       cardapio/templatetags/cardapio_extras.py.
     - pendurada e corriola fixavam 4/3 contra uma foto 3:2 e cortavam 11%;
       agora tambem 3/2, recorte 0%.
     - o MEDALHAO era circulo (border-radius:50% num quadrado) e vira uma
       ELIPSE DEITADA. A ABOBADA era um arco de circulo e vira um arco LARGO.
       Os dois foram mostrados assim no comparativo e ele escolheu esta versao.

   Efeito colateral, medido e dito a ele: na MESMA largura (--w), uma peca 3:2
   e 33% mais baixa que a 1:1. Os valores de Quadro.tamanho nao foram mexidos.

   SOMBRA PROJETADA -- alfa .8 uniforme, decidido em 17/set/2026. O dono pediu
   "deixar os dropshadow das molduras em 80%", foi mostrado que "80%" tinha
   duas leituras opostas (80% do atual = alfa .496..6, mais suave; ou alfa .8,
   mais escura) e ele escolheu a segunda. As oito sombras projetadas passaram a
   `rgba(0,0,0,.8)`: cassetta, abobada, medalhao (.moldura e .topo), pendurada
   (as duas camadas), caixa (.recesso e img) e corriola. Medido contra o estado
   anterior na pagina publicada: ate 58/255 de diferenca, media 12,1 onde muda
   -- o dobro da leitura que ele NAO escolheu (29/255, media 6,2).

   TRES COISAS FICARAM DE FORA, de proposito:
     1. os FILETES DE LATAO (`0 0 0 1px rgba(201,164,92,...)`) nao sao sombra
        projetada -- sao a borda. Na caixa de sombra o filete e o que separa a
        peca da parede (comentario logo abaixo); baixar o alfa dele apagaria a
        borda e mudaria outra coisa que ele nao pediu.
     2. as sombras INTERNAS (`inset`), inclusive `inset 0 6px 18px rgba(0,0,0,.9)`
        do recesso, que e a profundidade da caixa e nao a sombra dela na parede.
     3. a sombra da ETIQUETA (`.etq`, logo abaixo): `0 10px 22px rgba(0,0,0,.45)`.
        A etiqueta e outro elemento -- ele disse "das molduras". Fica mais leve
        que a moldura agora; se um dia ele quiser igualar, e uma linha, mas NAO
        igualar sem ele pedir (a etiqueta e um cartaozinho de papel claro, e a
        sombra leve combina com ela). */

/* ------------------------------------------------------------ cassetta */
/* ouro + passe-partout: o classico de museu */
.cassetta .moldura{
  padding:7px;background:linear-gradient(160deg,#D8B673,#A98342 55%,#8E6C31);
  box-shadow:0 22px 40px rgba(0,0,0,.8);
}
.cassetta .interna{background:var(--azul8);padding:7px;box-shadow:inset 0 0 0 1px rgba(201,164,92,.55)}
.cassetta .passe{background:#E7DFD0;padding:13px;box-shadow:inset 0 0 0 1px #B9A98A}
.cassetta img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}

/* ------------------------------------------------------------ abobada */
/* arco de igreja. O raio em % (50% da propria largura) da o semicirculo exato
   em qualquer escala; em px ficava achatado quando a peca mudava de tamanho. */
.pendurada .cordo{position:relative;display:block;height:38px}
.pendurada .cordo .anel{
  position:absolute;left:50%;top:2px;width:11px;height:11px;margin-left:-5.5px;
  border:1.6px solid var(--ouro);border-radius:50%;
}
/* o SVG vai esticado, mas com vector-effect non-scaling-stroke: a linha
   continua com 1,6px em qualquer largura da peca */
.pendurada .cordo .v{position:absolute;top:8px;left:0;width:100%;height:30px;display:block}
.abobada .moldura{
  padding:6px;border-radius:50% 50% 4px 4px;
  background:linear-gradient(160deg,#D8B673,#A98342 55%,#8E6C31);
  box-shadow:0 18px 32px rgba(0,0,0,.8);
}
.abobada .interna{
  padding:5px;background:var(--azul8);border-radius:50% 50% 3px 3px;
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.5);
}
/* com a peca 3:2 o arco fica LARGO -- era o previsto no comparativo, e o
   desenho que ele escolheu */
.abobada img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:50% 50% 0 0}

/* ------------------------------------------------------------ medalhao */
/* oval barroco */
.medalhao .topo{
  width:14px;height:14px;margin:0 auto -5px;border-radius:50%;
  background:linear-gradient(160deg,#E4C485,#A98342);box-shadow:0 3px 6px rgba(0,0,0,.8);
}
.medalhao .moldura{
  padding:7px;border-radius:50%;
  background:linear-gradient(160deg,#E4C485,#B08A46 52%,#8E6C31);
  box-shadow:0 20px 34px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,236,196,.45);
}
.medalhao .interna{padding:5px;background:var(--azul8);border-radius:50%}
.medalhao img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:50%}

/* ------------------------------------------------------------ pendurada */
/* cordao, anel e placa */
.pendurada .placa{
  padding:11px;background:var(--papelF);
  box-shadow:0 14px 20px rgba(0,0,0,.8),0 40px 60px rgba(0,0,0,.8);
}
.pendurada img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}

/* ------------------------------------------------------------ caixa */
/* recesso escuro. A caixa precisa se destacar da parede: fundo quase-preto e
   filete de latao POR FORA (0 0 0 1px). Sem isso ela sumia no azul da parede. */
.caixa .recesso{
  padding:13px;background:linear-gradient(150deg,#0D2440,#040A12 72%);
  box-shadow:0 24px 44px rgba(0,0,0,.8),0 0 0 1px rgba(201,164,92,.6),
    inset 0 0 0 1px rgba(201,164,92,.28),inset 0 6px 18px rgba(0,0,0,.9);
}
.caixa img{
  display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
  box-shadow:0 0 0 1px rgba(201,164,92,.3),0 12px 24px rgba(0,0,0,.8);
}

/* ------------------------------------------------------------ corriola */
/* clipes dourados em fio */
.corriola .palco{position:relative;padding-top:26px}
.corriola .fio{
  position:absolute;top:9px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,164,92,.9),transparent);
}
.corriola .clipe{
  position:absolute;top:4px;width:11px;height:22px;border:1.5px solid var(--ouro);
  border-radius:2px;background:rgba(201,164,92,.14);
}
.corriola .clipe.l{left:23%}
.corriola .clipe.r{right:23%}
.corriola img{
  display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
  box-shadow:0 18px 30px rgba(0,0,0,.8);
}

/* ------------------------------------------------------------ o cardapio */
.carta{padding:16px 0 30px}

/* o destaque dos cafes: tabela de 3 faixas de lote */
.destaque{
  border:1px solid rgba(201,164,92,.3);background:var(--azul8);
  padding:clamp(22px,3vw,34px);margin-bottom:34px;
}
.destaque .cab{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:6px;flex-wrap:wrap}
.destaque h3{font-size:clamp(22px,2.4vw,26px);color:var(--ouroC);font-weight:700;letter-spacing:.02em}
.destaque .sub{font-size:13.5px;color:var(--azul3);font-style:italic}
.destaque .nota{font-size:13.5px;color:#D8C9AF;margin:10px 0 22px;font-style:italic}
.tabela-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro);
  font-weight:400;text-align:right;padding:0 0 12px;
  border-bottom:1px solid rgba(201,164,92,.35);white-space:nowrap;
}
th:first-child{text-align:left}
td{padding:9px 0;border-bottom:1px solid rgba(201,164,92,.12);font-size:16px;color:#EDE3D2}
td.v{
  text-align:right;color:var(--ouroC);font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:.02em;width:104px;white-space:nowrap;
}
td.v .vazio{opacity:.28;font-weight:400}
td.r{font-size:12.5px;color:var(--azul3);padding-left:12px;white-space:nowrap}

/* as demais categorias, em colunas */
.cols{columns:3;column-gap:44px}
.cat{break-inside:avoid;margin:0 0 26px}
.cat h4{
  font-size:17px;color:var(--ouroC);border-bottom:1px solid rgba(201,164,92,.28);
  padding-bottom:6px;margin-bottom:9px;
}
.cat .nota{font-size:11.5px;color:var(--ouro);font-style:italic;margin-bottom:6px}
.cat .desc{font-size:11.5px;color:var(--azul3);margin-bottom:7px;line-height:1.45}
.cat .sec2{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--azul3);
  margin:9px 0 4px;
}
.li{display:flex;align-items:baseline;gap:8px;padding:2.5px 0;font-size:14px}
.li .d{flex:1;border-bottom:1px dotted rgba(201,164,92,.3);transform:translateY(-3px)}
.li .p{color:var(--ouroC);white-space:nowrap;font-size:13.5px;font-variant-numeric:tabular-nums}
.li .sub{font-size:11.5px;color:var(--azul3);font-style:italic}
/* OPCAO SEM PRECO -- escolha do dono em 17/set/2026 (variante 5 da prancha):
   fio de latao a esquerda + recuo, 12px e tom mais baixo.
   Antes era 13,5px, a MESMA cor clara do item com preco e recuo ZERO -- meio
   pixel de diferenca, ou seja invisivel: o sabor parecia um produto que
   esqueceram de precificar. Nao existe corte fino desta fonte (a Pagella so
   tem regular/bold/italico/bold-italico), entao "letra mais fina" NAO e uma
   opcao aqui -- para aliviar, o caminho e o tamanho e o tom, nao o peso.
   `.opt::before` (o marcador `·`) fica desligado de proposito: com o fio e o
   recuo ele virava ruido. Nao "restaurar" o ponto. */
.opt{
  border-left:1px solid rgba(201,164,92,.35);margin-left:14px;
  padding:1.5px 0 1.5px 10px;font-size:12px;color:#C6B79C;
}
.opt::before{display:none}

/* ------------------------------------------------------------ menu galeria */
.grade-cat{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:clamp(22px,2.6vw,34px)}
.gc{
  border:1px solid rgba(201,164,92,.22);
  background:linear-gradient(180deg,rgba(14,42,68,.55),rgba(8,25,43,.2));
  display:flex;flex-direction:column;break-inside:avoid;
  transition:border-color .2s,transform .2s;
}
.gc:hover{border-color:rgba(201,164,92,.55);transform:translateY(-2px)}
/* 3/2, e nao 4/3: a familia "paisagem" nao recorta, entao o 4/3 antigo cortava
   11% de uma foto 3:2. O menu com fotos sofreu do mesmo defeito dos quadros. */
.gc .foto{aspect-ratio:3/2;overflow:hidden;background:var(--azul8)}
.gc .foto img{width:100%;height:100%;object-fit:cover;display:block}
.gc .corpo{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.gc h3{font-size:19px;color:var(--ouroC);font-weight:700}
.gc .nota{font-size:12px;color:var(--ouro);font-style:italic}
.gc .desc{font-size:13px;color:var(--azul3);line-height:1.5}
.gc ul{list-style:none;margin-top:8px}
.gc li{
  display:flex;align-items:baseline;gap:8px;font-size:14px;color:#EDE3D2;
  padding:3px 0;border-bottom:1px solid rgba(201,164,92,.1);
}
.gc li:last-child{border-bottom:0}
.gc li .n{flex:1}
.gc li .p{color:var(--ouroC);font-weight:700;font-size:13.5px;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* SELO DA FOTO DO ITEM -- pedido do dono em 17/set/2026: "pode ser menor que a
   da categoria e se clicar ele abre num tamanho maior". 72px de largura contra
   os ~200px de altura da foto da categoria: le como selo, nao compete com ela.

   A CLASSE E `item-foto` E NAO `selo` DE PROPOSITO: `.selo` JA EXISTE neste
   arquivo, e o selo de avaliacao do Google (`home.html`). Na primeira versao o
   <a> se chamava `.selo` e herdou o `padding:10px 18px` do outro -- sobraram
   34px de conteudo dentro de uma caixa de 72px, e o console ficou LIMPO. Antes
   de inventar classe neste site, procurar o nome.

   A PROPORCAO VEM DA FOTO (`--prop`, escrito pelo `miniatura` a partir de
   `Midia.largura/altura`), nao de um 3/2 chumbado: 28 das 37 midias da casa sao
   QUADRADAS e uma e retrato. Com o `--prop` certo a caixa reserva o espaco
   exato (sem pulo de layout) e o `object-fit:cover` NAO CORTA NADA -- a caixa
   passa a ter a proporcao do proprio arquivo. O `3/2` fica so como reserva para
   midia antiga sem dimensao gravada. */
.gc li .item-foto{
  flex:none;display:block;width:72px;aspect-ratio:var(--prop,3/2);
  border-radius:2px;overflow:hidden;
  border:1px solid rgba(201,164,92,.28);line-height:0;
  transition:border-color .18s;
}
.gc li .item-foto:hover,.gc li .item-foto:focus-visible{border-color:var(--ouro)}
.gc li .item-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* A LINHA QUE TEM SELO: O NOME SENTA NO PE DA FOTO -- escolha do dono em
   17/set/2026, feita vendo as duas leituras na tela (a foto continua onde
   sempre esteve, 72px na coluna da esquerda; o que muda e onde o texto senta).

   TRES TENTATIVAS ate chegar aqui, as duas primeiras MEDIDAS no site:

   1) `align-items:center` (era o que estava): texto no meio da altura da foto.

   2) `align-items:baseline` (a que o dono escolheu no mockup): a base das letras
      cai exatamente no pe da foto. Medido no Croissant: o pe do nome fica 4px
      abaixo do pe da foto, que e o espaco de descendente da fonte. Perfeito
      enquanto o nome cabe em UMA linha.
      MAS o nome que QUEBRA desanda: o `baseline` do flex usa a PRIMEIRA linha,
      entao a segunda linha cai fora da foto. Medido no "Bolo Vulcãozinho", que
      quebra em duas linhas: 18px abaixo do pe da foto. (No mockup isso nao
      apareceu porque eu tinha desenhado o cartao com ~370px de largura; o
      cartao real, com as fotos, tem ~230px.)

   3) O QUE FICOU: `flex-end`, que vale para qualquer numero de linhas, com o
      bloco de texto descido 4px -- exatamente o espaco de descendente medido na
      Pagella a 14px. Assim a base da ULTIMA linha senta no pe da foto: identico
      a opcao 2 quando o nome tem uma linha, e correto quando tem duas.
      O 4px NAO E CHUTE: e a diferenca medida entre a caixa do texto e a base
      das letras nesta fonte e neste tamanho. Se a fonte ou o corpo mudarem,
      medir de novo (no navegador: pe da caixa do nome menos pe da foto, no
      Croissant, que e o item de uma linha). */
.gc li.com-foto{align-items:flex-end}
.gc li.com-foto .n,.gc li.com-foto .p{margin-bottom:-4px}

/* A CAMADA QUE AMPLIA -- montada pelo menu.js, que so roda no Menu com Fotos.
   Sem JavaScript este elemento NAO EXISTE: o selo e um link comum e o navegador
   abre a imagem. Ou seja, nada aqui e essencial.
   `display:none` explicito no [hidden] porque `.amplia{display:flex}` venceria o
   `display:none` que o navegador aplica ao atributo hidden.
   Sem transicao de proposito: aparecer e sumir nao precisa de animacao, e assim
   nao ha nada para desligar em `prefers-reduced-motion`. */
.amplia[hidden]{display:none}
.amplia{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;
  justify-content:center;padding:clamp(12px,3vw,40px);
  background:rgba(4,12,22,.92);
}
.amplia img{
  max-width:96%;max-height:86vh;width:auto;height:auto;display:block;
  border:1px solid rgba(201,164,92,.35);box-shadow:0 24px 60px rgba(0,0,0,.6);
}
/* 44px de alvo: e o unico controle da camada e fica no canto da tela. */
.amplia .fechar{
  position:absolute;top:clamp(10px,2.4vw,22px);right:clamp(10px,2.4vw,22px);
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(201,164,92,.4);border-radius:50%;
  background:rgba(8,25,43,.72);color:var(--ouroC);font-size:22px;line-height:1;
  cursor:pointer;
}
.amplia .fechar:hover,.amplia .fechar:focus-visible{
  border-color:var(--ouro);background:rgba(201,164,92,.14);
}

/* OPCAO SEM PRECO dentro do cartao com foto -- o MESMO idioma do cardapio de
   texto (fio de latao a esquerda + recuo + 12px + tom mais baixo), adaptado:
   aqui nao ha coluna de preco, entao o fio e o recuo sao o que separam a
   opcao do produto. A `border-bottom` SAI de proposito -- era ela, somada ao
   14px e a cor #EDE3D2 iguais, que fazia TODOS os itens do cartao parecerem a
   mesma coisa (medido em 17/set: 9 itens, 0 com classe de opcao).
   A classe vem do `_catalogo.html`, pelo `{% if not i.precos.all %}`. */
.gc li.opt{
  margin-left:14px;padding-left:10px;border-bottom:0;
  border-left:1px solid rgba(201,164,92,.35);
  font-size:12px;color:#C6B79C;
}
/* TITULO DE SECAO dentro do cartao com foto -- o MESMO idioma do cardapio de
   texto (`.cat .sec2`), com o respiro ajustado: a lista logo abaixo ja traz
   `margin-top:8px` proprio, entao o titulo nao precisa de margem embaixo.
   Entrou em 17/set/2026 a pedido do dono: sem ele as opcoes ficavam indentadas
   sob nada. So aparece quando a secao TEM nome -- 12 das 14 categorias tem uma
   secao sem nome, e nelas o cartao fica exatamente como estava. */
.gc .sec2{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--azul3);margin:12px 0 0;
}
.gc .mais{font-size:12px;color:var(--azul3);font-style:italic;margin-top:10px}

/* ------------------------------------------------------------ visite */
.visite{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding:20px 0 40px}
.visite h5{
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ouro);
  font-weight:400;margin-bottom:14px;
}
.visite p{font-size:15.5px;color:#DDD3C2;line-height:1.75}
.visite .g{color:var(--azul3);font-style:italic;font-size:13.5px}
.visite a{color:var(--ouroC);border-bottom:1px solid rgba(201,164,92,.4)}
.visite a:hover{border-bottom-color:var(--ouroC)}
/* botoes da secao visite nao levam o sublinhado dos links de texto */
.visite a.mapa{border-bottom:0}

/* selo de avaliacao do Google — fica no hero, junto da chamada */
.selo{
  display:inline-flex;align-items:center;gap:10px;margin-top:24px;
  border:1px solid rgba(201,164,92,.4);padding:10px 18px;
  font-size:12.5px;color:var(--ouroC);letter-spacing:.08em;
  transition:border-color .18s,background .18s;
}
.selo:hover{border-color:var(--ouro);background:rgba(201,164,92,.08)}
.selo b{font-size:17px;font-weight:700}
.selo .estrelas{color:var(--ouro);letter-spacing:.1em;font-size:13px}

/* ------------------------------------------------------------ depoimentos */
/* Tres avaliacoes reais da ficha do Google, transcritas a mao (17/set). Mesma
   linguagem dos quadros: borda fina dourada, a mais forte em cima. O autor vai
   no pe em caixa alta espacada, como as etiquetas da casa.
   Tres colunas quando cabe (auto-fit, minimo 250px); abaixo disso empilham. O
   texto tem flex:1 para os pes ficarem alinhados mesmo com falas de tamanhos
   muito diferentes -- a primeira e longa, a segunda e uma linha so. */
.depoimentos{
  display:grid;gap:clamp(14px,2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  padding-bottom:clamp(20px,2.6vw,32px);
}
.depoimento{
  display:flex;flex-direction:column;gap:12px;margin:0;
  border:1px solid rgba(201,164,92,.28);border-top:2px solid rgba(201,164,92,.5);
  padding:clamp(18px,2.2vw,28px);
}
.depoimento .aspas{
  font-family:Georgia,serif;font-size:36px;line-height:.7;color:var(--ouro);opacity:.45;
}
.depoimento .texto{
  flex:1;margin:0;font-size:15.5px;line-height:1.7;color:#DDD3C2;font-style:italic;
}
.depoimento figcaption{display:flex;flex-direction:column;gap:5px}
.depoimento .autor{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ouro);
}
.depoimento .meta{font-size:12px;color:var(--azul3)}
.depoimento .meta .estrelas{color:var(--ouro);letter-spacing:.1em}

/* botao do mapa, na secao visite */
.mapa{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  border:1px solid rgba(201,164,92,.35);padding:9px 16px;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ouro);
  transition:background .18s,color .18s;
}
.mapa:hover{background:var(--ouro);color:var(--azul9)}

/* ------------------------------------------------------------ rodape */
/* O rodape tinha a asa dourada ao lado de "cardapio sujeito a safra":
   `footer .fl` (a fileira que segurava asa + texto) e `footer img{96px}`.
   Saiu em 17/set/2026 a pedido do dono -- a asa e a mesma que ja vem dentro
   do lockup do cabecalho, entao aparecia duas vezes na mesma tela.
   Sobrou o flex de DUAS pontas: nome da casa a esquerda, safra a direita. */
footer{
  border-top:1px solid rgba(201,164,92,.2);padding:22px 0 34px;display:flex;
  justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:12px;color:var(--azul3);font-style:italic;
}

/* ------------------------------------------------------------ aviso de rascunho */
/* Aparece so quando falta conteudo do site no banco. Nunca deve chegar ao ar:
   e de proposito que fica visivel e feio. */
.rascunho{
  border:1px dashed #E0857C;background:rgba(224,133,124,.1);color:#F3C9C4;
  padding:14px 18px;font-size:13.5px;line-height:1.6;margin:0 0 26px;
}
.rascunho b{color:#FFD9D4;letter-spacing:.06em;text-transform:uppercase;font-size:11.5px}

/* ------------------------------------------------------------ modos do cardapio */
.modos{display:flex;gap:10px;justify-content:center;padding:6px 0 4px;flex-wrap:wrap;align-items:center}
.modo{
  border:1px solid rgba(201,164,92,.4);color:var(--azul3);padding:9px 18px;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;transition:all .18s;
}
.modo:hover{border-color:var(--ouro);color:var(--ouroC)}
.modo.on{background:var(--ouro);border-color:var(--ouro);color:var(--azul9);font-weight:700}

/* ------------------------------------------------------------ breakpoints */
@media (max-width:1000px){
  .cols{columns:2}
  .visite{grid-template-columns:1fr 1fr}
  /* Aqui quem aponta e o dedo, entao o alvo de toque vai a 46px (o minimo
     confortavel e 44). No desktop o botao fica com 38px -- ver o comentario
     do `.social`, la em cima. */
  .social{width:46px;height:46px}
  .social svg{width:21px;height:21px}
  /* O menu NAO some mais aqui. Ate 17/set esta linha era `nav{display:none}`,
     sobra de quando o cabecalho tinha o botao "Pedir agora" e o menu nao
     cabia ao lado dele. O dono pediu em 17/set: "Cardapio e Menu com Fotos
     tem que aparecer no mobile" -- e no telefone o cardapio e justamente o
     que a pessoa procura, era onde ele sumia.
     O grid de 3 colunas (1fr auto 1fr) nao cabe em 390px, entao o cabecalho
     passa a DUAS linhas: a marca ocupa a linha inteira (flex-basis:100%) e os
     dois menus caem juntos logo abaixo, centrados. Em vez de item por item,
     e o mesmo cabecalho com as pecas empilhadas. */
  header{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:12px 28px;padding:14px 0 16px;min-height:0;
  }
  .marca{flex-basis:100%;justify-content:center}
  /* 28px de vao ENTRE os grupos, contra os 16px de dentro deles
     (nav{gap:clamp(16px,2.2vw,30px)} a 390px cai no minimo, 16px): assim
     "Menu com Fotos / Cardapio" e os dois BOTOES de rede social leem como dois
     grupos, e nao como quatro alvos soltos.
     (Ate 17/set/2026 o segundo grupo era "A casa / Visite"; os dois links
     sairam a pedido do dono e ficaram os icones -- o vao de 28px continua
     valendo, agora separando texto de icone.) */
  header nav{justify-content:center}
}
@media (max-width:680px){
  .cols{columns:1}
  .visite{grid-template-columns:1fr;gap:26px}
  /* Carrossel no celular: a peca fica com 62% da largura, entao aparece uma
     inteira e a seguinte espia na borda -- o formato que o dono escolheu
     ("a 2 fica melhor"). Os 62% tambem deixam a foto maior do que o piso de
     170px que existia aqui, o que ajuda a ler o prato no telefone.
     O `.fila{align-items:center}` que existia nesta linha saiu: quando as
     pecas empilhavam (uma por linha) ele nao fazia nada; agora que dividem a
     mesma linha ele desalinharia a peca que espia, contra o `flex-end` do
     desktop. Fora daqui vale o alinhamento pela base, que e o da parede. */
  .quadro{width:min(calc(var(--w, 300) * 1px), 62%)}
  .destaque{padding:18px}
  td{font-size:14.5px}
  /* O `header{min-height:76px}` saiu em 17/set: ele vinha de quando o
     cabecalho era uma linha so. Agora sao duas (marca + menus) e a altura
     vem do conteudo, mais alta que 76px -- a regra nao fazia mais nada. */
  /* O .hero h1 saiu daqui em 17/set. Ele forcava 32-44px e sobrescrevia o
     tamanho novo da frase do topo (23px -- o mesmo da .lede que ela
     substituiu), entao no celular a frase voltava a ser um titulo grande sem
     ninguem perceber. O clamp da regra base ja responde ao celular. */
}

/* Roda do mouse NO DESKTOP -- medido em 17/set/2026 com input de verdade (CDP,
   `scripts/teste_roda.py`), depois que o dono disse "pode rolar no desktop":
   com 12 pecas na fileira (o cenario dele: "vamos ter mais que 4 fotos em
   cada"), a roda normal **nao move nada** (deltaY=200 -> scrollLeft 0 -> 0).
   Só o shift+roda (ou o trackpad de lado) rola: deltaX=200 -> 352. E nao havia
   barra nenhuma para arrastar (`barra_px=0`) -- sem barra, sem dedo e sem roda,
   a fileira ficava inalcancavel no desktop, ainda que "rolavel".

   A saida e a barra fina, e continua SEM JavaScript. O gatilho tem DUAS
   condicoes, de proposito:
     - `(min-width:1001px)` e deterministica e e o mesmo breakpoint do
       cabecalho. Sozinha, deixaria de fora um mouse numa janela estreita.
     - `(hover:hover) and (pointer:fine)` (= mouse) pega esse caso. Mas ela
       NAO pode ser a unica: MEDIDO no Chrome headless, ela da **false** para
       as duas (`hover_hover:False, pointer_fine:False`) -- um ambiente sem
       mouse declarado cairia fora e a barra nunca apareceria. Ja mordeu.
   Em celular e tablet com dedo ela nao aparece (la o arrasto e natural) e a
   fileira continua limpa como o dono aprovou. Quando a fileira nao transborda
   (4 quadros a 1440px) a barra tambem nao aparece: `overflow-x:auto` so cria a
   barra quando ha o que rolar. */
@media (min-width:1001px), (hover:hover) and (pointer:fine){
  .fila{
    scrollbar-width:thin;
    scrollbar-color:rgba(201,164,92,.55) rgba(201,164,92,.1);
    /* a barra ocupa 8px de altura; devolve esse espaco para o vao abaixo da
       parede nao mudar de tamanho por causa dela */
    padding-bottom:40px;
  }
  .fila::-webkit-scrollbar{display:block;height:8px}
  .fila::-webkit-scrollbar-track{background:rgba(201,164,92,.1);border-radius:4px}
  .fila::-webkit-scrollbar-thumb{
    background:rgba(201,164,92,.55);border-radius:4px;
  }
  .fila::-webkit-scrollbar-thumb:hover{background:var(--ouro)}
}

/* ESTADOS DO ARRASTO -- classes que so o `parede.js` poe. Sem JavaScript,
   nada disso aparece e a parede fica exatamente como estava: caixa de rolagem
   normal, com a barra fina acima. Melhoria progressiva, nao dependencia.

   `.sem-snap`/`.arrastando` existem para o `scroll-snap-type:x mandatory` do
   `.fila` nao brigar com o gesto: com o snap ligado, cada mudanca de
   `scrollLeft` e puxada de volta e o arrasto fica travado. Suspende durante o
   movimento, devolve quando o gesto acaba -- e aí o navegador assenta a peca
   mais proxima. `.assentando` faz esse assentamento ser animado, em vez de um
   pulo seco; quem pediu menos movimento nao recebe a classe (o proprio JS
   decide), e o breakpoint de `prefers-reduced-motion` no fim do arquivo
   tambem mata a animacao.

   `.pode-arrastar` tambem e posta pelo JS, e nao escrita fixa aqui, porque um
   cursor de "pegue e arraste" numa fileira que NAO rola e mentira. O JS so a
   poe quando a fileira de fato transborda. */
.fila.sem-snap,
.fila.arrastando{scroll-snap-type:none}
.fila.assentando{scroll-behavior:smooth}
.fila.pode-arrastar{cursor:grab}
.fila.arrastando{cursor:grabbing;user-select:none;-webkit-user-select:none}
.fila.arrastando *{cursor:grabbing}

/* quem pediu menos movimento, recebe menos movimento */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}