/* ---------- Páginas internas (cadastro, Área do Cliente, privacidade): fundo Órbita, barra já sólida ---------- */
.pagina{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100svh - var(--rodape-h,0px));padding:calc(var(--header-h) + clamp(32px,6vh,64px)) clamp(18px,5vw,96px) clamp(48px,8vh,96px);color:#e9f6f5;
  background:radial-gradient(50% 50% at 12% 20%,var(--c1),transparent 70%),radial-gradient(60% 60% at 88% 85%,var(--c2),transparent 70%),linear-gradient(180deg,var(--c0),var(--escuro))}
/* Tons: cadastro puxa para o verde (igual ao Trabalhe conosco), Área do Cliente para o turquesa, privacidade para o cinza */
.cadastro{--c0:#071c17;--c1:rgba(145,187,41,.18);--c2:rgba(145,165,96,.16);--brilho:rgba(145,187,41,.12)}
.entrar{--c1:rgba(36,167,161,.16);--c2:rgba(36,167,161,.28);--brilho:rgba(36,167,161,.2)}
.privacidade{--c0:#0a1a1d;--c1:rgba(88,88,90,.3);--c2:rgba(36,167,161,.14);--brilho:rgba(243,243,243,.05)}
.pagina .cabeca{max-width:860px;margin:0 0 clamp(24px,4vh,40px)}
.pagina .cabeca h1{margin:0;font:800 clamp(32px,3.6vw,54px)/1.05 var(--fonte);letter-spacing:-.02em;color:#fff;text-shadow:none}
.pagina .cabeca h1 em{font-style:normal;background:linear-gradient(100deg,var(--turquesa-luz),var(--oliva-luz));-webkit-background-clip:text;background-clip:text;color:transparent}
.pagina .nota{font-size:14px;color:rgba(233,246,245,.7)}
.pagina p a,.pagina li a,.pagina label a{color:#5fd3c9;text-decoration:underline;text-underline-offset:3px}

/* Vidro leitoso (mesmo dos cards das Soluções), sem a flutuação */
.vidro{border-radius:20px;padding:clamp(20px,3vw,36px);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06) 45%,rgba(255,255,255,.04));
  backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 2px 0 rgba(255,255,255,.35),0 22px 40px -18px rgba(0,0,0,.5)}

/* ---------- Formulários ---------- */
.campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin:0;padding:0;border:0}
.campos legend{grid-column:1/-1;float:left;margin-bottom:4px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--oliva-luz)}
.campos label{display:grid;gap:6px;font-size:14px;font-weight:600;color:rgba(233,246,245,.85)}
.campos input{width:100%;min-height:46px;padding:10px 14px;border:0;border-radius:12px;font:500 16px var(--fonte);color:#fff;
  background:rgba(2,14,18,.55);box-shadow:inset 0 0 0 1px rgba(95,211,201,.35);transition:box-shadow .2s}
.campos input:focus{outline:0;box-shadow:inset 0 0 0 2px #24a7a1}
.envio{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:24px}
.orcar:disabled{opacity:.5;cursor:not-allowed;filter:none;border:0}

/* ---------- Cadastro: tipos em pílulas no topo, um bloco por tipo ---------- */
.tipos{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.pagina .tipos a{display:block;padding:9px 18px;border-radius:999px;font-size:15px;font-weight:600;color:#e9f6f5;text-decoration:none;
  background:rgba(6,32,37,.92);box-shadow:inset 0 0 0 1px rgba(95,211,201,.35);transition:box-shadow .2s}
.pagina .tipos a:hover{box-shadow:inset 0 0 0 1px rgba(181,223,69,.8)}
.pagina .tipos a[aria-current]{background:linear-gradient(90deg,#1c8f96,#24a7a1);box-shadow:none}
.form-tipo+.form-tipo{margin-top:24px}
.form-tipo h2{margin:0 0 6px;font:700 24px/1.2 var(--fonte);color:#fff}
.form-tipo>p{margin:0 0 22px;color:rgba(233,246,245,.8)}

/* ---------- Área do Cliente: entrada centralizada ---------- */
.entrar{display:grid;justify-items:center;align-content:center}
.entrar .vidro{width:min(440px,100%)}
.entrar .cabeca{margin:0 0 20px;text-align:center}
.entrar .campos{grid-template-columns:minmax(0,1fr)}
.entrar .orcar{width:100%;justify-content:center}
.entrar .nota{margin:16px 0 0;text-align:center}

/* ---------- Painel da Área do Cliente: um painel por tipo de conta, em quadros de vidro ---------- */
.painel{--c1:rgba(36,167,161,.16);--c2:rgba(145,187,41,.14);--brilho:rgba(36,167,161,.18)}
.por-tipo>h2{margin:0 0 6px;font:700 24px/1.2 var(--fonte);color:#fff}
.por-tipo>p{margin:0 0 22px;color:rgba(233,246,245,.8)}
.quadros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.quadro{display:grid;align-content:start;gap:12px;padding:22px 24px}
.quadro.largo{grid-column:1/-1}
.quadro h3{margin:0;font:700 17px/1.3 var(--fonte);color:#fff}
.quadro p{margin:0}
.quadro .vazio{font-size:15px;color:rgba(233,246,245,.7)}
.quadro .orcar{justify-self:start;height:40px;padding:0 18px;font-size:14px;background:rgba(36,167,161,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.itens{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.itens li{padding:5px 12px;border-radius:999px;font-size:14px;font-weight:600;box-shadow:inset 0 0 0 1px rgba(95,211,201,.4)}
/* Etapas da situação: bolinha + nome, ligadas por uma linha; a primeira acesa só de exemplo */
.etapas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 0;counter-reset:etapa}
.etapas li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:rgba(233,246,245,.6)}
.etapas li::before{counter-increment:etapa;content:counter(etapa);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:13px;box-shadow:inset 0 0 0 1px rgba(95,211,201,.45)}
.etapas li:not(:last-child){padding-right:clamp(12px,3vw,40px);background:linear-gradient(90deg,transparent calc(100% - clamp(12px,3vw,40px) + 8px),rgba(95,211,201,.35) 0,rgba(95,211,201,.35) calc(100% - 8px),transparent 0) 0 50%/100% 1px no-repeat}
.etapas li:first-child{color:#fff}
.etapas li:first-child::before{color:#062229;background:linear-gradient(135deg,#5fd3c9,#91bb29);box-shadow:none}

/* ---------- Privacidade: texto corrido ---------- */
.texto{max-width:820px;line-height:1.7}
.texto h2{margin:32px 0 8px;font:700 20px/1.3 var(--fonte);color:#fff}
.texto p,.texto li{color:rgba(233,246,245,.85)}
.texto ul{padding-left:20px}

@media (max-width:900px){
  .quadros{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .campos{grid-template-columns:minmax(0,1fr)}
}
