/* App de TV — cardápio digital e chamada de senha (demonstração Estiven4Tech) */
:root { --bg: #0b0806; --panel: #17110d; --line: rgba(255, 220, 190, .12); --fg: #f7efe6; --fg-2: #cdbcaa; --fire: #ff6b2c; --gold: #ffb347; --ok: #5fd08a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { font-family: 'DM Sans', system-ui, sans-serif; color: var(--fg); }
h1, h2, p, ol { margin: 0; } ol { padding: 0; list-style: none; }

.stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: center; display: grid; grid-template-columns: 1fr 640px; grid-template-rows: 120px minmax(0, 1fr) 86px; background: radial-gradient(120% 90% at 0% 0%, #2a160b, var(--bg) 55%); overflow: hidden; }
.tvh { grid-column: 1 / -1; display: flex; align-items: center; gap: 36px; padding: 0 56px; border-bottom: 1px solid var(--line); }
.tvh__brand { display: flex; align-items: center; gap: 14px; font: 700 48px/1 'Fraunces', serif; }
.tvh__brand svg { width: 56px; height: 56px; } .tvh__brand b { color: var(--fire); }
.tvh__cat { font-size: 30px; color: var(--fg-2); padding-left: 36px; border-left: 2px solid var(--line); }
.tvh__dots { display: flex; gap: 12px; }
.tvh__dots li { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .18); transition: background .4s, width .4s; }
.tvh__dots li.is-on { width: 44px; border-radius: 7px; background: var(--fire); }
.tvh__clock { margin-left: auto; font: 700 44px/1 'DM Sans'; font-variant-numeric: tabular-nums; color: var(--fg-2); }

.menu { position: relative; grid-column: 1; grid-row: 2; padding: 40px 48px 32px 56px; }
.page { position: absolute; inset: 40px 48px 32px 56px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 28px; opacity: 0; transform: translateY(24px); transition: opacity .8s, transform .8s; }
.page.is-on { opacity: 1; transform: none; }
.dish { display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: center; padding: 22px 26px 22px 22px; border-radius: 28px; background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.dish img { width: 250px; height: 250px; border-radius: 50%; object-fit: cover; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }
.dish .ico { display: grid; place-items: center; width: 250px; height: 250px; border-radius: 50%; background: #241a14; font-size: 120px; }
.dish h3 { margin: 0; font: 700 42px/1.05 'Fraunces', serif; }
.dish p { margin-top: 10px; font-size: 24px; line-height: 1.35; color: var(--fg-2); }
.dish .pr b { white-space: nowrap; }
.dish .tag { display: inline-block; margin-bottom: 12px; padding: 6px 16px; border-radius: 99px; background: rgba(255, 107, 44, .18); color: var(--gold); font: 700 20px 'DM Sans'; letter-spacing: .08em; text-transform: uppercase; }
.dish .pr { display: flex; gap: 26px; margin-top: 20px; }
.dish .pr span { font-size: 22px; color: var(--fg-2); }
.dish .pr b { display: block; font: 700 44px/1.1 'DM Sans'; color: var(--fg); font-variant-numeric: tabular-nums; }

.call { grid-column: 2; grid-row: 2; display: grid; grid-template-rows: auto auto auto; align-content: start; gap: 20px; padding: 36px 56px 24px 0; min-height: 0; }
.call__now { display: grid; justify-items: center; padding: 26px 20px 30px; border-radius: 32px; background: linear-gradient(160deg, #ff7a33, #e8481a); box-shadow: 0 30px 80px -30px rgba(255, 107, 44, .9); text-align: center; }
.call__now small { font: 700 26px 'DM Sans'; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.call__now b { font: 700 170px/1 'DM Sans'; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 8px; }
.call__now span { font-size: 32px; font-weight: 500; }
.call__now.is-call { animation: chama 1.2s ease-in-out 3; }
@keyframes chama { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.04); box-shadow: 0 0 0 18px rgba(255, 107, 44, .35), 0 30px 80px -30px rgba(255, 107, 44, .9); } }
.call__last { padding: 22px 26px; border-radius: 28px; background: var(--panel); border: 1px solid var(--line); }
.call__last small { font: 700 22px 'DM Sans'; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); }
.call__last ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.call__last li { padding: 12px 0; border-radius: 16px; background: #221912; text-align: center; font: 700 44px/1 'DM Sans'; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.call__last li:first-child { color: var(--fg); }
.call__qr { display: grid; grid-template-columns: 170px 1fr; gap: 26px; align-items: center; padding: 22px; border-radius: 28px; background: var(--panel); border: 1px solid var(--line); }
#qr { width: 170px; height: 170px; padding: 12px; border-radius: 16px; background: #fff; }
#qr img, #qr canvas { width: 146px !important; height: 146px !important; }
.call__qr p { font-size: 24px; line-height: 1.35; color: var(--fg-2); }
.call__qr b { display: block; font-size: 32px; color: var(--fg); }

.ticker { grid-column: 1 / -1; display: flex; align-items: center; overflow: hidden; background: #1f150f; border-top: 1px solid var(--line); }
.ticker__in { display: flex; gap: 90px; white-space: nowrap; padding-left: 100%; font-size: 32px; font-weight: 500; animation: ticker 40s linear infinite; }
.ticker__in span::before { content: '●'; color: var(--fire); margin-right: 22px; font-size: 22px; vertical-align: middle; }
@keyframes ticker { to { transform: translateX(-100%); } }
.demo { position: absolute; right: 56px; top: 88px; font-size: 17px; color: rgba(255, 255, 255, .35); }

/* modos definidos pelo painel de telas */
.stage.modo-cardapio .call { display: none; }
.stage.modo-cardapio .menu { grid-column: 1 / -1; }
.stage.modo-senha .menu { display: none; }
.stage.modo-senha .call { grid-column: 1 / -1; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; align-content: stretch; padding: 40px 56px; }
.stage.modo-senha .call__now { grid-row: span 2; align-content: center; }
.stage.modo-senha .call__last { align-content: center; }
.stage.modo-senha .tvh__cat, .stage.modo-senha .tvh__dots { display: none; }
.stage.modo-senha .call__now b { font-size: 300px; }
.tvpainel { display: none; position: absolute; inset: 120px 0 86px; width: 100%; height: calc(100% - 206px); border: 0; background: #0d1016; }
.stage.modo-painel .tvpainel { display: block; }
.stage.modo-painel .menu, .stage.modo-painel .call { visibility: hidden; }
.tvtag { position: absolute; left: 56px; top: 88px; font-size: 17px; color: rgba(255, 255, 255, .35); }
.tvtag.off { color: #ff8a8a; }
.tvid { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 107, 44, .92); font: 700 160px 'Fraunces', serif; opacity: 0; pointer-events: none; }
.tvid.on { animation: ident 3s ease forwards; }
@keyframes ident { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.ctl[hidden] { display: none; }
.ctl { position: fixed; left: 12px; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: rgba(0, 0, 0, .72); font: 500 13px 'DM Sans'; color: #ddd; opacity: .25; transition: opacity .3s; }
.ctl:hover, .ctl:focus-within { opacity: 1; }
.ctl button { padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .2); background: #222; color: #fff; font: inherit; cursor: pointer; }
.ctl kbd { margin-left: 4px; padding: 1px 6px; border-radius: 4px; background: #444; font: inherit; font-size: 11px; }
@media (hover: none) { .ctl { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ticker__in { animation: none; padding-left: 40px; } .page { transition: none; } .call__now.is-call { animation: none; } }