/* F2 Café · cardápio (/cafe): balcão com o cupom saindo da impressora + pedidos servidos */
.balcao { display: grid; grid-template-columns: 1.15fr minmax(300px, 400px); gap: clamp(40px, 7vw, 120px); align-items: start;
  padding: clamp(40px, 7vw, 110px) var(--gutter) clamp(64px, 8vw, 120px); }
.chamada { padding-top: clamp(0px, 4vw, 60px); }
.chamada h1 { font-weight: 500; font-size: clamp(64px, 11vw, 176px); letter-spacing: -.045em; line-height: .9; margin: 18px 0 28px; }
.sub { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.45; color: #cfcfcf; max-width: 34ch; margin-bottom: 36px; }
.cursor { color: var(--verde); animation: pisca 1s steps(1) infinite; }
@keyframes pisca { 50% { opacity: 0; } }

/* a impressora: o cupom sai da fenda quando a página abre */
.impressora { position: relative; padding: 10px 30px 0; margin: 0 -30px; }
.fenda { position: absolute; top: 0; left: 16px; right: 16px; height: 14px; border-radius: 7px; background: #1E1E1E;
  box-shadow: inset 0 3px 4px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .08); z-index: 1; }
.impressora .cupom { position: relative; transform-origin: top; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
@media (prefers-reduced-motion: no-preference) {
  .impressora { overflow: hidden; padding-bottom: 60px; margin-bottom: -60px; }
  .impressora .cupom { animation: imprime 2.4s steps(24) .3s both, balanca 5s ease-in-out 2.8s infinite; }
  @keyframes imprime { from { transform: translateY(-100%); } }
  @keyframes balanca { 50% { transform: rotate(.5deg); } }
}
.cupom a:hover, .cupom a:focus-visible { background: var(--verde); outline: none; }

/* pedidos servidos */
.servidos { padding: 0 var(--gutter) clamp(80px, 10vw, 160px); }
.servidos-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 28px; margin-bottom: 32px; }
.servidos h2 { font-weight: 400; font-size: clamp(28px, 3vw, 44px); letter-spacing: -.02em; }
.servidos-topo b { font-weight: 400; color: var(--verde); }
.pedidos { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(16px, 2vw, 28px); }
.pedido { position: relative; display: grid; color: #fff; text-decoration: none; border-radius: 10px; overflow: hidden; background: #111;
  border: 1px solid rgba(255, 255, 255, .1); transition: border-color .3s, transform .3s; }
.pedido .capa { display: block; overflow: hidden; aspect-ratio: 16 / 9; }
.pedido .capa img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2, 1, .3, 1); }
.pedido:hover .capa img, .pedido:focus-visible .capa img { transform: scale(1.04); }
.pedido:hover, .pedido:focus-visible { border-color: var(--verde); outline: none; }
.info { display: grid; gap: 6px; padding: 22px 24px 24px; align-content: start; }
.info .num { font-family: var(--mono); font-size: 11px; color: #777; letter-spacing: .1em; }
.info .nome { font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -.02em; line-height: 1.1; }
.info .desc { color: #a8a8a8; font-size: 15px; line-height: 1.45; }
.info .ver { margin-top: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--verde); }
.pedido .ver span { display: inline-block; transition: transform .2s; }
.pedido:hover .ver span { transform: translateX(4px); }
/* carimbo "servido" no canto da capa */
.selo { position: absolute; top: 18px; right: 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--verde); border: 2px solid var(--verde); padding: 6px 10px 5px; border-radius: 4px; rotate: -8deg; background: rgba(0, 0, 0, .55);
  transition: rotate .4s cubic-bezier(.2, 1.6, .4, 1), scale .4s cubic-bezier(.2, 1.6, .4, 1); }
.pedido:hover .selo { rotate: -2deg; scale: 1.08; }
.pedido.vazio { border-style: dashed; background: transparent; align-content: end; min-height: 260px; }
.pedido.vazio .nome { color: #cfcfcf; }

.f2-base { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 22px var(--gutter) 28px; border-top: 1px solid rgba(255, 255, 255, .14); color: #777; }

@media (max-width: 860px) {
  .balcao { grid-template-columns: 1fr; }
  .impressora { max-width: 420px; width: 100%; justify-self: center; margin-inline: 0; padding-inline: 0; }
  .fenda { left: 0; right: 0; }
  .pedidos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* destaque: comentário do cliente + comanda do pedido (aparece pelo worker quando há comentário) */
.destaque { padding: 0 var(--gutter) clamp(80px, 10vw, 140px); }
.destaque[hidden] { display: none; }
.destaque-grade { display: grid; grid-template-columns: 1fr minmax(280px, 360px); gap: clamp(32px, 6vw, 110px); align-items: center; }
.fala { margin: 0; position: relative; }
.fala .aspas { display: block; font-size: clamp(90px, 10vw, 150px); line-height: .7; color: var(--verde); height: .45em; }
.fala blockquote { margin: 0; }
.fala blockquote p { font-size: clamp(24px, 3vw, 46px); line-height: 1.25; letter-spacing: -.015em; max-width: 26ch; text-wrap: pretty; }
.fala figcaption { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-family: var(--mono); font-size: 13px; color: #9a9a9a; }
.fala figcaption b { font-weight: 400; color: #fff; }
.fala figcaption span:not(:empty)::before { content: "· "; }
.comanda-pedido { display: block; text-decoration: none; rotate: 2deg; filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .5));
  transition: rotate .4s cubic-bezier(.2, 1.6, .4, 1), translate .4s cubic-bezier(.2, 1.6, .4, 1); }
.comanda-pedido img { display: block; width: 62%; height: auto; margin: 14px auto 4px; }
.comanda-pedido:hover, .comanda-pedido:focus-visible { rotate: 0deg; translate: 0 -4px; outline: none; }
.comanda-pedido .ver-case { margin-top: 2px; }
.comanda-pedido:hover .ver-case, .comanda-pedido:focus-visible .ver-case { background: var(--verde); }
@media (max-width: 860px) { .destaque-grade { grid-template-columns: 1fr; } .comanda-pedido { max-width: 360px; width: 100%; justify-self: center; } }