/* Café & Coquetel — cardápio digital
   Paleta oficial: verde #429f8e · laranja #f08719
   Referência: o cardápio impresso de lousa. Fundo chapado com grão de giz,
   sem degradê e sem "iluminação" atrás. */

:root{
  --verde:#429f8e;
  --laranja:#f08719;
  --fundo:#1e3a2f;
  --fundo-2:#244437;
  --linha:rgba(66,159,142,.38);
  --creme:#f4f1e8;
  --creme-fraco:rgba(244,241,232,.6);
}

*{box-sizing:border-box;margin:0;padding:0}

/* o atributo hidden precisa ganhar de display:flex/block declarado abaixo */
[hidden]{display:none!important}

/* svg que guarda o filtro de giz: fica no layout, mas invisível */
.defs{position:absolute;width:0;height:0;overflow:hidden}

body{
  background-color:var(--fundo);
  /* grão de giz: ruído gerado em svg, sem arquivo externo */
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix type=%22saturate%22 values=%220%22/%3E%3C/filter%3E%3Crect width=%22260%22 height=%22260%22 filter=%22url(%23n)%22 opacity=%220.055%22/%3E%3C/svg%3E");
  color:var(--creme);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:40px;
}

/* ---------- topo: Menu e logo lado a lado ---------- */
.topo{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,4vw,28px);
  padding:30px 20px 22px;
}
.script{
  font-family:"Caveat",cursive;
  font-size:clamp(58px,17vw,88px);
  font-weight:700;line-height:.85;color:var(--creme);
}
.logo{width:clamp(84px,24vw,124px);height:auto;flex:none}

/* ---------- barra fixa: busca + abas ---------- */
.barra{
  position:sticky;top:0;z-index:20;
  background:rgba(30,58,47,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linha);
  padding:10px 0 0;
}
.busca{
  display:flex;align-items:center;gap:8px;
  max-width:720px;margin:0 auto 10px;padding:0 12px;
  height:42px;border:1px solid var(--linha);border-radius:999px;
  background:rgba(255,255,255,.04);
}
.busca svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--verde);stroke-width:2;stroke-linecap:round}
.busca input{flex:1;background:none;border:0;outline:none;color:var(--creme);font:500 15px "Inter",sans-serif}
.busca input::placeholder{color:var(--creme-fraco)}
.busca button{background:none;border:0;color:var(--creme-fraco);font-size:22px;line-height:1;cursor:pointer}
@media (max-width:751px){.busca{margin:0 16px 10px}}

