/* Layout: uma coluna estreita, como no celular.
   Visual Aço, pela psicologia das cores: noite azul-acinzentada (sobriedade), azul de confiança na ação,
   verde só para "tudo certo", âmbar só para atenção, vermelho só para erro.
   --amber é o nome histórico do token de destaque; hoje ele é azul. */
:root{--night:#0f1722;--panel:#18222f;--line:#2b3848;--text:#edf1f6;--muted:#9eabbb;--amber:#4d8dff;--action:#2f6fe4;--ink:#ffffff;--safe:#4cc9a0;--error:#ff8f9e;--attention:#f0b35a;--analise:#b79cff;--safe-bg:rgba(76,201,160,.16);--error-bg:rgba(255,143,158,.16);--attention-bg:rgba(240,179,90,.16);--analise-bg:rgba(183,156,255,.16);--display:"Schibsted Grotesk",system-ui,sans-serif;--body:"Public Sans",system-ui,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--night);color:var(--text);font:16px/1.5 var(--body)}
.wrap{max-width:560px;margin:auto;padding-block:24px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:grid;gap:20px}
.demo{border:1px dashed var(--amber);border-radius:10px;padding:10px 12px;font-size:14px;color:var(--amber)}
h1,h2{font-family:var(--display);line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:clamp(34px,9vw,48px);font-weight:800;letter-spacing:-.025em}
h2{letter-spacing:-.01em}
h2{font-size:26px}
p{margin:0}.muted{color:var(--muted)}
.lead{display:grid;gap:10px}
.progress{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;list-style:none;padding:0;margin:0}
.progress li{font-size:12px;color:var(--muted);border-top:3px solid var(--line);padding-top:6px}
.progress li.on{color:var(--text);border-color:var(--amber)}
form,.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;gap:16px}
.field{display:grid;gap:6px}
label{font-weight:700}
.hint{font-size:14px;color:var(--muted)}
input,select{width:100%;padding:12px;background:var(--night);color:var(--text);border:1px solid var(--line);border-radius:10px;font:inherit}
input[type=range]{padding:0;accent-color:var(--amber);border:0;background:none}
input[type=checkbox]{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--amber)}
.check{display:flex;gap:10px;font-weight:400}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
button{font:700 16px var(--body);padding:13px 16px;border-radius:10px;border:1px solid var(--action);cursor:pointer;background:var(--action);color:var(--ink)}
button.ghost{background:none;color:var(--text);border-color:var(--line)}
.actions{display:flex;gap:10px;flex-wrap:wrap}.actions button{flex:1 1 140px}
.error{color:var(--error);font-size:14px}
.price{font:800 44px/1 var(--display);color:var(--amber);font-variant-numeric:tabular-nums}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
td,th{padding:9px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
td:last-child,th:last-child{text-align:right;font-weight:700}
ul.rules{margin:0;padding-left:20px;display:grid;gap:7px}
.word{font:800 34px var(--display);color:var(--safe);letter-spacing:.02em}
.row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-block:8px}
.row span:first-child{color:var(--muted)}.row span:last-child{font-weight:700;text-align:right}
.ok{color:var(--safe);font-weight:700}
.no{color:var(--error);font-weight:700}
.warn{color:var(--analise);font-weight:700}
.contato{display:grid;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.contato-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.contato-top b{font-family:var(--display);font-size:18px}
.contato-top button{padding:7px 10px;font-size:14px}
.lista{display:grid;gap:16px}
button:disabled{opacity:.5;cursor:not-allowed}
.topnav{max-width:1080px;margin:auto;padding-block:14px 0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;gap:8px}
.topnav a{padding:9px 14px;border:1px solid var(--line);border-radius:9px;color:var(--text);text-decoration:none;font-weight:700}
.topnav a.on{background:var(--action);border-color:var(--action);color:var(--ink)}
.painel{max-width:1080px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:2px;text-align:left;color:var(--text);font-weight:400}
.stat.on{border-color:var(--amber)}
.stat b{font:800 28px var(--display);font-variant-numeric:tabular-nums}
.colunas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:16px;align-items:start}
@media(max-width:760px){.colunas{grid-template-columns:minmax(0,1fr)}}
.clientes{display:grid;gap:8px}
.cliente{display:grid;gap:4px;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);color:var(--text);font-weight:400;padding:12px}
.cliente.on{border-color:var(--amber)}
.cliente-top{display:flex;justify-content:space-between;gap:8px;align-items:center}
/* Status: cada um tem cor própria, fundo tingido e um ponto, para ler de longe. Pendente = âmbar (espera sua ação), aprovada = verde, recusada = rosa. */
.pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;border-radius:99px;padding:5px 11px 5px 9px;white-space:nowrap;line-height:1}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.pill.pendente{color:var(--attention);background:var(--attention-bg)}
.pill.aprovada{color:var(--safe);background:var(--safe-bg)}
.pill.recusada{color:var(--error);background:var(--error-bg)}
.stat.pendente b{color:var(--attention)}.stat.aprovada b{color:var(--safe)}.stat.recusada b{color:var(--error)}
.stat.pendente.on{border-color:var(--attention);background:var(--attention-bg)}.stat.aprovada.on{border-color:var(--safe);background:var(--safe-bg)}.stat.recusada.on{border-color:var(--error);background:var(--error-bg)}
.stat.todas.on{border-color:var(--amber)}
.stat .alerta{font-size:12px;font-weight:700;color:var(--attention)}

