/* Armazém Fonseca · vitrine
   Paleta tirada da logo do Léo (selo creme, letreiro café, queijo amarelo, grama verde).
   Young Serif conversa com o letreiro da logo; Figtree carrega o texto. */

@font-face{font-family:"Young Serif";src:url("/fontes/young-serif-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("/fontes/figtree-latin.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

:root{
  --cafe-950:#2a180d;
  --cafe-900:#3a2314;
  --cafe-800:#512f18;
  --cafe-700:#723f1e;
  --cafe-500:#9a6b45;
  --creme-0:#fffcf5;
  --creme-50:#fcf7ec;
  --creme-100:#f6e8cc;
  --creme-200:#ecd6ae;
  --queijo:#f3c24f;
  --queijo-claro:#f8d77f;
  --pasto:#43702a;
  --pasto-escuro:#375d22;
  --carimbo:#a63e26;
  --tinta:#2b1a10;
  --tinta-2:#5e4533;
  --serif:"Young Serif",Georgia,"Times New Roman",serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --suave:cubic-bezier(.16,1,.3,1);
  --lado:clamp(1.25rem,5vw,4.5rem);
  --grao-escuro:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .32  0 0 0 0 .18  0 0 0 0 .08  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --grao-claro:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .93  0 0 0 0 .8  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{margin:0;background:var(--creme-50) var(--grao-escuro);color:var(--tinta);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--queijo);outline-offset:3px;border-radius:8px}
main:focus{outline:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:1rem;top:-5rem;z-index:99;background:var(--queijo);color:var(--cafe-950);padding:.8rem 1.1rem;border-radius:999px;font-weight:700;text-decoration:none}
.pular:focus{top:1rem}

/* ---------- botões ---------- */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:52px;padding:0 1.5rem;border-radius:999px;border:2px solid transparent;font:700 1.0625rem/1.1 var(--sans);text-decoration:none;text-align:center;cursor:pointer;transition:background-color .2s var(--suave),border-color .2s var(--suave),transform .15s var(--suave);-webkit-tap-highlight-color:transparent}
.botao:active{transform:scale(.97)}
.botao svg{width:1.3em;height:1.3em;flex:none}
.botao--queijo{background:var(--queijo);color:var(--cafe-950)}
.botao--queijo:hover{background:var(--queijo-claro)}
.botao--linha{border-color:rgba(252,247,236,.42);color:var(--creme-50)}
.botao--linha:hover{background:rgba(252,247,236,.1);border-color:rgba(252,247,236,.7)}
.botao--add{width:100%;background:var(--cafe-700);color:var(--creme-50)}
.botao--add:hover{background:var(--cafe-800)}
.botao--aviso{width:100%;border-color:rgba(114,63,30,.32);color:var(--cafe-800)}
.botao--aviso:hover{background:var(--creme-100)}
.botao--zap{width:100%;min-height:60px;background:var(--pasto);color:var(--creme-0);font-size:1.125rem}
.botao--zap:hover{background:var(--pasto-escuro)}

/* ---------- capa ---------- */
.capa{--borda:max(var(--lado),calc((100% - 1240px) / 2 + var(--lado)));position:relative;overflow:hidden;display:grid;gap:clamp(2rem,4vw,3rem);padding:clamp(1.1rem,3vw,2rem) var(--borda) 0;background:var(--cafe-950) var(--grao-claro);color:var(--creme-50)}
.capa__texto{display:flex;flex-direction:column}
.marca{align-self:flex-start;display:inline-flex;align-items:center;gap:.8rem;text-decoration:none;font:400 1.3rem/1 var(--serif);color:var(--creme-100)}
.marca img{width:56px;height:56px;border-radius:50%;box-shadow:0 0 0 3px rgba(246,232,204,.18)}
.capa__msg{display:flex;flex-direction:column;gap:1.15rem;margin-top:clamp(2.5rem,9vh,6.5rem)}
.capa__olho{font:700 .95rem/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--queijo)}
.capa h1{max-width:12ch;font-size:clamp(2.9rem,6.4vw + .4rem,5.8rem);line-height:1;letter-spacing:-.018em;color:var(--creme-50)}
/* "trem bão" fica numa linha só; o traço de pincel mora num pseudo-elemento pra não
   atravessar a linha de baixo (como fundo de inline ele cruzava o texto quando quebrava) */
