/* Fabinho do Feijão · estilos
   Mobile-first. Bandas a toda a largura alternam carvão / bordô / farofa;
   o prato cortado ao meio pousa na aresta entre o hero e a faixa clara. */
:root{
  --carvao:#1C1714; --brasa:#7E2418; --fita:#C8322A; --farofa:#F1E4C8; --cerveja:#D9A441;
  --tinta:#2A211C; --suave:#6A5A4E; --linha:#D9C7A3; --cartao:#251E1A; --leite:#FFF6E6;
  --f-display:"Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --f-serif:"Instrument Serif", "Iowan Old Style", Palatino, serif;
  --gutter-l:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:76px; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
body{margin:0; background:var(--carvao); color:var(--farofa); font-family:var(--f-display); font-size:16px; line-height:1.55; padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px))}
@media (min-width:900px){ body{padding-bottom:0} }
h1,h2,h3{margin:0; line-height:.95; text-wrap:balance}
p{margin:0}
a{color:inherit}
img{max-width:100%; display:block}
address{font-style:normal}
:focus-visible{outline:2px solid var(--cerveja); outline-offset:3px}
[hidden]{display:none!important}

.skip{position:absolute; left:-9999px; top:8px; z-index:100; background:var(--farofa); color:var(--carvao); padding:10px 14px; border-radius:6px; font-weight:700}
.skip:focus{left:var(--gutter-l)}

.band{padding-left:var(--gutter-l); padding-right:var(--gutter-r)}
.in{max-width:1120px; margin:0 auto}
.eyebrow{font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700}
.h2{font-size:clamp(40px,11vw,88px); font-weight:800; font-variation-settings:"wdth" 75; text-transform:uppercase; letter-spacing:-.01em}
.h2 i{font-family:var(--f-serif); font-weight:400; text-transform:none; letter-spacing:0; font-size:1.02em}
.lead{font-size:18px; max-width:46ch}

/* Rascunho */
.draft{display:none}
body.rascunho .draft{display:block}
body:not(.rascunho) .tbc{display:none}
.tbc{display:inline-block; justify-self:start; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:2px 7px; border:1px dashed currentColor; border-radius:99px; opacity:.8; vertical-align:middle; white-space:nowrap; font-style:normal}
.draft-note{background:var(--cerveja); color:var(--carvao); font-size:12.5px; font-weight:600}
.draft-note .in{padding-block:8px; display:flex; gap:4px 12px; flex-wrap:wrap; justify-content:space-between}
.draft-note code{font-size:12px}