.detalhe h3{margin:0;font:700 18px var(--display)}
textarea{width:100%;min-height:76px;padding:12px;background:var(--night);color:var(--text);border:1px solid var(--line);border-radius:10px;font:inherit}
.perigo{background:none;color:var(--error);border-color:var(--error)}
.card.destaque{border-color:var(--amber)}
/* Logotipo "mobitchê" (Outfit Bold vetorizada): o ponto do i é a passageira saindo, o acento do ê é o telhado de casa.
   Fonte de verdade: arquivo "MobiTchê — Logo" no Figma, quadro "Logotipo — escolhido (Outfit)". */
.logo{line-height:0}
.logo svg.nome{width:clamp(200px,62vw,300px);height:auto;max-width:100%;overflow:visible}
.logo-nome{fill:var(--text)}
.logo-cor{fill:var(--amber)}
.logo-telhado{fill:none;stroke:var(--amber);stroke-width:21;stroke-linecap:round;stroke-linejoin:round}
.tagline{font:700 clamp(20px,5vw,24px)/1.25 var(--display);color:var(--amber);letter-spacing:-.01em}
.pilares{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pilares li{display:grid;gap:2px;padding:12px;border:1px solid var(--line);border-radius:12px;font-size:14px;color:var(--muted)}
.pilares b{font:700 16px var(--display);color:var(--text)}
.contato-card{display:flex;gap:14px;align-items:center;background:var(--night);border:1px solid var(--line);border-radius:12px;padding:14px}
.avatar-vs{width:52px;height:52px;border-radius:50%;background:var(--action);color:var(--ink);display:grid;place-items:center;font:800 24px var(--display);flex:none}
.contato-nome{font:700 18px var(--display)}
.contato-tel{font-size:18px;font-variant-numeric:tabular-nums;user-select:all}.end-item{display:grid;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.end-top b{font-family:var(--display);font-size:16px}
.end-txt{font-weight:700;overflow-wrap:anywhere;user-select:all}
a.link-mapa{flex:1 1 110px;display:inline-flex;justify-content:center;align-items:center;padding:12px 14px;border-radius:9px;border:1px solid var(--line);color:var(--text);text-decoration:none;font-weight:700}
a.botao{flex:1 1 140px;display:inline-flex;justify-content:center;align-items:center;font:700 16px var(--body);padding:13px 16px;border-radius:10px;background:var(--action);color:var(--ink);text-decoration:none;text-align:center}
ol.passos{margin:0;padding-left:22px;display:grid;gap:8px}
.exemplo{border-left:3px solid var(--amber);padding:4px 0 4px 12px;font-style:italic}
.resposta{border:1px solid var(--amber);border-radius:12px;padding:14px;display:grid;gap:12px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.preco-mini{font:800 30px/1 var(--display);color:var(--amber);font-variant-numeric:tabular-nums}
/* Ajustes da versão publicada */
html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
img{max-width:100%}
#s4{display:grid;gap:20px}
a{color:var(--amber)}
.rodape{font-size:14px;color:var(--muted);text-align:center}
.texto{max-width:680px}
.texto h2{margin-top:8px}
.barra-painel{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.barra-painel .actions button{flex:0 0 auto}
/* ===== Visual MobiTchê: preto, azul da marca e Liquid glass sutil =====
   Aplicado por cima dos estilos do protótipo. Linhas finas e contínuas; movimento na curva de mola do iOS. */
:root{
  --night:#000;--panel:rgba(255,255,255,.045);--line:rgba(255,255,255,.12);--text:#f4f5f7;--muted:#9a9ba4;
  --amber:#4d8dff;--action:#2f6fe4;--ink:#fff;--safe:#4cc9a0;--error:#ff8f9e;--attention:#f0b35a;--analise:#b79cff;
  --fio:rgba(255,255,255,.1);--fio2:rgba(255,255,255,.16);
  --display:"Outfit",system-ui,sans-serif;--body:"Public Sans",system-ui,sans-serif;
  --mola:cubic-bezier(.32,.72,0,1);--suave:cubic-bezier(.25,.1,.25,1);
  --vidro:radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.07),rgba(255,255,255,0) 55%),linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  --vidro-azul:radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.14),rgba(255,255,255,0) 50%),linear-gradient(160deg,rgba(70,134,255,.92),rgba(44,104,226,.86));
}
html{background:#000}
body{background:transparent;font-size:16px;min-height:100vh}
/* Luzes azuis desfocadas atrás de tudo: o vidro precisa de algo para filtrar */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(42vmax 42vmax at 0% 0%,rgba(47,111,228,.36),transparent 70%),
    radial-gradient(34vmax 34vmax at 100% 45%,rgba(77,141,255,.22),transparent 70%),
    radial-gradient(44vmax 36vmax at 30% 105%,rgba(32,70,180,.3),transparent 70%)}