.capa h1 em{position:relative;display:inline-block;white-space:nowrap;font-style:normal;color:var(--queijo)}
.capa h1 em::after{content:"";position:absolute;left:-.02em;right:-.04em;bottom:-.1em;height:.19em;background:no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'><path d='M3 10 C 45 3, 95 4, 132 7 S 183 13, 197 5' stroke='%23f3c24f' stroke-width='4.5' fill='none' stroke-linecap='round' opacity='.8'/></svg>")}
.capa__sub{max-width:33ch;font-size:clamp(1.0625rem,.55vw + .95rem,1.25rem);color:rgba(252,247,236,.85)}
.capa__acoes{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.6rem}

/* a foto vem recortada no formato do celeiro da logo, apoiada no chão da vitrine */
.capa__foto{--telhado:polygon(0 30%,15% 11%,50% 0,85% 11%,100% 30%,100% 100%,0 100%);position:relative;margin:0 auto;width:min(100%,540px);aspect-ratio:4/3.5;padding:9px 9px 0;background:var(--creme-100);clip-path:var(--telhado)}
.capa__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;clip-path:var(--telhado)}

@media (min-width:880px){
  .capa{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:end;min-height:min(90svh,860px)}
  .capa__texto{align-self:stretch;padding-bottom:clamp(3rem,7vh,5.5rem)}
  .capa__msg{margin-top:auto;padding-top:3rem}
  .capa__foto{width:100%;max-width:580px;aspect-ratio:4/4.5;margin:0 0 0 auto}
}

/* ---------- abas das categorias ---------- */
.abas{position:sticky;top:0;z-index:30;background:var(--creme-50);border-bottom:1px solid var(--creme-200)}
.abas__lista{display:flex;gap:.5rem;max-width:1240px;margin:0 auto;padding:.7rem var(--lado);list-style:none;overflow-x:auto;scrollbar-width:none}
.abas__lista::-webkit-scrollbar{display:none}
.abas a{display:inline-flex;align-items:center;min-height:44px;padding:0 1.15rem;border-radius:999px;border:1.5px solid rgba(114,63,30,.28);text-decoration:none;font-weight:650;color:var(--cafe-800);white-space:nowrap;transition:background-color .2s var(--suave),color .2s,border-color .2s}
.abas a:hover{border-color:var(--cafe-700)}
.abas a[aria-current="true"]{background:var(--cafe-700);border-color:var(--cafe-700);color:var(--creme-50)}

/* ---------- vitrine ---------- */
.vitrine{max-width:1240px;margin:0 auto;padding:clamp(2.75rem,6vw,5rem) var(--lado) clamp(3.5rem,7vw,6rem)}
#vitrine{display:grid;gap:clamp(3.75rem,8vw,6.5rem)}
.vitrine__data{margin:0 0 clamp(1.75rem,4vw,2.75rem);font-size:.95rem;font-weight:650;color:var(--tinta-2)}
.categoria__topo{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1.25rem;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.categoria h2{font-size:clamp(2.3rem,3.4vw + 1rem,3.5rem);color:var(--cafe-800)}
.categoria__sub{color:var(--tinta-2);font-size:1.0625rem}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:clamp(2.5rem,4vw,3.25rem) clamp(1.25rem,3vw,2rem);margin:0;padding:0;list-style:none}

