/* Rede GR — prévia de identidade (2026-11-04)
   Colorido e jovem, verde trevo, cards arredondados, mobile-first.
   Fontes: Bricolage Grotesque (títulos) + Figtree (texto). */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap');

:root{
  --verde:#FF7518;      /* trevo */
  --verde-esc:#0d6b39;
  --verde-claro:#d9f5e3;
  --sol:#ffc93c;
  --coral:#ff6b57;
  --lilas:#8c7cf7;
  --ceu:#38b6f0;
  --tinta:#13241b;      /* texto */
  --tinta-2:#5b6b62;
  --papel:#f5f8f0;      /* fundo creme-esverdeado */
  --card:#ffffff;
  --linha:#e3eadf;
  --r-lg:28px; --r-md:20px; --r-sm:14px;
  --sombra:0 2px 0 rgba(19,36,27,.06),0 12px 28px -14px rgba(19,36,27,.22);
  --ease:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Figtree',system-ui,sans-serif;background:var(--papel);color:var(--tinta);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3,.disp{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.05}
a{color:inherit}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{max-width:480px;margin:0 auto;padding:0 18px}

/* ---------- marca ---------- */
.marca{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.marca svg{width:34px;height:34px;flex:none}
.marca b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:21px;letter-spacing:-.03em;line-height:1}
.marca b span{color:var(--verde)}

/* ---------- botões ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:54px;border-radius:999px;font-weight:700;font-size:16px;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-verde{background:var(--verde);color:#fff;box-shadow:0 4px 0 var(--verde-esc)}
.btn-verde:active{box-shadow:0 1px 0 var(--verde-esc);transform:translateY(3px)}
.btn-claro{background:var(--card);border:2px solid var(--tinta);color:var(--tinta)}

/* ================= LOGIN ================= */
.lg-top{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.lg-ajuda{font-weight:600;font-size:14px;color:var(--tinta-2);text-decoration:none}
.lg-hero{position:relative;background:var(--verde);color:#fff;border-radius:var(--r-lg);padding:26px 22px 150px;overflow:hidden;margin-top:4px}
.lg-hero>*{position:relative;z-index:1}
.lg-hero h1{font-size:40px;max-width:9ch}
.lg-hero h1 em{font-style:normal;color:var(--sol)}
.lg-hero p{margin-top:12px;font-size:16px;opacity:.92;max-width:24ch}
.lg-hero .bolha,.lg-hero .trevo-gde{position:absolute;z-index:0}
.lg-hero .bolha{border-radius:50%}
.lg-hero .b1{width:170px;height:170px;background:var(--sol);right:-50px;bottom:-60px}
.lg-hero .b2{width:64px;height:64px;background:var(--coral);left:-18px;bottom:50px}
.lg-hero .b3{width:36px;height:36px;background:var(--lilas);right:26px;top:120px}
.lg-hero .trevo-gde{right:16px;top:18px;width:70px;height:70px;transform:rotate(-14deg);opacity:.95}
.lg-form{position:relative;background:var(--card);border-radius:var(--r-lg);padding:22px;margin:-80px 10px 0;box-shadow:var(--sombra)}
.lg-form h2{font-size:24px}
.lg-form .sub{color:var(--tinta-2);font-size:14px;margin:4px 0 18px}
.campo{display:block;margin-bottom:12px}
.campo span{display:block;font-weight:600;font-size:13px;margin-bottom:6px}
.campo input{width:100%;height:52px;border-radius:var(--r-sm);border:2px solid var(--linha);background:var(--papel);padding:0 16px;font:inherit;font-size:16px;color:var(--tinta);transition:border-color .16s var(--ease)}
.campo input:focus{outline:0;border-color:var(--verde);background:#fff}
.lg-form .btn{margin-top:6px}
.lg-esqueci{display:block;text-align:center;margin-top:14px;font-size:14px;font-weight:600;color:var(--verde-esc)}

.lg-sec{margin-top:34px}
.lg-sec>h2{font-size:28px;margin-bottom:14px}
.passos{display:grid;gap:12px}
.passo{display:flex;gap:14px;align-items:flex-start;border-radius:var(--r-md);padding:18px;color:var(--tinta)}
.passo:nth-child(1){background:#fff1c7}
.passo:nth-child(2){background:#e6e1ff}
.passo:nth-child(3){background:#d6f0fc}
.passo .n{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-family:'Bricolage Grotesque';font-weight:800;font-size:20px;color:#fff}
.passo:nth-child(1) .n{background:#e9a800}
.passo:nth-child(2) .n{background:var(--lilas)}
.passo:nth-child(3) .n{background:var(--ceu)}
.passo h3{font-size:18px}
.passo p{font-size:14px;color:var(--tinta-2);margin-top:2px}

.faq details{background:var(--card);border-radius:var(--r-md);padding:16px 18px;margin-bottom:10px;box-shadow:var(--sombra)}
.faq summary{list-style:none;font-weight:700;display:flex;justify-content:space-between;gap:10px;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:'Bricolage Grotesque';font-size:22px;line-height:1;color:var(--verde)}
.faq details[open] summary::after{content:'–'}
.faq p{margin-top:8px;color:var(--tinta-2);font-size:14px}
.lg-rodape{text-align:center;padding:34px 0 40px;color:var(--tinta-2);font-size:13px}

/* ================= PAINEL ================= */
.pn{padding-bottom:110px}
.pn-top{display:flex;align-items:center;justify-content:space-between;padding:16px 0 10px}
.pn-acoes{display:flex;gap:8px}
.ic-btn{position:relative;width:44px;height:44px;border-radius:14px;background:var(--card);display:grid;place-items:center;box-shadow:var(--sombra)}
.ic-btn svg{width:22px;height:22px}
.ic-btn .ponto{position:absolute;top:9px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--coral);border:2px solid #fff}
.avatar{width:44px;height:44px;border-radius:14px;background:var(--sol);display:grid;place-items:center;font-family:'Bricolage Grotesque';font-weight:800;font-size:17px}

.oi{margin:8px 0 14px}
.oi small{color:var(--tinta-2);font-weight:600}
.oi h1{font-size:30px;margin-top:2px}

/* cartão de saldo */
.saldo{position:relative;background:var(--verde);color:#fff;border-radius:var(--r-lg);padding:20px 20px 18px;overflow:hidden}
.saldo .bolha{position:absolute;border-radius:50%;background:rgba(255,255,255,.12)}
.saldo .s1{width:180px;height:180px;right:-60px;top:-70px}
.saldo .s2{width:90px;height:90px;right:60px;bottom:-50px;background:rgba(255,201,60,.35)}
.saldo-lab{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;opacity:.9}
.saldo-lab button{opacity:.85}
.saldo-val{font-family:'Bricolage Grotesque';font-weight:800;font-size:44px;letter-spacing:-.03em;margin-top:4px}
.saldo-val small{font-size:22px;margin-right:2px}
.saldo-hoje{display:inline-flex;align-items:center;gap:6px;margin-top:6px;background:rgba(255,255,255,.18);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600}
.saldo-btns{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.saldo-btns .btn{height:48px;font-size:15px}
.btn-sol{background:var(--sol);color:var(--tinta);box-shadow:0 4px 0 #d9a200}
.btn-vidro{background:rgba(255,255,255,.2);color:#fff}

/* atalhos */
.atalhos{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 6px}
.atalho{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12.5px;font-weight:600;text-decoration:none;text-align:center}
.atalho i{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;transition:transform .16s var(--ease)}
.atalho:active i{transform:scale(.92)}
.atalho i svg{width:26px;height:26px}
.a1 i{background:#fff1c7;color:#b07d00}
.a2 i{background:#e6e1ff;color:#5b49d6}
.a3 i{background:#d6f0fc;color:#137aaa}
.a4 i{background:#ffe0db;color:#d63f2b}

.sec{margin-top:24px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.sec-h h2{font-size:22px}
.sec-h a{font-size:14px;font-weight:700;color:var(--verde-esc);text-decoration:none}

/* números em mosaico */
.mosaico{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.num{border-radius:var(--r-md);padding:16px;min-height:104px;display:flex;flex-direction:column;justify-content:space-between}
.num span{font-size:13px;font-weight:600;color:var(--tinta-2)}
.num b{font-family:'Bricolage Grotesque';font-weight:800;font-size:26px;letter-spacing:-.02em}
.num em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--verde-esc)}
.n1{background:var(--card);box-shadow:var(--sombra)}
.n2{background:#fff1c7}
.n3{background:#e6e1ff}
.n4{background:#d6f0fc}

/* turma por nível */
.niveis{background:var(--card);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sombra)}
.nivel{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:10px 0}
.nivel+.nivel{border-top:1px dashed var(--linha)}
.nivel .tag{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-family:'Bricolage Grotesque';font-weight:800;color:#fff}
.nivel:nth-child(1) .tag{background:var(--verde)}
.nivel:nth-child(2) .tag{background:var(--lilas)}
.nivel:nth-child(3) .tag{background:var(--ceu)}
.nivel b{display:block;font-weight:700}
.nivel small{color:var(--tinta-2);font-size:13px}
.nivel .val{text-align:right;font-weight:700}
.nivel .val small{display:block;font-weight:600}
.barra{height:8px;border-radius:99px;background:var(--papel);margin-top:6px;overflow:hidden}
.barra i{display:block;height:100%;border-radius:99px;background:currentColor}

/* casas */
.casas{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -18px;padding:2px 18px 8px;scrollbar-width:none}
.casas::-webkit-scrollbar{display:none}
.casa{flex:none;width:200px;scroll-snap-align:start;background:var(--card);border-radius:var(--r-md);padding:16px;box-shadow:var(--sombra)}
.casa-logo{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-family:'Bricolage Grotesque';font-weight:800;color:#fff;font-size:18px}
.casa h3{font-size:17px;margin-top:10px}
.casa .taxa{display:inline-block;margin-top:6px;background:var(--verde-claro);color:var(--verde-esc);font-weight:700;font-size:12px;border-radius:99px;padding:3px 10px}
.casa .ganho{margin-top:10px;font-size:13px;color:var(--tinta-2)}
.casa .ganho b{display:block;font-size:18px;color:var(--tinta)}

/* atividade */
.feed{background:var(--card);border-radius:var(--r-lg);padding:6px 18px;box-shadow:var(--sombra)}
.ev{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:12px 0}
.ev+.ev{border-top:1px solid var(--linha)}
.ev i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-style:normal;font-size:18px}
.ev b{display:block;font-weight:700;font-size:14.5px}
.ev small{color:var(--tinta-2);font-size:12.5px}
.ev .mais{font-weight:800;color:var(--verde-esc)}

/* barra de navegação inferior */
.tabbar{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);width:calc(100% - 28px);max-width:452px;height:68px;background:var(--tinta);border-radius:24px;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:0 6px;box-shadow:0 14px 30px -10px rgba(19,36,27,.5);padding-bottom:env(safe-area-inset-bottom)}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;color:#9fb2a7;font-size:11px;font-weight:600;text-decoration:none}
.tab svg{width:23px;height:23px}
.tab.on{color:#fff}
.tab.on svg{color:var(--sol)}
.tab-sacar{position:relative;top:-18px}
.tab-sacar span{width:60px;height:60px;border-radius:20px;background:var(--verde);display:grid;place-items:center;color:#fff;box-shadow:0 5px 0 var(--verde-esc),0 10px 20px -6px rgba(255,117,24,.6)}
.tab-sacar span svg{width:28px;height:28px}
.tab-sacar em{font-style:normal;color:#fff;margin-top:4px}

@media(min-width:900px){
  body{background:#e8efe4}
  .wrap{max-width:480px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- login real (2026-11-04) ---------- */
.lg-erro{background:#fff1ef;color:#b3261e;border-radius:var(--r-sm);padding:12px 14px;font-weight:600;font-size:14px;margin-bottom:14px}
.campo-senha{position:relative;display:block}
.campo-senha input{padding-right:84px}
.olho{position:absolute;right:8px;top:50%;transform:translateY(-50%);height:36px;padding:0 12px;border-radius:10px;font-weight:700;font-size:13px;color:var(--verde-esc);background:var(--verde-claro)}
.btn:disabled{opacity:.75;cursor:wait}
.lg-dica{text-align:center;margin-top:14px;font-size:13.5px;color:var(--tinta-2)}

/* ---------- seção "Ao vivo" (ideia do bento animado, refeita em SVG puro) ---------- */
.lg-tag{display:inline-block;background:var(--verde-claro);color:var(--verde-esc);font-weight:700;font-size:12.5px;border-radius:99px;padding:5px 12px;margin-bottom:10px}
.lg-tag::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--verde);margin-right:7px;vertical-align:1px;animation:vvPulso 1.8s ease-in-out infinite}
.lg-sec h2 .tom{color:var(--verde)}
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.vv-in,.vv-calmo .rv{opacity:1;transform:none}
.vv-card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sombra);padding:16px;display:flex;flex-direction:column;gap:12px}
.vv-card h3{font-size:18px}
.vv-card p{font-size:13.5px;color:var(--tinta-2);margin-top:3px}
.vv-largo{padding:6px 6px 16px}
.vv-largo .vv-copy{padding:0 12px;display:grid;gap:12px}
.vv-copy b{font-family:'Bricolage Grotesque',sans-serif;font-size:16px}
.vv-grade{display:grid;gap:14px;margin-top:14px}
.vv-svg{width:100%;height:auto;display:block;overflow:visible}
.vv-fio{fill:none;stroke:#cfdccb;stroke-width:2;stroke-linecap:round;transition:stroke .3s}
.vv-fio-on{stroke:var(--verde)}
.vv-tracejado{stroke-dasharray:4 5;animation:vvTraco 1.2s linear infinite}
.vv-ponto{stroke:#cfdccb;stroke-width:1.5;stroke-dasharray:2 3}
.vv-pacote{fill:var(--verde)}
.vv-av text,.vv-casa-txt{font:800 11px 'Bricolage Grotesque',sans-serif;fill:#fff;text-anchor:middle}
.vv-av{transform-box:fill-box;transform-origin:center;transition:transform .3s var(--ease)}
.vv-av:hover{transform:scale(1.15)}
.vv-no{fill:#fff;stroke:#cfdccb;stroke-width:1.5}
.vv-no-txt{font:800 10px 'Bricolage Grotesque',sans-serif;fill:var(--verde-esc);text-anchor:middle}
.vv-aura{fill:none;stroke:var(--verde);stroke-opacity:.35;stroke-width:2;animation:vvPulsoA 2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.vv-hub-txt{font:700 6.5px 'Figtree',sans-serif;letter-spacing:1.4px;fill:#fff;text-anchor:middle}
.vv-folha-nova{animation:vvFolha .7s var(--ease) both}
.vv-pix-ic{font:800 9px 'Figtree',sans-serif;fill:var(--verde-esc);text-anchor:middle}
.vv-pix-n{font:700 7px 'Figtree',sans-serif;fill:var(--tinta-2)}
.vv-pix-quem{font:600 6.5px 'Figtree',sans-serif;fill:var(--tinta-2)}
.vv-pix-val{font:800 13px 'Bricolage Grotesque',sans-serif;fill:var(--verde-esc)}
.vv-casa{cursor:pointer;transform-box:fill-box;transform-origin:center;transition:transform .3s var(--ease),opacity .3s;opacity:.55}
.vv-casa.on{transform:translateY(-3px) scale(1.08);opacity:1}
.vv-status{font:600 9px 'Figtree',sans-serif;fill:var(--tinta-2);text-anchor:middle}
.vv-grafico{cursor:crosshair;touch-action:pan-y}
.vv-grade-l{stroke:var(--linha)}
.vv-linha{fill:none;stroke:var(--verde);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.4,.1,.2,1)}
.vv-in .vv-linha,.vv-calmo .vv-linha{stroke-dashoffset:0}
.vv-cursor{stroke:var(--tinta);stroke-opacity:.25;stroke-dasharray:3 3}
.vv-balao-txt{font:700 8.5px 'Figtree',sans-serif;fill:#fff;text-anchor:middle}
@keyframes vvTraco{to{stroke-dashoffset:-18}}
@keyframes vvPulso{50%{opacity:.35}}
@keyframes vvPulsoA{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.06)}}
@keyframes vvFolha{from{opacity:0;transform:translate(12px,-10px) rotate(5deg)}to{opacity:1;transform:none}}
@media(min-width:560px){.vv-grade{grid-template-columns:1fr 1fr}.vv-largo .vv-copy{grid-template-columns:repeat(3,1fr)}}
@media(prefers-reduced-motion:reduce){.lg-tag::before,.vv-tracejado,.vv-aura,.vv-folha-nova{animation:none}.vv-pacote{display:none}}
.lg-ok{background:#e8f7ee;color:var(--verde-esc);border-radius:var(--r-sm);padding:12px 14px;font-weight:600;font-size:14px;margin-bottom:14px}

/* =========================================================================
   Noite Esmeralda nas telas de entrada (login, cadastro, PIN, Minhas casas,
   recuperar e trocar senha) — 2026-11-04, mesma identidade do painel.
   ========================================================================= */
:root{
  --verde:#FF7518; --verde-esc:#FF7518; --verde-claro:#1B201E;
  --sol:#FF7518; --coral:#ff8a7a; --lilas:#3a3d3b; --ceu:#2a2d2b;
  --tinta:#F2F4F3; --tinta-2:#A3A9A6; --papel:#0C0F0E; --card:#151918; --linha:#2a2d2b;
  --sombra:0 1px 0 rgba(255,255,255,.02),0 12px 26px -16px rgba(0,0,0,.8);
  color-scheme:dark}
html{background:#090B0A}
body{background:radial-gradient(90% 50% at 100% 0,#3a2010 0,rgba(12,15,14,0) 65%),#0C0F0E;color:#F2F4F3}
*{font-family:'Manrope',system-ui,sans-serif!important}
h1,h2,h3,.disp{font-weight:800;letter-spacing:-.025em}
.marca b{color:#F2F4F3}
.marca b span{color:#FF7518}
.marca svg{color:#F2F4F3!important}
.lg-ajuda{color:#A3A9A6}
.lg-ajuda:hover{color:#F2F4F3}

/* destaque do login */
.lg-hero{background:linear-gradient(140deg,#3a2010 0%,#1f130a 100%);border:1px solid #4a2a14}
.lg-hero h1 em{color:#FF7518}
.lg-hero p{color:#C9CECC;opacity:1}
.lg-hero .b1{background:#FF7518;opacity:.16}
.lg-hero .b2,.lg-hero .b3{display:none}
.lg-hero .trevo-gde{color:#FF7518!important;opacity:.9}
.lg-hero .trevo-gde use{color:#FF7518}

/* cartão do formulário e campos */
.lg-form{background:#151918;border:1px solid #2a2d2b}
.lg-form .sub,.lg-dica{color:#A3A9A6}
.campo span{color:#C9CECC}
.campo input,.campo select,.campo-senha input{background:#1B201E!important;border-color:#2a2d2b!important;color:#F2F4F3!important}
.campo input::placeholder{color:#6f7673}
.campo input:focus,.campo select:focus{background:#222826!important;border-color:#FF7518!important;box-shadow:0 0 0 3px rgba(255,117,24,.15)}
.olho{background:#2a2d2b!important;color:#FF7518!important}
.btn-verde{background:#FF7518!important;color:#1a0b02!important;box-shadow:none!important}
.btn-verde:active{transform:scale(.98)!important;box-shadow:none!important}
.btn-claro{background:#1B201E;border-color:#2a2d2b;color:#F2F4F3}
.lg-dica a,.lg-esqueci{color:#FF7518!important}
.lg-erro{background:rgba(255,138,122,.1);color:#ffb3a8;border:1px solid rgba(255,138,122,.25)}
.lg-ok{background:rgba(255,117,24,.1)!important;color:#FF7518!important;border:1px solid rgba(255,117,24,.25)}
.lg-tag{background:rgba(255,117,24,.1);color:#FF7518}
.lg-tag::before{background:#FF7518}
.lg-sec h2 .tom{color:#FF7518}
.faq details{background:#151918;border:1px solid #2a2d2b;box-shadow:none}
.faq summary::after{color:#FF7518}
.faq p{color:#A3A9A6}
.lg-rodape{color:#6f7673}

/* seção "Ao vivo" do login */
.vv-card{background:#151918;border:1px solid #2a2d2b;box-shadow:none}
.vv-card p,.vv-largo .vv-copy p{color:#A3A9A6}
.vv-copy b{color:#F2F4F3}
.vv-svg>rect[fill^="url"]{opacity:.12}
.vv-fio{stroke:#3a3d3b}
.vv-fio-on{stroke:#FF7518}
.vv-ponto{stroke:#3a3d3b}
.vv-pacote{fill:#FF7518}
.vv-no{fill:#1B201E;stroke:#3a3d3b}
.vv-no-txt{fill:#FF7518}
.vv-aura{stroke:#FF7518}
.vv-svg rect[fill="#FF7518"]{fill:#4a2a14}
.vv-svg use[style*="color:#fff"]{color:#FF7518!important}
.vv-av circle{fill:#2a2d2b}
.vv-av:nth-of-type(1) circle,.vv-av:first-of-type circle{fill:#FF7518}
.vv-av text{fill:#F2F4F3}
.vv-folha>rect:first-child{fill:#1B201E;stroke:#3a3d3b}
.vv-folha rect[fill="#e3eadf"]{fill:#2a2d2b}
.vv-folha circle{fill:#2a2d2b}
.vv-pix-ic{fill:#FF7518}
.vv-pix-n,.vv-pix-quem{fill:#A3A9A6}
.vv-pix-val{fill:#FF7518}
.vv-casa rect{fill:#1B201E}
.vv-casa .vv-casa-txt{fill:#A3A9A6}
.vv-casa.on rect{fill:#FF7518}
.vv-casa.on .vv-casa-txt{fill:#1a0b02}
.vv-status{fill:#A3A9A6}
.vv-grade-l{stroke:rgba(255,255,255,.06)}
.vv-linha{stroke:#FF7518}
.vv-cursor{stroke:#F2F4F3}
#vvArea stop{stop-color:#FF7518}
#vvGPonto{fill:#151918;stroke:#FF7518}
#vvGBalao rect{fill:#FF7518}
.vv-balao-txt{fill:#1a0b02}

/* passos (cadastro e casas) */
body .cc-passos li{color:#6f7673}
body .cc-passos li span{background:#1B201E;color:#6f7673;border:1px solid #2a2d2b}
body .cc-passos li.on{color:#F2F4F3}
body .cc-passos li.on span{background:#FF7518;color:#1a0b02;border-color:#FF7518}
body .cc-passos li.feito span{background:rgba(255,117,24,.12);color:#FF7518;border-color:transparent}
body .cc-topo p{color:#A3A9A6}
body .cc-cont{background:rgba(255,117,24,.1);color:#FF7518}
body .cc-flash.ok{background:rgba(255,117,24,.1);color:#FF7518}
body .cc-flash.erro{background:rgba(255,138,122,.1);color:#ffb3a8}
body .cc-vazio{background:#151918;border:1px dashed #3a3d3b;color:#A3A9A6;box-shadow:none}
body .cc-casa{background:#151918;border:1px solid #2a2d2b;box-shadow:none}
body .cc-casa.ligada{box-shadow:inset 0 0 0 1px rgba(255,117,24,.35)}
body .cc-logo{background:#FF7518!important}
body .cc-logo b{color:#1a0b02}
body .cc-casa-nome small{color:#A3A9A6}
body .cc-casa.ligada .cc-casa-nome small{color:#FF7518}
body .cc-btn{background:#FF7518;color:#1a0b02;box-shadow:none}
body .cc-btn[aria-expanded=true]{background:#2a2d2b;color:#F2F4F3}
body .cc-casa-form{border-top-color:#2a2d2b}
body .cc-casa-pe{color:#A3A9A6}
body .cc-casa-pe b{color:#F2F4F3}
body .cc-sair{border-color:#3a3d3b;color:#A3A9A6}
body .cc-seguro{color:#6f7673}
.rc-usuario{background:rgba(255,117,24,.1)!important;color:#FF7518!important}

/* PIN */
.pin-card{background:#151918!important;border:1px solid #2a2d2b;box-shadow:none!important}
.pin-ic{background:rgba(255,117,24,.1)!important;color:#FF7518!important}
.pin-card .sub{color:#A3A9A6!important}
.pin-quem{background:#1B201E!important;color:#A3A9A6!important}
.pin-quem b{color:#F2F4F3!important}
.pin-quem .av{background:#FF7518!important;color:#1a0b02!important}
.box{background:#1B201E!important;border-color:#2a2d2b!important}
.box.cheio{background:#222826!important;border-color:#FF7518!important}
.box.foco{border-color:#F2F4F3!important}
.box .ponto{background:#FF7518!important}
.boxes.erro .box{border-color:#ff8a7a!important}
.msg{color:#ffb3a8!important}
.tecla{background:#1B201E!important;color:#F2F4F3!important}
.tecla:active{background:#2a2d2b!important}
.tecla.acao{background:none!important;color:#A3A9A6!important}
.pin-links span{color:#A3A9A6!important}
.pin-links a{color:#FF7518!important}

/* Trevo girando devagar (2026-11-04): logo do topo e trevo grande do login. Simétrico, então o giro é sutil. */
@keyframes tvGira{to{transform:rotate(360deg)}}
.marca svg{animation:tvGira 24s linear infinite;transform-origin:50% 50%}
.lg-hero .trevo-gde{animation:tvGira 40s linear infinite;transform-origin:50% 50%}
@media (prefers-reduced-motion:reduce){.marca svg,.lg-hero .trevo-gde{animation:none}}

/* Título "Bem-vindo à Rede GR." (2026-11-04): duas linhas fixas, menor pra não encostar no trevo. */
.lg-hero h1{max-width:none;font-size:clamp(28px,8.7vw,34px);line-height:1.12}

/* =========================================================================
   Cadastro fácil (2026-11-04): explica a mudança para quem entrava com o
   celular e a senha da casa. Bloco "O acesso mudou" no login, aviso quando o
   login digitado é o da casa, dicas embaixo dos campos.
   ========================================================================= */
.gt-mudou{margin:14px 10px 0;padding:20px;border-radius:var(--r-lg,22px);background:#151918;border:1px solid #3a3d3b}
.gt-mudou-tag{display:inline-block;font-size:12px;font-weight:700;color:#1a0b02;background:#FF7518;border-radius:99px;padding:4px 10px}
.gt-mudou h2{font-size:22px;margin:10px 0 6px;color:#F2F4F3}
.gt-mudou>p{color:#C9CECC;font-size:14.5px;line-height:1.5;margin:0}
.gt-mudou>p b{color:#F2F4F3}
.gt-passos{list-style:none;margin:16px 0;padding:0;display:flex;flex-direction:column;gap:12px}
.gt-passos li{display:flex;gap:12px;align-items:flex-start}
.gt-passos li>span{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;background:#1B201E;color:#FF7518;border:1px solid #3a3d3b}
.gt-passos b{display:block;color:#F2F4F3;font-size:15px}
.gt-passos small{display:block;color:#A3A9A6;font-size:13px;line-height:1.4;margin-top:2px}
.btn-gt-contorno{background:transparent;color:#FF7518;border:2px solid #FF7518;text-decoration:none}
.btn-gt-contorno:active{transform:scale(.98)}
.gt-casa-achada{background:rgba(255,117,24,.08);border:1px solid rgba(255,117,24,.35);border-radius:var(--r-sm,14px);padding:14px;margin-bottom:14px}
.gt-casa-achada b{display:block;color:#FF7518;font-size:15px;margin-bottom:4px}
.gt-casa-achada p{color:#F2F4F3;font-size:14px;line-height:1.45;margin:0 0 8px}
.gt-casa-achada .btn{height:46px;font-size:15px;margin-top:4px;text-decoration:none}
body .gt-dica{display:block;font-size:12.5px;line-height:1.4;color:#A3A9A6;margin-top:6px;font-weight:500}
body .gt-dica-casa{margin:0 0 12px;color:#C9CECC}
/* "Conectar depois" no Minhas casas (2026-11-04) */
.gt-depois{margin-top:16px;text-align:center}
.gt-depois small{display:block;margin-top:8px;font-size:12.5px;line-height:1.4;color:#A3A9A6}

/* Cadastro em 5 passos (2026-11-04): Acesso, CPF, Apelido, PIN, Casas. */
body .gt-passos5{gap:2px}
body .gt-passos5 li{font-size:11.5px;gap:5px;position:relative}
body .gt-passos5 li span{width:28px;height:28px;font-size:13px;position:relative;z-index:1}
body .gt-passos5 li:not(:last-child)::after{content:"";position:absolute;top:14px;left:calc(50% + 18px);right:calc(-50% + 18px);height:2px;background:#2a2d2b;border-radius:2px}
body .gt-passos5 li.feito:not(:last-child)::after{background:#FF7518;opacity:.5}
.gt-wiz-passo h2{margin-bottom:4px}
.gt-wiz-msg{background:rgba(255,138,122,.1);color:#ffb3a8;border:1px solid rgba(255,138,122,.25);border-radius:var(--r-sm,14px);padding:11px 13px;font-weight:600;font-size:13.5px;margin:2px 0 12px}
.gt-voltar{display:block;width:100%;height:44px;margin-top:8px;background:none;border:0;color:#A3A9A6;font-weight:700;font-size:14.5px;cursor:pointer}
.gt-voltar:hover{color:#F2F4F3}
.gt-porque{list-style:none;margin:4px 0 16px;padding:0;display:flex;flex-direction:column;gap:10px}
.gt-porque li{display:flex;flex-direction:column;gap:3px;background:#1B201E;border:1px solid #2a2d2b;border-radius:var(--r-sm,14px);padding:12px 14px 12px 40px;position:relative}
.gt-porque li::before{content:"";position:absolute;left:14px;top:15px;width:14px;height:14px;border-radius:50%;background:#FF7518;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.3 8 11 4.6-1.7 8-6 8-11V5l-8-3z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.3 8 11 4.6-1.7 8-6 8-11V5l-8-3z'/%3E%3C/svg%3E") center/contain no-repeat}
.gt-porque b{color:#F2F4F3;font-size:14.5px}
.gt-porque span{color:#C9CECC;font-size:13.5px;line-height:1.45}

/* =========================================================================
   Login premium (2026-11-04): profundidade, molas e resposta imediata.
   Mesmo formulário e mesmos textos; só o sentir.
   ========================================================================= */
:root{--gt-mola:cubic-bezier(.32,.72,0,1);--gt-mola-el:cubic-bezier(.34,1.35,.64,1)}
body{background:radial-gradient(70% 45% at 85% 0,#3a2010 0,rgba(12,15,14,0) 65%),radial-gradient(40% 30% at 10% 60%,rgba(255,117,24,.05) 0,rgba(255,117,24,0) 70%),#0C0F0E}
.lg-hero{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 48px -28px rgba(0,0,0,.9);animation:lgHero .6s var(--gt-mola) both}
.lg-hero .trevo-gde{filter:drop-shadow(0 12px 24px rgba(0,0,0,.35))}
.lg-form{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 4px rgba(0,0,0,.35),0 24px 48px -24px rgba(0,0,0,.9);animation:lgForm .6s .08s var(--gt-mola) both}
@keyframes lgHero{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes lgForm{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.lg-sec{animation:lgHero .6s .16s var(--gt-mola) both}
/* campos: a borda acende de mola, e fica marcada quando tem valor */
.campo input,.campo select,.campo-senha input{transition:border-color .28s var(--gt-mola),box-shadow .28s var(--gt-mola),background-color .2s ease,transform .3s var(--gt-mola)!important}
.campo.tem-valor input{border-color:#3a3d3b!important}
.campo input:focus,.campo-senha input:focus{transform:translateY(-1px)}
.campo span{transition:color .2s ease}
.campo:focus-within>span{color:#FF7518}
/* botão de ver a senha: gira e comprime no toque */
.olho{transition:transform .36s var(--gt-mola-el),background-color .2s ease,color .2s ease!important;-webkit-tap-highlight-color:transparent}
.olho:active{transform:translateY(-50%) scale(.9)!important}
.olho.on{background:rgba(255,117,24,.18)!important}
/* botão principal: cápsula que cede e volta de mola; ocupado vira anel girando */
.btn{transition:transform .36s var(--gt-mola-el),filter .2s ease,opacity .2s ease!important;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.96)!important}
.btn-verde:hover{filter:brightness(1.06)}
.btn:disabled{opacity:1}
.lg-ocupado{position:relative!important;color:transparent!important;pointer-events:none!important}
.lg-ocupado::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2.5px solid rgba(10,26,18,.25);border-top-color:#1a0b02;animation:lgGira .7s linear infinite}
@keyframes lgGira{to{transform:rotate(360deg)}}
/* erro: entra de cima, sem tremer */
.lg-erro,.gt-wiz-msg,.gt-casa-achada,.lg-ok{animation:lgErro .4s var(--gt-mola-el) both}
@keyframes lgErro{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
/* passos do cadastro: a bolinha ativa pulsa uma vez ao mudar */
.cc-passos li.on span{animation:lgPasso .5s var(--gt-mola-el) both}
@keyframes lgPasso{from{transform:scale(.7)}to{transform:none}}
.gt-wiz-passo:not([hidden]){animation:lgHero .32s var(--gt-mola) both}
/* "Minhas casas": cartão abre com mola */
.cc-casa{transition:transform .36s var(--gt-mola),border-color .2s ease}
.cc-casa-form:not([hidden]){animation:lgHero .32s var(--gt-mola) both}
.cc-btn{transition:transform .36s var(--gt-mola-el),background-color .2s ease,color .2s ease!important}
.cc-btn:active{transform:scale(.94)!important}
/* teclado do PIN */
.tecla{transition:transform .36s var(--gt-mola-el),background-color .2s ease!important}
.tecla:active{transform:scale(.92)!important}
/* foco por teclado */
:focus-visible{outline:2px solid #FF7518;outline-offset:2px;border-radius:10px}
.campo input:focus-visible{outline:0}
@media(prefers-reduced-motion:reduce){
  .lg-hero,.lg-form,.lg-sec,.lg-erro,.gt-wiz-msg,.gt-casa-achada,.lg-ok,.cc-passos li.on span,.gt-wiz-passo:not([hidden]),.cc-casa-form:not([hidden]){animation:none!important}
  .btn,.olho,.cc-btn,.tecla,.campo input{transition:none!important}
  .lg-ocupado::after{animation-duration:1.4s}
}

/* Rede GR (2026-11-05): monograma no lugar do trevo; nada gira; "GR" sempre maiúsculo. */
.marca svg,.lg-hero .trevo-gde{animation:none!important}
.marca svg{border-radius:8px}
.marca b span{text-transform:uppercase}
.lg-hero .trevo-gde{border-radius:22%;opacity:.95!important}

/* Logo oficial Rede GR nas telas de entrada (2026-11-05) */
.marca svg{display:none!important}
.marca b{display:block;width:150px;height:34px;font-size:0!important;color:transparent!important;background:url(/assets/logo-redegr.png?v=logo1) left center/contain no-repeat}
.lg-hero .trevo-gde{background:url(/assets/gr-logo.png?v=logo1) center/contain no-repeat;border-radius:0!important;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.lg-hero .trevo-gde use{display:none}
/* logo centralizada nas telas de entrada (2026-11-05) */
.lg-top{position:relative;justify-content:flex-end!important;min-height:40px}
.lg-top .marca{position:absolute!important;left:50%;top:50%;transform:translate(-50%,-50%);margin:0!important}
.lg-top .marca b{background-position:center!important}

/* =========================================================================
   Cartão único Entrar / Criar conta (2026-11-05): abas no topo do cartão e um
   trilho com os dois formulários lado a lado; trocar de aba desliza pro lado.
   ========================================================================= */
.lg-cartao{position:relative;margin:-80px 10px 0;background:#151918;border:1px solid #2a2d2b;border-radius:var(--r-lg,26px);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 4px rgba(0,0,0,.35),0 24px 48px -24px rgba(0,0,0,.9);animation:lgForm .6s .08s var(--gt-mola) both}
.lg-cartao .lg-form{margin:0!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;animation:none!important;border-radius:0}
.lg-abas{position:relative;display:grid;grid-template-columns:1fr 1fr;margin:14px 14px 0;padding:4px;border-radius:999px;background:#1B201E;border:1px solid rgba(255,255,255,.08)}
.lg-abas button{position:relative;z-index:1;height:42px;border:0;background:none;color:#A3A9A6;font:inherit;font-weight:800;font-size:14.5px;border-radius:999px;cursor:pointer;transition:color .25s ease;-webkit-tap-highlight-color:transparent}
.lg-abas button[aria-selected=true]{color:#1a0b02}
.lg-abas-pill{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#FF7518;box-shadow:0 8px 18px -10px rgba(255,117,24,.8);transition:transform .45s var(--gt-mola,cubic-bezier(.32,.72,0,1))}
.lg-cartao[data-aba=cadastro] .lg-abas-pill{transform:translateX(100%)}
.lg-trilho{display:flex;align-items:flex-start;width:200%;transition:transform .5s var(--gt-mola,cubic-bezier(.32,.72,0,1)),height .4s var(--gt-mola,cubic-bezier(.32,.72,0,1));will-change:transform}
.lg-cartao[data-aba=cadastro] .lg-trilho{transform:translateX(-50%)}
.lg-painel{flex:0 0 50%;width:50%;min-width:0;padding:18px 22px 22px;box-sizing:border-box;transition:opacity .3s ease}
.lg-painel[inert]{opacity:.0}
.lg-painel .cc-passos{margin:0 0 16px!important}
.lg-painel .cc-form{margin:0}
@media(prefers-reduced-motion:reduce){.lg-trilho,.lg-abas-pill,.lg-painel{transition:none!important}.lg-cartao{animation:none!important}}
/* o foco num campo do painel ao lado rolava o cartão inteiro (overflow:hidden ainda rola por script); clip não rola */
.lg-cartao{overflow:clip}
@supports not (overflow:clip){.lg-cartao{overflow:hidden}}

/* "O acesso mudou" refeito (2026-11-05): sem botão, cabeçalho com ícone e os 3 passos numa trilha horizontal */
.gt-mudou{padding:18px 18px 20px!important;background:linear-gradient(160deg,#1a1612 0%,#151918 55%)!important;border:1px solid rgba(255,117,24,.18)!important;border-radius:var(--r-lg,26px)!important}
.gt-mudou-cab{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.gt-mudou-ic{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(255,117,24,.12);border:1px solid rgba(255,117,24,.25);color:#FF7518}
.gt-mudou-ic svg{width:22px;height:22px}
.gt-mudou-cab .gt-mudou-tag{display:block;background:none!important;padding:0!important;color:#FF7518!important;font-size:11.5px!important;letter-spacing:.06em;text-transform:uppercase}
.gt-mudou-cab h2{margin:2px 0 0!important;font-size:20px!important}
.gt-mudou>p{font-size:14px!important;line-height:1.5!important;color:#C9CECC!important;margin:0 0 16px!important}
.gt-trilha{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;position:relative;counter-reset:gtp}
.gt-trilha::before{content:"";position:absolute;top:21px;left:16.6%;right:16.6%;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,117,24,.55),rgba(255,117,24,.15))}
.gt-trilha li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;counter-increment:gtp}
.gt-trilha i{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#1B201E;border:1px solid rgba(255,117,24,.35);color:#FF7518;margin-bottom:6px}
.gt-trilha i svg{width:20px;height:20px}
.gt-trilha i::after{content:counter(gtp);position:absolute;right:-4px;top:-4px;width:18px;height:18px;border-radius:50%;background:#FF7518;color:#1a0b02;font-size:10.5px;font-weight:800;font-style:normal;display:grid;place-items:center;box-shadow:0 0 0 2px #151918}
.gt-trilha b{font-size:13.5px;color:#F2F4F3;line-height:1.25}
.gt-trilha small{font-size:12px;color:#A3A9A6;line-height:1.3}
/* logo com respiro do topo (2026-11-05): o .lg-top tinha 40 px de altura total e a logo de 34 px ficava a 3 px da barra do navegador */
.lg-top{min-height:0!important;justify-content:center!important;padding:calc(26px + env(safe-area-inset-top)) 0 20px!important}
.lg-top .marca{position:static!important;transform:none!important}
.lg-top>.lg-ajuda{position:absolute;right:0;bottom:26px}

/* =========================================================================
   Boas-vindas enxuto (2026-11-05): o bloco tinha 150 px de sobra embaixo pra o
   cartão sobrepor 80 px, então sobrava uma faixa vazia com uma bolha laranja
   cortada; e o GR repetia a logo do topo. Agora: texto centralizado como a logo,
   sem GR nem bolhas, brilho suave, sobreposição curta e limpa.
   ========================================================================= */
.lg-hero{padding:26px 24px 74px!important;text-align:center;
  background:radial-gradient(70% 90% at 50% 0,rgba(255,117,24,.22) 0,rgba(255,117,24,0) 70%),linear-gradient(160deg,#2e1a0e 0%,#1a130d 60%,#151210 100%)!important;
  border:1px solid rgba(255,117,24,.2)!important}
.lg-hero .trevo-gde,.lg-hero .bolha{display:none!important}
.lg-hero h1{max-width:none!important;margin:0 auto;font-size:clamp(28px,8.4vw,34px)!important}
.lg-hero h1 br{display:none}
.lg-hero h1 em{display:block}
.lg-hero p{max-width:30ch!important;margin:10px auto 0!important;font-size:15px!important;line-height:1.5}
.lg-cartao{margin-top:-46px!important}