.wrap{gap:18px;padding-block:20px 56px}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.02em}
h1{font-size:clamp(32px,8vw,44px)}
h2{font-size:26px;line-height:1.1}
label{font-weight:400;font-size:13px;color:var(--muted);padding-left:4px}
.check{color:var(--text);font-size:14px;line-height:1.45;padding-left:0;align-items:flex-start}
.hint,.muted{color:var(--muted)}
.hint{font-size:13px}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* Vidro */
form,.card,.cliente,.stat,.contato-card,.resposta,.pilares li{
  background:var(--vidro);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--fio);border-radius:28px;box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 10px 30px rgba(0,0,0,.3)}
form,.card{padding:20px 18px;gap:16px}
.card.destaque,#cardConfirmar{background:var(--vidro-azul);border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 10px 26px rgba(47,111,228,.2)}
#cardConfirmar .muted,#cardConfirmar .hint,.card.destaque .muted,.card.destaque .hint{color:rgba(255,255,255,.8)}

/* Campos */
input,select,textarea{background:rgba(0,0,0,.34);border:1px solid var(--fio);border-radius:16px;padding:13px 14px;color:var(--text);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4);transition:border-color .3s var(--suave),box-shadow .3s var(--suave)}
input::placeholder,textarea::placeholder{color:#6d6e76}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(120,170,255,.9);box-shadow:0 0 0 4px rgba(77,141,255,.14)}
select{-webkit-appearance:none;appearance:none;padding-right:40px;
  background:rgba(0,0,0,.34) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9ba4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/16px no-repeat}
select option{background:#111;color:var(--text)}
input[type=checkbox]{-webkit-appearance:none;appearance:none;width:22px;height:22px;padding:0;border-radius:7px;border:1px solid var(--fio2);background:rgba(0,0,0,.34);display:grid;place-items:center;cursor:pointer;transition:background .35s var(--mola),border-color .3s var(--suave)}
input[type=checkbox]:checked{background:var(--action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat;border-color:transparent}

/* Botões: pílulas de toque. Texto centralizado com uma seta pequena ao lado: nada que pareça "deslizar". */
button,a.botao,a.link-mapa{border-radius:99px;font:500 16px var(--display);letter-spacing:-.005em;
  transition:transform .45s var(--mola),background .4s var(--suave),border-color .3s var(--suave),opacity .3s var(--suave)}
button:active:not(:disabled),a.botao:active,a.link-mapa:active{transform:scale(.97);transition-duration:.12s}
button:not(.ghost):not(.perigo):not(.stat):not(.cliente),a.botao{background:var(--vidro-azul);border:1px solid rgba(255,255,255,.2);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 10px 24px rgba(47,111,228,.22)}
form button[type=submit],a.botao,#comecar{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 24px;min-height:54px;text-align:center}
form button[type=submit]::after,a.botao::after,#comecar::after{content:"";width:18px;height:18px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .45s var(--mola)}
form button[type=submit]:hover::after,a.botao:hover::after,#comecar:hover::after{transform:translateX(3px)}
#cardConfirmar a.botao{background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(236,241,255,.92));color:var(--action);border-color:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 #fff,0 6px 18px rgba(0,0,0,.2)}
#cardConfirmar a.botao::after{display:none}
#cardConfirmar a.botao::before{content:"";width:20px;height:20px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fe4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.3-4A8 8 0 1 1 8 18.7L4 20Z'/%3E%3Cpath d='M9 10.5c.5 2 2 3.5 4.5 4.5'/%3E%3C/svg%3E") center/contain no-repeat}
button.ghost,a.link-mapa{background:rgba(255,255,255,.04);border:1px solid var(--fio2);color:var(--text);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.perigo{background:transparent;border:1px solid rgba(255,143,158,.45);color:var(--error)}
button:disabled{opacity:.42}
.actions{gap:8px}
.actions button[data-back]{flex:0 0 auto;padding:0 20px;min-height:58px}
.actions button[type=submit]{flex:1 1 180px}

/* Etapas do cadastro: pontos ligados por linha fina */
.progress{gap:0}
.progress li{border:0;position:relative;padding-top:18px;text-align:center;font-size:11px}
.progress li::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;border:1px solid var(--fio2);background:#000;z-index:1;transition:background .5s var(--mola),border-color .5s var(--suave),box-shadow .5s var(--suave)}
.progress li::after{content:"";position:absolute;top:4px;right:50%;width:100%;height:1px;background:var(--fio2);transition:background .5s var(--suave)}
.progress li:first-child::after{display:none}
.progress li.on::before{background:var(--amber);border-color:var(--amber)}
.progress li.on::after{background:var(--amber)}
.progress li.on:not(:has(+ li.on))::before{box-shadow:0 0 0 4px rgba(77,141,255,.18)}
.progress li.on{color:var(--muted)}
.progress li.on:not(:has(+ li.on)){color:var(--text)}

/* Topo com a logo */
.lead{gap:6px}
.logo{display:flex;justify-content:center;margin:4px 0 2px}
.logo img{height:26px;width:auto}
.lead .tagline,.lead .pilares{display:none}

/* Detalhes */
table td,table th,.row,.contato,.end-item{border-color:var(--fio)}
.row span:last-child{font-weight:500}
th{color:var(--muted);font-size:13px}
td:last-child{font:500 16px var(--display)}
ul.rules{list-style:none;padding:0;gap:10px}
ul.rules li{display:grid;grid-template-columns:14px 1fr;gap:8px;font-size:15px}
ul.rules li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);margin-top:9px}
ol.passos{list-style:none;padding:0;gap:0;counter-reset:p}
ol.passos li{position:relative;display:grid;grid-template-columns:26px 1fr;gap:10px;padding-bottom:14px;counter-increment:p}
ol.passos li::before{content:counter(p);width:26px;height:26px;border-radius:50%;border:1px solid var(--fio2);display:grid;place-items:center;font:500 12px var(--display);background:#0a0a0c}
ol.passos li:not(:last-child)::after{content:"";position:absolute;left:13px;top:26px;bottom:0;width:1px;background:var(--fio2)}
.word{font:500 34px var(--display);color:#fff;letter-spacing:.06em;border:1px solid rgba(255,255,255,.3);border-radius:18px;padding:12px 16px;background:rgba(255,255,255,.07)}
.ok{color:var(--safe);font-weight:500}.no{color:var(--error);font-weight:500}.warn{color:var(--attention);font-weight:500}
.contato-card{background:rgba(0,0,0,.3);border-radius:20px}
.avatar-vs{background:#111 url("/icone.svg") center/30px no-repeat;border:1px solid var(--fio);font-size:0}
.contato-nome{font-weight:500}
.exemplo{border-left:0;border:1px solid var(--fio);border-radius:20px 20px 20px 6px;padding:12px 14px;background:rgba(255,255,255,.04);font-style:normal}
.pill{font-weight:500;background:transparent!important;border:1px solid currentColor;padding:4px 10px 4px 8px}
.price,.preco-mini{font-family:var(--display);font-weight:500;color:var(--text)}
.rodape a{color:var(--muted)}
.error{color:var(--error)}
.demo{display:none}

/* Tela final (depois de enviar) */
.selo{width:52px;height:52px;border-radius:50%;border:1px solid var(--safe);box-shadow:0 0 0 6px rgba(76,201,160,.08);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234cc9a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/24px no-repeat}
.final{display:grid;gap:10px;justify-items:start}
.final h2{font-size:30px}
.pronto{display:flex;gap:12px;align-items:flex-start}
.pronto::before{content:"";width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--fio2);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d8dff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.3-4A8 8 0 1 1 8 18.7L4 20Z'/%3E%3Cpath d='M9 10.5c.5 2 2 3.5 4.5 4.5'/%3E%3C/svg%3E") center/20px no-repeat}

/* Painel */
.stat{padding:14px;border-radius:22px;color:var(--text)}
.stat.on{border-color:rgba(120,170,255,.6)}
.stat b{font-family:var(--display);font-weight:500}
.stat.pendente.on,.stat.aprovada.on,.stat.recusada.on{background:var(--vidro)}
.cliente{border-radius:22px;padding:14px 16px}
.cliente.on{border-color:rgba(120,170,255,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 3px rgba(77,141,255,.12)}
.cliente b{font-family:var(--display);font-weight:500;font-size:17px}
.detalhe h3{font-weight:500}
.resposta{padding:16px;border-radius:24px}
.painel .lead h1{font-size:34px}

/* Abertura com o vídeo do carro */
.abertura{position:fixed;inset:0;z-index:50;background:#000;overflow:hidden;transition:opacity .7s var(--suave),transform .8s var(--mola)}
.abertura.saindo{opacity:0;transform:scale(1.04);pointer-events:none}
.abertura video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%;transition:opacity 1.2s var(--suave)}
.abertura.pulou video{opacity:.25}
.abertura::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 45%,rgba(0,0,0,.65) 75%)}
.abertura.fim video{opacity:.8}
.abertura .marca-v{position:absolute;left:0;right:0;top:16%;z-index:2;display:grid;justify-items:center;gap:14px;pointer-events:none}
.abertura .marca-v>*{opacity:0;filter:blur(8px);transform:scale(.96) translateY(6px);transition:opacity .9s var(--suave),filter .9s var(--suave),transform 1s var(--mola)}
.abertura .marca-v .ic{width:88px;height:auto}
.abertura .marca-v .tx{width:200px;height:auto;transition-delay:.09s}
.abertura .marca-v p{margin:0;font:300 16px var(--display);color:var(--muted);transition-delay:.18s}
.abertura.fim .marca-v>*{opacity:1;filter:none;transform:none}
.abertura .folha{position:absolute;z-index:2;left:max(10px,calc(50% - 280px));right:max(10px,calc(50% - 280px));bottom:max(10px,env(safe-area-inset-bottom,0px));
  border-radius:34px;padding:22px 18px 18px;display:grid;gap:12px;
  background:radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.07),rgba(255,255,255,0) 55%),linear-gradient(160deg,rgba(26,28,33,.62),rgba(10,10,12,.62));
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);border:1px solid var(--fio);box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
  transform:translateY(calc(100% + 24px));transition:transform .75s var(--mola) .28s}
.abertura.fim .folha{transform:none}
.abertura .folha>*{opacity:0;transform:translateY(8px);transition:opacity .6s var(--suave),transform .7s var(--mola)}
.abertura.fim .folha>*{opacity:1;transform:none}
.abertura.fim .folha>:nth-child(1){transition-delay:.42s}.abertura.fim .folha>:nth-child(2){transition-delay:.48s}.abertura.fim .folha>:nth-child(3){transition-delay:.54s}.abertura.fim .folha>:nth-child(4){transition-delay:.6s}.abertura.fim .folha>:nth-child(5){transition-delay:.66s}
.abertura .folha h2{font-size:28px}
.abertura .folha p{color:var(--muted);font-size:15px}
.pilares-mini{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--fio);border-radius:18px;overflow:hidden}
.pilares-mini li{padding:10px 8px;text-align:center;font:400 14px var(--display);border-left:1px solid var(--fio)}
.pilares-mini li:first-child{border-left:0}
.pilares-mini li b{display:block;font-weight:500;color:var(--text)}
.pilares-mini li span{font-size:11px;color:var(--muted)}
.abertura .ja{text-align:center;font-size:14px}
.abertura .ja a{color:var(--amber);text-decoration:none;font-weight:500}
.abertura .pular{position:absolute;z-index:3;top:max(14px,env(safe-area-inset-top,0px));right:14px;padding:7px 14px;font-size:13px;min-height:0}
.abertura .pular{transition:opacity .5s var(--suave),transform .45s var(--mola)}
.abertura.fim .pular{opacity:0;pointer-events:none}
body.com-abertura{overflow:hidden}