.abas{display:flex;gap:8px;overflow-x:auto;padding:0 16px 10px;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.aba{
  flex:none;white-space:nowrap;cursor:pointer;
  padding:7px 14px;border-radius:999px;
  border:1px solid var(--linha);background:none;
  color:var(--creme-fraco);font:500 13px "Inter",sans-serif;transition:.18s;
}
.aba:hover{color:var(--creme)}
.aba.ativa{background:var(--verde);border-color:var(--verde);color:#12251e;font-weight:600}

/* ---------- seções ---------- */
main{max-width:720px;margin:0 auto;padding:26px 16px 0}
.secao{margin-bottom:38px;scroll-margin-top:118px}

/* faixa de papel rasgado, como as do cardápio impresso */
.secao-titulo{
  display:inline-block;
  font-family:"Patrick Hand",cursive;font-size:23px;letter-spacing:.07em;
  text-transform:uppercase;color:#1b3227;background:var(--creme);
  padding:9px 26px 10px;transform:rotate(-1.4deg);
  clip-path:polygon(
    0 10%, 14px 2%, 32% 0, 62% 4%, calc(100% - 16px) 0, 100% 12%,
    100% 88%, calc(100% - 14px) 100%, 66% 96%, 34% 100%, 15px 97%, 0 90%
  );
}
.secao-nota{color:var(--creme-fraco);font-size:13px;margin:12px 2px 0}

/* ---------- item ---------- */
.item{
  display:flex;align-items:center;gap:12px;width:100%;
  background:none;border:0;border-bottom:1px dotted var(--linha);
  padding:14px 2px;text-align:left;cursor:pointer;color:inherit;transition:background .15s;
}
.item:hover{background:rgba(255,255,255,.035)}
.item:last-child{border-bottom:0}
.item-info{flex:1;min-width:0}
.item-nome{font-family:"Patrick Hand",cursive;font-size:20px;line-height:1.25}
.item-desc{
  color:var(--laranja);font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;margin-top:3px;line-height:1.45;
}
.item-preco{font-family:"Patrick Hand",cursive;font-size:19px;text-align:right;flex:none;white-space:nowrap}
.item-preco .apartir{
  display:block;font-family:"Inter",sans-serif;font-size:9.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.09em;color:var(--laranja);
  margin-bottom:1px;
}
.item-preco small{
  display:block;font-family:"Inter",sans-serif;font-size:10.5px;
  color:var(--creme-fraco);letter-spacing:.04em;margin-top:1px;
}
.selo{
  display:inline-block;vertical-align:middle;margin-left:7px;
  background:var(--laranja);color:#fff;font:600 9.5px "Inter",sans-serif;
  letter-spacing:.1em;padding:2px 7px;border-radius:999px;text-transform:uppercase;
}

/* desenho da xícara na linha do item */
.xicara-mini{width:50px;flex:none}

.vazio{text-align:center;color:var(--creme-fraco);padding:20px;font-size:14px}

/* ---------- ficha do produto ---------- */
.overlay{
  position:fixed;inset:0;z-index:50;
  background:rgba(9,20,15,.72);backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;justify-content:center;animation:fade .2s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.ficha{
  position:relative;width:100%;max-width:520px;
  background:var(--fundo-2);border:1px solid var(--linha);border-bottom:0;
  border-radius:22px 22px 0 0;box-shadow:0 -8px 40px rgba(0,0,0,.4);
  padding:26px 24px 34px;max-height:88vh;overflow-y:auto;
  animation:sobe .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes sobe{from{transform:translateY(100%)}to{transform:translateY(0)}}
.puxador{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:42px;height:4px;border-radius:999px;background:var(--linha)}
.fechar{position:absolute;top:12px;right:16px;background:none;border:0;color:var(--creme-fraco);font-size:28px;line-height:1;cursor:pointer;z-index:2}

.f-nome{font-family:"Patrick Hand",cursive;font-size:30px;line-height:1.1;padding-right:30px}
.f-obs{color:var(--creme-fraco);font-size:14px;margin-top:6px;font-style:italic}

/* xícara grande com as camadas apontadas, igual ao impresso */
.xicara-grande{width:100%;max-width:420px;display:block;margin:14px auto 2px}

.f-precos{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.f-preco{border:1px solid var(--linha);border-radius:12px;padding:10px 14px;min-width:96px}
.f-preco span{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--creme-fraco)}
.f-preco strong{font-family:"Patrick Hand",cursive;font-weight:400;font-size:24px}
.f-preco.destaque{background:var(--laranja);border-color:var(--laranja);color:#fff}
.f-preco.destaque span{color:rgba(255,255,255,.82)}

.f-bloco{margin-top:22px}
.f-bloco h3{
  font:600 11px "Inter",sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--verde);margin-bottom:9px;
}
.camadas{list-style:none;display:flex;flex-direction:column;gap:7px}
.camadas li{display:flex;align-items:center;gap:9px;font-size:14.5px}
.camadas li i{width:9px;height:9px;border-radius:50%;flex:none;background:var(--verde)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid var(--linha);border-radius:999px;padding:6px 12px;font-size:13px}
.f-add{
  margin-top:22px;padding:12px 14px;border-radius:12px;
  background:rgba(240,135,25,.12);border:1px solid rgba(240,135,25,.35);
  font-size:13.5px;line-height:1.5;
}
.f-add b{color:var(--laranja)}

/* ---------- rodapé ---------- */
.rodape{
  max-width:720px;margin:26px auto 0;padding:34px 20px 8px;
  text-align:center;border-top:1px solid var(--linha);
}
/* logo e instagram na mesma linha, centrados no eixo */
.rodape-topo{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.logo-rodape{width:84px;height:auto;flex:none}
.insta{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;color:var(--creme);
  font:600 14px "Inter",sans-serif;
  border:1px solid var(--verde);border-radius:999px;padding:9px 18px;transition:.18s;
}
.insta:hover{background:var(--verde);color:#12251e}
.insta:hover svg{stroke:#12251e}
.insta:hover .cheio{fill:#12251e}
.insta svg{width:17px;height:17px;fill:none;stroke:var(--verde);stroke-width:1.8;transition:.18s}
.insta .cheio{fill:var(--verde);stroke:none}
.end{margin-top:22px;font-size:13.5px;line-height:1.55}
.hora{margin-top:4px;font-size:13px;color:var(--creme-fraco)}
.mini{margin-top:14px;font-size:11px;color:rgba(244,241,232,.42);line-height:1.6}
.mini + .mini{margin-top:3px}

/* ---------- desktop ---------- */
@media (min-width:760px){
  .overlay{align-items:center}
  .ficha{border-radius:20px;border-bottom:1px solid var(--linha);max-height:82vh}
  .puxador{display:none}
  .secao{scroll-margin-top:130px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}