/* ===== Italiano Lancheria (Brusque/SC) - identidade italiana casual ===== */
:root {
  --verde: #1f7a3d;
  --verde-escuro: #155c2d;
  --vermelho: #d3232a;
  --vermelho-escuro: #a81a20;
  --creme: #fbf3e6;
  --creme-escuro: #f1e4cd;
  --carvao: #241a13;
  --texto: #3a2e22;
  --dourado: #e0a82e;
  --whats: #25d366;
  --whats-escuro: #1da851;
  --sombra: 0 10px 30px rgba(36, 26, 19, .12);
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Poppins', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--texto); background: var(--creme); line-height: 1.6; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.15; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1120px, 92%); margin: 0 auto; }

.faixa-bandeira { height: 6px; width: 100%; background: linear-gradient(90deg, var(--verde) 0 33.3%, #fff 33.3% 66.6%, var(--vermelho) 66.6% 100%); transition: height .25s ease; }

/* Header */
header.topo { position: sticky; top: 0; z-index: 50; background: rgba(251, 243, 230, .97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--creme-escuro); }
.nav { display: flex; align-items: center; justify-content: center; gap: 40px; padding: 12px 0; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo .marca { font-family: 'Pacifico', cursive; font-size: 1.5rem; font-weight: 400; color: var(--vermelho); line-height: 1.1; }
.logo .selo { width: 46px; height: 46px; border-radius: 50%; background: var(--verde); color: #fff; display: grid; place-items: center; font-family: var(--serif); font-weight: 800; font-size: 1.2rem; border: 3px solid var(--dourado); }
.logo img.logo-img { height: 104px; width: auto; }
.menu-links { display: flex; gap: 22px; align-items: center; font-weight: 500; }
.menu-links a { padding: 6px 2px; transition: color .2s; }
.menu-links a:hover { color: var(--vermelho); }
.menu-links a.btn-jogo { background: var(--vermelho); color: #fff; padding: 8px 15px; border-radius: 30px; }
.menu-links a.btn-jogo:hover { background: var(--vermelho-escuro); color: #fff; }
.menu-links a.btn-whats { background: var(--whats); color: #fff; padding: 8px 16px; border-radius: 30px; }
.menu-links a.btn-whats:hover { background: var(--whats-escuro); color: #fff; }
.hamburguer { display: none; background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: var(--carvao); }

/* Hero */
.hero { position: relative; color: #fff; text-align: center; padding: 110px 0 120px;
  background: linear-gradient(rgba(21,33,18,.66), rgba(36,26,19,.74)),
    var(--hero, url('https://images.unsplash.com/photo-1513104890138-7c749659a591?auto=format&fit=crop&w=1600&q=80')) center/cover; }
.hero .tag { display: inline-block; background: var(--dourado); color: var(--carvao); font-weight: 600; font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; padding: 5px 16px; border-radius: 30px; margin-bottom: 18px; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.hero p { font-size: clamp(1.05rem, 2.5vw, 1.35rem); margin-top: 14px; opacity: .96; }
.hero .cta { margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: 32px; font-weight: 600; cursor: pointer; border: 0; font-size: 1rem; transition: transform .15s, box-shadow .2s; font-family: var(--sans); }
.btn:hover { transform: translateY(-2px); }
.btn-primario { background: var(--vermelho); color: #fff; box-shadow: var(--sombra); }
.btn-whats { background: var(--whats); color: #fff; box-shadow: var(--sombra); }
.btn-whats:hover { background: var(--whats-escuro); color: #fff; }
.btn-secundario { background: #fff; color: var(--carvao); }
.btn-amarelo { background: var(--dourado); color: var(--carvao); box-shadow: var(--sombra); }
.btn-amarelo:hover { background: #cf9722; color: var(--carvao); }
.btn-contorno { background: transparent; color: #fff; border: 2px solid #fff; }

section { padding: 76px 0; }
.titulo-sec { text-align: center; margin-bottom: 14px; }
.titulo-sec h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--verde-escuro); }
.titulo-sec .sub { color: var(--dourado); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; font-size: .8rem; }
.titulo-sec .linha { width: 70px; height: 3px; background: var(--vermelho); margin: 14px auto 0; border-radius: 3px; }

/* Sobre */
.sobre { background: var(--creme-escuro); }
.sobre-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.sobre-texto p { font-size: 1.08rem; margin-top: 16px; }
#sobre-texto { white-space: pre-line; }
.sobre-img img { border-radius: 16px; box-shadow: var(--sombra); width: 100%; height: auto; display: block; background: #efe4d0; }
.info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.info-card { background: #fff; border-radius: 14px; padding: 22px; text-align: center; box-shadow: var(--sombra); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.info-card .ic { font-size: 1.8rem; }
.info-card h3 { font-size: 1.05rem; margin: 8px 0 4px; color: var(--vermelho); }

/* Cardapio */
.menu-filtros { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 26px 0 36px; }
.menu-filtros button { border: 2px solid var(--verde); background: transparent; color: var(--verde-escuro); padding: 8px 20px; border-radius: 30px; cursor: pointer; font-weight: 600; font-family: var(--sans); transition: all .2s; }
.menu-filtros button.ativo, .menu-filtros button:hover { background: var(--verde); color: #fff; }
.cat-bloco { margin-bottom: 50px; }
.cat-bloco h3.cat-nome { font-size: 1.7rem; color: var(--vermelho); margin-bottom: 22px; display: flex; align-items: center; gap: 14px; }
.cat-bloco h3.cat-nome::after { content: ''; flex: 1; height: 2px; background: var(--creme-escuro); }
.itens { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.item { display: flex; gap: 16px; background: #fff; border-radius: 14px; padding: 16px; box-shadow: var(--sombra); transition: transform .15s; }
.item:hover { transform: translateY(-3px); }
.item .foto { width: 92px; height: 92px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--creme-escuro); }
.item .foto.placeholder { display: grid; place-items: center; font-size: 2rem; }
.item .corpo { flex: 1; min-width: 0; }
.item .topo-item { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.item .nome { font-weight: 600; font-size: 1.1rem; }
.item .preco { color: var(--verde-escuro); font-weight: 700; white-space: nowrap; }
.item .desc { font-size: .92rem; color: #6b5d4d; margin-top: 4px; }
.item .esgotado { display: inline-block; margin-top: 6px; font-size: .75rem; background: var(--creme-escuro); color: var(--vermelho); padding: 2px 10px; border-radius: 20px; font-weight: 600; }
.cardapio-cta { text-align: center; margin-top: 10px; }

/* Faixa jogo */
.faixa-jogo { background: linear-gradient(135deg, var(--verde-escuro), var(--verde)); color: #fff; text-align: center; }
.faixa-jogo h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.faixa-jogo p { margin: 12px 0 26px; opacity: .92; font-size: 1.1rem; }

/* Footer */
footer.rodape { background: var(--carvao); color: #f1e4cd; padding: 54px 0 24px; }
.rodape-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.rodape h3 { color: #fff; margin-bottom: 14px; font-size: 1.3rem; }
.rodape a:hover { color: var(--dourado); }
.rodape-bottom { text-align: center; margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; opacity: .75; }
.rodape-bottom a { color: var(--dourado); }


@media (max-width: 820px) {
  .nav { flex-direction: row; justify-content: space-between; }
  .menu-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--creme); padding: 18px 24px; gap: 14px; box-shadow: var(--sombra); display: none; }
  .menu-links.aberto { display: flex; }
  .hamburguer { display: block; }
  .sobre-grid { grid-template-columns: 1fr; }
  .itens { grid-template-columns: 1fr; }
  .info-cards { grid-template-columns: 1fr; }
  .rodape-grid { grid-template-columns: 1fr; }
}

/* ===== Cardapio em imagens (fotos do impresso) ===== */
.cardapio-galeria { min-height: 420px; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 24px; max-width: 900px; margin: 0 auto; }
.cardapio-img { width: 100%; border-radius: 14px; box-shadow: var(--sombra); cursor: pointer; transition: transform .15s; background: #fff; }
.cardapio-img:hover { transform: translateY(-3px); }
.cardapio-cta { text-align: center; margin-top: 34px; }

/* Capa do cardapio */
.cardapio-capa { position: relative; display: flex; flex-direction: column; flex: 1 1 300px; max-width: 340px; margin: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--sombra); cursor: pointer; transition: transform .15s; }
.cardapio-capa:hover { transform: translateY(-3px); }
.cardapio-capa img { width: 100%; display: block; object-fit: cover; aspect-ratio: 3 / 4; background: #efe4d0; }
.cardapio-capa .capa-aviso { position: absolute; top: 10px; left: 10px; right: 10px; background: var(--vermelho); color: #fff; padding: 6px 10px; border-radius: 8px; font-size: .82rem; font-weight: 700; text-align: center; z-index: 2; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.cardapio-capa .capa-tag small { display: block; font-weight: 400; font-size: .8rem; opacity: .92; margin-top: 3px; }
.cardapio-capa .capa-tag { background: var(--verde); color: #fff; padding: 13px 12px; font-weight: 700; font-size: 1.1rem; letter-spacing: .3px; text-align: center; }

/* Folheador do cardapio (efeito revista) */
.folheador { position: fixed; inset: 0; background: rgba(20, 15, 10, .95); display: none; z-index: 200; }
.folheador.aberto { display: block; }
.fl-palco { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: none; display: flex; align-items: center; justify-content: center; }
.fl-spread { position: relative; display: inline-flex; gap: 0; align-items: center; transform-origin: center center; }
.fl-spread .fl-pg { display: block; max-height: 90vh; cursor: pointer; }
.fl-spread.single .fl-pg { max-width: 94vw; border-radius: 6px; box-shadow: 0 16px 50px rgba(0,0,0,.5); }
.fl-spread.par { position: relative; border-radius: 6px; box-shadow: 0 16px 50px rgba(0,0,0,.55); }
.fl-spread.par::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 60px; transform: translateX(-50%); pointer-events: none; z-index: 5; background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 35%, rgba(0,0,0,.28) 50%, rgba(0,0,0,.10) 65%, rgba(0,0,0,0) 100%); }
.fl-spread.par::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); pointer-events: none; z-index: 6; background: rgba(0,0,0,.38); }
.fl-spread.par .fl-pg { max-width: 47vw; }
.fl-spread .fl-pg.zoom { max-width: none; max-height: none; cursor: grab; }
.fl-slot { position: relative; display: block; perspective: 2200px; }
.fl-reveal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; z-index: 0; }
.fl-flip { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; z-index: 2; }
.fl-flip .fl-face { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 14px 46px rgba(0,0,0,.5); }
.fl-flip .fl-back { transform: rotateY(180deg); }
.fl-fadeover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 8; pointer-events: none; opacity: 1; transition: opacity .35s ease; }
.fl-cover-ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 8; pointer-events: none; }
.fl-cover-ov img { max-width: 94vw; max-height: 90vh; border-radius: 6px; box-shadow: 0 16px 50px rgba(0,0,0,.5); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.fl-nav { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(20,20,20,.55); color: #fff; border: 1.5px solid rgba(255,255,255,.65); width: 50px; height: 50px; border-radius: 50%; font-size: 1.6rem; cursor: pointer; z-index: 210; display: grid; place-items: center; transition: background .2s, transform .1s; box-shadow: 0 3px 12px rgba(0,0,0,.45); }
.fl-nav:hover { background: rgba(0,0,0,.72); }
.fl-nav:active { transform: translateY(-50%) scale(.93); }
.fl-nav:disabled { opacity: .3; cursor: default; }
.fl-prev { left: 12px; }
.fl-next { right: 12px; }
.fl-fechar { position: fixed; top: 12px; right: 16px; width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 1.9rem; line-height: 46px; text-align: center; cursor: pointer; font-family: var(--sans); z-index: 210; }
.fl-fechar:hover { background: var(--vermelho); color: #fff; }
.fl-aviso { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); background: var(--vermelho); color: #fff; padding: 8px 18px; border-radius: 20px; font-weight: 600; font-size: .9rem; z-index: 210; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.fl-contador { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(0,0,0,.45); padding: 6px 16px; border-radius: 20px; font-size: .9rem; z-index: 210; }
.fl-dica { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(31, 122, 61, .78); backdrop-filter: blur(2px); color: #fff; font-size: 1.15rem; line-height: 1.5; font-weight: 600; padding: 20px 30px; border-radius: 18px; border: 3px solid var(--dourado); z-index: 211; pointer-events: none; max-width: 88vw; text-align: center; white-space: pre-line; opacity: 0; transition: opacity .4s; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.fl-dica.mostra { opacity: 1; }
@media (max-width: 560px) { .fl-nav { width: 46px; height: 46px; font-size: 1.4rem; } }

/* ===== Joguinho embutido na pagina principal ===== */
.jogo-app { position: relative; max-width: 760px; margin: 26px auto 0; border-radius: 16px; overflow: hidden; box-shadow: var(--sombra); }
.jogo-app canvas { width: 100%; height: 380px; display: block; background: #bfe3f5; touch-action: none; }
.jogo-app .jov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; background: rgba(20,30,18,.82); padding: 16px; overflow-y: auto; }
.jogo-app .jov.escondido { display: none; }
.jogo-app .jov h2 { font-family: var(--serif); font-size: clamp(1.2rem, 4vw, 2rem); margin-bottom: 6px; color: #fff; }
.jogo-app .jov h2 { display: flex; align-items: center; justify-content: center; gap: 8px; }
.jogo-app .jov h2 .h2-moto { height: 1.5em; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.jogo-app .jov p { font-size: clamp(.8rem, 2.4vw, 1rem); margin-bottom: 6px; opacity: .95; max-width: 400px; }
.jogo-app .placar-final { font-size: clamp(1rem, 3vw, 1.25rem); font-weight: 700; color: var(--dourado); margin: 8px 0; }
.jogo-app .jbtn { margin-top: 12px; background: var(--vermelho); color: #fff; border: 0; padding: 11px 26px; border-radius: 30px; font-family: var(--sans); font-weight: 700; font-size: 1rem; cursor: pointer; transition: transform .15s; }
.jogo-app .jbtn:hover { transform: translateY(-2px); }
.jogo-app .jdica { margin-top: 10px; font-size: .78rem; opacity: .8; }
@media (max-width: 560px) {
  .jogo-app canvas { height: min(70vh, 460px); }
  .jogo-app .jov { padding: 10px; justify-content: center; }
  .jogo-app .jov h2 { font-size: 1.1rem; margin-bottom: 4px; }
  .jogo-app .jov p { font-size: .76rem; margin-bottom: 4px; }
  .jogo-app .jov p.opcional { display: block; font-size: .72rem; line-height: 1.25; }
  .jogo-app .jdica { display: none; }
  .jogo-app .jbtn { margin-top: 8px; padding: 9px 22px; font-size: .92rem; }
}


/* ===== Secao de localizacao / mapa ===== */
.localizacao { background: var(--creme-escuro); }
.mapa-wrap { max-width: 900px; margin: 22px auto 0; border-radius: 16px; overflow: hidden; box-shadow: var(--sombra); }
.mapa-wrap iframe { width: 100%; height: 380px; border: 0; display: block; }
@media (max-width: 600px) { .mapa-wrap iframe { height: 300px; } }
.mapa-facade { width: 100%; height: 380px; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg,#e9f2ec,#f3ead6); color: var(--verde-escuro,#155c2d); font-family: inherit; font-weight: 600; font-size: 1.02rem; transition: filter .15s; }
.mapa-facade svg { width: 46px; height: 46px; fill: var(--vermelho,#d3232a); }
.mapa-facade:hover { filter: brightness(.97); }
@media (max-width: 600px) { .mapa-facade { height: 300px; } }

.entrega-destaque { display:inline-block; margin-top:7px; background:#f6c62e; color:#3a2620; font-weight:700; padding:3px 13px; border-radius:14px; box-shadow:0 2px 6px rgba(0,0,0,.18); letter-spacing:.2px; }
.entrega-destaque { display:inline-flex; align-items:center; }
.entrega-destaque::before { content:""; display:inline-block; flex:0 0 auto; width:28px; height:25px; margin-right:7px; background:url('../img/motoboy.png?v=1') no-repeat center center; background-size:contain; }

.wa-ico { width:1.15em; height:1.15em; flex:0 0 auto; }
#nav-whats, #rodape-whats { display:inline-flex; align-items:center; gap:7px; }

/* Encolher a barra do topo ao rolar a pagina */
.nav, .logo img.logo-img, .logo .selo, .logo .marca { transition: padding .25s ease, height .25s ease, width .25s ease, font-size .25s ease; }
.topo.rolado .nav { padding: 6px 0; }
.topo.rolado .logo img.logo-img { height: 52px; }
.topo.rolado .logo .selo { width: 34px; height: 34px; font-size: .95rem; border-width: 2px; }
.topo.rolado .logo .marca { font-size: 1.2rem; }

section[id], footer[id] { scroll-margin-top: 104px; }
html { scroll-padding-top: 104px; }
@media (max-width: 900px) { section[id], footer[id] { scroll-margin-top: 92px; } html { scroll-padding-top: 92px; } }
@media (max-width: 600px) { section[id], footer[id] { scroll-margin-top: 86px; } html { scroll-padding-top: 86px; } }
.topo.rolado .faixa-bandeira { height: 3px; }
.capa-mini { height: 30px; width: auto; max-width: 40px; border-radius: 4px; object-fit: contain; flex: 0 0 auto; box-shadow: 0 1px 4px rgba(0,0,0,.25); }

.ico { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -0.16em; flex: 0 0 auto; }
.info-card .ic { color: var(--verde); line-height: 1; }
.info-card .ic .ico { width: 1.9rem; height: 1.9rem; }
.fl-dica .ico { width: 1.3em; height: 1.3em; vertical-align: -0.2em; }
.ico-moeda { color: #f3c02c; }
.ico-dinheiro { height: 1.4em; width: auto; display: inline-block; vertical-align: -0.4em; margin: 0 2px; }
.nb { white-space: nowrap; }

.girar-aviso { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  .girar-aviso { display: flex; align-items: center; justify-content: center; gap: 8px; position: absolute; left: 0; right: 0; bottom: 0; z-index: 12; background: rgba(20,30,18,.92); color: #fff; padding: 8px 12px; font-size: .8rem; font-weight: 600; text-align: center; border-top: 1px solid rgba(255,255,255,.25); box-shadow: 0 -3px 14px rgba(0,0,0,.3); pointer-events: none; }
  .girar-aviso .ico { width: 1.35em; height: 1.35em; color: var(--dourado); flex: 0 0 auto; }
}

/* Celular deitado: jogo ocupa a tela toda */
@media (pointer: coarse) {
  .jogo-app.tela-cheia { position: fixed; inset: 0; max-width: none; width: 100vw; height: 100vh; height: 100dvh; margin: 0; border-radius: 0; z-index: 500; }
  .jogo-app.tela-cheia canvas { width: 100vw !important; height: 100vh !important; height: 100dvh !important; }
}
#rodape-instagram { display: inline-flex; align-items: center; gap: 6px; }
#rodape-instagram .ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.rodape-tel-whats { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; }
.rodape-tel-whats .ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; color: inherit; }
.rodape-endereco-link { display: inline-flex; align-items: flex-start; gap: 6px; text-decoration: none; color: inherit; cursor: pointer; }
.rodape-endereco-link .ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; color: inherit; margin-top: .18em; }
#rodape-horario { display: flex; align-items: flex-start; gap: 6px; }
#rodape-horario > .ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; margin-top: .2em; }
.rodape-logo { height: 74px; width: auto; margin-bottom: 14px; }

/* Seletor de dificuldade do joguinho */
.jogo-app .jdif { display: flex; gap: 6px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.jogo-app .jdif-btn { background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.35); padding: 6px 16px; border-radius: 30px; font-family: var(--sans); font-weight: 600; font-size: .86rem; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.jogo-app .jdif-btn:hover { background: rgba(255,255,255,.26); transform: translateY(-1px); }
.jogo-app .jdif-btn.ativo { background: var(--dourado, #e0a82e); border-color: var(--dourado, #e0a82e); color: #241a13; }
@media (max-width: 600px) { .jogo-app .jdif-btn { padding: 5px 13px; font-size: .8rem; } .jogo-app .jdif { margin-top: 9px; gap: 5px; } }

/* Ajuste fino: caber tudo na tela do jogo sem barra de rolagem */
.jogo-app .jov { overflow: hidden; }
.jogo-app .jov > * { flex: 0 0 auto; }
.jogo-app .jdif { margin-top: 8px; }
.jogo-app .jov .jbtn { margin-top: 9px; }
.jogo-app .jov .jdica { margin-top: 7px; }
.jogo-app .jov p { margin-bottom: 4px; }
@media (max-width: 900px) {
  .jogo-app .jov { padding: 8px; }
  .jogo-app .jov h2 { margin-bottom: 3px; }
  .jogo-app .jdif { margin-top: 6px; }
  .jogo-app .jov .jbtn { margin-top: 7px; }
}
@media (max-height: 460px) {
  /* paisagem no celular / tela baixa: encolhe ainda mais */
  .jogo-app .jov { padding: 6px; }
  .jogo-app .jov h2 { font-size: 1rem; margin-bottom: 2px; }
  .jogo-app .jov p { font-size: .7rem; margin-bottom: 2px; }
  .jogo-app .jov p.opcional { display: none; }
  .jogo-app .jdif-btn { padding: 4px 11px; font-size: .74rem; }
  .jogo-app .jdif { margin-top: 5px; }
  .jogo-app .jov .jbtn { margin-top: 6px; padding: 7px 18px; font-size: .86rem; }
  .jogo-app .jov .jdica { display: none; }
}

/* usada so por 1 instante para medir a altura real do cabecalho encolhido */
header.topo.medindo, header.topo.medindo * { transition: none !important; }

/* Celular DEITADO com o jogo em tela cheia: sobra largura, entao textos e
   botoes ficam MAIORES (as telas de "Comecar" e de "Voce bateu!") */
@media (orientation: landscape) and (pointer: coarse) {
  .jogo-app.tela-cheia .jov { padding: 14px 22px; }
  .jogo-app.tela-cheia .jov h2 { font-size: clamp(1.5rem, 5.2vh, 2.4rem); margin-bottom: 6px; }
  .jogo-app.tela-cheia .jov h2 .h2-moto { height: 1.4em; }
  .jogo-app.tela-cheia .jov p { font-size: clamp(.95rem, 3vh, 1.15rem); margin-bottom: 5px; max-width: 640px; }
  .jogo-app.tela-cheia .jov p.opcional { display: block; font-size: clamp(.85rem, 2.6vh, 1.05rem); }
  .jogo-app.tela-cheia .placar-final { font-size: clamp(1.2rem, 4vh, 1.7rem); margin: 8px 0; }
  .jogo-app.tela-cheia .jdif { margin-top: 10px; gap: 9px; }
  .jogo-app.tela-cheia .jdif-btn { padding: 9px 22px; font-size: clamp(.9rem, 2.8vh, 1.05rem); }
  .jogo-app.tela-cheia .jbtn { margin-top: 12px; padding: 13px 34px; font-size: clamp(1rem, 3.2vh, 1.25rem); }
  .jogo-app.tela-cheia .jdica { display: block; margin-top: 9px; font-size: clamp(.8rem, 2.4vh, .95rem); }
  .jogo-app.tela-cheia .ico-dinheiro { height: 1.35em; }
}
/* telas deitadas bem baixinhas: mantem maior que antes, mas sem estourar */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 380px) {
  .jogo-app.tela-cheia .jov p.opcional { display: none; }
  .jogo-app.tela-cheia .jov .jdica { display: none; }
  .jogo-app.tela-cheia .jov { padding: 8px 18px; }
}

/* Altura travada durante a partida: a barra do navegador do celular
   aparecendo/sumindo nao muda mais o tamanho da area de jogo */
.jogo-app.altura-travada canvas { height: var(--altura-travada) !important; }
.jogo-app.tela-cheia.altura-travada { height: var(--altura-travada) !important; }
.jogo-app.tela-cheia.altura-travada canvas { height: var(--altura-travada) !important; }

/* Telas do jogo: nao deixar o texto ser selecionado (o toque para pular marcava
   o texto em azul) e dar mais espaco para a mensagem final caber em uma linha */
.jogo-app .jov { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.jogo-app .jov #msg-fim { max-width: 92%; white-space: nowrap; font-size: clamp(.78rem, 2.2vw, 1rem); }
@media (max-width: 520px) {
  .jogo-app .jov #msg-fim { white-space: normal; font-size: .78rem; }
}

/* Botao "Peça pelo site" (delivery Comanda10) */
.btn-delivery .ico{width:1.15em;height:1.15em;vertical-align:-.18em;margin-right:6px;}

/* ---- Botoes do banner em dois niveis ----
   Linha 1: as duas formas de PEDIR (acao principal, destaque)
   Linha 2: cardapio, joguinho e app (apoio, discretos)            */
.hero .cta{display:flex;flex-direction:column;align-items:center;gap:12px;}
.cta-principal{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;width:100%;}
.cta-secundario{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;width:100%;}
.hero .btn-grande{padding:15px 32px;font-size:1.05rem;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.28);}
.hero .btn-linha2{
  background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.55);
  padding:9px 18px;font-size:.9rem;font-weight:600;backdrop-filter:blur(4px);
}
.hero .btn-linha2:hover{background:rgba(255,255,255,.26);}
.hero .btn-linha2 .capa-mini{height:1.5em;border-radius:4px;margin-right:7px;vertical-align:-.35em;}
/* o "Peça pelo site" e a acao principal: usa o vermelho da marca */
.btn-delivery{background:var(--vermelho,#d3232a);color:#fff;}
.btn-delivery:hover{filter:brightness(1.08);}

@media (max-width:600px){
  .cta-principal{flex-direction:column;align-items:stretch;padding:0 8px;}
  .hero .btn-grande{width:100%;justify-content:center;}
  .hero .btn-linha2{padding:8px 14px;font-size:.82rem;}
}

/* Botoes abaixo do cardapio: espacamento adequado e empilhados no celular */
.cardapio-cta{
  display:flex;justify-content:center;align-items:center;
  gap:16px;flex-wrap:wrap;margin-top:34px;
}
.cardapio-cta .btn{margin:0;}
@media (max-width:600px){
  .cardapio-cta{flex-direction:column;align-items:stretch;gap:12px;padding:0 18px;}
  .cardapio-cta .btn{width:100%;justify-content:center;}
}

/* link do delivery no rodape (alinhado com os demais) */
#rodape-delivery{display:inline-flex;align-items:center;gap:7px;}
#rodape-delivery .ico{width:1.05em;height:1.05em;flex:0 0 auto;}