/* ===== Painel: pontos, selos e insígnias ===== */
/* Cor fixa por selo: Nova cinza, Frequente azul, Parceira verde, Da casa âmbar. Rosa só no que é negativo. */
.nv-nova{--nv:#9a9ba4}.nv-freq{--nv:#4d8dff}.nv-parc{--nv:var(--safe)}.nv-casa{--nv:var(--attention)}.nv-neg{--nv:var(--error)}
.ic{display:inline-grid;place-items:center;width:16px;height:16px;flex:none}
.ic svg{width:100%;height:100%}
.selo-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;border-radius:99px;padding:4px 10px 4px 7px;color:var(--nv);border:1px solid color-mix(in srgb,var(--nv) 55%,transparent);white-space:nowrap;line-height:1}
.selo-pill .ic{width:14px;height:14px}
.pontos-card{display:grid;gap:12px;padding:18px;border-radius:26px;background:var(--vidro);border:1px solid var(--fio);box-shadow:inset 0 1px 0 rgba(255,255,255,.13)}
.pontos-cab{display:flex;align-items:center;gap:12px}
.pontos-cab div{display:grid;gap:1px}
.pontos-cab small{color:var(--muted);font-size:12px}
.pontos-cab strong{font:500 22px/1.1 var(--display);letter-spacing:-.01em}
.pontos-num{margin-left:auto;text-align:right}
.pontos-num strong{font-size:28px}
.ic.medalha{width:54px;height:54px;padding:13px;border-radius:50%;color:var(--nv);border:1px solid var(--nv);background:color-mix(in srgb,var(--nv) 10%,transparent);box-shadow:0 0 0 5px color-mix(in srgb,var(--nv) 7%,transparent)}
.barra{height:4px;border-radius:99px;background:var(--fio2);overflow:hidden}
.barra i{display:block;height:100%;border-radius:inherit;background:var(--nv);transition:width .8s var(--mola)}
.barra-leg{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:-4px}
.pontos-card h3{margin:4px 0 0;font-size:17px}
.vantagens{display:grid;gap:7px;margin:0;padding:0;list-style:none;font-size:14px}
.vantagens li{display:flex;gap:9px;align-items:flex-start}
.vantagens li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--nv);margin-top:8px;flex:none}
.insig{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:14px 8px}
.ins{display:grid;justify-items:center;gap:5px;text-align:center;font-size:12px;line-height:1.25}
.ins .ic{width:48px;height:48px;padding:12px;border-radius:50%;color:var(--nv);border:1px solid color-mix(in srgb,var(--nv) 60%,transparent);background:color-mix(in srgb,var(--nv) 9%,transparent)}
.ins small{color:var(--muted);font-size:11px}
.ins small.exp{color:var(--attention)}
.ins.off{opacity:.38}
.ins.off .ic{color:var(--muted);border-color:var(--fio2);background:transparent}
.faixa-pend{display:grid;gap:10px;border:1px solid rgba(255,143,158,.45);background:rgba(255,143,158,.08);border-radius:22px;padding:16px;font-size:14px;color:#e9c3c8;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.faixa-tit{display:flex;align-items:center;gap:8px;color:var(--error);font:500 17px var(--display)}
.faixa-tit .ic{width:20px;height:20px}
.segmento{display:flex;gap:4px;padding:4px;border-radius:99px;border:1px solid var(--fio2);background:rgba(255,255,255,.03)}
.segmento button.ghost{flex:1 1 0;border:0;background:transparent;box-shadow:none;color:var(--muted);padding:9px 8px;font-size:14px;min-height:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.segmento button.ghost.on{background:var(--vidro-azul);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.estrelas{display:flex;gap:6px}
.estrelas button.ghost{width:44px;height:44px;min-height:0;padding:9px;border-radius:50%;border:0;background:transparent;box-shadow:none;color:var(--fio2);-webkit-backdrop-filter:none;backdrop-filter:none}
.estrelas button.ghost .ic{width:100%;height:100%}
.estrelas button.ghost.on{color:var(--attention)}
.estrelas button.ghost.on svg{fill:currentColor}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button.ghost{padding:7px 13px;font-size:13px;min-height:0}
.chips button.ghost.on{background:var(--vidro-azul);border-color:transparent;color:#fff}
.corrida-linha{display:grid;gap:8px;padding-bottom:6px}
.tag-pag{justify-self:start;font-size:12px;border-radius:99px;padding:3px 10px;border:1px solid currentColor}
.tag-pag.aguardando{color:var(--attention)}.tag-pag.cortesia{color:var(--muted)}.tag-pag.nao_paga{color:var(--error)}
.nao-pagou{display:grid;gap:10px;border:1px solid var(--fio2);border-radius:24px;padding:16px;background:var(--vidro)}
.nao-pagou h3{margin:0;font-size:18px}
.nao-pagou button.opcao{display:grid;gap:3px;text-align:left;border-radius:20px;padding:14px;font-size:13px;color:var(--muted);line-height:1.4;min-height:0}
.nao-pagou button.opcao b{font:500 15px var(--display);color:var(--text)}
.nao-pagou button.opcao.grave:not(:disabled){border-color:rgba(255,143,158,.55)}
.nao-pagou button.opcao.grave:not(:disabled) b{color:var(--error)}
.nao-pagou button.opcao:disabled{opacity:.45;cursor:not-allowed}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

#areaCadastro .lead .tagline,#areaCadastro .lead .pilares{display:none}
.logo-painel{flex-direction:column;align-items:center;gap:14px;margin-top:24px}
.logo-painel img:first-child{height:64px}
.logo-painel img:last-child{height:30px}
#areaLogin .lead{justify-items:center;text-align:center}
#areaLogin .tagline{font:400 15px var(--display);color:var(--muted)}