/* Tela principal (ecossistema 3D) e tela de login */
.pg-eco, .pg-login { background: #030816; color: #fff; overflow: hidden; }
.pg-eco main { min-height: 100vh; }
#cena { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.eco-hero { position: fixed; left: max(24px, 4vw); top: calc(var(--topo) + (100vh - var(--topo) - 76px) / 2); transform: translateY(-50%); width: min(560px, 42vw); z-index: 10; pointer-events: none; }
.eco-hero > * { pointer-events: auto; }
.eco-sobre { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8CC4FF; }
.eco-sobre::before { content: ''; width: 26px; height: 2px; background: linear-gradient(90deg, #38BDF8, #818CF8); border-radius: 2px; }
.eco-hero h1 { font-size: clamp(28px, 3.2vw, 48px); font-weight: 700; margin: 14px 0 16px; letter-spacing: -.025em; line-height: 1.06; }
.eco-hero h1 em, .login-apresenta h1 em { font-style: normal; background: linear-gradient(92deg, #7DD3FC 0%, #A5B4FC 40%, #F9A8D4 75%, #FCD34D 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eco-hero p { color: rgba(226, 236, 255, .78); font-size: 16px; margin: 0 0 24px; max-width: 460px; }
.eco-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 26px; }
.eco-kpi { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 12px 14px; backdrop-filter: blur(10px); }
.eco-kpi small { display: block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(200, 220, 255, .65); font-weight: 600; }
.eco-kpi b { display: block; font-family: var(--fonte-t); font-size: 22px; margin-top: 2px; }
.eco-kpi span { font-size: 12px; color: rgba(200, 220, 255, .7); }
.eco-kpi .barra { background: rgba(255, 255, 255, .12); margin-top: 8px; height: 6px; }
.eco-kpi .barra-esperado { background: #fff; opacity: .8; }
.eco-botoes { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-eco { padding: 13px 22px; border-radius: 14px; font-size: 15px; background: linear-gradient(92deg, #2F7BF5, #7C3AED); box-shadow: 0 12px 30px -10px rgba(99, 102, 241, .7); }
.btn-eco-sec { padding: 13px 20px; border-radius: 14px; font-size: 15px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); }
.eco-rotulos { position: fixed; inset: 0; pointer-events: none; z-index: 8; overflow: hidden; }
.eco-no { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 40px;
  background: rgba(8, 16, 38, .62); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); backdrop-filter: blur(8px); white-space: nowrap; transition: background .2s, box-shadow .2s; will-change: transform; }
.eco-no:hover, .eco-no.foco { background: color-mix(in srgb, var(--c) 40%, rgba(8, 16, 38, .8)); box-shadow: 0 0 0 1px var(--c), 0 10px 30px -8px var(--c); }
.eco-no .eco-no-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--c); }
.eco-no .eco-no-ico .ico { width: 16px; height: 16px; }
.eco-no b { font-family: var(--fonte-t); font-size: 13.5px; font-weight: 600; display: block; line-height: 1.15; }
.eco-no small { font-size: 11.5px; color: rgba(210, 225, 255, .75); }
.eco-no.bloq { filter: grayscale(.9); opacity: .6; }
.eco-nucleo { position: absolute; left: 0; top: 0; pointer-events: none; text-align: center; transform: translate(-50%, -50%); will-change: transform; }
.eco-nucleo img { width: 118px; display: block; margin: 0 auto; filter: drop-shadow(0 2px 10px rgba(0, 20, 60, .9)); }
.eco-card { position: fixed; z-index: 12; pointer-events: none; width: 290px; background: rgba(8, 16, 38, .9); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); border-radius: 16px; padding: 16px; backdrop-filter: blur(14px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.eco-card.vis { opacity: 1; transform: none; }
.eco-card h3 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.eco-card h3 i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.eco-card p { font-size: 12.5px; color: rgba(215, 228, 255, .8); margin: 8px 0 12px; }
.eco-card .barra { background: rgba(255, 255, 255, .14); }
.eco-card .barra-esperado { background: #fff; }
.eco-card-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; text-align: center; }
.eco-card-nums b { display: block; font-family: var(--fonte-t); font-size: 17px; }
.eco-card-nums small { font-size: 10.5px; color: rgba(200, 220, 255, .65); }
.eco-card em { display: block; font-style: normal; font-size: 11.5px; color: #8CC4FF; margin-top: 12px; text-align: center; }
.eco-folha { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; max-width: 520px; margin: 0 auto; background: rgba(8, 16, 38, .96); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); border-radius: 20px; padding: 18px 18px 16px; backdrop-filter: blur(14px); box-shadow: 0 -10px 50px -10px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .04); transform: translateY(24px); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
.eco-folha.vis { transform: none; opacity: 1; }
.eco-folha h3 { font-size: 17px; display: flex; align-items: center; gap: 8px; }
.eco-folha h3 i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); flex: none; }
.eco-folha p { font-size: 13px; color: rgba(215, 228, 255, .82); margin: 8px 0 12px; }
.eco-folha .barra { background: rgba(255, 255, 255, .14); }
.eco-folha .barra-esperado { background: #fff; }
.eco-folha-botoes { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin-top: 14px; }
.eco-folha-botoes .btn { padding: 12px 14px; font-size: 14.5px; }
.eco-fases { position: fixed; left: max(24px, 4vw); right: max(24px, 4vw); bottom: 22px; z-index: 10; display: flex; gap: 14px; align-items: center; }
.eco-fases-barra { flex: 1; display: grid; grid-template-columns: var(--cols); gap: 4px; position: relative; }
.eco-fase { position: relative; overflow: visible !important; height: 38px; border-radius: 10px; padding: 5px 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(8px); overflow: hidden; min-width: 0; }
.eco-fase b, .eco-fase small { overflow: hidden; }
.eco-fase b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eco-fase small { display: block; font-size: 10.5px; color: rgba(200, 220, 255, .6); line-height: 1.1; }
.eco-fase.atual, .eco-fase.proxima { background: linear-gradient(92deg, #2F7BF5, #7C3AED); border-color: rgba(165, 180, 252, .6); box-shadow: 0 10px 30px -10px rgba(99, 102, 241, .8); }
.eco-fase.atual small, .eco-fase.proxima small { color: rgba(235, 240, 255, .85); }
.eco-hoje { position: absolute; z-index: 2; top: -8px; bottom: -8px; width: 2px; background: #F87171; box-shadow: 0 0 10px #F87171; }
.eco-hoje::after { content: attr(data-rot); position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);  font-size: 10.5px; font-weight: 700; color: #FCA5A5; white-space: nowrap; }
.eco-hoje.no-inicio::after { left: 0; transform: none; }
.eco-hoje.no-fim::after { left: auto; right: 0; transform: none; }
.eco-dica { font-size: 12px; color: rgba(200, 220, 255, .6); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.eco-dica .ico { width: 16px; height: 16px; }
@media (min-width: 981px) and (max-height: 900px) {
  .eco-hero h1 { font-size: clamp(26px, 2.7vw, 40px); margin: 10px 0 12px; }
  .eco-hero p { font-size: 14.5px; margin-bottom: 16px; }
  .eco-kpis { margin-bottom: 18px; gap: 8px; }
  .eco-kpi { padding: 9px 12px; }
  .eco-kpi b { font-size: 19px; }
  .btn-eco, .btn-eco-sec { padding: 11px 18px; font-size: 14px; }
}
@media (min-width: 981px) and (max-height: 600px) {
  .eco-hero p, .eco-kpi span { display: none; }
}
@media (max-width: 980px) {
  .pg-eco { overflow: auto; }
  #cena { position: absolute; height: 62vh; top: var(--topo); }
  .eco-rotulos { position: absolute; height: calc(62vh + var(--topo)); }
  .eco-hero { position: relative; left: auto; top: auto; transform: none; width: auto; padding: calc(62vh + var(--topo) + 10px) 18px 24px; }
  .eco-fases { position: relative; left: auto; right: auto; bottom: auto; padding: 0 18px 30px; flex-direction: column; align-items: stretch; }
  .eco-dica { display: none; }
  .pg-eco .topo-escuro { background: linear-gradient(100deg, #061230 0%, #0B2253 60%, #0E3274 100%); box-shadow: 0 6px 24px -10px rgba(0, 0, 0, .6); }
  .eco-fase { height: auto; padding: 6px 8px; }
  .eco-fases-barra { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .eco-fase b { white-space: normal; font-size: 11.5px; line-height: 1.2; }
  .eco-fase .ef-rot, .eco-fase .ef-nome { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .eco-fase small { font-size: 10px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .eco-fases { padding-top: 22px; }
  .eco-no { padding: 4px 10px 4px 4px; gap: 6px; }
  .eco-no .eco-no-ico { width: 24px; height: 24px; }
  .eco-no b { font-size: 11.5px; }
  .eco-no small { display: none; }
  .eco-nucleo img { width: 80px; }
  .eco-card { display: none; }
}

/* ---------- Login ---------- */
.pg-login { min-height: 100vh; overflow: auto; background: radial-gradient(ellipse at 20% 10%, #13306B 0%, transparent 55%), radial-gradient(ellipse at 90% 90%, #3B1D6E 0%, transparent 50%), #040A1C; }
#rede { position: fixed; inset: 0; width: 100%; height: 100%; }
.login-wrap { position: relative; z-index: 1; min-height: 100vh; max-width: 1180px; margin: 0 auto; padding: 40px 24px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; }
.login-logo { width: 180px; display: block; margin-bottom: 36px; }
.login-apresenta h1 { font-size: clamp(32px, 4.4vw, 56px); font-weight: 700; margin: 14px 0 18px; letter-spacing: -.025em; line-height: 1.05; }
.login-apresenta p { color: rgba(226, 236, 255, .78); font-size: 17px; max-width: 520px; margin: 0 0 26px; }
.login-frentes { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.login-frentes li { font-size: 13px; font-weight: 600; padding: 7px 14px 7px 12px; border-radius: 30px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); display: flex; align-items: center; gap: 8px; }
.login-frentes li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.login-card { background: rgba(255, 255, 255, .97); color: var(--texto); border-radius: 24px; padding: 36px 34px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); display: flex; flex-direction: column; gap: 16px; }
.login-card h2 { font-size: 24px; }
.login-card > p { margin: -8px 0 6px; color: var(--texto-2); font-size: 14px; }
.senha-box { position: relative; }
.senha-box input { padding-right: 44px; }
.ver-senha { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; cursor: pointer; font-size: 16px; opacity: .55; padding: 6px; }
.btn-login { padding: 14px; font-size: 15px; border-radius: 12px; background: linear-gradient(92deg, #1062AC, #4F46E5); margin-top: 4px; }
.login-erro { background: #FEF2F2; color: #B42318; border: 1px solid #FBD5D5; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; }
.login-rodape { color: var(--texto-3); font-size: 12px; text-align: center; }
@media (max-width: 900px) { .login-wrap { grid-template-columns: 1fr; gap: 30px; } .login-logo { margin-bottom: 20px; } }