.produto{display:flex;flex-direction:column}
.produto__foto{position:relative;aspect-ratio:1/1;border-radius:20px;background:var(--creme-100);box-shadow:0 1px 0 rgba(58,35,20,.08),0 20px 38px -24px rgba(58,35,20,.6)}
/* A foto do Léo chega de todo jeito (em pé, deitada, quadrada). A moldura é sempre quadrada e a
   foto aparece INTEIRA dentro dela (contain); a sobra é preenchida pela própria foto desfocada.
   Nada é cortado e todos os cartões ficam do mesmo tamanho. Tudo absoluto: conteúdo em fluxo
   empurraria o aspect-ratio (foi o que esticou o cartão do doce com queijo em 11/09). */
.produto__moldura,.produto__ilustra{position:absolute;inset:0;border-radius:inherit}
.produto__moldura{overflow:hidden;background:var(--cafe-900)}
.produto__moldura::before{content:"";position:absolute;inset:-30px;background:var(--foto) center/cover no-repeat;filter:blur(24px) saturate(1.15) brightness(.9)}
.produto__moldura>img{position:relative;width:100%;height:100%;object-fit:contain}
.produto__ilustra{display:grid;place-items:center;background:radial-gradient(circle at 2px 2px,rgba(114,63,30,.14) 1.4px,transparent 1.9px) 0 0/20px 20px,var(--creme-100)}
.produto__ilustra svg{width:56%;max-width:230px;height:auto}

