/* Diskello — visual das telas originais aprovadas (29/09): verde #0D9E29, laranja #F39B13, fundo gelo, cartões brancos, 5 abas. */
:root {
  --verde: #0D9E29; --verde-esc: #0A7F21; --lima: #90C000; --amarelo: #E0DC2C; --laranja: #F2C811; --sol: #F2C811; --alface: #9BCB3B; --oliva: #556B2F; --f-tit: "Sora", "Segoe UI", system-ui, sans-serif; --f-ui: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; --vermelho: #DD4C3A;
  --gelo: #F0EFF4; --branco: #FFFFFF; --texto: #1F2A1B; --suave: #66705F; --linha: #E1E3E8;
  --degrade: radial-gradient(520px 340px at 85% 0%, rgba(155,203,59,.35), transparent 70%), linear-gradient(160deg, #0B3D1C 0%, #0D6B24 55%, #0D9E29 100%);
  --sombra: 0 1px 2px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.05);
  --raio: 12px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--gelo); color: var(--texto); font: 15px/1.45 "Plus Jakarta Sans", Roboto, "Segoe UI", system-ui, sans-serif; }
body { min-height: 100vh; }
a { color: var(--verde); }
button { font: inherit; }
.app { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: var(--gelo); }

/* cabeçalho verde */
.cab { position: sticky; top: 0; z-index: 10; background: var(--verde); color: #fff; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; min-height: 52px; }
.cab img { width: 28px; height: 28px; background: #fff; border-radius: 50%; padding: 2px; }
.cab .voltar { background: none; border: 0; color: #fff; font-size: 22px; line-height: 1; padding: 4px 8px 4px 0; cursor: pointer; }
.cab .dir { margin-left: auto; font-size: 13px; font-weight: 500; opacity: .9; }
.conteudo { flex: 1; padding: 14px 14px 90px; display: flex; flex-direction: column; gap: 12px; }

/* barra de abas */
.abas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #fff; border-top: 1px solid var(--linha);
  display: flex; justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); max-width: 560px; margin: 0 auto; }
.abas a { flex: 1; text-align: center; color: #7A8175; text-decoration: none; font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 0; position: relative; }
.abas a img { width: 22px; height: 22px; opacity: .55; filter: grayscale(1); }
.abas a.on { color: var(--verde); font-weight: 700; }
.abas a.on img { opacity: 1; filter: none; }
.abas .bolinha { position: absolute; top: 0; right: 28%; width: 8px; height: 8px; border-radius: 50%; background: var(--vermelho); }

/* telas de fundo (abertura/início/login) */
.fundo { background: var(--degrade); color: #fff; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px 22px calc(24px + env(safe-area-inset-bottom, 0px)); text-align: center; position: relative; overflow: hidden; }
.fundo::before { content: ""; position: absolute; inset: -30% -30% auto auto; width: 90%; aspect-ratio: 1; border-radius: 50%; border: 46px solid rgba(255,255,255,.10); }
.fundo::after { content: ""; position: absolute; inset: auto auto -25% -35%; width: 80%; aspect-ratio: 1; border-radius: 50%; border: 38px solid rgba(255,255,255,.08); }
.fundo > * { position: relative; z-index: 1; }
.logo-grande { width: min(62%, 240px); filter: drop-shadow(0 6px 18px rgba(0,0,0,.18)); background: #fff; border-radius: 50%; padding: 8%; }
.marca-texto { font-size: 34px; font-weight: 800; letter-spacing: -.5px; margin: -6px 0 0; }
.slogan { font-size: 17px; max-width: 30ch; margin: 0; }
.slogan b { background: rgba(255,255,255,.22); padding: 0 6px; border-radius: 6px; }
.btn-t { width: min(86%, 340px); border: 2px solid #fff; background: transparent; color: #fff; border-radius: 99px; padding: 12px; font-weight: 700; letter-spacing: .06em; cursor: pointer; text-decoration: none; display: block; }
.btn-t.cheio { background: #fff; color: var(--verde); }
.fundo .campo-f { width: min(86%, 340px); display: flex; flex-direction: column; gap: 10px; text-align: left; }
.fundo input, .fundo select { background: rgba(255,255,255,.95); border: 0; }
.fundo label { color: #fff; }
.fundo a { color: #fff; }
.passos { display: flex; gap: 6px; } .passos i { width: 26px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.4); } .passos i.on { background: #fff; }

/* componentes */
.titulo { font-weight: 800; color: var(--verde); text-align: center; letter-spacing: .03em; font-size: 15px; margin: 4px 0; }
.card { background: #fff; border-radius: var(--raio); padding: 14px; box-shadow: var(--sombra); }
.card.destaque { outline: 2px solid var(--verde); }
.linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.menu-item { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: var(--raio); padding: 12px 14px; box-shadow: var(--sombra); color: var(--texto); text-decoration: none; border: 0; width: 100%; text-align: left; cursor: pointer; font-size: 15px; }
.menu-item img { width: 28px; height: 28px; object-fit: contain; }
.menu-item::after { content: "›"; margin-left: auto; color: #B5BAB0; font-size: 22px; }
.grade3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ico { background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); padding: 12px 6px; text-align: center; border: 0; cursor: pointer; font-size: 12.5px; color: var(--texto); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ico img { width: 38px; height: 38px; object-fit: contain; }
.ico .preco { color: var(--verde); font-weight: 700; font-size: 13px; }
.bloco-grande { border-radius: 14px; min-height: 150px; padding: 16px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; text-decoration: none; border: 0; text-align: left; cursor: pointer; box-shadow: var(--sombra); background: var(--degrade); position: relative; overflow: hidden; }
.bloco-grande.laranja { background: linear-gradient(150deg, #FFC45C 0%, #F39B13 55%, #D97C00 100%); }
.bloco-grande strong { font-size: 22px; }
.bloco-grande img.deco { position: absolute; right: 14px; top: 14px; width: 64px; height: 64px; opacity: .95; background: #fff; border-radius: 50%; padding: 10px; }
.btn { display: block; width: 100%; border: 0; border-radius: 10px; padding: 13px; font-weight: 700; letter-spacing: .04em; cursor: pointer; text-align: center; text-decoration: none; font-size: 14px; }
.btn.verde { background: var(--verde); color: #fff; }
.btn.laranja { background: var(--laranja); color: #fff; }
.btn.branco { background: #fff; color: var(--verde); box-shadow: var(--sombra); }
.btn.contorno { background: transparent; color: var(--vermelho); border: 1.5px solid var(--vermelho); }
.btn.peq { display: inline-block; width: auto; padding: 8px 12px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
label { display: block; font-size: 13px; font-weight: 700; color: #333; margin: 10px 0 4px; }
input, select, textarea { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 8px; border: 1px solid #D6D9DE; background: #fff; color: var(--texto); font: inherit; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { width: 20px; min-height: 20px; margin-top: 2px; accent-color: var(--verde); }
.chip { display: inline-flex; gap: 6px; align-items: center; padding: 7px 11px; border-radius: 99px; border: 1px solid #D6D9DE; background: #fff; margin: 4px 4px 0 0; font-size: 13px; font-weight: 400; cursor: pointer; }
.chip input { width: auto; min-height: auto; accent-color: var(--verde); }
.selo { display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; }
.selo.verde { background: #DDF3E1; color: var(--verde-esc); } .selo.laranja { background: #FDEBD0; color: #9A5B00; } .selo.vermelho { background: #FBE0DC; color: #A23222; } .selo.cinza { background: #ECEDEF; color: #555; }
.suave { color: var(--suave); font-size: 13.5px; }
.teste { font-size: 12px; color: #9A5B00; }
.dados span { display: block; font-size: 13.5px; } .dados b { color: #333; }
.codigo { font: 800 40px/1 ui-monospace, monospace; letter-spacing: 10px; text-align: center; color: var(--verde); margin: 6px 0; }
#qr { display: flex; justify-content: center; margin: 8px 0; } #qr img, #qr canvas { width: 170px !important; height: 170px !important; }
.etapas { list-style: none; padding: 0; margin: 6px 0; }
.etapas li { padding: 5px 0 5px 26px; position: relative; color: #9AA095; font-size: 14px; }
.etapas li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #C9CDC5; background: #fff; }
.etapas li.feito { color: var(--texto); } .etapas li.feito::before { background: var(--verde); border-color: var(--verde); }
.etapas li.atual { color: var(--verde); font-weight: 700; }
.mapa { height: 210px; border-radius: var(--raio); overflow: hidden; }
.estrelas { display: flex; gap: 6px; justify-content: center; }
.estrelas button { background: none; border: 0; padding: 2px; cursor: pointer; }
.estrelas img { width: 34px; height: 34px; }
.nota-est img { width: 14px; height: 14px; vertical-align: -2px; }
.video { width: 100%; border-radius: var(--raio); background: #000; aspect-ratio: 1; object-fit: cover; }
.aviso { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); max-width: 92vw; background: #fff; color: var(--texto); border-left: 5px solid var(--verde); padding: 12px 16px; border-radius: 10px; z-index: 50; box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.aviso.erro { border-left-color: var(--vermelho); }
.carregando { text-align: center; color: var(--suave); padding: 40px 0; }
.pulso { animation: pulso 1.2s infinite; } @keyframes pulso { 50% { opacity: .45; } }
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela td, .tabela th { padding: 7px 5px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
.rolar { overflow-x: auto; }
/* painel */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.kpi { background: #fff; border-radius: var(--raio); padding: 12px; box-shadow: var(--sombra); }
.kpi span { display: block; font-size: 12px; color: var(--suave); } .kpi b { font-size: 22px; font-variant-numeric: tabular-nums; }
.grafico svg { width: 100%; height: auto; max-height: 230px; display: block; }
.subabas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.subabas button { border: 0; background: #fff; border-radius: 99px; padding: 8px 12px; box-shadow: var(--sombra); cursor: pointer; white-space: nowrap; font-size: 13px; }
.subabas button.on { background: var(--verde); color: #fff; }
@media (prefers-reduced-motion: reduce) { .pulso { animation: none; } }
@media (min-width: 900px) { .app.largo { max-width: 1100px; } }

/* ===== identidade universal diskello (06/10): mesma abertura, paleta e fontes da plataforma ===== */
h1,h2,h3,.titulo,.cab,.marca-texto,.bloco-grande strong,.btn-t,.slogan b{font-family:var(--f-tit)}
.laranja,.bloco-grande.laranja{background:var(--sol)!important;color:#1F2A06!important}
.logo-3d{width:min(46%,190px);filter:drop-shadow(0 14px 26px rgba(0,0,0,.35));animation:elo-gira 9s ease-in-out infinite}
.slogan b{display:inline-block;margin-top:4px;color:var(--sol)}
body.modo-abertura{background:#06260F}
.abert{min-height:100vh;min-height:100dvh;color:#fff;isolation:isolate;padding:24px 16px}
.abert-fundo{background:radial-gradient(600px 420px at 50% 38%,rgba(155,203,59,.28),transparent 70%),linear-gradient(170deg,#06260F,#0B3D1C 60%,#0D6B24)!important}
.abert-chamada.disk{font-weight:800;letter-spacing:-.02em;text-decoration:none}
.abert{position:relative;min-height:calc(100vh - 66px);min-height:calc(100dvh - 66px);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:28px;padding:40px 16px 56px;overflow:hidden;color:#F2FBF3;isolation:isolate}
.abert-fundo{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(600px 420px at 50% 42%,rgba(132,204,22,.22),transparent 70%),
  radial-gradient(900px 600px at 100% 0,rgba(243,155,19,.16),transparent 60%),
  radial-gradient(900px 700px at 0 100%,rgba(13,158,41,.30),transparent 60%),
  linear-gradient(160deg,#05200F,#0B3D1C 55%,#06260F)}
.abert-centro{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.abert-rot{font:800 15px var(--f-ui);letter-spacing:.42em;text-transform:lowercase;color:#9FE0AE;opacity:.9}
.elo-btn{position:relative;border:0;background:none;padding:0;cursor:pointer;width:min(62vw,280px);aspect-ratio:1;border-radius:50%;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);-webkit-tap-highlight-color:transparent}
.elo-btn img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 34px rgba(0,0,0,.45));animation:elo-gira 9s ease-in-out infinite}
.elo-halo{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(190,242,100,.35),transparent 65%);animation:elo-pulsa 3.2s ease-in-out infinite;z-index:-1}
.elo-btn:hover{transform:scale(1.04)}
.elo-btn:focus-visible{outline:3px solid var(--laranja);outline-offset:8px}
@keyframes elo-gira{0%{transform:translateY(0) rotate(0) rotateY(0)}25%{transform:translateY(-10px) rotate(8deg) rotateY(18deg)}
  50%{transform:translateY(0) rotate(0) rotateY(0)}75%{transform:translateY(-10px) rotate(-8deg) rotateY(-18deg)}100%{transform:translateY(0) rotate(0) rotateY(0)}}
@keyframes elo-pulsa{0%,100%{transform:scale(.9);opacity:.55}50%{transform:scale(1.15);opacity:1}}
.abert-chamada{font:650 clamp(26px,4vw,40px)/1.1 var(--f-tit);margin-top:10px}
.abert-chamada:after{content:"";display:block;width:44px;height:3px;margin:12px auto 0;border-radius:3px;background:linear-gradient(90deg,var(--verde),var(--laranja))}
.abert-sub{color:#B9DCC0;max-width:42ch;font-size:15.5px}
.abert.aberto .elo-btn{transform:scale(.62)}
.abert.aberto .abert-sub{display:none}
.abert.aberto{gap:6px}
@media(max-width:980px){.eco{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.eco{grid-template-columns:1fr}}
  background:rgba(255,255,255,.96);box-shadow:0 18px 40px -18px rgba(0,0,0,.55);min-width:0;
@media (prefers-reduced-motion:reduce){.elo-btn img,.elo-halo,.eco-item img{animation:none}.eco-item{animation:none;opacity:1;transform:none}}

/* ===== marketplace ===== */
  background:radial-gradient(500px 300px at 85% 40%,rgba(190,242,100,.18),transparent 70%),linear-gradient(150deg,#06260F,#0B3D1C)}
@media(max-width:760px){.mk-pro{grid-template-columns:1fr}.mk-pro-elo{width:160px;order:-1}}

/* mãozinha tocando no Ello */
.mao{position:absolute;right:-4%;bottom:2%;width:28%;max-width:78px;pointer-events:none;transform-origin:30% 10%;
  animation:mao-toca 2.4s ease-in-out infinite;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.mao svg{width:100%;height:auto;transform:rotate(-24deg)}
@keyframes mao-toca{0%,100%{transform:translate(18px,18px) scale(1)}35%{transform:translate(-6px,-8px) scale(1)}45%{transform:translate(-8px,-10px) scale(.88)}55%{transform:translate(-6px,-8px) scale(1)}}
.onda{position:absolute;left:62%;top:60%;width:22%;aspect-ratio:1;margin:-11% 0 0 -11%;border-radius:50%;border:3px solid rgba(255,255,255,.85);
  opacity:0;animation:onda 2.4s ease-out infinite;animation-delay:.95s;pointer-events:none}
.onda.o2{animation-delay:1.15s;border-color:rgba(243,155,19,.9)}
@keyframes onda{0%{transform:scale(.3);opacity:.9}70%{transform:scale(2.2);opacity:0}100%{opacity:0}}
.abert.aberto .mao,.abert.aberto .onda{display:none}
.abert-toque{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);color:#EAF6EC;font-weight:600;font-size:15px;animation:toque-pulsa 2.4s ease-in-out infinite}
@keyframes toque-pulsa{0%,100%{box-shadow:0 0 0 0 rgba(190,242,100,.0)}50%{box-shadow:0 0 0 8px rgba(190,242,100,.12)}}
@media (prefers-reduced-motion:reduce){.mao,.onda,.abert-toque{animation:none}.onda{display:none}}

/* ===== página 1: Disk Ello aqui ===== */
.abert-chamada.disk{text-decoration:none;color:#fff;font:650 clamp(30px,4.6vw,48px)/1.1 var(--f-tit);text-align:center}
.abert-chamada.disk:hover{color:#E6FFB0}
.elo-btn{display:block}
.abert:not(.eco-pag) .elo-btn{width:min(84vw,58vh,540px);cursor:pointer}
.abert:not(.eco-pag){gap:10px;padding-top:24px}
@media(max-width:600px){.abert:not(.eco-pag) .elo-btn{width:min(88vw,52vh)}}
/* olhinho da senha */
.senha-caixa{position:relative;width:100%}
.senha-caixa input{width:100%;padding-right:48px}
.senha-caixa .olho{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:grid;place-items:center;border:0;background:none;color:#3B4A41;cursor:pointer;border-radius:50%}
.senha-caixa .olho:focus-visible{outline:2px solid var(--sol)}
.abas a .ic-aba{width:24px;height:24px;color:#8A9385}.abas a.on .ic-aba{color:var(--verde)}