/* F2 Café: peças da F2 que aparecem em todas as páginas do café (cardápio, cases, retirada, 418) */
:root {
  --verde: #D5FF27; --verde-lado: #9DBD12; --preto: #000; --grafite: #1E1E1E;
  --papel: #F4F1EA; --tinta: #1E1E1E;
  --gutter: clamp(16px, 4vw, 64px);
  --mono: Menlo, "SFMono-Regular", Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { -webkit-font-smoothing: antialiased; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: #9a9a9a; }

/* ---------- páginas da F2 (cardápio, retirada, 418) ---------- */
.f2 { background: var(--preto); color: #fff; font-family: "Space Grotesk", system-ui, sans-serif; min-height: 100svh; }
.f2-topo { display: flex; justify-content: space-between; align-items: center; padding: 24px var(--gutter); }
.f2-topo img { height: 44px; width: auto; display: block; }
.f2-topo a { color: #fff; text-decoration: none; font-family: var(--mono); font-size: 12px; opacity: .8; }
.f2-topo a:hover, .f2-topo a:focus-visible { color: var(--verde); opacity: 1; }
.cta { display: inline-flex; gap: 10px; align-items: center; font: 500 15px/1 "Space Grotesk", sans-serif; color: #000; background: var(--verde);
  padding: 13px 18px; border-radius: 8px; text-decoration: none; transition: transform .15s, box-shadow .15s; box-shadow: 0 4px 0 var(--verde-lado); border: 0; cursor: pointer; }
.cta:hover, .cta:focus-visible { transform: translateY(-1px); box-shadow: 0 5px 0 var(--verde-lado), 0 10px 30px rgba(213, 255, 39, .18); }
.cta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--verde-lado); }
.cta:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* cupom térmico: papel com picote em cima e embaixo */
.cupom {
  --picote: 8px;
  background: var(--papel); color: var(--tinta); font-family: var(--mono); font-size: 13px; line-height: 1.6;
  padding: calc(var(--picote) + 26px) 26px calc(var(--picote) + 26px);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--picote) * 2) 51% repeat-x,
                conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--picote) * 2) 51% repeat-x;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--picote) * 2) 51% repeat-x,
                conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--picote) * 2) 51% repeat-x;
}
.cupom hr { border: 0; border-top: 1px dashed rgba(30, 30, 30, .45); margin: 14px 0; }
.cupom .centro { text-align: center; }
.cupom .linha { display: flex; gap: 8px; align-items: baseline; }
.cupom .linha::after { content: ""; order: 1; flex: 1; border-bottom: 1px dotted rgba(30, 30, 30, .4); translate: 0 -4px; }
.cupom .linha > :last-child { order: 2; }
.cupom a { color: inherit; }
.cupom .barras { height: 46px; margin: 18px auto 6px; width: 78%;
  background: repeating-linear-gradient(90deg, var(--tinta) 0 2px, transparent 2px 4px, var(--tinta) 4px 5px, transparent 5px 8px, var(--tinta) 8px 11px, transparent 11px 12px, var(--tinta) 12px 13px, transparent 13px 16px); }

/* ---------- rodapé dos cases: "servido pelo F2 Café" ---------- */
.servido { background: var(--preto); color: #fff; font-family: "Space Grotesk", system-ui, sans-serif; padding: clamp(72px, 9vw, 140px) var(--gutter) 28px; }
.comanda { max-width: 880px; }
.servido h2 { font-weight: 400; font-size: clamp(34px, 4.4vw, 64px); letter-spacing: -.02em; line-height: 1.05; margin: 14px 0 36px; }
.servido h2 b { font-weight: 500; color: var(--verde); }
.servido dl { display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.servido dl div { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.servido dt { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #777; padding-top: 4px; }
.servido dd { font-size: 17px; line-height: 1.45; }
.servido .acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 40px; }
.volta { font-family: var(--mono); font-size: 12.5px; color: #fff; opacity: .8; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); padding-bottom: 2px; }
.volta:hover, .volta:focus-visible { color: var(--verde); border-color: var(--verde); opacity: 1; }
.cadeado { font-size: 10px; margin-left: 4px; }
.servido .base { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: clamp(64px, 8vw, 120px); padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14); font-family: var(--mono); font-size: 11.5px; color: #777; }
.servido .base img { height: 40px; width: auto; display: block; }
@media (max-width: 560px) { .servido dl div { grid-template-columns: 1fr; gap: 4px; } }