.ti{ display:inline-flex; align-items:center; justify-content:center; vertical-align:-0.15em; }
.ti svg{ width:1em; height:1em; }


  :root{
    --bg:#2b2e31;
    --bg-deep:#26282b;
    --card:rgba(38,41,45,0.72);
    --card-2:rgba(46,50,55,0.78);
    --line:rgba(150,170,195,0.30);
    --line-soft:rgba(150,170,195,0.16);
    --azul:#3d7be0;
    --azul-claro:#7ba2e6;
    --azul-link:#8fb6ec;
    --txt:#f3f5f8;
    --txt-2:#c9cdd4;
    --txt-3:#8b97a8;
    --txt-4:#727d8a;
    --field:rgba(18,20,23,0.55);
    --verde-bg:rgba(45,120,80,0.22);
    --verde-bd:rgba(90,200,140,0.40);
    --verde-tx:#7fd6a4;
    --amarelo-bg:rgba(120,100,40,0.22);
    --amarelo-bd:rgba(210,180,90,0.38);
    --amarelo-tx:#e0c074;
    --cinza-bg:rgba(120,130,145,0.16);
    --cinza-tx:#9aa6b6;
    --erro-bg:rgba(180,50,50,0.16);
    --erro-bd:rgba(220,90,90,0.40);
    --erro-tx:#f3a4a4;
    --logo-filtro:none;
    --grade-forte:rgba(120,140,165,0.13);
    --grade-fraca:rgba(110,128,150,0.055);
    --vinheta-1:rgba(43,46,49,0); --vinheta-2:rgba(38,40,43,0.30); --vinheta-3:rgba(30,32,34,0.72);
  }
  [data-tema="claro"]{
    --bg:#eef1f5;
    --bg-deep:#e4e8ee;
    --card:rgba(255,255,255,0.82);
    --card-2:rgba(255,255,255,0.92);
    --line:rgba(60,90,130,0.22);
    --line-soft:rgba(60,90,130,0.12);
    --azul:#2f6bd0;
    --azul-claro:#2f6bd0;
    --azul-link:#2a5fbe;
    --txt:#1d2733;
    --txt-2:#3a4856;
    --txt-3:#67748a;
    --txt-4:#8a96a8;
    --field:rgba(255,255,255,0.9);
    --verde-bg:rgba(40,150,95,0.14);
    --verde-bd:rgba(40,150,95,0.40);
    --verde-tx:#1f8a55;
    --amarelo-bg:rgba(180,140,30,0.16);
    --amarelo-bd:rgba(180,140,30,0.40);
    --amarelo-tx:#9a7510;
    --cinza-bg:rgba(90,105,125,0.12);
    --cinza-tx:#5a677a;
    --erro-bg:rgba(200,60,60,0.12);
    --erro-bd:rgba(200,60,60,0.40);
    --erro-tx:#b23b3b;
    --logo-filtro:invert(1) brightness(0.25);
    --grade-forte:rgba(60,90,130,0.10);
    --grade-fraca:rgba(60,90,130,0.045);
    --vinheta-1:rgba(238,241,245,0); --vinheta-2:rgba(225,230,238,0.30); --vinheta-3:rgba(210,218,228,0.55);
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html,body{ height:100%; }
  img{ max-width:100%; height:auto; }
  body{
    font-family:'Segoe UI', Arial, Helvetica, sans-serif;
    background:var(--bg);
    color:var(--txt);
    min-height:100vh;
    position:relative;
    transition:background .4s ease, color .4s ease;
    display:flex;
    flex-direction:column;
  }

  /* ===== Fundo: blueprint estático + vinheta (idêntico ao portal) ===== */
  #campo{ position:fixed; inset:0; z-index:0; pointer-events:none; }
  #vinheta{
    position:fixed; inset:0; z-index:1; pointer-events:none;
    background:radial-gradient(ellipse at 50% 30%,
        var(--vinheta-1) 0%,
        var(--vinheta-2) 60%,
        var(--vinheta-3) 100%);
    transition:background .4s ease;
  }

  /* ===== Topo discreto: logo + alternar tema (sem "Sair", não há sessão ainda) ===== */
  .topo{
    position:relative; z-index:3;
    display:flex; align-items:center; justify-content:space-between;
    padding:1.4rem 1.4rem 0;
    max-width:1080px; margin:0 auto; width:100%;
  }
  .topo .logo-link{ display:inline-flex; align-items:center; transition:transform .25s, filter .25s; }
  .topo .logo-link:hover{ transform:translateY(-1px); filter:drop-shadow(0 4px 14px rgba(0,0,0,.4)); }
  .topo .logo-link img{ width:148px; height:auto; filter:var(--logo-filtro); transition:filter .4s ease; }
  .btn-tema{
    width:42px; height:40px; display:inline-flex; align-items:center; justify-content:center;
    background:var(--field); color:var(--azul-claro);
    border:0.5px solid var(--line-soft); border-radius:10px; cursor:pointer;
    font-family:inherit; transition:border-color .2s, color .2s, background .2s, transform .15s;
  }
  .btn-tema svg{ width:19px; height:19px; transition:transform .4s ease; }
  .btn-tema:hover{ border-color:rgba(123,162,230,0.55); transform:translateY(-1px); }
  .btn-tema:hover svg{ transform:rotate(40deg); }

  /* ===== Palco central ===== */
  .palco{
    position:relative; z-index:3;
    flex:1;
    display:flex; align-items:center; justify-content:center;
    padding:2.2rem 1.4rem 3rem;
  }
  .moldura{
    width:100%; max-width:920px;
    display:grid; grid-template-columns:1.05fr 1fr; gap:0;
    border:0.5px solid var(--line); border-radius:20px;
    background:var(--card);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    box-shadow:0 30px 60px -25px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.03) inset;
    overflow:hidden;
  }

  /* ===== Painel esquerdo: identidade / "vitrine" (assinatura visual da tela) ===== */
  .vitrine{
    position:relative;
    padding:2.6rem 2.3rem;
    display:flex; flex-direction:column; justify-content:space-between;
    background:
      radial-gradient(circle at 18% 12%, rgba(61,123,224,0.20), transparent 55%),
      linear-gradient(165deg, var(--card-2), var(--bg-deep));
    border-right:0.5px solid var(--line-soft);
    min-height:520px;
  }
  .vitrine-marca{ display:flex; flex-direction:column; gap:.55rem; }
  .vitrine-eyebrow{
    display:inline-flex; align-items:center; gap:7px; width:fit-content;
    font-size:11.5px; letter-spacing:1.6px; text-transform:uppercase; font-weight:700;
    color:var(--azul-claro); background:rgba(61,123,224,0.12);
    border:1px solid rgba(61,123,224,0.30); border-radius:999px; padding:5px 11px 5px 9px;
  }
  .vitrine-eyebrow svg{ width:13px; height:13px; }
  .vitrine h1{ font-size:25px; font-weight:600; line-height:1.32; letter-spacing:.1px; color:var(--txt); margin-top:.3rem; }
  .vitrine p.lead{ color:var(--txt-3); font-size:14.5px; line-height:1.55; margin-top:.7rem; max-width:36ch; }

  /* Mapa pontilhado das etapas — referência direta à timeline do portal,
     reaproveitando o vocabulário visual (bolha + check + linha) já aprovado,
     em formato vertical e compacto, como "prévia" do que o cliente verá depois do login. */
  .vitrine-etapas{ display:flex; flex-direction:column; gap:0; margin-top:1.9rem; }
  .vit-etapa{ display:flex; align-items:flex-start; gap:12px; position:relative; padding-bottom:1.35rem; }
  .vit-etapa:last-child{ padding-bottom:0; }
  .vit-etapa::before{
    content:''; position:absolute; left:10px; top:22px; bottom:0; width:1px;
    background:var(--line-soft);
  }
  .vit-etapa:last-child::before{ display:none; }
  .vit-bolha{
    flex:0 0 auto; width:21px; height:21px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--verde-bg); border:1px solid var(--verde-bd); color:var(--verde-tx);
    position:relative; z-index:1;
  }
  .vit-bolha svg{ width:11px; height:11px; }
  .vit-etapa.atual .vit-bolha{ background:rgba(61,123,224,0.18); border-color:rgba(61,123,224,0.55); color:var(--azul-claro); }
  .vit-etapa-txt{ padding-top:1px; }
  .vit-etapa-txt b{ display:block; font-size:13.5px; font-weight:600; color:var(--txt-2); }
  .vit-etapa-txt span{ display:block; font-size:12px; color:var(--txt-4); margin-top:1px; }

  .vitrine-rodape{ display:flex; align-items:center; gap:9px; color:var(--txt-4); font-size:12px; margin-top:1.6rem; }
  .vitrine-rodape svg{ width:14px; height:14px; flex:0 0 auto; }

  /* ===== Painel direito: formulário ===== */
  .form-painel{ padding:2.6rem 2.5rem; display:flex; flex-direction:column; justify-content:center; }
  .form-cabeca{ margin-bottom:1.6rem; }
  .form-cabeca h2{ font-size:21px; font-weight:600; color:var(--txt); }
  .form-cabeca p{ font-size:13.5px; color:var(--txt-3); margin-top:5px; }

  form{ display:flex; flex-direction:column; gap:1.05rem; }
  .campo-grupo{ display:flex; flex-direction:column; gap:6px; }
  .campo-grupo label{ font-size:12.5px; font-weight:600; color:var(--txt-2); letter-spacing:.2px; }
  .campo-caixa{
    position:relative; display:flex; align-items:center;
    background:var(--field); border:0.5px solid var(--line-soft); border-radius:11px;
    transition:border-color .2s, box-shadow .2s;
  }
  .campo-caixa:focus-within{ border-color:rgba(123,162,230,0.65); box-shadow:0 0 0 3px rgba(61,123,224,0.16); }
  .campo-caixa i.ti{ flex:0 0 auto; padding-left:13px; color:var(--txt-4); font-size:17px; }
  .campo-caixa input{
    flex:1; min-width:0; background:transparent; border:0; outline:0;
    color:var(--txt); font-family:inherit; font-size:14.5px;
    padding:12px 12px 12px 9px;
  } /*teste de campo de caixa*/
  .campo-caixa input::placeholder{ color:var(--txt-4); }
  .campo-caixa.com-acao input{ padding-right:6px; }
  .btn-olho{
    flex:0 0 auto; background:transparent; border:0; cursor:pointer;
    color:var(--txt-4); padding:8px 12px; display:flex; align-items:center;
    transition:color .2s;
  }
  .btn-olho:hover{ color:var(--azul-claro); }
  .btn-olho svg{ width:18px; height:18px; }

  .campo-erro{
    display:none; align-items:center; gap:6px; font-size:12px; color:var(--erro-tx);
    margin-top:-2px;
  }
  .campo-erro.ver{ display:flex; }
  .campo-erro svg{ width:13px; height:13px; flex:0 0 auto; }
  .campo-grupo.invalido .campo-caixa{ border-color:rgba(220,90,90,0.55); }

  .linha-aux{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; margin-top:-.3rem; }
  .lembrar{ display:flex; align-items:center; gap:7px; color:var(--txt-3); cursor:pointer; user-select:none; }
  .lembrar input{ accent-color:var(--azul); width:14px; height:14px; cursor:pointer; }

  .alerta-form{
    display:none; align-items:flex-start; gap:9px;
    background:var(--erro-bg); border:1px solid var(--erro-bd); color:var(--erro-tx);
    border-radius:11px; padding:11px 13px; font-size:13px; line-height:1.45;
  }
  .alerta-form.ver{ display:flex; }
  .alerta-form svg{ width:16px; height:16px; flex:0 0 auto; margin-top:1px; }

  .btn-entrar{
    display:flex; align-items:center; justify-content:center; gap:9px;
    background:var(--azul); color:#fff; border:0; border-radius:11px;
    padding:13px; font-size:14.5px; font-weight:600; font-family:inherit; cursor:pointer;
    transition:background .2s, transform .15s, box-shadow .2s;
    box-shadow:0 10px 24px -10px rgba(61,123,224,.6);
    margin-top:.2rem;
  }
  .btn-entrar:hover{ background:#3672cf; transform:translateY(-1px); }
  .btn-entrar:active{ transform:translateY(0); }
  .btn-entrar:disabled{ opacity:.65; cursor:default; transform:none; }
  .btn-entrar svg{ width:18px; height:18px; }
  .btn-entrar .ti-loader-2 svg{ animation:girar 0.85s linear infinite; }
  @keyframes girar{ to{ transform:rotate(360deg); } }

  .form-rodape{ text-align:center; font-size:13px; color:var(--txt-3); margin-top:1.5rem; }
  .form-rodape a{ color:var(--azul-link); text-decoration:none; font-weight:600; }
  .form-rodape a:hover{ text-decoration:underline; }

  .link-esqueci,
.link-esqueci:visited{
  color:var(--azul-link);
  text-decoration:none;
  font-weight:600;
}

.link-esqueci:hover{
  color:var(--azul-claro);
  text-decoration:underline;
}
  .rodape-pagina{
    position:relative; z-index:3; text-align:center; color:var(--txt-4);
    font-size:11.5px; padding-bottom:1.6rem;
  }
 /* ===== Bolha flutuante de WhatsApp (suporte ITR) ===== */
  .wa-flutuante{
    position:fixed; z-index:5; right:22px; bottom:22px;
    width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#25d366; color:#fff;
    box-shadow:0 12px 28px -8px rgba(0,0,0,.55), 0 0 0 0.5px rgba(255,255,255,.10) inset;
    text-decoration:none;
    transition:transform .18s ease, box-shadow .2s ease, background .2s ease;
  }
  .wa-flutuante:hover{ transform:translateY(-2px) scale(1.04); background:#20bd5a; box-shadow:0 16px 34px -8px rgba(0,0,0,.6); }
  .wa-flutuante:active{ transform:translateY(0) scale(1); }
  .wa-flutuante svg{ width:30px; height:30px; }
  @media (max-width: 760px){
    .wa-flutuante{ right:16px; bottom:16px; width:52px; height:52px; }
    .wa-flutuante svg{ width:27px; height:27px; }
  }

  /* ===== Responsivo: empilha em telas estreitas (mobile) ===== */
  @media (max-width: 760px){
    .topo .logo-link img{ width:124px; }
    .moldura{ grid-template-columns:1fr; max-width:440px; }
    .vitrine{ display:none; }
    .form-painel{ padding:2.1rem 1.6rem; }
    .palco{ padding:1.6rem 1.1rem 2.2rem; }
  }

  /* Acessibilidade: respeita prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  }
  :focus-visible{ outline:2px solid var(--azul-claro); outline-offset:2px; }

/* 3.1.0 — feedback de ativação/redefinição mantendo a linguagem visual original. */
.alerta-form.sucesso{
  display:flex;
  background:var(--verde-bg);
  border-color:var(--verde-bd);
  color:var(--verde-tx);
}
.form-nota-seguranca{
  font-size:12px;
  line-height:1.5;
  color:var(--txt-4);
  margin-top:-.35rem;
}