/* etiqueta de preço: a de papel amarrada na prateleira do armazém */
.etiqueta{position:absolute;left:14px;bottom:-22px;display:flex;flex-direction:column;gap:.15rem;padding:.55rem 1.05rem .55rem 1.65rem;background:var(--queijo);color:var(--cafe-950);clip-path:polygon(16px 0,100% 0,100% 100%,16px 100%,0 50%);transform:rotate(-3.5deg);transform-origin:left center}
.etiqueta::before{content:"";position:absolute;left:10px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--cafe-800);opacity:.7}
.etiqueta strong{font:400 1.5rem/1 var(--serif);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.etiqueta span{font:700 .82rem/1.15 var(--sans);letter-spacing:.02em}
.etiqueta--consulte strong{font-size:1.15rem}

.carimbo{position:absolute;top:14px;right:14px;padding:.28rem .75rem;border:3px solid currentColor;border-radius:8px;background:rgba(255,252,245,.9);color:var(--carimbo);font:800 .95rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;transform:rotate(7deg);filter:url(#tinta)}
.carimbo--breve{color:var(--pasto)}
.produto--acabou .produto__moldura,.produto--acabou .produto__ilustra svg{filter:grayscale(.9) contrast(.92);opacity:.68}

.produto__corpo{display:flex;flex:1;flex-direction:column;gap:.45rem;padding-top:2.25rem}
.produto h3{font-size:1.6rem;color:var(--cafe-900)}
.produto__desc{max-width:42ch;color:var(--tinta-2)}
.produto__acao{display:flex;align-items:center;gap:.9rem;min-height:68px;margin-top:auto;padding-top:.9rem}

.qtd{display:inline-grid;grid-template-columns:52px 3.2ch 52px;align-items:center;justify-items:center;padding:4px;border-radius:999px;background:var(--creme-100)}
.qtd button{width:52px;height:46px;border:0;border-radius:999px;background:var(--creme-0);color:var(--cafe-800);font:700 1.5rem/1 var(--sans);cursor:pointer;box-shadow:0 1px 0 rgba(58,35,20,.14);transition:background-color .15s}
.qtd button:hover{background:#fff}
.qtd output{font:800 1.2rem/1 var(--sans);color:var(--cafe-900);font-variant-numeric:tabular-nums}
.qtd__rotulo{font-weight:650;color:var(--tinta-2)}

.aviso-vitrine{max-width:36rem;display:grid;gap:1rem;justify-items:start}
.aviso-vitrine h2{font-size:clamp(2rem,3vw + 1rem,2.8rem);color:var(--cafe-800)}
.aviso-vitrine .botao{width:auto}

.esqueleto{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:2rem}
.esqueleto div{aspect-ratio:4/3;border-radius:20px;background:linear-gradient(100deg,var(--creme-100) 30%,var(--creme-200) 50%,var(--creme-100) 70%) 0 0/300% 100%;animation:brilho 1.6s linear infinite}
@keyframes brilho{to{background-position:-150% 0}}

/* ---------- pedido (a comanda) ---------- */
.pedido{padding:clamp(3.5rem,7vw,5.5rem) var(--lado);background:var(--creme-100) var(--grao-escuro)}
.comanda{position:relative;max-width:34rem;margin:0 auto;padding:2.4rem clamp(1.25rem,4vw,2.25rem) 2rem;border-radius:3px 3px 16px 16px;background:var(--creme-0);box-shadow:0 28px 50px -32px rgba(58,35,20,.65)}
.comanda::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:radial-gradient(circle at 50% 0,var(--creme-100) 6px,transparent 6.5px) 0 0/18px 12px repeat-x}
.comanda h2{font-size:clamp(2.1rem,2.5vw + 1.2rem,2.8rem);color:var(--cafe-800)}
.comanda__intro{margin-top:.6rem;color:var(--tinta-2)}
.passos{display:grid;gap:1.05rem;margin:1.35rem 0 0;padding:0;list-style:none;counter-reset:p}
.passos li{display:grid;grid-template-columns:2.6rem 1fr;gap:.95rem;align-items:center;counter-increment:p}
.passos li::before{content:counter(p);display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--queijo);color:var(--cafe-950);font:400 1.25rem/1 var(--serif)}
.passos b{color:var(--cafe-900)}

.itens{margin:1.1rem 0 0;padding:0;list-style:none}
.itens li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.55rem 1rem;padding:1rem 0;border-bottom:2px dashed var(--creme-200)}
.itens__nome{font-weight:700;color:var(--cafe-900)}
.itens__nome small{font-weight:500;color:var(--tinta-2);font-size:.9rem}
.itens__preco{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.itens .qtd{grid-column:1 / -1;justify-self:start}
.total{display:flex;justify-content:space-between;align-items:baseline;margin:1.2rem 0 .2rem;font-weight:700;color:var(--cafe-900)}
.total strong{font:400 2rem/1 var(--serif);font-variant-numeric:tabular-nums}
.total__obs{text-align:right;color:var(--tinta-2);font-size:.95rem}
.rotulo{display:block;margin:1.5rem 0 .45rem;font-weight:700;color:var(--cafe-900)}
.rotulo span{font-weight:500;color:var(--tinta-2)}
.entrada{width:100%;min-height:54px;padding:0 1rem;border:2px solid var(--creme-200);border-radius:12px;background:var(--creme-50);font:500 1.0625rem var(--sans);color:var(--tinta)}
.entrada:focus{outline:none;border-color:var(--cafe-700)}
#enviar{margin-top:1.1rem}
.miudo{margin-top:.8rem;text-align:center;font-size:.95rem;color:var(--tinta-2)}
.limpar{display:block;margin:1rem auto 0;padding:.6rem 1rem;border:0;background:none;color:var(--tinta-2);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- rodapé ---------- */
.rodape{padding:clamp(3rem,6vw,4.5rem) var(--lado) calc(clamp(2rem,4vw,3rem) + 84px);background:var(--cafe-950) var(--grao-claro);color:var(--creme-100)}
.rodape__dentro{display:grid;grid-template-columns:auto 1fr;gap:1.25rem 1.5rem;align-items:center;max-width:calc(1240px - 2 * var(--lado));margin:0 auto}
.rodape__logo{width:88px;height:88px;border-radius:50%}
.rodape__nome{font:400 1.8rem/1.1 var(--serif);color:var(--creme-50)}
.rodape__texto p:last-child{color:rgba(246,232,204,.75)}
.rodape__links{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;margin:0;padding:0;list-style:none}
.rodape__links a{display:inline-flex;align-items:center;min-height:44px;font-weight:650;text-decoration:underline;text-decoration-color:rgba(243,194,79,.55);text-underline-offset:4px}
.rodape__links a:hover{text-decoration-color:var(--queijo)}
.credito{max-width:calc(1240px - 2 * var(--lado));margin:2.5rem auto 0;font-size:.9rem;color:rgba(246,232,204,.55)}
@media (min-width:880px){.rodape__links{grid-column:auto;justify-self:end}.rodape__dentro{grid-template-columns:auto 1fr auto}}

/* ---------- barra do pedido ---------- */
.barra{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));z-index:40;width:min(calc(100% - 24px),34rem);transform:translate(-50%,0);transition:transform .4s var(--suave),opacity .3s var(--suave)}
.barra[data-escondida]{transform:translate(-50%,150%);opacity:0;pointer-events:none}
.barra a{display:flex;align-items:center;gap:.7rem;min-height:62px;padding:.45rem .45rem .45rem 1.1rem;border-radius:999px;background:var(--cafe-900);color:var(--creme-50);text-decoration:none;box-shadow:0 18px 40px -14px rgba(20,10,4,.75)}
.barra svg{width:1.5rem;height:1.5rem;flex:none;color:var(--queijo)}
.barra__qtd{font-weight:750}
.barra__total{color:rgba(252,247,236,.78);font-variant-numeric:tabular-nums}
.barra__ir{margin-left:auto;padding:.85rem 1.15rem;border-radius:999px;background:var(--queijo);color:var(--cafe-950);font-weight:800}

/* ---------- de onde vem ---------- */
.origem{padding:clamp(3.75rem,8vw,6.5rem) var(--lado);background:var(--cafe-950) var(--grao-claro);color:var(--creme-100)}
.origem__dentro{display:grid;gap:clamp(1.75rem,4vw,4rem);max-width:calc(1240px - 2 * var(--lado));margin:0 auto}
.origem h2{max-width:12ch;font-size:clamp(2.3rem,3.6vw + 1rem,3.9rem);line-height:1.04;color:var(--creme-50)}
.origem h2 em{font-style:normal;color:var(--queijo)}
.origem__assina{margin-top:1rem;font-weight:600;color:rgba(246,232,204,.7)}
.origem__texto{display:grid;gap:1.15rem;max-width:62ch;font-size:clamp(1.0625rem,.4vw + 1rem,1.2rem);color:rgba(252,247,236,.86)}
.origem__texto b{font-weight:700;color:var(--queijo)}
@media (min-width:880px){.origem__dentro{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}}

/* ---------- perguntas ---------- */
.perguntas{padding:clamp(3.75rem,8vw,6rem) var(--lado)}
.perguntas__dentro{display:grid;gap:clamp(1.5rem,4vw,4rem);max-width:calc(1240px - 2 * var(--lado));margin:0 auto}
.perguntas h2{max-width:11ch;font-size:clamp(2.2rem,3vw + 1rem,3.3rem);color:var(--cafe-800)}
.pergunta{padding:1.5rem 0;border-bottom:2px dashed var(--creme-200)}
.pergunta:first-child{padding-top:0}
.pergunta h3{margin-bottom:.55rem;font-size:clamp(1.3rem,.8vw + 1.05rem,1.55rem);line-height:1.2;color:var(--cafe-900)}
.pergunta p{max-width:60ch;color:var(--tinta-2)}
@media (min-width:880px){
  .perguntas__dentro{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .perguntas h2{position:sticky;top:6rem;align-self:start}
}
.rodape__cidade{margin-top:.2rem;font-weight:650;color:var(--queijo)}

/* ---------- movimento ---------- */
@keyframes surge{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes revela{from{opacity:0;transform:scale(1.07)}to{opacity:1;transform:none}}
.js .capa [data-surge]{animation:surge .9s var(--suave) both;animation-delay:calc(var(--i,0) * 90ms + 60ms)}
.js .capa__foto img{animation:revela 1.5s var(--suave) both .15s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}