/* Site do cliente: modelo B (verde inteiro) */
:root{
  --verde:#0c3b2a; --vivo:#2fd47c; --vivo-t:#13814a; --vivo-f:#e7f6ee;
  --tinta:#13201a; --suave:#66736c; --fio:#e6e8e4; --fundo:#f5f6f3; --branco:#fff;
  --claro:#a8cdb9; --ambar:#e6a640;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font:15.5px/1.4 Lexend,system-ui,sans-serif;color:var(--tinta);background:var(--verde);-webkit-font-smoothing:antialiased;min-height:100vh}
main{max-width:480px;margin:0 auto;min-height:100vh;padding-bottom:110px}
button{font:inherit;color:inherit}
.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.carregando{color:var(--claro);text-align:center;padding:120px 0}

/* abertura */
.topo{padding:30px 20px 4px;text-align:center;color:#fff;position:relative}
.meu{position:absolute;right:14px;top:14px;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);padding:7px 11px;border-radius:20px;color:#fff;font-size:13px;text-decoration:none;border:0;cursor:pointer}
.topo .logo{display:block;margin:0 auto}
.topo .nome{display:block;margin-top:14px;font:600 20px 'Lexend Exa',Lexend,sans-serif;letter-spacing:5px}
.topo .nome span{color:var(--vivo)}
.topo p{color:var(--claro);font-size:14px;margin-top:4px}
.chips{display:flex;justify-content:center;gap:8px;margin:18px 16px 2px;flex-wrap:wrap}
.chips > span{display:flex;align-items:center;gap:7px;font-size:13px;color:#d9efe3;background:rgba(255,255,255,.08);border-radius:10px;padding:8px 12px;white-space:nowrap}
.chips > span b{color:var(--vivo);font-weight:600}
.chips > span.cheio b{color:var(--ambar)}
.chips .ic{width:15px;height:15px;color:var(--vivo)}
.vagas{display:flex;gap:3px}
.vagas i{width:5px;height:13px;border-radius:2px;background:var(--vivo)}
.vagas i.o{background:rgba(255,255,255,.25)}
.sec{font-size:13px;font-weight:500;color:var(--claro);padding:22px 18px 10px}

.lista{margin:0 16px;background:var(--branco);border-radius:18px;overflow:hidden}
.item{display:flex;align-items:center;gap:12px;padding:14px 16px;width:100%;border:0;background:none;text-align:left;cursor:pointer}
.item + .item{border-top:1px solid var(--fio)}
.item .t{flex:1}
.item .t b{display:block;font-weight:500;font-size:16px}
.item .t small{display:block;font-size:13px;color:var(--suave)}
.item .p{text-align:right}
.item .p b{display:block;font-weight:600}
.item .p small{font-size:12px;color:var(--suave)}
.radio{width:22px;height:22px;border-radius:50%;border:2px solid #c6ccc8;flex:none}
.item.on{background:#f1faf5}
.item.on .radio{border:7px solid var(--verde)}
.tag{display:inline-block;margin-left:6px;vertical-align:2px;font-size:11px;font-weight:500;background:var(--vivo);color:var(--verde);padding:2px 9px;border-radius:20px}

.como{margin:0 16px;background:var(--branco);border-radius:18px;padding:6px 16px}
.passo{display:flex;gap:12px;padding:11px 0;align-items:flex-start}
.passo + .passo{border-top:1px solid var(--fio)}
.passo span{width:24px;height:24px;border-radius:50%;background:var(--vivo-f);color:var(--vivo-t);display:grid;place-items:center;font-size:12.5px;font-weight:600;flex:none}
.passo p{font-size:14px;color:var(--suave)}
.passo p b{color:var(--tinta);font-weight:500}
.ajuda{display:flex;align-items:center;gap:12px;margin:12px 16px 0;background:var(--branco);border-radius:18px;padding:14px 16px;color:var(--tinta);text-decoration:none}
.ajuda .t{flex:1;font-size:13.5px;color:var(--suave)}
.ajuda .t b{display:block;color:var(--tinta);font-weight:500;font-size:15px}
.ajuda .ic{color:var(--vivo-t);width:22px;height:22px}
.seta{width:8px;height:8px;border-right:2px solid #c3c8c4;border-top:2px solid #c3c8c4;transform:rotate(45deg);flex:none}
.aviso-ativo{display:flex;align-items:center;gap:12px;margin:16px 16px 0;background:var(--vivo);color:var(--verde);border-radius:16px;padding:13px 16px;text-decoration:none}
.aviso-ativo .t{flex:1;font-size:13.5px}
.aviso-ativo b{display:block;font-size:15px;font-weight:600}
.aviso-ativo .seta{border-color:var(--verde)}

/* rodapé fixo */
.rodape{position:fixed;left:0;right:0;bottom:0;background:var(--verde);border-top:1px solid rgba(255,255,255,.1);z-index:5}
.rodape-in{max-width:480px;margin:0 auto;padding:12px 16px calc(16px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:14px}
.rodape .res{flex:1;font-size:13px;color:var(--claro)}
.rodape .res b{display:block;color:#fff;font-size:17px;font-weight:600}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:15px 22px;font:600 16px Lexend,sans-serif;background:var(--vivo);color:var(--verde);text-decoration:none;cursor:pointer}
.btn.cheio{width:100%}
.btn:disabled{opacity:.55;cursor:default}
.btn.claro{background:rgba(255,255,255,.1);color:#fff}

/* telas internas */
.barra{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.1);color:#fff}
.voltar{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;border:0;cursor:pointer}
.voltar i{width:9px;height:9px;border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:rotate(45deg);margin-left:3px}
.barra b{flex:1;text-align:center;font-weight:600;font-size:16.5px;margin-right:34px}
.passos{display:flex;gap:6px;padding:14px 18px 0}
.passos div{flex:1;font-size:12px;color:var(--claro)}
.passos div::before{content:"";display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.15);margin-bottom:6px}
.passos .on{color:#fff;font-weight:500}
.passos .on::before{background:var(--vivo)}
.passos .feito::before{background:#fff}
.cartao{margin:0 16px;background:var(--branco);border-radius:18px;overflow:hidden}
.linha{display:flex;align-items:center;gap:12px;padding:14px 16px}
.linha + .linha{border-top:1px solid var(--fio)}
.linha .t{flex:1;min-width:0}
.linha .t small{display:block;font-size:12.5px;color:var(--suave)}
.linha .t b{font-weight:500;font-size:16px}
.linha .acao{font-weight:500;font-size:14px;color:var(--vivo-t);border:0;background:none;cursor:pointer;padding:4px 0}
.entrada{display:flex;align-items:center;gap:10px;margin:0 16px;background:var(--branco);border-radius:16px;padding:12px 14px}
.entrada .ic{color:var(--vivo-t)}
.entrada label{flex:1}
.entrada small{display:block;font-size:12px;color:var(--suave)}
.entrada input{display:block;width:100%;border:0;outline:0;background:none;font:500 17px Lexend,sans-serif;color:var(--tinta);padding:2px 0 0}
.nota{font-size:12.5px;color:var(--claro);padding:8px 18px 0}
.recebe{display:flex;gap:12px;align-items:center;margin:18px 16px 0;padding:14px 16px;border-radius:16px;background:rgba(47,212,124,.12);color:#cfeedd;font-size:14px}
.recebe b{display:block;color:#fff;font-weight:600;font-size:15px}
.recebe .ic{width:24px;height:24px;color:var(--vivo)}
.total{display:flex;justify-content:space-between;align-items:baseline;margin:16px 16px 0;padding-top:14px;border-top:1px dashed rgba(255,255,255,.2)}
.total span{color:var(--claro)}
.total b{font-size:22px;font-weight:600;color:#fff}
.erro{margin:14px 16px 0;padding:12px 14px;border-radius:12px;background:#4a1f1a;color:#ffd4cc;font-size:14px}

/* pix */
.pix{margin:18px 16px 0;background:var(--branco);border-radius:20px;padding:22px 18px 18px;text-align:center}
.pix img{display:block;width:200px;height:200px;margin:0 auto}
.pix .val{font:600 30px Lexend,sans-serif;letter-spacing:-.8px;margin-top:12px}
.pix p{font-size:13.5px;color:var(--suave)}
.copia{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 14px;border-radius:12px;background:var(--fundo);text-align:left}
.copia code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 13px Lexend,sans-serif;color:var(--suave)}
.copia button{font-weight:600;color:var(--vivo-t);font-size:14px;border:0;background:none;cursor:pointer}
.espera{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;font-size:13.5px;color:var(--suave)}
.espera i{width:16px;height:16px;border-radius:50%;border:2px solid #d2dad5;border-top-color:var(--verde);animation:gira 1s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.mini-passos{margin:14px 18px 0;font-size:13.5px;color:var(--claro)}
.mini-passos div{display:flex;gap:10px;padding:5px 0}
.mini-passos span{color:var(--vivo);font-weight:600}

/* acesso */
.ok-topo{color:#fff;padding:26px 18px 70px;text-align:center}
.ok-topo .selo{width:46px;height:46px;border-radius:50%;background:var(--vivo);display:grid;place-items:center;margin:0 auto}
.ok-topo .selo .ic{width:24px;height:24px;color:var(--verde);stroke-width:2.6}
.ok-topo h1{font:600 21px Lexend,sans-serif;margin-top:12px}
.ok-topo p{color:var(--claro);font-size:14px;margin-top:2px}
.relogio{margin:-54px 16px 0;background:var(--branco);border-radius:20px;padding:18px;text-align:center}
.relogio small{font-size:13px;color:var(--suave)}
.relogio .t{font:500 44px Lexend,sans-serif;letter-spacing:-1px;font-variant-numeric:tabular-nums;margin-top:2px}
.relogio .barra-t{height:6px;border-radius:4px;background:var(--fundo);margin-top:12px;overflow:hidden}
.relogio .barra-t i{display:block;height:100%;background:var(--vivo)}
.relogio .pe{display:flex;justify-content:space-between;font-size:12.5px;color:var(--suave);margin-top:8px}
.entrar{display:flex;gap:12px;align-items:center;margin:12px 16px 0;padding:13px 16px;border-radius:16px;background:#fff4dd;color:#5b3d06;font-size:14px}
.entrar b{display:block;font-size:15px;font-weight:600;color:#3f2a03}
.entrar .min{font:600 20px Lexend,sans-serif;font-variant-numeric:tabular-nums;color:#a8620a;margin-left:auto}
.cred b{font-family:ui-monospace,Menlo,monospace;font-size:19px;letter-spacing:.3px;word-break:break-all}
.copiar-tudo{display:flex;gap:8px;align-items:center;justify-content:center;width:100%;padding:14px;border:0;border-top:1px solid var(--fio);background:var(--vivo-f);color:var(--vivo-t);font-weight:500;cursor:pointer}
.renova{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px}
.renova button{background:var(--branco);border:0;border-radius:14px;text-align:center;padding:12px 4px;cursor:pointer}
.renova b{display:block;font-weight:600}
.renova small{font-size:12.5px;color:var(--suave)}
.fim-tela{color:#fff;text-align:center;padding:60px 24px 10px}
.fim-tela h1{font:600 22px Lexend,sans-serif}
.fim-tela p{color:var(--claro);margin-top:6px}
.copiado{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:#fff;color:var(--verde);font-weight:600;padding:10px 18px;border-radius:30px;z-index:20;box-shadow:0 6px 20px rgba(0,0,0,.25)}

/* ===== fundo: luz de vitrine + circuito vivo ===== */
html{background:#082419}
body{background:radial-gradient(120% 55% at 50% 10%,#1c6a4b 0%,#0f4430 38%,#0a2e20 75%,#082419 100%) fixed}
main{position:relative;z-index:1}
#circuito{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#circuito .trilhas path{fill:none;stroke:#2fd47c;stroke-opacity:.09;stroke-width:1.6;stroke-linejoin:round}
#circuito .nos circle{fill:#2fd47c;fill-opacity:.13}
#circuito .pulsos path{fill:none;stroke:#59ffa8;stroke-opacity:.4;stroke-width:2;stroke-linecap:round;stroke-dasharray:26 calc(var(--c) * 1px);stroke-dashoffset:calc(var(--c) * 1px + 26px);animation:pulso var(--t) linear var(--d) infinite;filter:drop-shadow(0 0 3px rgba(47,212,124,.6))}
@keyframes pulso{to{stroke-dashoffset:0}}

/* ===== celular 3D girando ===== */
.palco{perspective:700px;height:150px;display:grid;place-items:center}
.cel3d{position:relative;width:58px;height:117px;transform-style:preserve-3d;animation:balanca 6s ease-in-out infinite}
@keyframes balanca{0%,100%{transform:rotateY(-28deg) rotateX(6deg)}50%{transform:rotateY(28deg) rotateX(-4deg)}}
.cel3d .camada{position:absolute;inset:0;border-radius:13px;background:#cfd8d3}
.cel3d .frente{position:absolute;inset:0;border-radius:13px;background:#fff;transform:translateZ(5px);overflow:hidden}
.cel3d .tela{position:absolute;inset:3.2px;border-radius:10px;background:#0c3b2a;overflow:hidden}
.cel3d .ilha{position:absolute;left:50%;top:6px;width:20px;height:6px;border-radius:4px;background:#fff;transform:translateX(-50%)}
.cel3d .brilho{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 48%,transparent 60%);transform:translateX(-120%);animation:brilho 4.5s ease-in-out infinite 1s}
@keyframes brilho{0%{transform:translateX(-120%)}40%,100%{transform:translateX(120%)}}
.cel3d .tras{position:absolute;inset:0;border-radius:13px;background:#e9efeb;transform:translateZ(-5px) rotateY(180deg)}
.cel3d .tras::before{content:"";position:absolute;left:6px;top:6px;width:22px;height:22px;border-radius:7px;background:#cfd8d3;box-shadow:inset 0 0 0 4px #e9efeb}
.cadeado{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:24px;height:30px}
.cadeado .corpo{position:absolute;left:0;bottom:0;width:24px;height:19px;border-radius:4px;background:#2fd47c}
.cadeado .corpo::after{content:"";position:absolute;left:50%;top:6px;width:5px;height:5px;border-radius:50%;background:#0c3b2a;transform:translateX(-50%);box-shadow:0 3px 0 -1px #0c3b2a}
.cadeado .arco{position:absolute;left:4px;bottom:15px;width:16px;height:15px;border:3px solid #2fd47c;border-bottom:0;border-radius:9px 9px 0 0;transform-origin:2px 100%;animation:abre 6s ease-in-out infinite}
@keyframes abre{0%,12%{transform:translateY(4px)}22%,80%{transform:translateY(-3px) rotate(-28deg)}92%,100%{transform:translateY(4px)}}
.sombra{width:70px;height:10px;border-radius:50%;background:rgba(0,0,0,.35);filter:blur(6px);margin:-6px auto 0;animation:sombra 6s ease-in-out infinite}
@keyframes sombra{0%,100%{transform:translateX(-6px) scaleX(.9)}50%{transform:translateX(6px) scaleX(.9)}}

/* ===== lista de tempo em ingressos ===== */
.ingressos{display:grid;gap:10px;padding:0 14px}
.ing{display:flex;width:100%;background:#fff;border:0;border-radius:14px;position:relative;overflow:hidden;text-align:left;cursor:pointer;padding:0;font:inherit;color:inherit;transition:transform .15s}
.ing:active{transform:scale(.98)}
.ing .canhoto{width:86px;flex:none;display:grid;place-items:center;text-align:center;border-right:2px dashed #d9dfda;background:#f3f8f5}
.ing .canhoto b{display:block;font:600 30px/1 Lexend,sans-serif;color:#0c3b2a}
.ing .canhoto small{font-size:11px;color:#66736c}
.ing::before,.ing::after{content:"";position:absolute;left:78px;width:16px;height:16px;border-radius:50%;background:#0b3324}
.ing::before{top:-8px}.ing::after{bottom:-8px}
.ing .corpo{flex:1;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.ing .corpo b{display:block;font-weight:500}
.ing .corpo small{font-size:12.5px;color:#66736c}
.ing .corpo .pr{text-align:right;white-space:nowrap}
.ing .corpo .pr b{font-weight:600;font-size:17px}
.ing .corpo .pr .eco{font-size:11px;color:#13814a;font-weight:500}
.ing.on{box-shadow:0 0 0 3px #2fd47c}
.ing.on .canhoto{background:#2fd47c}
.ing.on .canhoto small{color:#0c3b2a}
.ing .tag{position:absolute;top:6px;right:10px;margin:0}

@media (prefers-reduced-motion:reduce){
  .cel3d,.cel3d .brilho,.cadeado .arco,.sombra,#circuito .pulsos path{animation:none}
}

/* ===== abertura cabe na tela, sem rolar ===== */
main.abre{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:8px 0 96px}
main.abre .topo{padding:6px 20px 0}
main.abre .palco{height:118px}
main.abre .topo .nome{margin-top:6px;font-size:18px}
main.abre .topo p{font-size:13.5px;margin-top:2px}
main.abre .chips{margin:12px 16px 0}
main.abre .sec{padding:16px 18px 8px}
main.abre .ingressos{gap:8px}
main.abre .ing .corpo{padding:11px 14px}
main.abre .ing .canhoto b{font-size:27px}
.linha-pix{display:flex;align-items:center;justify-content:center;gap:7px;margin:12px 16px 0;font-size:13px;color:#a8cdb9;text-align:center}
.linha-pix .ic{width:15px;height:15px;color:#2fd47c}
.duvida{display:flex;align-items:center;justify-content:center;gap:6px;margin:8px auto 0;font-size:13px;color:#fff;text-decoration:underline;text-underline-offset:3px}
.duvida .ic{width:15px;height:15px;color:#2fd47c}
@media (max-height:700px){
  main.abre{padding:0 0 84px}
  main.abre .palco{height:104px}
  main.abre .palco > div{transform:scale(.8)}
  main.abre .sec{padding-top:12px}
  main.abre .ing .corpo{padding:9px 14px}
}
@media (max-height:620px){
  main.abre .palco{height:62px}
  main.abre .palco > div{transform:scale(.5)}
  main.abre .ing .corpo{padding:8px 14px}
  main.abre .ing .canhoto b{font-size:24px}
  main.abre .topo p{display:none}
  main.abre .chips{margin-top:8px}
  main.abre .sec{padding:10px 18px 6px}
  main.abre .ing .corpo small{display:none}
  main.abre .ing .canhoto small{display:none}
  .linha-pix{margin-top:8px}
}
main.abre .palco{align-items:start}
main.abre .palco > div{transform-origin:center top}

/* ===== lista de tempo: contorno com check (modelo 5, escolha do dono) ===== */
.opcoes{display:grid;gap:10px;padding:0 18px}
.opc{display:flex;align-items:center;gap:14px;width:100%;padding:15px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:none;color:#fff;font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.opc .chk{width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);flex:none;display:grid;place-items:center;transition:background .2s,border-color .2s}
.opc .t{flex:1;min-width:0}
.opc .t b{display:block;font-weight:500;font-size:16px}
.opc .t small{display:block;font-size:12px;color:#8fb8a5}
.opc .pr{font-weight:500;font-size:16px;white-space:nowrap}
.opc.on{border-color:#2fd47c;background:linear-gradient(90deg,rgba(47,212,124,.14),rgba(47,212,124,.02))}
.opc.on .chk{background:#2fd47c;border-color:#2fd47c}
.opc.on .chk::after{content:"";width:5px;height:9px;border:solid #0c3b2a;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.opc:active{transform:scale(.99)}
@media (max-height:620px){ main.abre .opc{padding:11px 14px} main.abre .opc .t small{display:none} }
.opc .pr{text-align:right}
.opc .pr small{display:block;font-size:11.5px;font-weight:400;color:#2fd47c}

/* ===== telas internas no mesmo estilo da lista (contorno fino, sem caixa branca) ===== */
.cartao,.entrada,.pix,.relogio,.renova button,.ajuda,.como{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px)}
.linha + .linha{border-top-color:rgba(255,255,255,.1)}
.linha .t small,.entrada small,.pix p,.relogio small,.relogio .pe,.renova small,.ajuda .t,.copia code{color:#8fb8a5}
.linha .t b,.ajuda .t b,.relogio .t,.pix .val{color:#fff}
.linha .acao,.copiar-tudo{color:#2fd47c}
.entrada{border-radius:14px}
.entrada:focus-within{border-color:#2fd47c;background:rgba(47,212,124,.06)}
.entrada input{color:#fff}
.entrada input::placeholder{color:rgba(255,255,255,.35)}
.entrada .ic,.ajuda .ic{color:#2fd47c}
.recebe{background:none;border:1px solid rgba(47,212,124,.35)}
.pix img{background:#fff;padding:10px;border-radius:14px;width:200px;height:200px;box-sizing:content-box}
.copia{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.copia button{color:#2fd47c}
.espera{color:#8fb8a5}
.espera i{border-color:rgba(255,255,255,.2);border-top-color:#2fd47c}
.relogio{margin-top:-54px}
.relogio .barra-t{background:rgba(255,255,255,.1)}
.copiar-tudo{background:rgba(47,212,124,.08);border-top-color:rgba(255,255,255,.1)}
.renova button{color:#fff}
.seta{border-color:rgba(255,255,255,.35)}
.cred b{color:#fff}
.entrar{background:rgba(230,166,64,.1);border:1px solid rgba(230,166,64,.45);color:#f3dcb2}
.entrar b{color:#fff}
.entrar .min{color:#f0b55a}
.entrar .ic{color:#f0b55a}

/* ===== telas internas centralizadas e sem rolar ===== */
main.tela{display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:0;padding-bottom:0;overflow:hidden}
main.tela .barra,main.tela .passos{flex:none}
main.tela .miolo{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;padding:8px 0 96px}
main.tela.sem-barra .miolo{padding-bottom:16px}
main.tela .sec{padding:12px 18px 7px}
main.tela .barra{padding:10px 16px}
main.tela .passos{padding-top:10px}
main.tela .nota{padding-top:6px}
main.tela .recebe{margin-top:12px;padding:11px 14px}
main.tela .total{margin-top:12px;padding-top:12px}
main.tela .linha{padding:11px 16px}
main.tela .pix{margin-top:0;padding:16px 16px 14px}
main.tela .pix img{width:170px;height:170px;padding:8px}
main.tela .pix .val{font-size:26px;margin-top:8px}
main.tela .copia{margin-top:10px}
main.tela .espera{margin-top:10px}
main.tela .mini-passos{margin-top:10px}
main.tela .mini-passos div{padding:3px 0}
main.tela .duvida{margin-top:12px}
/* login liberado: topo numa linha */
main.tela .ok-topo{display:flex;align-items:center;justify-content:center;gap:12px;padding:0 18px 14px;text-align:left}
main.tela .ok-topo .selo{width:40px;height:40px;margin:0;flex:none}
main.tela .ok-topo h1{margin:0;font-size:19px}
main.tela .ok-topo p{margin:0;font-size:13px}
main.tela .relogio{margin:0 16px;padding:12px 16px}
main.tela .relogio .t{font-size:38px}
main.tela .relogio .barra-t{margin-top:8px}
main.tela .entrar{margin-top:10px;padding:10px 14px}
main.tela .copiar-tudo{padding:11px}
main.tela .renova button{padding:9px 4px}
main.tela .fim-tela{padding:10px 24px}
@media (max-height:700px){
  main.tela .sec{padding:9px 18px 5px}
  main.tela .nota{display:none}
  main.tela .recebe{margin-top:8px;padding:9px 14px;font-size:13px}
  main.tela .pix img{width:140px;height:140px}
  main.tela .relogio .t{font-size:32px}
  main.tela .linha{padding:9px 16px}
  main.tela .mini-passos{display:none}
}
@media (max-height:600px){
  main.tela .passos{display:none}
  main.tela .recebe{display:none}
  main.tela .pix img{width:118px;height:118px}
  main.tela .pix p{display:none}
  main.tela .ok-topo p{display:none}
  main.tela .relogio .pe{display:none}
  main.tela .cred .linha{padding:7px 16px}
  main.tela .sec{padding:7px 18px 4px}
}

/* ===== nada de rolar: a tela fica presa no tamanho do celular ===== */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
main.abre,main.tela{height:100vh;height:100dvh;min-height:0;overflow:hidden}
@media (max-height:480px){html,body{overflow:auto;height:auto}main.abre,main.tela{height:auto;overflow:visible}}

#app{visibility:visible}

/* ===== ajuda: deu erro ao entrar ===== */
.erro-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 16px 0;padding:11px 14px;border-radius:12px;border:1px solid rgba(240,181,90,.5);background:rgba(240,181,90,.08);color:#f6d7a4;font:500 14px Lexend,sans-serif;cursor:pointer;width:calc(100% - 32px)}
.erro-btn .ic{width:17px;height:17px;color:#f0b55a}
#ajuda-erro{position:fixed;inset:0;z-index:40}
#ajuda-erro .ae-fundo{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .25s}
#ajuda-erro .ae-folha{position:absolute;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;max-height:88dvh;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;background:#0d3324;border:1px solid rgba(255,255,255,.12);border-bottom:0;border-radius:22px 22px 0 0;padding:0 18px 28px;color:#fff;transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.9,.3,1)}
#ajuda-erro.aberta .ae-fundo{opacity:1}
#ajuda-erro.aberta .ae-folha{transform:none}
.ae-cab{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:16px 0 10px;background:#0d3324;z-index:1}
.ae-cab b{font-size:18px;font-weight:600}
.ae-x{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.ae-intro{font-size:13.5px;color:#a8cdb9;margin-bottom:6px}
.ae-caso{position:relative;margin-top:14px;padding:14px;border:1px solid rgba(255,255,255,.14);border-radius:16px}
.ae-num{position:absolute;top:14px;left:14px;width:24px;height:24px;border-radius:50%;background:#2fd47c;color:#0c3b2a;display:grid;place-items:center;font-size:13px;font-weight:600}
.ae-caso h3{font-size:15.5px;font-weight:600;margin:1px 0 10px 34px;line-height:1.3}
.ae-caso img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid rgba(255,255,255,.12)}
.ae-caso ol{margin:12px 0 0;padding-left:20px;font-size:14px;color:#dceee5;display:grid;gap:6px}
.ae-caso ol b{color:#fff}
.ae-zap{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;padding:10px;border-radius:10px;border:1px solid rgba(47,212,124,.4);color:#2fd47c;font-size:13.5px;font-weight:500;text-decoration:none}
.ae-zap.forte{background:#2fd47c;color:#0c3b2a;border-color:#2fd47c}
.ae-zap .ic{width:16px;height:16px}
.ae-sem{margin-top:10px;font-size:13px;color:#a8cdb9}

/* aviso de aluguel ativo no topo da abertura */
.aviso-ativo-topo{position:fixed;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:9px;max-width:calc(100% - 24px);padding:8px 8px 8px 14px;border-radius:30px;background:rgba(8,36,25,.85);border:1px solid rgba(47,212,124,.5);color:#dff3e8;font-size:13px;text-decoration:none;white-space:nowrap;backdrop-filter:blur(8px);animation:desce .4s ease-out both}
.aviso-ativo-topo i{width:8px;height:8px;border-radius:50%;background:#2fd47c;box-shadow:0 0 0 4px rgba(47,212,124,.2);flex:none}
.aviso-ativo-topo b{color:#fff;font-weight:600}
.aviso-ativo-topo .ver{background:#2fd47c;color:#0c3b2a;font-weight:600;padding:4px 12px;border-radius:20px}
@keyframes desce{from{opacity:0;transform:translate(-50%,-10px)}}
/* o aviso entra no fluxo, sem cobrir o celular */
.aviso-ativo-topo{position:static;transform:none;margin:0 auto 8px;width:max-content;animation:desce2 .4s ease-out both}
@keyframes desce2{from{opacity:0;transform:translateY(-8px)}}
@media (max-height:700px){ main.com-aviso .palco{height:70px} main.com-aviso .palco > div{transform:scale(.55)} }
@media (max-height:620px){ main.com-aviso .palco{display:none} }
.rodape .res b{white-space:normal;line-height:1.25}