/* Cabeçalho */
.head{position:sticky; top:0; z-index:20; padding-top:env(safe-area-inset-top, 0px); background:rgba(126,36,24,.94)}
@supports (backdrop-filter:blur(8px)){ .head{background:rgba(126,36,24,.86); backdrop-filter:blur(8px)} }
.head .in{display:flex; align-items:center; justify-content:space-between; padding-block:10px; gap:12px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.logo-slot{width:54px; height:54px; flex:none; display:block}
.logo-slot.has-logo{filter:drop-shadow(0 2px 4px rgba(20,8,4,.35))}
.logo-slot img{width:100%; height:100%; object-fit:contain}
.logo-ph{width:46px; height:46px; border-radius:50%; border:1.5px dashed var(--farofa); display:grid; place-items:center; font-size:8.5px; line-height:1.05; text-align:center; font-weight:700}
.brand-name{font-size:15px; font-weight:800; font-variation-settings:"wdth" 78; text-transform:uppercase; letter-spacing:.02em; line-height:1}
.brand-name small{display:block; font-family:var(--f-serif); font-style:italic; font-size:14px; font-weight:400; text-transform:none; letter-spacing:0; color:var(--cerveja)}
.nav{display:none; gap:22px; font-size:14px; font-weight:600}
.nav a{text-decoration:none; padding-block:8px}
.nav a:hover{color:var(--cerveja)}
.btn-sm{font-size:13px; font-weight:700; padding:10px 15px; border-radius:99px; background:var(--farofa); color:var(--carvao); text-decoration:none; white-space:nowrap; min-height:40px; display:inline-flex; align-items:center}
@media (min-width:900px){ .nav{display:flex} }

/* Botões */
.ctas{display:flex; flex-wrap:wrap; gap:10px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 22px; border-radius:99px; font-weight:800; font-size:14px; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; font-variation-settings:"wdth" 85; min-height:48px; cursor:pointer; border:0; font-family:var(--f-display); transition:transform .2s ease}
.btn.pri{background:var(--farofa); color:var(--brasa)}
.btn.sec{border:1.5px solid var(--farofa); color:var(--farofa); background:transparent}
.btn:hover{transform:translateY(-1px)}

/* Hero */
.hero{background:var(--brasa); position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 70% at 50% 100%, rgba(217,164,65,.22), transparent 60%); pointer-events:none}
.hero .in{position:relative; display:grid; gap:22px; padding-top:28px}
.hero .copy{display:grid; gap:20px}
.hero .eyebrow{color:var(--cerveja); display:flex; flex-wrap:wrap; gap:6px 14px}
.hero h1{font-size:clamp(46px,14.5vw,112px); font-weight:800; font-variation-settings:"wdth" 75; text-transform:uppercase; letter-spacing:-.015em; line-height:.86}
.hero h1 .l1{display:block}
.hero h1 .l2{display:block; font-family:var(--f-serif); font-style:italic; font-weight:400; text-transform:none; letter-spacing:0; color:var(--cerveja); font-size:.9em; line-height:1; margin-top:.08em}
.hero .lead{color:#F6E9D2}
.plate-wrap{position:relative; height:calc(min(100vw, 640px) / 2); margin-top:6px}
.plate{position:absolute; left:50%; top:0; width:min(100vw, 640px); aspect-ratio:1; transform:translateX(-50%)}
.plate canvas,.plate img{width:100%; height:100%; display:block}
.plate img{object-fit:cover; border-radius:50%}
.chip{position:absolute; transform:translate(-50%,-50%); font-family:var(--f-serif); font-style:italic; font-size:clamp(15px,4.2vw,20px); line-height:1; padding:5px 11px 6px; border-radius:99px; background:rgba(28,23,20,.82); color:var(--farofa); white-space:nowrap; pointer-events:none}
.chip.c{background:var(--farofa); color:var(--brasa)}
.illus{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#F6E9D2; opacity:.75; font-weight:600}
@media (max-width:899px){
  .hero .in{padding-top:22px; gap:16px}
  .hero .copy{gap:16px}
  .hero .lead{font-size:16.5px}
  .hero .ctas{display:grid; grid-template-columns:1fr 1fr}
  .hero .ctas .btn{padding:12px 10px; font-size:12.5px; letter-spacing:.04em; text-align:center; line-height:1.15}
}
@media (min-width:900px){
  .hero .in{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; padding-top:56px}
  .hero .copy{padding-bottom:64px; gap:22px}
  .plate-wrap{height:320px}
  .plate{width:640px}
}
@media (prefers-reduced-motion: no-preference){
  .hero h1 .l1, .hero h1 .l2{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .hero h1 .l2{animation-delay:.12s}
  .plate{animation:plate 1.1s cubic-bezier(.2,.7,.2,1) both .1s}
}
@keyframes rise{from{transform:translateY(.22em)} to{transform:none}}
@keyframes plate{from{transform:translateX(-50%) translateY(14%) rotate(-8deg)} to{transform:translateX(-50%)}}

/* Hero com fotografia do prato: substitui a ilustração quando img/prato-hero.jpg existe.
   A foto fica inteira (sem cortes) e sem texto por cima. */
.hero-photo{display:none; margin:0; justify-content:center; align-items:center; min-width:0}
.hero.has-photo .hero-photo{display:flex}
.hero.has-photo .plate-wrap{display:none}
.hero-photo img{width:auto; height:auto; max-width:100%; max-height:62vh; object-fit:contain; border-radius:10px; box-shadow:0 26px 50px -26px rgba(20,8,4,.7)}
.hero.has-photo .in{padding-bottom:32px}
@media (min-width:900px){
  .hero.has-photo .in{align-items:center; padding-block:48px 56px; gap:48px}
  .hero.has-photo .copy{padding-bottom:0}
  .hero-photo img{max-height:min(78vh, 720px)}
}
@media (prefers-reduced-motion: no-preference){
  .hero.has-photo .hero-photo img{animation:photo .9s cubic-bezier(.2,.7,.2,1) both .1s}
}
@keyframes photo{from{transform:translateY(16px) scale(.98)} to{transform:none}}

/* Faixa de factos */
.facts{background:var(--farofa); color:var(--carvao); border-bottom:1px solid var(--linha)}
.facts .in{display:flex; flex-wrap:wrap; gap:8px 22px; padding-block:14px; font-weight:700; font-size:14px}
.facts span{display:flex; align-items:center; gap:8px}
.facts span::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--fita); flex:none}

/* Bem-vindo */
.welcome{background:var(--farofa); color:var(--tinta)}
.welcome .in{padding-block:64px 72px; display:grid; gap:28px; position:relative}
.welcome-logo{width:120px; aspect-ratio:1196/1315; margin-bottom:-8px}
.welcome-logo .logo-ph{width:100%; height:100%; border-color:var(--brasa); color:var(--brasa); font-size:11px}
@media (min-width:900px){ .welcome-logo{position:absolute; right:0; top:48px; width:230px; margin:0} }
.welcome .eyebrow{color:var(--suave)}
.welcome .h2{color:var(--brasa)}
.welcome .h2 i{color:var(--fita)}
.pillars{display:grid; gap:1px; background:var(--linha); border:1px solid var(--linha)}
.pillar{background:var(--farofa); padding:20px; display:grid; gap:6px; min-width:0}
.pillar h3{font-size:24px; font-weight:800; font-variation-settings:"wdth" 80; text-transform:uppercase; color:var(--brasa)}
.pillar p{color:var(--suave); font-size:15.5px}
@media (min-width:700px){ .pillars{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* Especialidades */
.flavor{background:var(--carvao)}
.flavor .in{padding-block:72px; display:grid; gap:26px}
.flavor .eyebrow, .flavor .h2 i{color:var(--cerveja)}
.rail{display:grid; grid-auto-flow:column; grid-auto-columns:min(78%, 320px); gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; margin-right:calc(-1 * var(--gutter-r)); padding-right:var(--gutter-r); scrollbar-width:thin}
.rail.single{grid-auto-columns:min(100%, 420px)}
.dish{scroll-snap-align:start; display:grid; gap:12px; align-content:start; min-width:0}
.dish .role{font-family:var(--f-serif); font-style:italic; font-size:19px; color:var(--cerveja); line-height:1}
.dish h3{font-size:30px; font-weight:800; font-variation-settings:"wdth" 75; text-transform:uppercase}
.dish p{font-size:15px; color:#D8CBB0}

/* Espaços de fotografia */
.slot{position:relative; overflow:hidden; border-radius:6px; aspect-ratio:4/5; display:flex; align-items:flex-end; padding:14px; max-width:100%;
  background:radial-gradient(70% 60% at 55% 40%, #6A2E1A, #241712)}
.slot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.slot .cap{position:relative; display:none; font-size:12.5px; line-height:1.35; color:#E9DCC0}
body.rascunho .slot:not(.has-img){border:1.5px dashed rgba(241,228,200,.35)}
body.rascunho .slot:not(.has-img) .cap{display:block}
body.rascunho .slot:not(.has-img) .cap::before{content:"Foto a fazer"; display:block; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--cerveja); margin-bottom:4px; font-weight:700}
.slot.v2{background:radial-gradient(70% 60% at 40% 45%, #7A3A22, #2A1810)}
.slot.v3{background:radial-gradient(70% 60% at 50% 50%, #5C2614, #1C1714)}
.slot.v4{background:radial-gradient(70% 60% at 50% 40%, #8A3F22, #3A1A10)}

/* Conhece o Fabinho */
.who{background:var(--brasa)}
.who .in{padding-block:72px; display:grid; gap:24px}
.who .who-copy{display:grid; gap:16px}
.who .eyebrow, .who .h2 i{color:var(--cerveja)}
.who .frame{border:1.5px dashed rgba(241,228,200,.5); border-radius:6px; padding:22px; display:grid; gap:14px}
.who .frame ul{margin:0; padding-left:18px; display:grid; gap:6px; color:#F3DFC7}
.who .photo{border-radius:6px; overflow:hidden}
@media (min-width:900px){ .who .in{grid-template-columns:1fr 1fr; align-items:center} }

/* Ementa */
.menu{background:var(--farofa); color:var(--tinta)}
.menu .in{padding-block:72px; display:grid; gap:24px}
.menu .eyebrow{color:var(--suave)}
.menu .h2{color:var(--brasa)}
.menu .h2 i{color:var(--fita)}
.tabs{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-right:calc(-1 * var(--gutter-r)); padding-right:var(--gutter-r)}
.tab{flex:none; font-family:var(--f-display); font-weight:700; font-size:14px; padding:10px 16px; border-radius:99px; border:1.5px solid var(--tinta); background:transparent; color:var(--tinta); cursor:pointer; min-height:44px}
.tab[aria-selected="true"]{background:var(--tinta); color:var(--farofa)}
.panel ul{list-style:none; margin:0; padding:0; display:grid}
.panel li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; padding:16px 0; border-bottom:1px solid var(--linha)}
.panel li b{font-size:20px; font-weight:750; font-variation-settings:"wdth" 85; line-height:1.2}
.panel li .pr{font-weight:700; font-variant-numeric:tabular-nums; color:var(--brasa); align-self:start; white-space:nowrap}
.panel li p{grid-column:1 / -1; color:var(--suave); font-size:15px}
.panel .empty{color:var(--suave); padding:16px 0}
.menu-note{font-size:14px; color:var(--suave); max-width:60ch}

/* Agenda */
.events{background:var(--carvao)}
.events .in{padding-block:72px; display:grid; gap:26px}
.events .eyebrow, .events .h2 i{color:var(--cerveja)}
.events .lead, .events .more{color:#D8CBB0}
.events .more a{color:var(--cerveja); font-weight:700}
.week{display:grid; gap:12px}
.day{display:grid; grid-template-columns:78px minmax(0,1fr); gap:16px; padding:18px; border-radius:6px; background:var(--cartao); align-items:center}
.day .d{display:grid; text-align:center; line-height:1}
.day .d small{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--cerveja); font-weight:700}
.day .d b{font-size:40px; font-weight:800; font-variation-settings:"wdth" 75}
.day h3{font-size:24px; font-weight:800; font-variation-settings:"wdth" 78; text-transform:uppercase}
.day p{color:#D8CBB0; font-size:14.5px}
.day.food{background:var(--fita); color:var(--leite)}
.day.food .d small{color:var(--leite)}
.day.food p{color:#FFE9D6}
.genres{display:flex; flex-wrap:wrap; gap:8px}
.genres span{font-family:var(--f-serif); font-style:italic; font-size:20px; padding:4px 14px; border:1px solid rgba(241,228,200,.35); border-radius:99px}
@media (min-width:900px){ .week{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* A casa é de todos */
.home{background:var(--cerveja); color:var(--carvao)}
.home .in{padding-block:72px; display:grid; gap:24px}
.home .h2 i{color:var(--brasa)}
.mosaic{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.mosaic .slot{aspect-ratio:1; background:linear-gradient(140deg, #C98F33, #B5772A)}
.mosaic .slot .cap{color:var(--carvao)}
body.rascunho .mosaic .slot:not(.has-img){border-color:rgba(28,23,20,.45)}
body.rascunho .mosaic .slot:not(.has-img) .cap::before{color:var(--brasa)}
.mosaic .slot.wide{grid-column:1 / -1; aspect-ratio:16/9}
@media (min-width:900px){ .mosaic{grid-template-columns:2fr 1fr 1fr} .mosaic .slot.wide{grid-column:auto; grid-row:span 2; aspect-ratio:auto} }

/* Encomendas */
.order{background:var(--fita); color:var(--leite)}
.order .in{padding-block:72px; display:grid; gap:24px}
.order .h2 i{color:var(--carvao)}
.ways{display:grid; gap:12px}
.way{background:rgba(28,23,20,.18); border-radius:6px; padding:20px; display:grid; gap:10px; align-content:start; min-width:0}
.way h3{font-size:24px; font-weight:800; font-variation-settings:"wdth" 80; text-transform:uppercase}
.way .btn.pri{background:var(--leite); color:#A3241D; justify-self:start}
.copy{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.num{font-size:28px; font-weight:800; font-variant-numeric:tabular-nums; font-variation-settings:"wdth" 85; text-decoration:none}
.copybtn{font-family:var(--f-display); font-weight:700; font-size:13px; padding:8px 14px; border-radius:99px; border:1.5px solid currentColor; background:transparent; color:inherit; cursor:pointer; min-height:44px}
@media (min-width:900px){ .ways{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* Visita */
.visit{background:var(--farofa); color:var(--tinta)}
.visit .in{padding-block:72px; display:grid; gap:26px}
.visit .eyebrow{color:var(--suave)}
.visit .h2{color:var(--brasa)}
.visit .h2 i{color:var(--fita)}
.visit .grid{display:grid; gap:20px}
.info{display:grid; gap:1px; background:var(--linha); border:1px solid var(--linha)}
.info > div{background:var(--farofa); padding:18px 20px; display:grid; gap:6px; min-width:0}
.info small{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--suave)}
.info b, .info address, .info .big{font-size:20px; font-weight:750; font-variation-settings:"wdth" 85; line-height:1.25; text-decoration:none}
.info .links{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.info .links a{font-size:13.5px; font-weight:700; padding:10px 14px; border-radius:99px; background:var(--tinta); color:var(--farofa); text-decoration:none; min-height:40px; display:inline-flex; align-items:center}
.hours{list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:16px}
.hours li{display:flex; justify-content:space-between; gap:12px; font-variant-numeric:tabular-nums}
.hours li span:first-child{font-weight:700}
.mapart{display:block; border-radius:6px; aspect-ratio:16/10; max-width:100%; position:relative; overflow:hidden; text-decoration:none;
  background:linear-gradient(90deg, transparent 49.5%, #CFBE9A 49.5% 50.5%, transparent 50.5%) 0 0/60px 60px,
             linear-gradient(0deg, transparent 49.5%, #CFBE9A 49.5% 50.5%, transparent 50.5%) 0 0/60px 60px, #E9DAB9}
.mapart::before{content:""; position:absolute; left:-10%; right:-10%; top:58%; height:22px; background:#7FB0C9; transform:rotate(-14deg); opacity:.7}
.mapart .pin{position:absolute; left:50%; top:42%; transform:translate(-50%,-100%); background:var(--fita); color:var(--leite); font-weight:800; font-size:12px; padding:6px 10px; border-radius:6px; white-space:nowrap}
.mapart .pin::after{content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); border:6px solid transparent; border-bottom:0; border-top-color:var(--fita)}
.mapart .lbl{position:absolute; left:12px; bottom:10px; font-size:12px; color:var(--suave); font-weight:700}
@media (min-width:900px){ .visit .grid{grid-template-columns:1fr 1fr; gap:24px; align-items:start} .info{grid-template-columns:1fr 1fr} }

/* Rodapé */
.foot{background:var(--carvao)}
.foot > .in{padding-block:64px 40px; display:grid; gap:22px}
.foot .sig{font-size:clamp(44px,13vw,120px); font-weight:800; font-variation-settings:"wdth" 75; text-transform:uppercase; line-height:.86}
.foot .sig i{font-family:var(--f-serif); font-weight:400; text-transform:none; color:var(--cerveja); display:block}
.foot .row{display:flex; flex-wrap:wrap; gap:10px 22px; font-size:14px; color:#CDBFA4}
.foot .row a{text-decoration:none; font-weight:700; color:var(--farofa); padding-block:11px; display:inline-block}
.info a.big{display:inline-block; padding-block:8px}
.foot .row.small{font-size:12.5px}

/* Logótipo oficial: cabeçalho, selo do hero, rodapé */
body:not(.rascunho) [data-logo].no-logo{display:none}
[data-logo] img{width:100%; height:100%; object-fit:contain}
.hero-logo{position:absolute; z-index:2; right:0; top:-12px; width:clamp(120px,34vw,160px); aspect-ratio:1; filter:drop-shadow(0 10px 16px rgba(20,8,4,.4))}
.hero-logo .logo-ph, .foot-logo .logo-ph{width:100%; height:100%; font-size:11px}
@media (min-width:900px){ .hero-logo{width:190px; right:24px; top:-170px} }
@media (prefers-reduced-motion: no-preference){ .hero-logo.has-logo{animation:stamp .7s cubic-bezier(.2,.9,.3,1.3) both .5s} }
@keyframes stamp{from{transform:scale(.85) translateY(10px)} to{transform:none}}
.foot-top{display:grid; gap:20px; align-items:center}
.foot-logo{width:clamp(130px,36vw,200px); aspect-ratio:1}
@media (min-width:900px){ .foot-top{grid-template-columns:200px minmax(0,1fr); gap:40px} }

/* Barra de ações (telemóvel) */
.dock{position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--carvao); border-top:1px solid #3A2E27;
  padding:10px var(--gutter-r) calc(10px + env(safe-area-inset-bottom, 0px)) var(--gutter-l); display:grid; grid-template-columns:1fr 1fr 1.25fr; gap:8px}
.dock a{display:grid; place-items:center; min-height:48px; border-radius:99px; font-weight:800; font-size:13px; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; border:1.5px solid #4A3C33; font-variation-settings:"wdth" 85}
.dock a.go{background:var(--fita); border-color:var(--fita); color:var(--leite)}
@media (min-width:900px){ .dock{display:none} }