/* =====================================================================
   Página de vendas: o que fica ABAIXO do topo (views/landing/index.php,
   da seção "Sexta, 21h" até a faixa final), com os mockups.

   Separado do lp.css (que vai embutido no <head>) para o primeiro desenho do
   celular não esperar ~45 KB de estilo de mockup que ninguém vê antes de
   rolar: o <link> fica logo depois do topo, então o navegador pinta o topo e
   só segura o que vem depois dele. Tokens, botões e "reduzir movimento" moram
   no lp.css; aqui não se redefine token.
   ===================================================================== */
/* ---------- sexta, 21h ---------- */
.sexta-grade { display: grid; gap: 40px; align-items: start; }
.sexta-foto { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 5; }
.foto { display: block; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.sexta-foto .foto { position: absolute; inset: 0; }
.sexta-hora { position: absolute; left: 16px; bottom: 16px; padding: 8px 12px; border-radius: 12px; background: rgb(20 12 10 / .72); color: #fff; font-size: 14px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sexta-hora .num { font-weight: 700; font-size: 18px; margin-right: 6px; }
.sexta-texto .sec-head { margin-bottom: 28px; }
.antes-depois { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ad { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; display: grid; gap: 10px; transition: border-color .25s, box-shadow .25s, transform .3s var(--ease); }
.ad:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.ad p { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.ad-rot { font: 600 11px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.ad-antes s { color: var(--muted); text-decoration-color: color-mix(in srgb, var(--bad) 55%, transparent); text-decoration-thickness: 1.5px; }
.ad-depois { font-weight: 500; }
.ad-depois .ad-rot { color: var(--brand-text); }
@media (min-width: 768px) { .sexta-grade { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; } .sexta-foto { position: sticky; top: calc(var(--topo-h) + 24px); } }
@media (min-width: 1024px) { .ad { grid-template-columns: 1fr 1fr; gap: 20px; } }

/* ---------- tour ---------- */
.sec-tour { background: var(--paper); border-block: 1px solid var(--line); }
.capitulo { display: flex; align-items: center; gap: 14px; margin: 64px 0 28px; font: 600 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.capitulo::after { content: ""; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px); }
.capitulo .num { color: var(--brand-text); font-size: 15px; }
.sec-tour .sec-head + .capitulo { margin-top: 0; }
.bloco { display: grid; gap: 32px; align-items: center; padding: 8px 0 56px; }
.bloco-texto { display: grid; gap: 16px; align-content: start; }
.bloco-texto > p { color: var(--muted); font-size: 17px; max-width: 54ch; text-wrap: pretty; }
.bloco-texto > p b { color: var(--fg); }
.pontos { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.pontos li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 15.5px; }
.pontos .i { width: 18px; height: 18px; margin-top: 3px; fill: var(--ok); }
.bloco-foto { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; margin-top: 8px; box-shadow: var(--shadow); }
.bloco-mock { display: grid; justify-items: center; min-width: 0; }
.tour-cta { display: grid; justify-items: center; gap: 18px; text-align: center; padding: 24px 0 0; }
.tour-cta p { font: 400 clamp(24px, 4vw, 32px)/1.2 var(--display); text-wrap: balance; max-width: 26ch; }
@media (min-width: 1024px) {
    .bloco { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; padding-bottom: 88px; }
    .bloco.is-inv .bloco-texto { order: 2; }
    .bloco.is-inv { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

.selo-plugin { justify-self: start; }
.selo-plugin a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--brand-soft); color: var(--brand-text); font: 600 12px/1.3 var(--mono); letter-spacing: .04em; text-decoration: none; }
.selo-plugin a::before { content: "+"; font-weight: 700; }
.selo-mini { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 99px; background: var(--brand-soft); color: var(--brand-text); font: 600 11.5px/1.5 var(--mono); text-decoration: none; white-space: nowrap; }

/* ---------- molduras ---------- */
.janela { width: 100%; max-width: 640px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; }
.janela-barra { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--sunken); border-bottom: 1px solid var(--line); }
.janela-barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); flex: none; }
.url { margin-left: 8px; flex: 1; min-width: 0; padding: 4px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font: 500 11.5px/1.3 var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cel {
    width: 292px; max-width: 100%; aspect-ratio: 9 / 18.6; padding: 10px; border-radius: 46px; background: var(--frame);
    box-shadow: var(--shadow-lg), inset 0 0 0 2px rgb(255 255 255 / .08); position: relative; flex: none;
}
.cel-tela { position: relative; height: 100%; border-radius: 37px; overflow: hidden; background: var(--screen); color: var(--fg); font-size: 13px; line-height: 1.35; display: flex; flex-direction: column; }
.cel-status { display: flex; justify-content: space-between; align-items: center; padding: 12px 22px 6px; font-size: 12px; font-weight: 600; }
.cel-ilha { width: 82px; height: 22px; border-radius: 12px; background: var(--frame); }
.app-topo { padding: 6px 16px 10px; display: grid; gap: 2px; }
.app-tit { font: 400 20px/1.1 var(--display); }
.app-topo small, .qr-topo small { color: var(--muted); font-size: 11.5px; }
.tablet { width: 100%; max-width: 640px; padding: 12px; border-radius: 28px; background: var(--frame); box-shadow: var(--shadow-lg); }

/* abas, busca, chips, pratos (comanda) */
.abas { display: grid; grid-template-columns: 1fr 1fr; margin: 0 14px 10px; padding: 3px; border-radius: 11px; background: var(--sunken); border: 1px solid var(--line); }
.aba { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; border-radius: 8px; font-weight: 600; color: var(--muted); font-size: 12.5px; }
.aba.is-on { background: var(--surface); color: var(--fg); box-shadow: var(--shadow); }
.aba b { font-size: 11px; padding: 1px 6px; border-radius: 99px; background: var(--line); color: var(--fg); }
.busca { display: flex; align-items: center; gap: 8px; margin: 0 14px 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--faint); font-size: 12.5px; }
.busca .i { width: 14px; height: 14px; fill: currentColor; }
.chips { display: flex; gap: 6px; padding: 0 14px 10px; overflow: hidden; }
.chip { padding: 6px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-size: 11.5px; white-space: nowrap; }
.chip.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pratos { list-style: none; margin: 0; padding: 0 14px; display: grid; gap: 8px; }
.prato { position: relative; display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); transition: border-color .3s, box-shadow .3s, transform .25s var(--spring); }
.prato b { font-weight: 600; font-size: 13px; }
.prato .num { color: var(--muted); font-size: 12px; }
.prato .qt { color: #fff; font-size: 12px; }
.qt { position: absolute; right: 10px; top: 50%; margin-top: -12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font: 700 12px/1 var(--mono); font-style: normal; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .35s var(--spring); }
.prato.is-sel { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.prato.is-sel .qt { opacity: 1; transform: none; }
.folha { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 16px 16px 22px; border-radius: 22px 22px 0 0; background: var(--surface); box-shadow: 0 -18px 40px -20px rgb(0 0 0 / .5); display: grid; gap: 12px; transform: translateY(105%); transition: transform .45s var(--spring); }
.folha-tit { font-weight: 600; }
.folha-tit small { color: var(--muted); font-weight: 400; }
.folha-ops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.folha-ops span { text-align: center; padding: 9px 4px; border-radius: 10px; border: 1px solid var(--line); font-size: 11.5px; }
.folha-ops .is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-text); font-weight: 600; }
.folha-btn, .enviar, .loja-btn, .moto-btn, .abrir-btn { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 13px; background: var(--brand); color: #fff; font-weight: 600; }
.enviar { position: absolute; left: 12px; right: 12px; bottom: 16px; z-index: 2; justify-content: space-between; padding: 0 16px; transition: transform .2s var(--ease), opacity .3s; }
.enviado { position: absolute; left: 12px; right: 12px; bottom: 16px; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 13px; background: var(--ok); color: #fff; font-size: 12.5px; opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .45s var(--spring); }
:root[data-theme="dark"] .enviado { color: #0c1f14; }
.enviado .i { width: 18px; height: 18px; fill: currentColor; flex: none; }
.enviado.is-fixo { position: static; margin: 12px 14px 0; opacity: 1; transform: none; }

/* passos da comanda */
/* Comanda de uma mão. Passos: 0 nada; 1 e 2 toque na caipirinha (+1, +1);
   3 toque na picanha, que tem escolha obrigatória e abre a folha direto;
   4 "Enviar 3 itens"; 5 enviado. A vibração do toque vira um tremor curto. */
.dica-toque { display: flex; justify-content: space-between; gap: 8px; padding: 0 14px 8px; font-size: 11px; color: var(--muted); }
.dica-toque b { color: var(--fg); font-weight: 600; }
.cel[data-loop="comanda"] .enviar { justify-content: space-between; }
.cel[data-loop="comanda"] .enviar > * { display: none; }
.cel[data-loop="comanda"] .enviar .e0 { display: inline; }
.cel[data-loop="comanda"][data-step="0"] .enviar { background: var(--sunken); color: var(--faint); border: 1px solid var(--line); justify-content: center; }
.cel[data-loop="comanda"]:not([data-step="0"]) .enviar .e0 { display: none; }
.cel[data-loop="comanda"][data-step="1"] .enviar .e1 { display: inline; }
.cel[data-loop="comanda"][data-step="2"] .enviar .e2, .cel[data-loop="comanda"][data-step="3"] .enviar .e2 { display: inline; }
.cel[data-loop="comanda"][data-step="4"] .enviar .e3, .cel[data-loop="comanda"][data-step="5"] .enviar .e3 { display: inline; }
.qt .q2 { display: none; }
.cel[data-loop="comanda"]:not([data-step="0"]) .p-caip { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.cel[data-loop="comanda"]:not([data-step="0"]) .p-caip .qt { opacity: 1; transform: none; }
.cel[data-loop="comanda"]:not([data-step="0"]):not([data-step="1"]) .p-caip .q1 { display: none; }
.cel[data-loop="comanda"]:not([data-step="0"]):not([data-step="1"]) .p-caip .q2 { display: inline; }
.cel[data-loop="comanda"][data-step="1"] .p-caip, .cel[data-loop="comanda"][data-step="2"] .p-caip { animation: vibra .3s linear 1; }
.cel[data-loop="comanda"][data-step="3"] .folha { transform: none; }
.cel[data-loop="comanda"][data-step="3"] .p-picanha { transform: scale(.97); }
.cel[data-loop="comanda"][data-step="4"] .p-picanha, .cel[data-loop="comanda"][data-step="5"] .p-picanha { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.cel[data-loop="comanda"][data-step="4"] .p-picanha .qt, .cel[data-loop="comanda"][data-step="5"] .p-picanha .qt { opacity: 1; transform: none; }
.cel[data-loop="comanda"][data-step="5"] .enviado { opacity: 1; transform: none; }
@keyframes vibra { 20% { transform: translateX(-2px); } 40% { transform: translateX(2px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(1px); } }

/* "Prato pronto" no celular do garçom: o aviso desce do topo, com vibração. */
.toast-pronto { position: absolute; left: 10px; right: 10px; top: 44px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface); color: var(--fg); box-shadow: var(--shadow-lg); border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--line)); font-size: 12.5px; font-weight: 600; opacity: 0; transform: translateY(-24px); transition: opacity .35s var(--ease), transform .5s var(--spring); }
.cel[data-loop="celular"][data-step="3"] .toast-pronto { opacity: 1; transform: none; animation: vibra .35s linear .55s 2; }

/* ---------- mapa do salão ---------- */
.mapa { padding: 16px; display: grid; gap: 14px; }
.mapa-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mapa-topo b { font: 400 22px/1 var(--display); }
.mapa-topo .num { font-size: 12px; color: var(--muted); }
.mapa-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mesa {
    position: relative; min-height: 78px; padding: 8px 9px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
    display: flex; flex-direction: column; gap: 2px; font-size: 11px; line-height: 1.3; color: var(--muted);
    transition: background-color .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease);
}
.mesa-n { font: 400 20px/1 var(--display); color: var(--fg); }
.mesa-valor { margin-top: auto; color: var(--fg); font-weight: 600; font-size: 11.5px; }
.mesa.is-livre { background: transparent; border-style: dashed; }
.mesa.is-reserva { border-style: dashed; border-color: color-mix(in srgb, var(--info) 50%, transparent); color: var(--info); }
.mesa.is-ocupada { background: color-mix(in srgb, var(--brand-soft) 60%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 25%, var(--line)); }
.mesa-flag { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; font-size: 11px; font-weight: 700; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .45s var(--spring); }
.mesa-conta { margin-top: 2px; align-self: start; padding: 2px 6px; border-radius: 99px; background: var(--warn-soft); color: var(--warn); font-weight: 600; font-size: 10px; opacity: 0; transition: opacity .4s; }
.mesa-abre { display: none; }
.mapa-legenda { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11px; color: var(--muted); }
.lg::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: var(--c); }
.lg.ocupada { --c: color-mix(in srgb, var(--brand) 35%, var(--surface)); } .lg.quente { --c: var(--bad); } .lg.conta { --c: var(--warn); } .lg.livre { --c: var(--line-strong); }
/* passos: 0 a casa; 1 a 4 esquenta; 2 a 7 pede a conta; 3 a 9 abre e a 12 tem prato pronto */
.mapa[data-step="1"] .m4, .mapa[data-step="2"] .m4, .mapa[data-step="3"] .m4 { background: var(--bad-soft); border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.mapa[data-step="1"] .m4 .mesa-meta, .mapa[data-step="2"] .m4 .mesa-meta, .mapa[data-step="3"] .m4 .mesa-meta { color: var(--bad); font-weight: 600; }
.mapa[data-step="2"] .m7, .mapa[data-step="3"] .m7 { background: var(--warn-soft); border-color: var(--warn); }
.mapa[data-step="2"] .m7 .mesa-conta, .mapa[data-step="3"] .m7 .mesa-conta { opacity: 1; animation: pisca 1.4s ease-in-out infinite; }
.mapa[data-step="3"] .m9 { background: color-mix(in srgb, var(--brand-soft) 60%, var(--surface)); border-style: solid; border-color: color-mix(in srgb, var(--brand) 25%, var(--line)); }
.mapa[data-step="3"] .m9 .mesa-livre { display: none; }
.mapa[data-step="3"] .m9 .mesa-abre { display: block; }
.mapa[data-step="3"] .m12 .mesa-flag { opacity: 1; transform: none; }
@keyframes pisca { 50% { opacity: .35; } }

/* ---------- cozinha (KDS) ---------- */
.tablet > * { background: #f7f3ec; color: #1f1a16; }
.kds-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-radius: 18px 18px 0 0; border-bottom: 1px solid #e6ded2; }
.kds-topo .num { font-weight: 600; }
.kds-setores { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.kds-setores > span { padding: 5px 9px; border-radius: 9px; border: 1px solid #e6ded2; background: #fff; font-size: 11.5px; color: #675e55; }
.kds-setores > .is-on { background: #1f1a16; color: #fff; border-color: #1f1a16; }
.kds-setores .setor::before { width: 7px; height: 7px; }
.kds-fila { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 12px; border-radius: 0 0 18px 18px; align-content: start; align-items: start; position: relative; overflow: hidden; }
.kc { background: #fff; border: 1px solid #e6ded2; border-radius: 14px; overflow: hidden; transition: transform .6s var(--ease), opacity .5s var(--ease), box-shadow .4s; }
.kc-topo { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px 0; }
.kc-topo b { font: 400 17px/1.1 var(--display); }
.kc-t { font-weight: 700; font-size: 12.5px; color: #975a00; }
.kc-t.atrasado { color: #c0261b; }
.kc-sub { padding: 0 12px 8px; color: #675e55; font-size: 11.5px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #efe8dd; }
.ki { display: grid; grid-template-columns: 26px minmax(0, 1fr) 22px; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid #f2ece3; font-size: 12.5px; }
.ki > span:nth-child(2) { display: grid; font-weight: 600; }
.ki small { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-weight: 400; color: #675e55; font-size: 11px; white-space: nowrap; }
.ki .setor { font-size: 11px; color: #675e55; }
.cx { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #d4c9b9; display: block; transition: background-color .25s, border-color .25s; position: relative; }
.cx::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .3s var(--spring); }
.ki.is-ok .cx, .kds-fila .ki-2 .cx { background: #1e7a4c; border-color: #1e7a4c; }
.ki.is-ok .cx::after, .kds-fila .ki-2 .cx::after { transform: rotate(45deg) scale(1); }
.ki-2 > span:nth-child(2) { text-decoration: line-through; color: #8a8076; }
.kc-btn { display: flex; justify-content: center; margin: 10px 12px 12px; padding: 10px; border-radius: 11px; background: #1e7a4c; color: #fff; font-weight: 600; font-size: 13px; }
.selo-ifood { display: inline-flex; padding: 2px 7px; border-radius: 99px; background: var(--ifood); color: #fff; font: 700 10.5px/1.4 var(--body); letter-spacing: .01em; }
.tablet[data-step="1"] .kc-c { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ifood) 45%, transparent); animation: chama 1s var(--ease) 2; }
.kc-b { display: none; }
@media (min-width: 600px) { .kc-b { display: block; } }
.tablet[data-step="2"] .kc-a .ki-1 .cx, .tablet[data-step="3"] .kc-a .ki-1 .cx { background: #1e7a4c; border-color: #1e7a4c; }
.tablet[data-step="2"] .kc-a .ki-1 .cx::after, .tablet[data-step="3"] .kc-a .ki-1 .cx::after { transform: rotate(45deg) scale(1); }
.tablet[data-step="3"] .kc-a { transform: translateX(110%); opacity: 0; }
@media (min-width: 600px) { .kds-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .kds-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- pedidos (iFood) ---------- */
.pedidos { padding: 14px; display: grid; gap: 12px; }
.ped-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ped-topo .app-tit { margin-right: auto; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px; font: 600 11.5px/1.2 var(--body); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.ifood { background: var(--ifood); color: #fff; }
.ped-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ped { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "selo nome valor" "st st st"; gap: 6px 10px; align-items: center; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; transition: transform .6s var(--spring), opacity .5s, box-shadow .4s, border-color .4s; }
.ped > b { grid-area: nome; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ped-v { grid-area: valor; color: var(--muted); }
.ped-st { grid-area: st; font-size: 12px; }
.ped [class^="selo-"] { grid-area: selo; }
.selo-loja, .selo-tel { display: inline-flex; padding: 2px 7px; border-radius: 99px; font: 700 10.5px/1.4 var(--body); background: var(--brand-soft); color: var(--brand-text); }
.selo-tel { background: var(--info-soft); color: var(--info); }
.st-coz, .st-ok { color: var(--s-cozinha); font-weight: 600; } .st-rua { color: var(--ok); font-weight: 600; } .st-ag { color: var(--warn); font-weight: 600; }
.st-novo { color: var(--ifood); font-weight: 700; }
.st-ok { display: none; }
.pedidos[data-step="0"] .ped-novo { border-color: var(--ifood); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ifood) 22%, transparent); animation: chama 1.2s var(--ease) 2; }
.pedidos[data-step="1"] .st-novo { display: none; }
.pedidos[data-step="1"] .st-ok { display: inline; animation: troca .45s var(--spring); }
@media (min-width: 600px) { .ped { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "selo nome st valor"; } .ped-st { text-align: right; } }

/* ---------- ficha técnica ---------- */
.ficha { width: 100%; max-width: 520px; padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: grid; gap: 14px; }
.ficha-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.ficha-topo > div, .dre-topo > div { display: grid; gap: 4px; }
.ficha-topo .app-tit { font-size: 24px; }
.ficha-preco { font-weight: 700; font-size: 16px; }
.ficha-tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ficha-tab th { text-align: left; font: 600 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); padding: 0 0 8px; border-bottom: 1px solid var(--line); }
.ficha-tab th:not(:first-child), .ficha-tab td:not(:first-child) { text-align: right; }
.ficha-tab td { padding: 9px 0; border-bottom: 1px solid var(--line); }
.ficha-tab td small { color: var(--faint); margin-left: 4px; }
.ficha-pe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ficha-pe p { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: var(--sunken); }
.ficha-pe small { color: var(--muted); font-size: 11.5px; }
.ficha-pe b { font-size: 16px; }
.cmv { color: var(--ok); }
.ficha .v2 { display: none; }
.ficha[data-step="1"] .v1 { display: none; }
.ficha[data-step="1"] .v2 { display: inline; animation: troca .45s var(--spring); }
.ficha[data-step="1"] .f-pic td { background: color-mix(in srgb, var(--ok-soft) 70%, transparent); }
.f-pic td { transition: background-color .5s; }
.cmv-barra { height: 8px; border-radius: 99px; background: var(--sunken); overflow: hidden; }
.cmv-barra span { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ok), color-mix(in srgb, var(--ok) 60%, var(--warn))); transform-origin: left; transform: scaleX(.584); transition: transform .8s var(--ease); }
.ficha[data-step="1"] .cmv-barra span { transform: scaleX(.548); }
@media (max-width: 399.98px) { .ficha { padding: 16px; } .ficha-pe b { font-size: 14px; } .ficha-topo .app-tit { font-size: 21px; } }
@keyframes troca { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- conta e Pix ---------- */
.conta-caixa { margin: 0 14px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 7px; }
.conta-caixa p { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; }
.conta-caixa p b { color: var(--fg); }
.conta-total { padding-top: 8px; border-top: 1px solid var(--line); }
.conta-total span { color: var(--fg); font-weight: 600; }
.conta-total b { font-size: 19px; }
.tg { display: inline-block; vertical-align: middle; width: 26px; height: 15px; border-radius: 99px; background: var(--brand); position: relative; margin-left: 6px; }
.tg::after { content: ""; position: absolute; right: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.receber { display: grid; gap: 8px; padding: 12px 14px; }
.rc { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); }
.rc .i { width: 20px; height: 20px; fill: currentColor; flex: none; }
.rc b { display: block; font-size: 13px; }
.rc small { color: var(--muted); font-size: 11px; }
.rc-pix { background: var(--brand); color: #fff; border-color: var(--brand); }
.rc-pix small { color: rgb(255 255 255 / .8); }
.pix-folha { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 16px 16px 24px; border-radius: 22px 22px 0 0; background: var(--surface); box-shadow: 0 -18px 40px -20px rgb(0 0 0 / .5); display: grid; justify-items: center; gap: 10px; transform: translateY(105%); transition: transform .5s var(--spring); }
.pix-tit { font-weight: 600; }
.qr { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; width: 112px; height: 112px; padding: 8px; background: #fff; border-radius: 10px; border: 1px solid #e6ded2; }
.qr i { display: block; border-radius: 1px; }
.qr i.on { background: #1f1a16; }
.pix-esp, .pix-pago, .qs, .st-env, .st-aut { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.pix-pago { display: none; color: var(--ok); font-weight: 700; }
.pix-pago .i, .qs .i, .st-aut .i, .moto-ok .i, .pago-selo .i, .aviso-pronto .i { width: 16px; height: 16px; fill: currentColor; flex: none; }
.girando { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--brand); animation: gira 1s linear infinite; flex: none; }
@keyframes gira { to { transform: rotate(360deg); } }
.cel[data-loop="conta"][data-step="1"] .pix-folha, .cel[data-loop="conta"][data-step="2"] .pix-folha { transform: none; }
.cel[data-loop="conta"][data-step="0"] .rc-pix { animation: chama 1.6s var(--ease) infinite; }
.cel[data-loop="conta"][data-step="2"] .pix-esp { display: none; }
.cel[data-loop="conta"][data-step="2"] .pix-pago { display: flex; animation: troca .45s var(--spring); }
.cel[data-loop="conta"][data-step="2"] .qr { opacity: .35; }
@keyframes chama { 50% { transform: scale(1.025); } }

/* ---------- dividir ---------- */
.div-itens { list-style: none; margin: 0; padding: 0 14px; display: grid; gap: 6px; }
.di { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; }
.pess { display: flex; gap: 4px; }
.pess i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--mono); font-style: normal; border: 1px solid var(--line-strong); color: var(--muted); transition: background-color .3s, color .3s, border-color .3s; }
.pessoa { position: relative; margin: 8px 14px 0; padding: 10px 12px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); display: grid; gap: 4px; transition: background-color .4s, border-color .4s; }
.pessoa p { display: flex; justify-content: space-between; font-size: 13px; }
.pessoa small { color: var(--muted); font-size: 11px; }
.receber-btn { justify-self: start; margin-top: 4px; padding: 6px 10px; border-radius: 9px; background: var(--brand); color: #fff; font-weight: 600; font-size: 11.5px; }
.pago-selo { display: none; justify-self: start; margin-top: 4px; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px; background: var(--surface); color: var(--ok); font-weight: 700; font-size: 11.5px; border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
.div-pe { position: absolute; left: 12px; right: 12px; bottom: 16px; display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--sunken); border: 1px solid var(--line); font-size: 12px; }
.div-pe .falta { color: var(--warn); font-weight: 700; }
.div-pe { font-size: 11.5px; gap: 6px; white-space: nowrap; }
.falta2 { display: none; }
.cel[data-loop="dividir"][data-step="3"] .falta1 { display: none; }
.cel[data-loop="dividir"][data-step="3"] .falta2 { display: inline; }
.rec2 { display: none; }
.cel[data-loop="dividir"][data-step="1"] .di-1 .p1, .cel[data-loop="dividir"][data-step="2"] .di-1 .p1, .cel[data-loop="dividir"][data-step="3"] .di-1 .p1,
.cel[data-loop="dividir"][data-step="2"] .di-2 i[class], .cel[data-loop="dividir"][data-step="3"] .di-2 i[class],
.cel[data-loop="dividir"][data-step="2"] .di-3 .p2, .cel[data-loop="dividir"][data-step="3"] .di-3 .p2 { background: var(--brand); color: #fff; border-color: var(--brand); }
.cel[data-loop="dividir"][data-step="3"] .pessoa-1 { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.cel[data-loop="dividir"][data-step="3"] .pessoa-1 .receber-btn { display: none; }
.cel[data-loop="dividir"][data-step="3"] .pessoa-1 .pago-selo { display: inline-flex; animation: troca .45s var(--spring); }
.cel[data-loop="dividir"][data-step="3"] .rec { display: none; }
.cel[data-loop="dividir"][data-step="3"] .rec2 { display: inline; }

/* ---------- QR na mesa ---------- */
.qr-topo { padding: 4px 16px 12px; display: grid; gap: 2px; border-bottom: 1px solid var(--line); }
.qr-cardapio { list-style: none; margin: 0; padding: 12px 14px; display: grid; gap: 8px; }
.qr-prato { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; transition: border-color .3s, box-shadow .3s, transform .25s var(--spring); }
.qr-prato small { display: block; color: var(--muted); font-size: 11px; }
.qr-foto { width: 52px; height: 52px; border-radius: 10px; background: var(--sunken); }
.qr-foto.f1 { background: radial-gradient(circle at 40% 45%, #3b2116 0 30%, #5a3220 31% 45%, transparent 46%), radial-gradient(circle at 68% 62%, #f6eedf 0 18%, transparent 19%), #efe2cf; }
.qr-foto.f2 { background: radial-gradient(ellipse at 50% 55%, #d99a3e 0 34%, #b8731f 35% 42%, transparent 43%), #f3e8d7; }
.qr-foto.f3 { background: radial-gradient(circle at 50% 50%, #3a2318 0 28%, #c79868 29% 32%, #fff 33% 44%, transparent 45%), #e9dfd1; }
.qr-status { padding: 0 14px; display: grid; }
.qs { display: none; padding: 11px 12px; border-radius: 12px; font-weight: 600; }
.qs-1 { background: var(--warn-soft); color: var(--warn); }
.qs-2 { background: var(--ok-soft); color: var(--ok); }
.qr-barra { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); padding: 10px 6px 18px; background: var(--surface); border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); text-align: center; }
.qr-barra span:first-child { color: var(--brand-text); font-weight: 700; }
.cel[data-loop="qr"][data-step="1"] .q-alvo { transform: scale(.97); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.cel[data-loop="qr"][data-step="2"] .q-alvo, .cel[data-loop="qr"][data-step="3"] .q-alvo { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.cel[data-loop="qr"][data-step="2"] .qs-1 { display: flex; animation: troca .4s var(--spring); }
.cel[data-loop="qr"][data-step="3"] .qs-2 { display: flex; animation: troca .4s var(--spring); }

/* ---------- NFC-e ---------- */
.nota { width: 100%; max-width: 330px; padding: 22px 20px 26px; background: #fffdf8; color: #1f1a16; font: 500 12.5px/1.45 var(--mono); box-shadow: var(--shadow-lg); position: relative; border-radius: 4px 4px 0 0; display: grid; gap: 6px; transform: rotate(1.2deg); }
.nota::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; background: radial-gradient(circle at 50% 100%, transparent 5px, #fffdf8 5.5px) 0 0 / 12px 10px repeat-x; }
.nota-casa { text-align: center; display: grid; padding-bottom: 8px; border-bottom: 1px dashed #c9bfb1; margin-bottom: 4px; }
.nota-casa b { font: 400 17px/1.2 var(--display); letter-spacing: .02em; }
.nota-casa small { color: #675e55; font-size: 11px; }
.nota-linha, .nota-total { display: flex; justify-content: space-between; gap: 8px; }
.nota-total { padding: 6px 0; border-block: 1px dashed #c9bfb1; font-weight: 700; font-size: 14px; }
.nota-qr { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 6px; }
.nota-qr .qr { width: 96px; height: 96px; padding: 6px; }
.nota-qr p { display: grid; gap: 2px; color: #675e55; font-size: 10.5px; }
.nota-st { margin-top: 6px; font-family: var(--body); }
.st-env { color: #975a00; font-weight: 600; }
.st-aut { display: none; color: #1e7a4c; font-weight: 700; font-size: 14px; }
.nota[data-step="1"] .st-env { display: none; }
.nota[data-step="1"] .st-aut { display: flex; animation: troca .45s var(--spring); }
.nota[data-step="1"] .st-aut .i { width: 18px; height: 18px; }

/* ---------- delivery ---------- */
.dupla { display: flex; gap: 16px; justify-content: center; align-items: flex-start; width: 100%; }
.dupla .cel { width: 248px; }
.cel-moto { display: none; margin-top: 48px; }
@media (min-width: 600px) { .cel-moto { display: block; } }
.loja-passo { padding: 10px 16px 6px; font: 600 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.loja-op { display: flex; align-items: center; gap: 10px; margin: 0 14px 6px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; transition: border-color .3s, box-shadow .3s; }
.loja-op small { display: block; color: var(--muted); font-size: 11px; }
.loja-op i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; transition: border .2s; }
.loja-op.is-on, .cel[data-loop="loja"][data-step="0"] .lo-1, .cel[data-loop="loja"][data-step="1"] .lo-2, .cel[data-loop="loja"][data-step="2"] .lo-2 { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.loja-op.is-on i, .cel[data-loop="loja"][data-step="0"] .lo-1 i, .cel[data-loop="loja"][data-step="1"] .lo-2 i, .cel[data-loop="loja"][data-step="2"] .lo-2 i { border: 5px solid var(--brand); }
.faixas { display: flex; gap: 5px; padding: 0 14px 4px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--ease), opacity .3s; }
.faixas span { flex: 1; text-align: center; padding: 6px 0; border-radius: 9px; border: 1px solid var(--line); font-size: 11px; background: var(--surface); }
.cel[data-loop="loja"][data-step="1"] .faixas, .cel[data-loop="loja"][data-step="2"] .faixas { max-height: 44px; opacity: 1; }
.cel[data-loop="loja"][data-step="2"] .f-on { background: var(--brand); color: #fff; border-color: var(--brand); }
.loja-btn { position: absolute; left: 12px; right: 12px; bottom: 16px; gap: 6px; font-size: 13px; }
.ent { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; margin: 0 14px 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; }
.ent > b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sunken); }
.ent-1 { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.ent-1 > b { background: var(--brand); color: #fff; }
.ent small { display: block; color: var(--muted); font-size: 11px; }
.moto-btn { margin: 6px 14px 0; font-size: 13px; }
.codigo { display: none; margin: 10px 14px 0; padding: 12px; border-radius: 13px; background: var(--sunken); border: 1px solid var(--line); text-align: center; }
.codigo small { display: block; color: var(--muted); font-size: 11px; }
.codigo .num { font-size: 22px; font-weight: 700; letter-spacing: .06em; }
.moto-ok { display: none; align-items: center; gap: 8px; margin: 10px 14px 0; padding: 11px 12px; border-radius: 12px; background: var(--ok-soft); color: var(--ok); font-weight: 700; font-size: 12.5px; }
.cel[data-loop="moto"][data-step="1"] .mb-1 { display: none; }
.cel[data-loop="moto"][data-step="1"] .codigo { display: block; animation: troca .4s var(--spring); }
.cel[data-loop="moto"][data-step="2"] .mb-1, .cel[data-loop="moto"][data-step="2"] .codigo { display: none; }
.cel[data-loop="moto"][data-step="2"] .moto-ok { display: flex; animation: troca .4s var(--spring); }

/* ---------- DRE ---------- */
.dre { width: 100%; max-width: 580px; padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: grid; gap: 16px; }
.dre-topo { display: flex; justify-content: space-between; align-items: flex-end; }
.dre-topo .app-tit { font-size: 24px; }
.dre-barras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; height: 250px; padding-top: 22px; align-items: stretch; }
.db { display: grid; grid-template-rows: 1fr auto; position: relative; }
.db-col { grid-row: 1; align-self: stretch; position: relative; }
.db-col::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--b) * 1%); height: calc(var(--h) * 1%); border-radius: 6px; background: var(--c); transform-origin: bottom; transform: scaleY(1); transition: transform .9s var(--ease) calc(var(--i) * 110ms); }
.db-pos { --c: var(--brand); } .db-neg { --c: color-mix(in srgb, var(--bad) 70%, var(--surface)); } .db-res { --c: var(--ok); }
.db-v { position: absolute; left: -4px; right: -4px; bottom: calc((var(--b) + var(--h)) * 1% + 4px); text-align: center; font-size: 10.5px; font-weight: 700; color: var(--fg); white-space: nowrap; opacity: 1; transition: opacity .4s calc(var(--i) * 110ms + .5s); }
.db-r { grid-row: 2; text-align: center; font-size: 10.5px; color: var(--muted); line-height: 1.2; padding-top: 6px; min-height: 30px; }
@media (max-width: 599.98px) { .dre-barras { gap: 5px; } .db-v { font-size: 9.5px; letter-spacing: -.03em; } .db-r { font-size: 9.5px; hyphens: manual; } .dre { padding: 16px; } }
.js .dre:not(.is-in) .db-col::before { transform: scaleY(0); }
.js .dre:not(.is-in) .db-v { opacity: 0; }
@media (min-width: 600px) { .db-v, .db-r { font-size: 11.5px; } }

/* ---------- no celular ---------- */
.sec-celular { background: var(--frame); color: #f3eeea; overflow: hidden; }
.sec-celular .lede { color: #c9bfb6; }
.sec-celular .eyebrow { color: #f4a3ba; }
.celular-grade { display: grid; gap: 48px; align-items: center; }
.passos { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; }
.passos li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; color: #c9bfb6; transition: background-color .4s, color .4s; }
.passos li .num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #4a3f40; font-weight: 700; transition: background-color .4s, border-color .4s; }
.passos li.is-on { background: rgb(255 255 255 / .06); color: #fff; }
.passos li.is-on .num { background: var(--brand); border-color: var(--brand); color: #fff; }
.celular-mock { display: grid; justify-items: center; }
.cel-grande { width: 310px; }
.sec-celular .cel { box-shadow: 0 40px 80px -30px rgb(0 0 0 / .9), inset 0 0 0 2px rgb(255 255 255 / .1); }
.tela { position: absolute; inset: 40px 0 0; display: flex; flex-direction: column; opacity: 0; transform: translateX(24px); transition: opacity .45s var(--ease), transform .55s var(--ease); pointer-events: none; }
.cel[data-loop="celular"][data-step="0"] .t0, .cel[data-loop="celular"][data-step="1"] .t1, .cel[data-loop="celular"][data-step="2"] .t2, .cel[data-loop="celular"][data-step="3"] .t3 { opacity: 1; transform: none; }
.mini-mapa { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 14px; }
.mm { position: relative; padding: 10px; min-height: 64px; border-radius: 12px; border: 1px dashed var(--line-strong); display: grid; align-content: space-between; }
.mm b { font: 400 22px/1 var(--display); }
.mm small { color: var(--muted); font-size: 11px; }
.mm-alvo { border: 1px solid var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.mm-pronto { border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line)); border-style: solid; background: color-mix(in srgb, var(--brand-soft) 60%, var(--surface)); }
.mm em { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; font-size: 11px; font-weight: 700; font-style: normal; animation: brota .6s var(--spring) both .3s; }
@keyframes brota { from { transform: scale(0); } to { transform: scale(1); } }
.abrir { margin: 14px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 12px; box-shadow: var(--shadow); }
.contador { display: flex; align-items: center; justify-content: space-between; padding: 6px; border-radius: 12px; border: 1px solid var(--line); }
.contador i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--sunken); font-style: normal; font-weight: 700; }
.contador b { font-size: 18px; }
.saiu { display: grid; gap: 8px; padding: 4px 14px; }
.saiu-s { display: grid; gap: 4px; padding: 12px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); }
.saiu-s small { color: var(--muted); }
.aviso-pronto { display: flex; align-items: center; gap: 10px; margin: 14px; padding: 12px 14px; border-radius: 13px; background: var(--ok-soft); color: var(--ok); font-size: 12.5px; animation: troca .5s var(--spring) both .4s; }
.aviso-pronto b { color: var(--fg); }
@media (min-width: 1024px) { .celular-grade { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; } .sec-celular .sec-head { margin-bottom: 0; } }

/* ---------- números ---------- */
.sec-numeros { padding: 64px 0; }
.numeros { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
.numeros li { display: grid; gap: 6px; align-content: start; padding-top: 16px; border-top: 2px solid var(--fg); }
.numeros b { font: 700 clamp(40px, 8vw, 64px)/1 var(--mono); color: var(--brand-text); letter-spacing: -.03em; }
.numeros li > span { color: var(--muted); font-size: 15px; text-wrap: pretty; }
@media (min-width: 768px) { .numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

/* ---------- planos ---------- */
.sec-planos { background: var(--paper); border-block: 1px solid var(--line); }
.ciclo-wrap { display: grid; justify-items: center; gap: 10px; margin: -12px 0 36px; }
.ciclo { display: inline-flex; padding: 4px; border-radius: 14px; background: var(--sunken); border: 1px solid var(--line); }
.ciclo-op { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 11px; color: var(--muted); text-decoration: none; font-weight: 600; transition: background-color .2s, color .2s, box-shadow .2s; }
.ciclo-op[aria-checked="true"] { background: var(--surface); color: var(--fg); box-shadow: var(--shadow); }
.selo { padding: 3px 8px; border-radius: 99px; background: var(--ok-soft); color: var(--ok); font-size: 11.5px; font-weight: 700; }
.ciclo-nota { color: var(--muted); font-size: 14px; }
.planos { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.plano { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.plano:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.plano.is-destaque { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-lg); }
.plano-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.plano-nome { font: 400 26px/1.1 var(--display); }
.plano-topo { flex-wrap: wrap; }
.plano-selo { white-space: nowrap; padding: 4px 10px; border-radius: 99px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; }
.plano-desc { color: var(--muted); font-size: 15px; }
.pv { display: flex; align-items: baseline; gap: 4px; }
.pv b { font-size: 40px; letter-spacing: -.03em; }
.pv b small { font-size: 20px; letter-spacing: 0; margin-right: 2px; }
.pv span { color: var(--muted); }
.pe { color: var(--muted); font-size: 14px; }
.plano-itens { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; flex: 1; align-content: start; }
.plano-itens li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: 14.5px; }
.plano-itens .i { width: 16px; height: 16px; margin-top: 3px; fill: var(--ok); }
.plano-itens .off { color: var(--faint); }
.plano-itens .off .i { fill: var(--faint); }
.plano-itens .base { font-weight: 600; }
.plano-itens .mais .i { fill: var(--brand-text); }
.plano-itens .mais a { font-weight: 600; }
.btn-plano { width: 100%; margin-top: 4px; }
.planos-rodape { text-align: center; color: var(--muted); margin: 28px auto 0; max-width: 60ch; }
@media (min-width: 900px) { .planos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; } }

/* ---------- plugins ---------- */
.combo { display: flex; align-items: center; gap: 14px; max-width: 640px; margin: -16px auto 32px; padding: 14px 18px; border-radius: var(--r-lg); background: var(--ok-soft); color: var(--fg); }
.combo-pct { flex: none; font-size: 28px; font-weight: 700; color: var(--ok); }
.plugin-desc { color: var(--muted); font-size: 15px; }
.plugin.is-faixa { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.faixas-nota { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.faixas-nota li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--sunken); font-size: 14px; }
.faixas-nota b { font-size: 15px; white-space: nowrap; }
.faixas-nota small, .plugin-preco small { font-size: 12px; color: var(--muted); font-weight: 500; }
.plugin-preco b small { font-size: 15px; color: var(--fg); margin-right: 2px; }
.plugin-nota { font-size: 13px; color: var(--muted); }
.plugins { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.plugin { padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.plugin-nome { font: 400 21px/1.15 var(--display); }
.plugin-preco { margin-top: auto; padding-top: 6px; display: flex; align-items: baseline; gap: 4px; }
.plugin-preco span { color: var(--muted); }
.plugin-preco b { font-size: 26px; color: var(--fg); letter-spacing: -.02em; }
@media (min-width: 640px) {
    .plugins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plugin.is-faixa { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px 32px; align-items: start; }
    .plugin.is-faixa .plugin-nome, .plugin.is-faixa .plugin-desc { grid-column: 1; }
    .plugin.is-faixa .faixas-nota { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
    .plugin.is-faixa .plugin-nota { grid-column: 1; }
}
@media (min-width: 1024px) { .plugins { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- dúvidas ---------- */
.duvidas-grade { display: grid; gap: 8px; }
.faq { display: grid; gap: 10px; }
.faq-item { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: border-color .25s; }
.faq-item[open] { border-color: var(--line-strong); }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 18px; cursor: pointer; font-weight: 600; font-size: 17px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-sinal { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--sunken); flex: none; transition: transform .35s var(--spring), background-color .2s; }
.faq-sinal .i { width: 16px; height: 16px; fill: currentColor; }
.faq-item[open] .faq-sinal { transform: rotate(45deg); background: var(--brand-soft); color: var(--brand-text); }
.faq-item p { padding: 0 18px 18px; color: var(--muted); max-width: 70ch; }
@media (min-width: 1024px) { .duvidas-grade { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; } .duvidas-grade .sec-head { position: sticky; top: calc(var(--topo-h) + 32px); } }

/* ---------- final ---------- */
.final { background: var(--brand); color: #fff; padding: 72px 0; position: relative; overflow: hidden; }
.final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 400px at 90% 10%, rgb(255 255 255 / .12), transparent 70%), radial-gradient(500px 400px at 0% 100%, rgb(0 0 0 / .22), transparent 70%); pointer-events: none; }
.final-grade { position: relative; display: grid; gap: 40px; align-items: center; }
.final-texto { display: grid; gap: 18px; justify-items: start; }
.final .eyebrow { color: #fbd3de; }
.final .lede { color: rgb(255 255 255 / .86); }
.final .btn-primary { background: #1f1a16; color: #fff; box-shadow: 0 10px 24px -12px rgb(0 0 0 / .7); }
.final .btn-primary:hover { background: #000; }
.final-foto { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; max-width: 420px; width: 100%; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .6); transform: rotate(2deg); }
.final-foto .foto, .final-foto img { width: 100%; height: 100%; }
@media (min-width: 768px) { .final { padding: 104px 0; } .final-grade { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; } }