/* Quintal Torra — conceito demonstrativo de cafeteria.
   De propósito, o oposto do site do Pedro e do da Marcela: grotesca larga e pesada, cores chapadas,
   ilustração em vez de foto e cardápio denso, como um cartaz de bairro. */
:root{
  --cobalt:#1f3bc4;--cobalt-2:#162c96;--butter:#fff0c7;--butter-2:#ffe39a;--pink:#ffb3c8;--white:#fffaf0;
  --display:"Bricolage Grotesque",system-ui,sans-serif;--mono:"DM Mono",ui-monospace,monospace;
  --pad:clamp(16px,4vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--butter);color:var(--cobalt);font:400 17px/1.5 var(--display);font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}
svg{display:block;width:100%;height:auto}

.demo-note{display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:space-between;align-items:center;padding:10px var(--pad);background:#14181f;color:#f4f1ea;font:500 13.5px/1.4 var(--mono)}
.demo-note a{color:#f4f1ea;text-underline-offset:3px}

.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;padding:14px var(--pad);background:var(--butter);border-bottom:3px solid var(--cobalt)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 19px/.92 var(--display);font-variation-settings:"wdth" 80;text-transform:uppercase;letter-spacing:.01em}
.logo svg{width:40px;height:40px}
.menu{display:flex;gap:28px;margin-left:auto;font-weight:600}
.menu a{text-decoration:none;padding:8px 0}
.menu a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:14px;font:700 16px/1 var(--display);text-decoration:none;border:3px solid var(--cobalt);white-space:nowrap;transition:transform .15s,box-shadow .15s}
.btn-solid{background:var(--cobalt);color:var(--butter);box-shadow:4px 4px 0 var(--cobalt-2)}
.btn-solid:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--cobalt-2)}
.btn-line{color:var(--cobalt)}
.btn-line:hover{background:var(--white)}
.top .btn{min-height:44px;padding:0 18px}

.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(28px,5vw,72px) var(--pad) clamp(40px,5vw,72px)}
.status{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:2px solid var(--cobalt);border-radius:999px;font:500 14px/1 var(--mono);background:var(--white)}
.status i{width:10px;height:10px;border-radius:50%;background:var(--cobalt)}
.status.is-open i{background:#1d9a50;box-shadow:0 0 0 3px rgba(29,154,80,.22)}
.hero h1{margin:22px 0 20px;font:800 clamp(48px,7.6vw,118px)/.9 var(--display);font-variation-settings:"wdth" 78;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.hero-sub{font-size:clamp(17px,1.5vw,21px);max-width:30em;margin-bottom:28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-art{position:relative;max-width:540px;justify-self:center;width:100%}
.sticker{position:absolute;right:2%;bottom:8%;transform:rotate(8deg);padding:16px 18px;border-radius:50%;aspect-ratio:1;display:grid;place-items:center;text-align:center;background:var(--cobalt);color:var(--butter);font:700 15px/1.1 var(--display);text-transform:uppercase;width:132px}

.strip{display:flex;gap:28px;overflow:hidden;white-space:nowrap;padding:14px var(--pad);background:var(--cobalt);color:var(--butter);font:700 clamp(18px,2vw,26px)/1 var(--display);font-variation-settings:"wdth" 78;text-transform:uppercase}
.strip span::after{content:"✺";margin-left:28px;color:var(--pink)}

.block{padding:clamp(48px,7vw,104px) var(--pad);border-bottom:3px solid var(--cobalt)}
.block-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 32px;margin-bottom:clamp(28px,4vw,48px)}
.block h2{font:800 clamp(40px,6vw,84px)/.92 var(--display);font-variation-settings:"wdth" 78;text-transform:uppercase;letter-spacing:-.01em}
.block-head p{font:500 14.5px/1.5 var(--mono);max-width:36em}
.mono{font-family:var(--mono)}

.menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.menu-col h3{font:800 24px/1 var(--display);text-transform:uppercase;padding:12px 0;border-bottom:3px solid var(--cobalt);margin-bottom:6px}
.items li{display:flex;align-items:baseline;gap:8px;padding:11px 0;border-bottom:1.5px dashed rgba(31,59,196,.35);font-weight:600}
.items li span{flex:1}
.items small{display:block;font:400 13px/1.4 var(--mono);opacity:.85;margin-top:2px}
.items b{font:500 16px/1 var(--mono)}

.lunch{background:var(--pink)}
.week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.week li{padding:18px;border:3px solid var(--cobalt);border-radius:14px;background:var(--white);display:grid;gap:10px;align-content:start}
.week b{font:500 14px/1 var(--mono);text-transform:uppercase}
.week span{font:700 19px/1.2 var(--display)}
.week li.is-today{background:var(--cobalt);color:var(--butter)}
.week li.is-today b::after{content:" · hoje"}

.order{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;background:var(--butter-2)}
.order p{margin-top:16px;font-size:clamp(17px,1.5vw,21px);max-width:32em}

.visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.visit-map{border:3px solid var(--cobalt);border-radius:18px;overflow:hidden}
.addr{margin:18px 0;font:700 clamp(22px,2vw,28px)/1.2 var(--display)}
.hours{margin-bottom:24px;font-family:var(--mono);font-size:15px}
.hours div{display:flex;justify-content:space-between;max-width:340px;padding:8px 0;border-bottom:1.5px dashed rgba(31,59,196,.35)}

.foot{padding:28px var(--pad) 32px;font:400 14px/1.5 var(--mono)}
.foot a{font-weight:500}
.dock{display:none}
.toast{position:fixed;left:50%;bottom:24px;z-index:50;transform:translate(-50%,160%);max-width:min(92vw,460px);padding:14px 18px;border-radius:12px;background:#14181f;color:#f4f1ea;font:500 14.5px/1.4 var(--mono);transition:transform .25s,visibility .25s;visibility:hidden}
.toast.is-on{transform:translate(-50%,0);visibility:visible}

@media (max-width:860px){
  .menu{display:none}
  .top .btn{margin-left:auto}
  .hero{grid-template-columns:1fr}
  .hero-art{max-width:300px;order:-1;justify-self:start;margin-bottom:-8px}
  .sticker{width:104px;font-size:12.5px;right:-24%;bottom:10%}
  .menu-grid,.visit{grid-template-columns:1fr}
  .week{grid-template-columns:1fr}
  .week li{grid-template-columns:56px 1fr;align-items:baseline}
  .order{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{padding-bottom:76px}
  .demo-note{font-size:12.5px}
  .top .btn{display:none}
  .hero-art{max-width:220px}
  .sticker{right:-48%}
  .hero-actions .btn{flex:1 1 100%}
  .dock{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--cobalt);padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:8px}
  .dock a{display:grid;place-items:center;min-height:52px;border-radius:12px;color:var(--butter);font:700 16px/1 var(--display);text-decoration:none;border:2px solid rgba(255,240,199,.35)}
  .dock a:first-child{background:var(--butter);color:var(--cobalt)}
  .toast{bottom:88px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}