/* Template Dentista · site.css (base Padoca da Mari)
   Paleta do cardápio e da parede da padoca: laranja, pêssego e creme. Fontes: Urbanist + Bitter (a serifada do cardápio delas). */
@font-face{font-family:'Urbanist';src:url(../fonts/urbanist-latin.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url(../fonts/bricolage-grotesque-latin-wght-normal.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
:root{
  --papel:#FDF1E6; --papel-2:#F8E0CC; --branco:#FFF9F3; --tinta:#2B211C; --cinza:#6F6058;
  --noite:#C4521E; --noite-2:#9C3F14; --ouro:#F7C29A; --ouro-esc:#B0481A;
  --serif:'Urbanist',system-ui,sans-serif; --sans:'Urbanist',system-ui,sans-serif; --cond:'Bitter',Georgia,serif;
  --lado:max(22px,calc((100vw - 1200px)/2));
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%}
body{overflow-x:hidden;overflow-x:clip;background:var(--papel);color:var(--tinta);font:400 16.5px/1.62 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.ico{width:1.15em;height:1.15em;fill:currentColor;flex:none}
.skip{position:absolute;left:-999px;top:8px;padding:10px 16px;z-index:300;background:var(--noite);color:#fff}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--ouro-esc);outline-offset:3px}
.preencher{display:inline-block;background:#FFE58A;color:#5A4500;font:600 12.5px/1.3 var(--sans);padding:3px 8px;border-radius:3px}

/* tipografia */
.serif{font-family:var(--serif);font-weight:700;letter-spacing:-.02em}
.cond{font-family:var(--cond);font-stretch:62%;font-weight:700;letter-spacing:-.005em;line-height:.95}
.rot{font:600 12px/1.4 var(--sans);letter-spacing:.08em;color:var(--cinza)}
h2.serif{font-size:clamp(38px,4.6vw,62px);line-height:1.02}
.serif em{font-style:normal;font-weight:400}

/* botões */
.btn{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;font:600 14.5px/1 var(--sans);text-decoration:none;transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s}
.btn:hover{transform:translateY(-2px)}
.btn-noite{background:var(--noite);color:#fff}
.btn-noite:hover{background:var(--noite-2)}
.btn-branco{background:#fff;color:var(--noite)}
.btn-linha{border:1px solid currentColor;border-radius:0}
.btn-linha:hover{background:var(--tinta);color:var(--branco);border-color:var(--tinta)}
.btn-linha-clara{border:1px solid #fff;border-radius:0;color:#fff}
.btn-linha-clara:hover{background:#fff;color:var(--tinta)}
@media (pointer:coarse){.btn{min-height:50px}}

/* entradas */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}

/* cabeçalho: logo à esquerda, links e botão à direita (sobre o topo, fica claro ao rolar) */
.cab{position:fixed;inset:0 0 auto;z-index:100;transition:background .4s,box-shadow .4s,transform .45s var(--ease)}
.cab .box{display:flex;align-items:center;justify-content:space-between;gap:24px;height:80px;padding:0 var(--lado)}
.cab .logo{text-decoration:none}
.marca{font-family:var(--cond);font-stretch:62%;font-weight:700;font-size:34px;line-height:1;letter-spacing:-.005em;white-space:nowrap}
.marca em{font-style:normal;font-weight:400;color:var(--ouro-esc)}
body:has(.topo) .cab:not(.rolou) .marca em{color:var(--ouro)}
.cab nav{display:flex;align-items:center;gap:30px}
.cab nav ul{display:flex;gap:26px;list-style:none;font:500 15px/1 var(--sans)}
.cab nav ul a{text-decoration:none}
.cab nav ul a:hover{text-decoration:underline;text-underline-offset:6px}
.cab .menu{display:none;width:44px;height:44px;place-items:center;font-size:22px}
.cab.rolou{background:var(--papel);box-shadow:0 1px 0 rgba(26,18,13,.08)}
.cab.some{transform:translateY(-100%)}
@media (max-width:899px){.cab nav ul{display:none}.cab .menu{display:grid}.cab nav{gap:6px}.cab nav .btn{min-height:42px;padding:0 16px}.cab .box{height:70px}.cab .marca{font-size:27px}}

/* topo em tela cheia */
.topo{position:relative;height:100svh;min-height:580px;overflow:hidden;background:var(--noite)}
.topo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(11,7,5,.55) 0,rgba(11,7,5,0) 22%,rgba(11,7,5,0) 45%,rgba(11,7,5,.82) 100%)}
.topo picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform-origin:60% 40%}
.topo .txt{position:absolute;z-index:2;left:var(--lado);right:var(--lado);bottom:clamp(30px,7vh,64px);display:grid;gap:28px}
.topo h1{font-family:var(--cond);font-stretch:62%;font-weight:700;font-size:clamp(76px,10.4vw,156px);line-height:.86;letter-spacing:-.01em;color:var(--branco)}
.topo h1 .l{display:block;overflow:hidden;padding:.1em 0 .14em;margin:-.1em 0 -.14em}
.topo h1 .l+.l{font-weight:400;color:var(--ouro)}
.topo h1 .c{display:inline-block}
.topo .sub{font-size:clamp(15px,1.2vw,17px);color:rgba(251,246,238,.86);max-width:30ch;margin-top:18px}
.topo .base{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:14px;color:var(--branco)}
.desce{width:46px;height:46px;border:1px solid rgba(251,246,238,.7);border-radius:50%;display:grid;place-items:center;text-decoration:none;font-size:17px}
.agora{display:inline-flex;align-items:center;gap:8px;background:rgba(20,13,10,.55);backdrop-filter:blur(6px);padding:8px 14px;border-radius:999px}
.agora::before{content:"";width:7px;height:7px;border-radius:50%;background:#2E8B3E}
.agora.fechado::before{background:#9A8E84}
.topo .agora.fechado{color:rgba(251,246,238,.8)!important}
body:has(.topo) .cab:not(.rolou){color:var(--branco)}
body:has(.topo) .cab:not(.rolou) .btn-noite{background:#fff;color:var(--noite)}
[data-agora].fechado{color:var(--cinza)!important}
/* entrada do topo em CSS (não espera o GSAP): letras sobem de dentro da linha, depois o texto e a base */
.js .topo h1 .c{transform:translateY(135%);animation:mk-sobe 1.15s cubic-bezier(.23,1,.32,1) calc(.1s + var(--i) * .035s) forwards}
.js .topo .sub{opacity:0;transform:translateY(24px);animation:mk-entra .9s cubic-bezier(.165,.84,.44,1) 1.03s forwards}
.js .topo .base>*{opacity:0;transform:translateY(16px);animation:mk-entra .8s cubic-bezier(.165,.84,.44,1) 1.33s forwards}
.js .topo .base>*+*{animation-delay:1.43s}
@keyframes mk-sobe{to{transform:none}}
@keyframes mk-entra{to{opacity:1;transform:none}}
@media (max-width:699px){
  /* no celular o texto fica embaixo, em branco sobre uma sombra (a parte de baixo da foto é a mão e o fundo escuro) */
  .topo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(11,7,5,.5) 0,rgba(11,7,5,0) 16%,rgba(11,7,5,0) 38%,rgba(11,7,5,.45) 58%,rgba(11,7,5,.82) 100%)}
  .topo .txt{top:auto;bottom:34px;align-content:end;gap:22px}
  .topo h1,.topo .sub{color:#fff}
  .topo .sub{color:rgba(255,255,255,.9)}
  .topo .base{justify-content:flex-start;order:-1}
  .topo .desce{display:none}
  .topo h1{font-size:clamp(64px,19vw,92px)}
  .topo .sub{max-width:20ch}
}

/* três fotos */
.tres{display:grid;grid-template-columns:repeat(3,1fr);height:clamp(380px,64svh,660px)}
.tres figure{overflow:hidden;position:relative}
.tres img{position:absolute;inset:-7% 0;width:100%;height:114%;object-fit:cover}
@media (max-width:640px){.tres{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto}.tres figure{aspect-ratio:4/5}.tres figure:nth-child(2){grid-column:1/-1;order:3;aspect-ratio:16/10}}

/* faixa azul */
.faixa{background:var(--noite);color:#fff;text-align:center;padding:clamp(70px,9vw,120px) var(--lado)}
.faixa .serif{color:var(--ouro);font-size:clamp(20px,1.8vw,26px);font-weight:600}
.faixa h2{font-size:clamp(50px,7.2vw,104px);margin:12px auto 22px;max-width:12ch}
.faixa p{max-width:46ch;margin:0 auto 32px;opacity:.86}

/* a casa + colagem */
.sec{padding:clamp(80px,11vw,140px) var(--lado)}
.casa .cab2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;max-width:900px;margin:0 auto}
.casa .cab2 h2{margin-top:14px}
.casa .cab2 p{color:var(--cinza);max-width:34ch;margin-bottom:18px}
.colagem{margin-top:clamp(56px,7vw,90px);display:grid;grid-template-columns:3fr 7fr;align-items:start}
.colagem .peq{margin-top:12%;margin-right:-4%;position:relative;z-index:2;aspect-ratio:4/3;overflow:hidden}
.colagem .grande{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--papel-2)}
.colagem img{width:100%;height:100%;object-fit:cover}
.colagem .grande img{position:absolute;inset:0;opacity:0;transition:opacity 1.2s}
.colagem .grande img.on{opacity:1}
.barra{grid-column:2;display:flex;width:110px;height:2px;background:rgba(26,18,13,.15);margin:22px auto 0}
.barra i{flex:1;transition:background .4s}
.barra i.on{background:var(--tinta)}
@media (max-width:760px){.casa .cab2{grid-template-columns:1fr}.colagem{grid-template-columns:1fr}.colagem .peq{display:none}.barra{grid-column:1}}

/* cardápio (petit chou), com foto inteira */
.cardapio{background:var(--branco);padding:clamp(70px,9vw,110px) var(--lado)}
.cardapio .cab2{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;margin-bottom:46px}
.num{width:42px;height:42px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:13px;margin-top:8px}
.cardapio h2{font-size:clamp(36px,4.2vw,56px);max-width:15ch}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tile{background:var(--papel);display:grid;grid-template-rows:auto auto 1fr auto;text-decoration:none;transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.tile:hover{background:var(--papel-2);box-shadow:0 18px 40px -24px rgba(20,13,10,.35)}
.tile .ft{aspect-ratio:1;overflow:hidden}
.tile .ft img{width:100%;height:100%;object-fit:cover}
.tile h3{font-family:var(--serif);font-weight:700;font-size:26px;line-height:1.05;letter-spacing:-.01em;padding:22px 22px 8px}
.tile p{font-size:14px;color:var(--cinza);line-height:1.5;padding:0 22px}
.tile b{font-weight:600;font-size:14.5px;padding:12px 22px 24px}
.cardapio .mais{margin-top:34px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;color:var(--cinza);font-size:14.5px}
@media (max-width:900px){.tiles{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.tile h3{font-size:24px;padding:16px 14px 6px}.tile p{padding:0 14px;font-size:13.5px}.tile b{padding:10px 14px 18px}}

/* cena dividida (pro meat): no computador a foto encolhe pra metade e mostra o painel */
.split{position:relative;background:var(--papel-2);overflow:hidden}
.split .grade{display:grid;grid-template-columns:1fr 1fr;min-height:100svh}
.split .foto{position:relative;overflow:hidden;color:#fff;z-index:2}
.split .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split .foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,0) 35%,rgba(0,0,0,.45))}
.split .foto .pq{position:absolute;z-index:2;top:12%;left:0;right:0;text-align:center;font-size:13px;letter-spacing:.06em;line-height:1.8}
.split .foto h2{position:absolute;z-index:2;left:0;right:0;bottom:14%;text-align:center;font-size:clamp(56px,7vw,104px);display:flex;justify-content:center;align-items:center;gap:16px}
.split .foto h2 a{width:38px;height:38px;border:1.5px solid #fff;border-radius:50%;display:inline-grid;place-items:center;text-decoration:none}
.split .foto h2 .ico{width:18px;height:18px}
.painel-s{padding:clamp(40px,6vw,80px);display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;gap:28px 32px}
.painel-s .pq{font-size:13px;letter-spacing:.06em;color:var(--cinza);line-height:1.5}
.painel-s h3{font-size:clamp(34px,3.4vw,50px);color:var(--noite);margin-top:14px;max-width:11ch}
.painel-s .nota{display:block;margin-top:12px;font-size:clamp(20px,1.8vw,26px);font-weight:600;color:var(--ouro-esc)}
.painel-s .nota em{color:var(--ouro-esc)}
.painel-s .vert{width:clamp(150px,15vw,230px);aspect-ratio:3/4.4;overflow:hidden}
.painel-s .vert img{width:100%;height:100%;object-fit:cover}
.painel-s .pe{grid-column:1/-1;align-self:end;display:grid;gap:20px}
.painel-s .pe p{color:var(--cinza);max-width:52ch}
@media (min-width:900px){.cena-on .split .foto{grid-column:1/-1;grid-row:1;width:100%}.cena-on .split .painel-s{grid-column:2;grid-row:1}}
@media (max-width:899px){.split .grade{grid-template-columns:1fr}.split .foto{min-height:110vw}.painel-s{grid-template-columns:1fr 40%}}

/* pedidos sobre foto */
.foto-cheia{position:relative;min-height:88svh;display:flex;align-items:center;color:#fff;overflow:hidden}
.foto-cheia picture img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover}
.foto-cheia::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,7,5,.74),rgba(11,7,5,.5))}
.foto-cheia .txt{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:40px;width:min(1040px,100% - 44px);align-items:end;margin:0 auto}
.foto-cheia .rot{color:rgba(255,255,255,.8)}
.foto-cheia h2{margin-top:12px}
.foto-cheia p{opacity:.92;max-width:36ch;margin-bottom:22px}
.foto-cheia .linha{margin-top:16px;font-size:13.5px;opacity:.85}
@media (max-width:760px){.foto-cheia{align-items:flex-end}.foto-cheia::after{background:linear-gradient(180deg,rgba(11,7,5,.1) 20%,rgba(11,7,5,.88) 62%)}.foto-cheia .txt{grid-template-columns:1fr;gap:18px;padding-bottom:40px}}

/* avaliações */
.aval .topo-av{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-bottom:54px}
.aval .nota-g{display:flex;align-items:baseline;gap:14px;font-size:14.5px;color:var(--cinza)}
.aval .nota-g b{font:700 64px/1 var(--serif);letter-spacing:-.03em;color:var(--tinta)}
.estrelas{display:inline-flex;gap:2px;color:var(--ouro)}
.deps{display:grid;grid-template-columns:repeat(3,1fr)}
.dep{padding:0 34px;border-left:1px solid rgba(26,18,13,.18)}
.dep:first-child{padding-left:0;border-left:0}
.dep blockquote{font:500 clamp(20px,1.8vw,24px)/1.35 var(--serif)}
.dep cite{display:block;margin-top:16px;font:500 13px/1 var(--sans);font-style:normal;color:var(--cinza)}
@media (max-width:860px){.deps{grid-template-columns:1fr;gap:30px}.dep,.dep:first-child{padding:0 0 0 20px;border-left:1px solid rgba(26,18,13,.18)}}

/* visite */
.visite{display:grid;grid-template-columns:1fr 1fr;min-height:80svh;background:var(--branco)}
.visite .txt{padding:clamp(60px,8vw,110px) clamp(22px,5vw,80px) clamp(60px,8vw,110px) var(--lado);display:grid;gap:30px;align-content:center}
.visite h2{margin-top:12px}
.dados{display:grid;grid-template-columns:1fr 1fr;gap:24px;font-size:15px}
.dados h3{font:600 12px/1.3 var(--sans);letter-spacing:.08em;color:var(--cinza);margin-bottom:6px}
.dados a{text-decoration:none}
.visite .mapa{position:relative;min-height:420px;background:var(--papel-2)}
.visite .mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.35)}
@media (max-width:860px){.visite{grid-template-columns:1fr}.visite .txt{padding:70px 22px}.dados{grid-template-columns:1fr}}

/* instagram */
.insta{text-align:center;padding:clamp(80px,10vw,120px) var(--lado)}
.insta h2 a{text-decoration:none}
@media (max-width:520px){.insta h2{font-size:clamp(26px,7.4vw,38px);overflow-wrap:anywhere}}
.insta p{color:var(--cinza);margin:14px auto 22px;max-width:44ch}
.insta .redes{display:flex;justify-content:center;gap:14px;font-size:22px}
.insta .redes a{width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(26,18,13,.2);border-radius:50%}

/* rodapé */
footer{background:var(--noite);color:rgba(255,255,255,.82);padding:64px var(--lado) 26px;text-align:center;font-size:14px}
footer .lg{font-size:clamp(54px,7vw,84px);color:#fff;margin:0 auto 30px}
footer .lg em{color:var(--ouro)}
footer .lg small{display:block;font:500 14px/1 var(--sans);letter-spacing:.04em;color:rgba(255,255,255,.7);margin-top:12px}
footer ul{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:8px 28px;margin-bottom:22px}
footer a{text-decoration:none}
footer .end{opacity:.75;margin-bottom:34px}
.assina{display:flex;justify-content:center;align-items:center;gap:7px;font:400 10.5px/1 'Inter',system-ui,sans-serif;opacity:.6;transition:opacity .3s;text-decoration:none;color:#fff}
.assina:hover{opacity:.8}
.assina img{height:12px;width:auto}

/* menu lateral */
.painel{position:fixed;inset:0;z-index:200;visibility:hidden}
.painel .veu{position:absolute;inset:0;background:rgba(11,7,5,.45);opacity:0;transition:opacity .4s}
.painel .lado{position:absolute;inset:0 auto 0 0;width:min(82vw,320px);background:var(--noite);color:#F6F1E8;padding:22px 26px;display:flex;flex-direction:column;gap:30px;transform:translateX(-100%);transition:transform .45s var(--ease)}
.painel .fecha{align-self:flex-end;width:44px;height:44px;display:grid;place-items:center;font-size:22px}
.painel ul{list-style:none;display:grid;gap:4px}
.painel ul a{display:block;padding:10px 0;font-size:17px;text-decoration:none;transition:color .25s}
.painel ul a:hover{color:var(--ouro)}
.painel .pe{margin-top:auto;display:grid;gap:10px;font-size:15px}
.painel .pe a{text-decoration:none;display:inline-flex;align-items:center;gap:10px}
body.menu-aberto .painel{visibility:visible}
body.menu-aberto .painel .veu{opacity:1}
body.menu-aberto .painel .lado{transform:none}

/* Pedir fixo */
.pedir-fixo{position:fixed;right:18px;bottom:18px;z-index:90;display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 22px 0 18px;border-radius:999px;background:var(--noite);color:#fff;font:600 15px/1 var(--sans);text-decoration:none;box-shadow:0 0 0 1px rgba(255,255,255,.28),0 10px 28px -8px rgba(20,13,10,.55);transition:transform .3s,background .3s}
.pedir-fixo .ico{width:22px;height:22px}
.pedir-fixo:hover{transform:translateY(-2px);background:var(--noite-2)}

/* ===== páginas internas ===== */
.cab nav ul a[aria-current]{text-decoration:underline;text-underline-offset:6px}
.pag-topo{padding:clamp(130px,16vw,190px) var(--lado) clamp(40px,5vw,60px)}
.pag-topo .migalha{font:600 12px/1.4 var(--sans);letter-spacing:.08em;color:var(--cinza);margin-bottom:18px}
.pag-topo .migalha a{text-decoration:none}
.pag-topo .linha-topo{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end}
.pag-topo h1{font-family:var(--cond);font-stretch:62%;font-weight:700;font-size:clamp(64px,9vw,136px);line-height:.88;letter-spacing:-.01em;color:var(--noite)}
.pag-topo p{color:var(--cinza);max-width:38ch;font-size:clamp(16px,1.3vw,18px)}
@media (max-width:760px){.pag-topo .linha-topo{grid-template-columns:1fr;gap:18px}}
.faixa-foto{height:clamp(320px,62svh,640px);overflow:hidden;position:relative}
.faixa-foto img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover}

/* cardápio completo */
.cat{display:grid;grid-template-columns:5fr 6fr;gap:clamp(30px,6vw,96px);align-items:start;padding:clamp(70px,9vw,120px) var(--lado)}
.cat.inv{grid-template-columns:6fr 5fr}
.cat.inv .foto-cat{order:2}
.cat .foto-cat{aspect-ratio:4/5;overflow:hidden;position:sticky;top:110px}
.cat .foto-cat img{width:100%;height:100%;object-fit:cover}
.cat h2{margin:12px 0 10px}
.cat .intro{color:var(--cinza);max-width:42ch;margin-bottom:28px}
.precos{list-style:none;border-top:1px solid rgba(26,18,13,.14)}
.precos li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid rgba(26,18,13,.14)}
.precos li span{font-weight:600;font-size:17px}
.precos li small{display:block;font-weight:400;font-size:14px;color:var(--cinza);margin-top:2px}
.precos li b{font-weight:700;font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cat .obs{margin-top:22px;font-size:14.5px;color:var(--cinza)}
.sem-foto{background:var(--branco);padding:clamp(70px,9vw,120px) var(--lado)}
.sem-foto .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,96px);margin-top:36px}
.sem-foto .cols h3{font:700 22px/1.1 var(--sans);margin-bottom:14px}
@media (max-width:860px){.cat,.cat.inv{grid-template-columns:1fr}.cat.inv .foto-cat{order:0}.cat .foto-cat{position:static;aspect-ratio:4/3}.sem-foto .cols{grid-template-columns:1fr}}
.viaggio{background:var(--noite);color:#fff;padding:clamp(70px,9vw,120px) var(--lado);display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.viaggio h2{font-size:clamp(50px,6.6vw,96px)}
.viaggio p{opacity:.86;margin:18px 0 26px;max-width:40ch}
.potes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pote{border:1px solid rgba(255,255,255,.25);padding:26px 22px}
.pote b{display:block;font:700 46px/1 var(--cond);font-stretch:62%}
.pote span{display:block;margin-top:8px;opacity:.8;font-size:15px}
.pote strong{display:block;margin-top:18px;font-size:22px;color:var(--ouro)}
@media (max-width:860px){.viaggio{grid-template-columns:1fr}}
.sabores-lista{padding:clamp(70px,9vw,120px) var(--lado)}
.sabores-lista .nomes{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px}
.sabores-lista .nomes span{border:1px solid rgba(26,18,13,.2);border-radius:999px;padding:9px 16px;font-weight:600;font-size:15px}
.sabores-lista .nomes span.z{background:var(--noite);color:#fff;border-color:var(--noite)}
.sabores-lista .obs{margin-top:22px;color:var(--cinza);font-size:14.5px}

/* nossa história */
.caps{padding:clamp(70px,9vw,120px) var(--lado);display:grid;gap:0}
.cap{position:relative;display:grid;grid-template-columns:120px 1fr 1.2fr;gap:clamp(20px,4vw,60px);padding:clamp(30px,4vw,50px) 0}
.cap::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:rgba(26,18,13,.25);transform-origin:left;transform:scaleX(var(--risco,1))}
.cap .n{font:700 48px/1 var(--cond);font-stretch:62%;color:var(--ouro-esc)}
.cap h2{font-size:clamp(28px,3vw,40px)}
.cap p{color:var(--cinza);font-size:17px;max-width:52ch}
.cap p+p{margin-top:12px}
@media (max-width:860px){.cap{grid-template-columns:1fr;gap:12px}}
.duo{display:grid;grid-template-columns:1fr 1fr;min-height:90svh;background:var(--branco)}
.duo .foto{position:relative;overflow:hidden;min-height:420px}
.duo .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.duo .txt{padding:clamp(50px,7vw,100px) clamp(22px,6vw,90px);display:grid;gap:20px;align-content:center}
.duo .txt p{color:var(--cinza);max-width:44ch}
@media (max-width:860px){.duo{grid-template-columns:1fr}}
.galeria{padding:clamp(70px,9vw,110px) 0;background:var(--papel)}
.galeria .cab2{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;padding:0 var(--lado);margin-bottom:36px}
.galeria .trilho{display:flex;gap:14px;padding:0 var(--lado);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.galeria .trilho::-webkit-scrollbar{display:none}
.galeria figure{flex:0 0 auto;height:clamp(340px,62svh,600px);scroll-snap-align:start;overflow:hidden}
.galeria figure img{height:100%;width:auto;object-fit:cover}
.galeria .dica{padding:16px var(--lado) 0;font-size:13.5px;color:var(--cinza)}
.galeria-on .galeria .dica{display:none}
.galeria-on .galeria .trilho{overflow:visible;width:max-content}
.galeria-on .galeria{overflow:hidden}

/* visite */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px;border-top:1px solid rgba(26,18,13,.18)}
.passo{padding:30px 30px 0 0}
.passo+.passo{padding-left:30px;border-left:1px solid rgba(26,18,13,.18)}
.passo .n{font:700 44px/1 var(--cond);font-stretch:62%;color:var(--ouro-esc)}
.passo h3{font:700 22px/1.15 var(--sans);margin:14px 0 8px}
.passo p{color:var(--cinza);font-size:15.5px}
@media (max-width:860px){.passos{grid-template-columns:1fr}.passo+.passo{padding-left:0;border-left:0;border-top:1px solid rgba(26,18,13,.18)}}
.lojas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);padding:clamp(70px,9vw,120px) var(--lado);background:var(--branco)}
.lojas h3{font:700 26px/1.1 var(--sans);margin:12px 0 10px}
.lojas p{color:var(--cinza)}
@media (max-width:860px){.lojas{grid-template-columns:1fr}}
.faq{padding:clamp(70px,9vw,120px) var(--lado);display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(30px,5vw,80px)}
.faq details{border-top:1px solid rgba(26,18,13,.18)}
.faq details:last-child{border-bottom:1px solid rgba(26,18,13,.18)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font:700 19px/1.3 var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{transition:transform .35s var(--ease);flex:none}
.faq details[open] summary .ico{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--cinza);max-width:62ch}
@media (max-width:860px){.faq{grid-template-columns:1fr}}
.fecho{background:var(--noite);color:#fff;text-align:center;padding:clamp(70px,9vw,110px) var(--lado)}
.fecho h2{font-size:clamp(46px,6vw,84px);margin-bottom:26px}

/* movimento */
.cortina{position:fixed;inset:0;z-index:400;background:var(--noite);transform:translateY(100%);pointer-events:none;will-change:transform}
/* veio de outra página: cobre desde o começo; se o GSAP não chegar, sai sozinha em 3 s */
.veio .cortina{transform:none;animation:mk-solta .6s 3s forwards}
@keyframes mk-solta{to{transform:translateY(-100%)}}
.ln-mask{padding-bottom:.14em;margin-bottom:-.14em}
.smooth-on .cat .foto-cat{position:relative;top:auto}
.smooth-on #smooth-content{will-change:transform}

/* ===== celular: cada foto grande fica parada ocupando a tela e o conteúdo seguinte sobe por cima (como no Dedo de Moça) ===== */
@media (max-width:899px){
  .split{overflow:visible}
  .split .foto{position:sticky;top:0;z-index:0;height:100svh;min-height:0}
  .painel-s{position:relative;z-index:3;background:var(--papel-2);box-shadow:0 -24px 40px -28px rgba(20,13,10,.45)}
  .cat{padding:0;gap:0}
  .cat .foto-cat{position:static;height:auto;aspect-ratio:auto}
  .cat .foto-cat img{height:auto;object-fit:contain}
  .cat > div:not(.foto-cat){position:relative;z-index:1;background:var(--papel);padding:56px var(--lado) 64px;box-shadow:0 -24px 40px -28px rgba(20,13,10,.45)}
  .cat.inv > div:not(.foto-cat){background:var(--branco)}
  .duo .foto{position:sticky;top:0;z-index:0;height:100svh;min-height:0}
  .duo .txt{position:relative;z-index:1;background:var(--branco);box-shadow:0 -24px 40px -28px rgba(20,13,10,.45)}
  .faixa-foto{position:sticky;top:0;z-index:0;height:100svh}
  .faixa-foto + *{position:relative;z-index:1;background:var(--papel);box-shadow:0 -24px 40px -28px rgba(20,13,10,.45)}
  .foto-cheia{position:relative}
  .galeria-on .galeria{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:90px 0 40px}
  .galeria-on .galeria .trilho{gap:12px}
  .galeria-on .galeria figure{width:82vw;height:min(64svh,560px)}
  .galeria-on .galeria figure img{width:100%;height:100%;object-fit:cover}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.js .topo h1 .c,.js .topo .sub,.js .topo .base>*{opacity:1;transform:none}
}

/* Padoca da Mari: a Bitter é mais larga que a Archivo condensada do template, então os títulos grandes descem um pouco */
.marca{font-size:28px;letter-spacing:-.01em}
.topo h1{font-size:clamp(64px,8.6vw,132px);line-height:.92}
.faixa h2{font-size:clamp(38px,5.2vw,76px);max-width:16ch}
.pag-topo h1{font-size:clamp(46px,6.6vw,100px);line-height:.95}
footer .lg{font-size:clamp(38px,4.8vw,60px)}
.fecho h2{font-size:clamp(36px,4.6vw,64px)}
.split .foto h2{font-size:clamp(48px,5.6vw,84px)}
.painel-s h3{font-size:clamp(28px,2.8vw,42px);max-width:13ch}
.cond{letter-spacing:-.02em}
.precos li b small{display:inline;font-size:12.5px;font-weight:500;color:var(--cinza);margin:0 2px 0 6px}
.precos li b small:first-child{margin-left:0}
@media (max-width:899px){.cab .marca{font-size:23px}}
@media (max-width:699px){.topo h1{font-size:clamp(52px,15vw,80px)}}

/* logo delas (o do cardápio em PDF, MARI cheio como na placa da fachada), sem placa por trás e sem animação.
   Branco sobre foto (topo da home); verde sobre creme e sobre o rodapé laranja (pedido do usuário). */
.cab .logo{display:block;position:relative;line-height:0}
.cab .logo img{height:58px;width:auto;transition:height .4s var(--ease),opacity .3s}
.cab .logo .lg-branco{position:absolute;left:0;top:0;opacity:0}
body:has(.topo) .cab:not(.rolou) .logo .lg-branco{opacity:1}
body:has(.topo) .cab:not(.rolou) .logo .lg-verde{opacity:0}
.cab.rolou .logo img{height:46px}
@media (max-width:899px){.cab .logo img{height:44px}.cab.rolou .logo img{height:40px}}
footer .lg{margin:0 auto 34px;line-height:0}
footer .lg img{width:clamp(170px,18vw,230px);height:auto;margin:0 auto}
/* cartões do cardápio levantam no mouse */
@media (hover:hover){.tile{transition:box-shadow .5s var(--ease)}.tile:hover{box-shadow:0 26px 50px -30px rgba(90,40,10,.55)}}
/* botão Pedir só aparece depois do topo */
.pedir-fixo{transition:bottom .55s var(--ease),opacity .4s,background .3s}
.pedir-fixo.escondido{bottom:-90px;opacity:0;pointer-events:none}

/* elementos trazidos da La Bellice: apresentação com fotos soltas e selo girando, mosaico, galeria presa que anda de lado e dois cartões */
.lb-raio{--raio:22px}
.apres{--raio:22px;position:relative;background:var(--papel-2);padding:clamp(80px,10vw,130px) var(--lado);display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:40px;overflow:hidden}
.apres-txt{position:relative;z-index:2;max-width:620px}
.apres-txt h2{font-size:clamp(46px,5.6vw,84px);line-height:1;margin-bottom:24px}
.apres-txt h2 em{font-style:normal;color:var(--ouro-esc)}
.apres-p{font-size:clamp(17px,1.4vw,20px);max-width:30em;color:var(--cinza);margin-bottom:28px}
.hero-fotos{position:relative;z-index:1;height:min(78vh,680px);max-width:640px;width:100%;justify-self:end}
.hfw{position:absolute}
.hf{width:100%;height:100%;position:relative;border-radius:var(--raio);overflow:hidden;background:var(--branco);padding:8px;box-shadow:0 24px 60px -24px rgba(20,14,10,.45)}
.hf img{border-radius:calc(var(--raio) - 8px);width:100%;height:100%;object-fit:cover}
.hf figcaption{position:absolute;left:20px;bottom:20px;background:var(--branco);padding:6px 14px;border-radius:99px;font-weight:700;font-size:14px;box-shadow:0 6px 16px -8px rgba(20,14,10,.5)}
.hf-1{width:62%;aspect-ratio:1;left:18%;top:6%;z-index:2}.hf-1 .hf{rotate:-3deg}
.hf-2{width:40%;aspect-ratio:1;right:0;bottom:4%;z-index:3}.hf-2 .hf{rotate:6deg}
.hf-3{width:38%;aspect-ratio:1;left:0;bottom:0;z-index:1}.hf-3 .hf{rotate:-8deg}
.selo-w{position:absolute;z-index:4;width:150px;height:150px;right:2%;top:0}
.selo-gira{position:absolute;inset:0}
.selo-gira::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--ouro)}
.selo-gira svg{position:absolute;inset:0;width:100%;height:100%;animation:lb-gira 18s linear infinite}
.selo-gira text{font:700 15px var(--sans);fill:var(--tinta);letter-spacing:.04em}
.selo-gira b{position:absolute;inset:0;display:grid;place-items:center;font:700 44px/1 var(--cond);color:var(--tinta)}
@keyframes lb-gira{to{transform:rotate(360deg)}}
@media (max-width:899px){
  .apres{grid-template-columns:minmax(0,1fr);gap:28px}
  .hero-fotos{height:110vw;max-height:520px;margin:0 auto;justify-self:center}
  .hf figcaption{left:10px;bottom:10px;padding:4px 10px;font-size:11.5px;white-space:nowrap;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis}
  .selo-w{width:112px;height:112px}
  .selo-gira b{font-size:32px}
}

.bento{--raio:22px;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(180px,20vw,290px);gap:clamp(10px,1.4vw,18px);grid-template-areas:"a a b c" "a a d d"}
.bt-a{grid-area:a}.bt-b{grid-area:b}.bt-c{grid-area:c}.bt-d{grid-area:d}
.bt-card{position:relative;border-radius:var(--raio);overflow:hidden;text-decoration:none;isolation:isolate;display:block}
.bt-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.bt-card:hover img{transform:scale(1.06)}
.bt-card::after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(to top,rgba(11,7,5,.72),transparent);z-index:1;pointer-events:none}
.bt-tx{position:absolute;left:16px;bottom:16px;right:16px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:6px;color:#fff}
.bt-tx b{font:700 clamp(21px,2vw,31px)/1.05 var(--cond);font-stretch:var(--largura)}
.bt-tx small{font-size:14px;line-height:1.35;color:rgba(255,255,255,.9);max-width:30ch}
@media (max-width:760px){.bento{grid-template-columns:1fr 1fr;grid-auto-rows:46vw;grid-template-areas:"a a" "a a" "b c" "d d"}}

.copos{--raio:22px;background:var(--noite);color:#fff;overflow:hidden;position:relative}
.copos-in{display:flex;align-items:center;gap:clamp(32px,4vw,64px);padding:clamp(80px,10vw,120px) 0;min-height:100svh}
.copos-cab{flex:0 0 calc(min(400px,34vw) + var(--lado));padding-left:var(--lado);position:relative;z-index:2;background:var(--noite);align-self:stretch;display:flex;flex-direction:column;justify-content:center;box-shadow:40px 0 40px -10px var(--noite)}
.copos-cab>*{align-self:flex-start}
.copos-cab .rot{color:var(--ouro)}
.copos-cab h2{font-size:clamp(44px,5.4vw,78px);line-height:1;margin:12px 0 22px}
.copos-cab h2 em{font-style:normal;color:var(--ouro)}
.copos-cab p:not(.rot){color:rgba(255,255,255,.82);margin-bottom:28px;font-size:17px}
.copos-dica{margin-top:6px;display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ouro)!important}
.copos .trilho{display:flex;gap:clamp(16px,2vw,28px);padding-right:var(--lado);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0;width:auto}
.copos .trilho::-webkit-scrollbar{display:none}
.galeria-lb .copos .trilho{overflow:visible}
.copo{flex:0 0 clamp(250px,28vw,380px);scroll-snap-align:start;margin:0}
.copo img{border-radius:var(--raio);aspect-ratio:4/5;object-fit:cover;width:100%;height:auto;transition:transform .6s var(--ease)}
.copo:nth-child(even){margin-top:60px}
.copo:hover img{transform:translateY(-8px) rotate(-1.5deg)}
.copo figcaption{padding:14px 4px 0;font:600 20px/1.15 var(--cond);font-stretch:var(--largura)}
@media (max-width:899px){
  .copos-in{flex-direction:column;align-items:stretch;min-height:0}
  .copos-cab{flex:none;padding:0 var(--lado);box-shadow:none}
  .copos .trilho{padding-left:var(--lado);scroll-padding-left:var(--lado)}
  .copo{flex-basis:74vw}
  .copo:nth-child(even){margin-top:0}
  .copos-dica{display:none!important}
}

.duas{--raio:22px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);padding:clamp(70px,9vw,120px) var(--lado);background:var(--branco)}
.duo{border-radius:calc(var(--raio) + 8px);padding:clamp(22px,3vw,40px);display:grid;grid-template-columns:.9fr 1fr;gap:clamp(18px,2.4vw,32px);align-items:center;background:var(--papel)}
.duo+.duo{background:var(--papel-2)}
.duo-ft{border-radius:var(--raio);overflow:hidden;aspect-ratio:4/5}
.duo-ft img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.duo:hover .duo-ft img{transform:scale(1.05) rotate(1deg)}
.duo h2{font-size:clamp(30px,3vw,44px);line-height:1.04;margin:10px 0 14px}
.duo-tx>p:not(.rot){color:var(--cinza);margin-bottom:22px}
@media (max-width:1099px){.duas{grid-template-columns:minmax(0,1fr)}}
@media (max-width:599px){.duo{grid-template-columns:minmax(0,1fr)}.duo-ft{aspect-ratio:1}}

/* tema do nicho */
:root{--papel:#F5FAFA;--papel-2:#E2F0F1;--branco:#FFFFFF;--tinta:#12282D;--cinza:#5A6F74;--noite:#0F6E84;--noite-2:#0A5567;--ouro:#A6E3E9;--ouro-esc:#0F6E84;--cond:'Bricolage Grotesque',Georgia,serif;--largura:100%}
.cond,.topo h1,.pag-topo h1,.passo .n,.marca{font-stretch:var(--largura)}
.topo h1{font-size:clamp(52px,min(10.4vw,13.5vw),156px)}
@media (max-width:699px){.topo h1{font-size:13.5vw}.topo .sub{max-width:30ch}}
.pag-topo h1{font-size:clamp(46px,8vw,120px)}
.cab .marca{font-size:28px}
.painel-s h3{max-width:14ch}
.faixa h2{max-width:15ch;font-size:clamp(42px,6.2vw,92px)}
.split .foto h2{font-size:clamp(46px,6vw,92px)}
footer .lg{line-height:1;font-family:var(--cond);font-stretch:var(--largura);font-weight:700}
footer .reg{opacity:.75;margin:-22px 0 30px}
.dep blockquote .preencher{font-size:14px}
.tile b{color:var(--ouro-esc)}
.preencher{white-space:normal}
.topo::after{background:linear-gradient(180deg,rgba(11,7,5,.62) 0,rgba(11,7,5,.12) 24%,rgba(11,7,5,.2) 45%,rgba(11,7,5,.86) 100%)}
.painel-s>*{min-width:0}
.painel-s .nota{overflow-wrap:anywhere}
@media (max-width:899px){.cab .marca{font-size:23px}.painel-s{grid-template-columns:minmax(0,1fr) 40%}}
@media (max-width:520px){.cab nav .btn{display:none}}
