/* ==========================================================================
   A TELA DE ACESSO — /login, /login_2fa e /forgot_password.

   Esta folha é a tela inteira e não convive com as outras: as telas de
   acesso carregam SÓ ela (nem tokens.css, nem components.css). É de
   propósito. Ela traz os próprios tokens, os próprios campos e os próprios
   botões, e usa nomes curtos e genéricos (.btn, .brand, .lang, .form, .c)
   que colidiriam com os do app se as duas fossem carregadas juntas.

   Ao mexer aqui, mexa nas três telas: o passo 1 (senha), o passo 2 (segundo
   fator) e os passos 3 e 4 (pedir o link e a confirmação) dividem tudo —
   o painel, a vitrine e o rodapé vivem em partials/acesso_head.php e
   partials/acesso_foot.php.

   ESCURO É O PADRÃO, em qualquer aparelho: o :root já nasce escuro e só
   [data-theme="light"] o clareia. Antes o escuro vinha declarado duas vezes
   — uma para a preferência do sistema operacional, outra para a escolha
   manual — e quem tinha o aparelho no claro via um produto diferente. A
   preferência do aparelho diz como o SISTEMA se veste, não este produto.
   Sem JavaScript a tela também abre escura, porque agora é o padrão da folha
   e não um carimbo que chega depois.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   ESCURO É O PADRÃO, em qualquer aparelho: o :root já nasce escuro e só
   [data-theme="light"] o clareia. Antes o escuro vinha declarado duas vezes
   — uma para a preferência do sistema operacional, outra para a escolha
   manual — e quem tinha o aparelho no claro via um produto diferente. A
   preferência do aparelho diz como o SISTEMA se veste, não este produto.
   Sem JavaScript a tela também abre escura, porque agora é o padrão da folha
   e não um carimbo que chega depois.
   -------------------------------------------------------------------------- */
:root{
  color-scheme:dark;
  --bg:#08080a; --panel:#0b0b0d; --field:#131316; --field-focus:#18181c;
  --border:#1d1d21; --border-strong:#27272d;
  --text:#f2f2f4; --text-2:#9a9aa3; --text-3:#6a6a73;
  --accent:#f2f2f4; --accent-text:#0a0a0b;
  --ring:rgba(242,242,244,.14);
  --danger:#ff8a85;
  --photo-a:.42;
  --photo-f:brightness(.5) saturate(.45) contrast(108%);

  --ok:#8ef0b8;
  --photo:url("/assets/img/tower.jpg");
  --ease:cubic-bezier(.16,1,.3,1);
}

:root[data-theme="light"]{
  color-scheme:light;

  --bg:#e7e7e4;
  --panel:#ffffff;
  --field:#f5f5f6;
  --field-focus:#ffffff;
  --border:#e6e6e9;
  --border-strong:#d6d6da;
  --text:#0b0b0c;
  --text-2:#5f5f66;
  --text-3:#8e8e96;
  --accent:#0b0b0c;
  --accent-text:#ffffff;
  --ring:rgba(11,11,12,.10);
  --danger:#b42d2b;

  /* a foto da vitrine: mesma imagem nos dois temas, exposição diferente.
     Para uma foto noturna de verdade, aponte --photo no bloco escuro
     para outro arquivo em assets/. */
  --photo-a:.55;
  --photo-f:brightness(.98) saturate(.82) contrast(102%);
}

@font-face{
  font-family:'Playfair Display';
  src:url('/assets/fonts/playfair-display.woff2') format('woff2');
  font-weight:400 500; font-style:normal; font-display:swap;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:14px; line-height:1.5; color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
button{ font:inherit; color:inherit; }
/* precisa vencer o display das regras de classe (.otp é flex, por exemplo) */
[hidden]{ display:none !important; }

h1{
  margin:0 0 14px;
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-weight:400; font-size:clamp(31px,2.8vw,40px); line-height:1.14;
  letter-spacing:-.016em;
}
.lede{ margin:0 0 clamp(30px,4.6vh,44px); font-size:13.5px; line-height:1.6; color:var(--text-2); }

/* --------------------------------------------------------------------------
   3. Estrutura
   -------------------------------------------------------------------------- */
.page{ height:100%; display:grid; place-items:center;
  padding:clamp(20px,6vh,76px) clamp(20px,4.6vw,88px); }
.shell{
  width:min(1400px,100%); height:100%;
  display:grid; grid-template-columns:minmax(400px,.9fr) 1.1fr;
  background:var(--panel); border:0; border-radius:26px; overflow:hidden;
}
/* no claro o card se separa pelo tom; no escuro precisa de borda e sombra */
:root:not([data-theme="light"]) .shell{
  border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 22px 42px -20px rgba(0,0,0,.7);
}

/* --------------------------------------------------------------------------
   4. Painel de acesso
   -------------------------------------------------------------------------- */
.auth{ position:relative; display:flex; flex-direction:column; min-height:0;
  padding:clamp(26px,3.6vh,46px) clamp(28px,3.4vw,54px); }

.auth-top{ display:flex; align-items:center; gap:14px; }
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.mark{ width:28px; height:28px; border-radius:9px; display:grid; place-items:center;
  background:var(--accent); color:var(--accent-text); }
.mark svg{ width:15px; height:15px; }
.brand b{ font-size:15px; font-weight:500; letter-spacing:-.02em; }
.brand b i{ font-style:normal; font-weight:400; color:var(--text-3); }

.lang{ display:flex; gap:2px; padding:2px; border:1px solid var(--border);
  background:var(--field); border-radius:9px; }
.lang a{ display:inline-flex; align-items:center; text-decoration:none; border-radius:7px;
  padding:4px 9px; font-size:10.5px; font-weight:450; letter-spacing:.05em; color:var(--text-3);
  transition:color .2s ease, background .25s ease; }
.lang a:hover{ color:var(--text-2); }
.lang a[aria-current="true"]{ background:var(--panel); color:var(--text); }
.lang a:focus-visible{ outline:0; box-shadow:0 0 0 3px var(--ring); }

.theme{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  border:1px solid var(--border); background:var(--field); color:var(--text-3); cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background .25s ease; }
.theme:hover{ color:var(--text); border-color:var(--border-strong); }
.theme:focus-visible{ outline:0; box-shadow:0 0 0 4px var(--ring); }
.theme svg{ width:15px; height:15px; }
.theme .sun{ display:none; }
:root:not([data-theme="light"]) .theme .sun{ display:block; }
:root:not([data-theme="light"]) .theme .moon{ display:none; }

.auth-body{ position:relative; flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center; }

.auth-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; font-size:12px; color:var(--text-3); }
.auth-foot a{ color:var(--text-3); text-decoration:none; transition:color .2s ease; }
.auth-foot a:hover{ color:var(--text-2); }
.auth-foot strong{ font-weight:500; }
.auth-foot strong a{ color:var(--text-2); }
.legal{ display:flex; gap:16px; }

/* --------------------------------------------------------------------------
   5. Campos, botões e mensagens
   -------------------------------------------------------------------------- */
.f{ margin-bottom:14px; }
.ctl{ display:flex; align-items:center; height:46px; padding:0 16px;
  border:1px solid var(--border); border-radius:12px; background:var(--field);
  transition:background .25s ease, border-color .25s ease, transform .25s ease; }
/* Sem halo ao focar. O campo em foco se anuncia pelo fundo mais claro, pela
   borda um tom acima e pelo 1px de subida — o anel de 4px lia como uma
   segunda borda grossa aparecendo no clique. A borda continua com 1px, e
   nenhuma medida do campo muda entre parado e em foco. */
.ctl:focus-within{ background:var(--field-focus); border-color:var(--border-strong);
  transform:translateY(-1px); }
.ctl.bad{ border-color:color-mix(in srgb, var(--danger) 52%, var(--border)); }
.ctl .ic{ flex:none; margin-right:12px; display:grid; place-items:center; color:var(--text-3); }
.ctl .ic svg{ width:16px; height:16px; }
.ctl input{ flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent;
  color:var(--text); font:inherit; font-size:14px; }
.ctl input::placeholder{ color:var(--text-3); }
.ctl input:-webkit-autofill{ -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--field-focus) inset; caret-color:var(--text); }

.eye{ flex:none; margin-left:8px; width:30px; height:30px; display:grid; place-items:center;
  border:0; background:transparent; border-radius:8px; color:var(--text-3); cursor:pointer;
  transition:color .2s ease; }
.eye:hover{ color:var(--text); }
.eye:focus-visible{ outline:0; box-shadow:0 0 0 3px var(--ring); }
.eye svg{ width:16px; height:16px; }
.eye .shut{ display:none; }
.eye.on .open{ display:none; }
.eye.on .shut{ display:block; }

.keep{ display:inline-flex; align-items:center; gap:9px; font-size:12.5px;
  color:var(--text-2); cursor:pointer; user-select:none; }
.keep input{ position:absolute; opacity:0; width:0; height:0; }
.box{ width:15px; height:15px; border-radius:5px; border:1px solid var(--border-strong);
  background:var(--field); display:grid; place-items:center;
  transition:background .15s ease, border-color .15s ease; }
.box svg{ width:9px; height:9px; opacity:0; color:var(--accent-text); }
.keep input:checked + .box{ background:var(--accent); border-color:var(--accent); }
.keep input:checked + .box svg{ opacity:1; }
.keep input:focus-visible + .box{ box-shadow:0 0 0 4px var(--ring); }

.btn{ position:relative; overflow:hidden;
  width:100%; height:46px; border:0; border-radius:12px; cursor:pointer;
  background:var(--accent); color:var(--accent-text);
  font-size:14px; font-weight:500; letter-spacing:-.005em;
  transition:opacity .15s ease, transform .12s ease; }
.btn:hover{ opacity:.9; }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:0; box-shadow:0 0 0 4px var(--ring); }
/* o do passo 4 e um <a>: sem place-items o texto nao centraliza sozinho */
.btn.ghost{ display:grid; place-items:center; text-decoration:none;
  background:var(--field); color:var(--text); border:1px solid var(--border); }
.btn.ghost:hover{ background:var(--field-focus); border-color:var(--border-strong); opacity:1; }

/* rótulo -> spinner. Não há estado "pronto": quando o servidor responde,
   a resposta é a próxima página. */
.btn .lbl{ display:inline-block; transition:opacity .22s ease, transform .3s var(--ease); }
.btn .spin{ position:absolute; left:calc(50% - 9px); top:calc(50% - 9px);
  width:18px; height:18px; border-radius:50%; box-sizing:border-box;
  border:2px solid rgba(127,127,127,.3); border-top-color:currentColor;
  opacity:0; transition:opacity .2s ease; animation:spin .68s linear infinite; }
.btn.loading{ cursor:default; }
.btn.loading .lbl{ opacity:0; transform:translateY(-8px); }
.btn.loading .spin{ opacity:1; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.hint{ margin-top:clamp(18px,2.6vh,24px); text-align:center; font-size:12.5px; }
.hint a{ color:var(--text-3); text-decoration:none; transition:color .2s ease; }
.hint a:hover{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }

.msg{ margin:0 2px; font-size:11.5px; line-height:1.45; color:var(--danger);
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .3s ease, opacity .25s ease, margin .3s ease; }
.msg.on{ max-height:38px; opacity:1; margin:9px 2px 0; }

.shake{ animation:shake .4s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake{
  12%,88%{ transform:translateX(-2px) } 24%,76%{ transform:translateX(3px) }
  36%,60%{ transform:translateX(-5px) } 48%,72%{ transform:translateX(5px) } }

/* faixa de resposta do servidor */
.alerta{ display:flex; align-items:flex-start; gap:10px; margin:0 0 20px;
  padding:11px 13px; border-radius:11px; font-size:12.5px; line-height:1.5;
  color:var(--text);
  border:1px solid color-mix(in srgb, var(--danger) 40%, var(--border));
  background:color-mix(in srgb, var(--danger) 9%, transparent); }
.alerta svg{ width:15px; height:15px; flex:none; margin-top:1px; color:var(--danger); }
.alerta .ic-aviso{ display:none; }
.alerta.aviso{ border-color:var(--border-strong); background:var(--field); }
.alerta.aviso .ic-erro{ display:none; }
.alerta.aviso .ic-aviso{ display:block; color:var(--text-3); }

/* --------------------------------------------------------------------------
   6. Os quatro passos
   -------------------------------------------------------------------------- */
.form{ width:min(320px,100%); }

.back{ display:inline-flex; align-items:center; gap:7px; margin:0 0 22px -8px;
  padding:6px 11px 6px 8px; border:0; border-radius:9px; background:transparent;
  color:var(--text-3); font-size:12.5px; text-decoration:none; cursor:pointer;
  transition:color .2s ease, background .2s ease; }
.back:hover{ color:var(--text); background:var(--field); }
.back:focus-visible{ outline:0; box-shadow:0 0 0 4px var(--ring); }
.back svg{ width:15px; height:15px; }

/* segundo fator: as seis casas */
.otp{ display:flex; gap:8px; }
.otp input{ flex:1; width:100%; min-width:0; height:56px; padding:0;
  text-align:center; font:inherit; font-size:19px; font-weight:450; color:var(--text);
  border:1px solid var(--border); border-radius:12px; background:var(--field); outline:0;
  transition:background .15s ease, border-color .15s ease,
             box-shadow .3s var(--ease), transform .18s ease; }
.otp input:nth-child(3){ margin-right:10px; }   /* respiro no meio, 3 + 3 */
.otp input.on{ background:var(--field-focus); border-color:var(--border-strong); }
.otp input:focus{ background:var(--field-focus); border-color:var(--border-strong);
  box-shadow:0 0 0 4px var(--ring); transform:translateY(-1px); }
.otp.bad input{ border-color:color-mix(in srgb, var(--danger) 52%, var(--border)); }
.otp.bad input:focus{ box-shadow:0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent); }

/* segundo fator: o código de recuperação, XXXX-XXXX */
.rec .ctl{ height:56px; }
.rec input{ font-size:16px; letter-spacing:.16em; text-transform:uppercase;
  font-variant-numeric:tabular-nums; }
.rec input::placeholder{ letter-spacing:.16em; text-transform:none; }
.rec.bad .ctl{ border-color:color-mix(in srgb, var(--danger) 52%, var(--border)); }
.step-2fa .keep{ margin:20px 0 22px; }

/* link enviado */
.sent{ display:grid; place-items:center; width:44px; height:44px; border-radius:14px;
  margin-bottom:22px; background:color-mix(in srgb, var(--text) 8%, transparent);
  color:var(--text-2); }
.sent svg{ width:21px; height:21px; }
.step-sent .lede{ margin-bottom:28px; }

/* --------------------------------------------------------------------------
   7. Vitrine
   Base chapada, sem degradê de CSS: raio grande de sombra ou gradiente suave
   sobre preto quase puro vira faixa de 8 bits. A foto entra por cima e o
   granulado dissolve o que sobrar.
   -------------------------------------------------------------------------- */
.showcase{
  --panel:#0a0a0d; --panel-2:#0e0e12; --field:#141418; --border:#282830;
  --border-strong:#36363f; --text:#eeeef1; --text-2:#93939d; --text-3:#63636c;
  --green:#7fdcaa;
  /* a perda é opaca de propósito: translúcida, a sobreposição de 1px com a
     barra verde clareava aquele pixel e virava um risco no pé da coluna. */
  --lost:#393a3d;
  position:relative; overflow:hidden; color:var(--text); background:#030305;
}
.showcase::before{ content:""; position:absolute; inset:0; z-index:0;
  background:var(--photo) 52% 50%/cover no-repeat;
  filter:var(--photo-f); opacity:var(--photo-a); }
.grain{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-size:160px 160px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }

.lyr{ position:absolute; z-index:2; will-change:transform;
  transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.bob{ animation:bob var(--bd,12s) ease-in-out infinite alternate; }
@keyframes bob{ to{ transform:translateY(calc(var(--amp,7px) * -1)) } }

/* a janela do app */
.glass{ position:relative; border-radius:18px; padding:9px;
  background:rgba(11,11,14,.76); border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 16px 26px -14px rgba(0,0,0,.85);
  transition:box-shadow .5s ease, border-color .5s ease; }
.shot{ border-radius:12px; overflow:hidden; background:var(--panel); border:1px solid var(--border); }
.app{ display:grid; grid-template-columns:142px 1fr; font-size:12px; }
/* fica atrás de tudo: tom chapado no lugar de linha divisória */
.bar{ grid-column:1/-1; display:flex; align-items:center; gap:11px; height:38px; padding:0 13px;
  background:rgba(255,255,255,.035); }
.dots{ display:flex; gap:6px } .dots i{ width:8px; height:8px; border-radius:50%; background:var(--border-strong) }
.omni{ flex:1; max-width:214px; height:22px; border-radius:7px; border:1px solid transparent;
  background:rgba(255,255,255,.05); color:var(--text-3); font-size:10px;
  display:flex; align-items:center; padding:0 9px; white-space:nowrap; overflow:hidden }
.av{ margin-left:auto; width:22px; height:22px; border-radius:50%; border:1px solid transparent;
  background:linear-gradient(140deg,var(--border-strong),var(--field));
  display:grid; place-items:center; font-size:9px; font-weight:500; color:var(--text-2) }
.side{ background:rgba(255,255,255,.022); padding:14px 9px;
  display:flex; flex-direction:column; gap:4px; min-height:250px }
.nav{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
  color:var(--text-3); font-size:11.5px; white-space:nowrap }
.nav i{ width:12px; height:12px; border-radius:4px; border:1.2px solid currentColor; opacity:.32; flex:none }
.nav.on{ background:rgba(255,255,255,.045); color:var(--text-2); font-weight:450 }
.main{ padding:18px 17px }
.mh h3{ margin:0; font-size:14px; font-weight:500; letter-spacing:-.02em }
.mh p{ margin:4px 0 16px; font-size:10.5px; color:var(--text-3) }
.kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px }
.kpi{ border-radius:10px; padding:12px 13px; background:rgba(255,255,255,.04) }
.kpi span{ font-size:10px; color:var(--text-3); white-space:nowrap }
.kpi b{ display:block; margin-top:4px; font-size:16px; font-weight:450; letter-spacing:-.03em }
.kpi u{ text-decoration:none; display:block; margin-top:4px; font-size:9.5px; color:var(--green) }
.wcard{ border-radius:10px; background:rgba(255,255,255,.03); padding:14px }
.wch{ display:flex; align-items:baseline; gap:8px; margin-bottom:13px }
.wch b{ font-size:11.5px; font-weight:450 } .wch span{ font-size:10px; color:var(--text-3) }
.bars{ display:flex; align-items:flex-end; gap:7px; height:72px }
.bars i{ flex:1; border-radius:4px 4px 0 0; background:rgba(255,255,255,.10) }
.bars i.gr{ background:rgba(127,220,170,.7) }

/* os cards flutuantes */
.c{ border-radius:15px; padding:16px 17px;
  background:rgba(10,10,13,.87); border:1px solid rgba(255,255,255,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 18px -10px rgba(0,0,0,.8);
  backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%); }
.c h4{ margin:0; font-size:11.5px; font-weight:450; letter-spacing:-.01em }
.c .sub{ margin-top:3px; font-size:9.5px; color:var(--text-3) }
.c .cap{ font-size:10.5px; color:var(--text-3) }
.c .val{ margin-top:5px; font-size:18px; font-weight:450; letter-spacing:-.035em }
.c .up{ font-size:10.5px; color:var(--green) }
.c .spark{ display:block; width:100%; height:38px; margin-top:13px }

/* funil */
.fun{ margin-top:13px; display:flex; flex-direction:column; gap:7px }
.fun .st{ position:relative; display:flex; align-items:center; gap:8px;
  padding:6px 9px; border-radius:7px; overflow:hidden; font-size:10.5px; color:var(--text-2) }
.fun .st::before{ content:""; position:absolute; inset:0; width:var(--w,100%);
  background:rgba(255,255,255,.055); border-radius:7px }
.fun .st span,.fun .st b,.fun .st u{ position:relative }
.fun .st b{ margin-left:auto; font-size:11px; font-weight:450; color:var(--text) }
.fun .st u{ text-decoration:none; width:34px; text-align:right; font-size:9.5px; color:var(--green) }

/* ganhos e perdidos — ganho em cima, perda embaixo */
.wl{ margin-top:14px; display:flex; align-items:stretch; gap:6px; height:62px }
.wl i{ position:relative; flex:1 }
.wl i::before{ content:""; position:absolute; left:4px; right:4px; top:var(--t); height:var(--w);
  border-radius:2px 2px 0 0; background:var(--ok) }
.wl i::after{ content:""; position:absolute; left:4px; right:4px;
  top:calc(var(--t) + var(--w) - 1px); height:calc(var(--l) + 1px);
  border-radius:0 0 2px 2px; background:var(--lost) }
.legend{ margin-top:12px; display:flex; gap:16px; font-size:10px; color:var(--text-3) }
.legend span{ display:inline-flex; align-items:center; gap:6px }
.legend i{ width:7px; height:7px; border-radius:2px; background:var(--lost) }
.legend i.g{ background:var(--ok) }
.legend b{ font-weight:450; color:var(--text-2) }

/* atividade */
.log{ margin-top:13px; display:flex; flex-direction:column; gap:2px }
.log .e{ display:flex; align-items:center; gap:10px; padding:7px 0;
  border-top:1px solid rgba(255,255,255,.05); font-size:10.5px; color:var(--text-2) }
.log .e:first-child{ border-top:0 }
.log .e .ic{ width:22px; height:22px; flex:none; border-radius:7px; display:grid; place-items:center;
  background:rgba(255,255,255,.05); color:var(--text-3) }
.log .e .ic svg{ width:11px; height:11px }
.log .e .ic.done{ background:rgba(127,220,170,.12); color:var(--green) }
.log .e b{ font-weight:450; color:var(--text) }
.log .e time{ margin-left:auto; font-size:9.5px; color:var(--text-3); white-space:nowrap }

/* desempenho da equipe */
.slope{ margin-top:12px }
.slope svg{ display:block; width:100%; height:86px; overflow:visible }
.slope text{ font-size:8px; fill:#63636c }
.slope .nm{ font-size:8.5px; fill:#93939d }
.names{ margin-top:11px; display:flex; gap:13px; font-size:9.5px; color:var(--text-3) }
.names span{ display:inline-flex; align-items:center; gap:5px }
.names i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.35) }
.names i.a{ background:rgba(127,220,170,.75) }

/* o card de texto */
.txt{ position:relative; border-radius:18px; padding:22px 23px 20px;
  background:rgba(13,13,17,.91); border:1px solid rgba(255,255,255,.085);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 12px 20px -11px rgba(0,0,0,.82);
  backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%) }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
  font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--text-3) }
.eyebrow::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--green) }
.txt h2{ margin:0 0 9px; font-size:clamp(16px,1.4vw,18.5px); line-height:1.45;
  font-weight:400; letter-spacing:-.018em; color:var(--text) }
.txt p{ margin:0; font-size:12.5px; line-height:1.6; color:var(--text-2) }

/* --------------------------------------------------------------------------
   8. Movimento
   -------------------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(20px) scale(.985); filter:blur(16px);
  transition:opacity .95s var(--ease) var(--d,0s),
             transform .95s var(--ease) var(--d,0s),
             filter .95s var(--ease) var(--d,0s); }
.reveal.in{ opacity:1; transform:none; filter:none; }

/* Quem tem transição própria precisa repetir a de entrada aqui, com os dois
   nomes de classe: `transition` é uma propriedade só, e a última regra de
   mesma especificidade apaga a anterior inteira. */
.reveal.theme{ transition:opacity .95s var(--ease) var(--d,0s),
                          transform .95s var(--ease) var(--d,0s),
                          filter .95s var(--ease) var(--d,0s),
                          color .2s ease, border-color .2s ease, background .25s ease; }
/* a janela é a maior peça: entra de mais longe e um pouco depois */
.reveal.glass{ transform:translateY(38px) scale(.962); filter:blur(20px);
  transition:opacity 1.05s var(--ease) var(--d,0s),
             transform 1.05s var(--ease) var(--d,0s),
             filter 1.05s var(--ease) var(--d,0s),
             box-shadow .5s ease, border-color .5s ease; }
.reveal.glass.in{ transform:none; filter:none; }

.bars i{ transform:scaleY(0); transform-origin:bottom; transition:transform .9s var(--ease); }
body.ready .bars i{ transform:scaleY(1); }
.bars i:nth-child(1){ transition-delay:.55s } .bars i:nth-child(2){ transition-delay:.62s }
.bars i:nth-child(3){ transition-delay:.69s } .bars i:nth-child(4){ transition-delay:.76s }
.bars i:nth-child(5){ transition-delay:.83s } .bars i:nth-child(6){ transition-delay:.9s }
.bars i:nth-child(7){ transition-delay:.97s }

.fun .st::before{ transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease); }
body.ready .fun .st::before{ transform:scaleX(1); }
.fun .st:nth-child(1)::before{ transition-delay:.5s } .fun .st:nth-child(2)::before{ transition-delay:.6s }
.fun .st:nth-child(3)::before{ transition-delay:.7s } .fun .st:nth-child(4)::before{ transition-delay:.8s }

.wl i::before{ transform:scaleY(0); transform-origin:bottom; transition:transform .8s var(--ease) }
.wl i::after{ transform:scaleY(0); transform-origin:top; transition:transform .8s var(--ease) }
body.ready .wl i::before, body.ready .wl i::after{ transform:scaleY(1); }
.wl i:nth-child(1)::before,.wl i:nth-child(1)::after{ transition-delay:.6s }
.wl i:nth-child(2)::before,.wl i:nth-child(2)::after{ transition-delay:.66s }
.wl i:nth-child(3)::before,.wl i:nth-child(3)::after{ transition-delay:.72s }
.wl i:nth-child(4)::before,.wl i:nth-child(4)::after{ transition-delay:.78s }
.wl i:nth-child(5)::before,.wl i:nth-child(5)::after{ transition-delay:.84s }
.wl i:nth-child(6)::before,.wl i:nth-child(6)::after{ transition-delay:.9s }
.wl i:nth-child(7)::before,.wl i:nth-child(7)::after{ transition-delay:.96s }

.draw{ transition:stroke-dashoffset 1.6s cubic-bezier(.22,1,.3,1) var(--dd,.5s) }
.spark path[fill]{ opacity:0; transition:opacity 1.2s ease var(--dd,.9s) }
body.ready .spark path[fill]{ opacity:1 }

/* microinterações só depois que a entrada terminou */
body.settled .c, body.settled .txt{
  transition:transform .45s var(--ease), border-color .45s ease, box-shadow .45s ease; }
body.settled .btn{ transition:opacity .15s ease, transform .25s var(--ease), box-shadow .25s ease; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px -14px rgba(0,0,0,.55); }
.lyr:hover .c, .lyr:hover .txt{ transform:translateY(-3px);
  border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 16px 26px -12px rgba(0,0,0,.85); }
.lyr:hover .glass{ border-color:rgba(255,255,255,.12) }

/* Troca de tema. Quem carimba .tema-trocando no <html> é o assets/js/tema.js,
   o mesmo botão do resto do sistema. Entre os temas o que mais muda é a
   exposição da foto — opacity e filter num pseudo-elemento, fora do alcance
   do `*`, por isso a segunda regra. */
.tema-trocando, .tema-trocando *{
  transition:background-color .5s ease, color .5s ease, border-color .5s ease,
             box-shadow .5s ease, opacity .5s ease, filter .5s ease !important; }
.tema-trocando .showcase::before{
  transition:opacity .5s ease, filter .5s ease !important; }

/* --------------------------------------------------------------------------
   9. Telas menores e movimento reduzido
   -------------------------------------------------------------------------- */
@media (max-width:1120px){
  .page{ padding:0; }
  .shell{ grid-template-columns:1fr; }
  .showcase{ display:none; }
  /* precisa repetir o seletor do tema escuro para vencer a borda e a sombra */
  :root .shell, :root:not([data-theme="light"]) .shell{ border:0; border-radius:0; box-shadow:none; }
}
@media (max-width:520px){
  .auth{ padding:26px 22px 28px; }
}
@media (max-height:680px){
  .lede{ margin-bottom:26px; }
  .txt{ padding:17px 18px 16px; }
}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.glass{ opacity:1; transform:none; filter:none; transition:none }
  .bob,.bars i,.fun .st::before,.wl i::before,.wl i::after{ animation:none; transform:none; transition:none }
  .lyr,.form,.draw{ transition:none }
  .lyr:hover .c,.lyr:hover .txt{ transform:none }
  .shake{ animation:none }
  .btn .spin{ animation:none }
}

/* --------------------------------------------------------------------------
   10. Toque
   O Safari do iPhone DÁ ZOOM ao focar um campo cuja letra é menor que 16px, e
   não há como desligar isso sem travar o pinça-para-ampliar da página inteira
   — que é o que `maximum-scale=1` faz, e que tira a ampliação de quem precisa
   dela. A saída é a letra: 16px no campo, e a tela para de pular.
   Vale para o dedo, e não para a largura: um iPad em paisagem tem 1024px e
   pula do mesmo jeito.
   -------------------------------------------------------------------------- */
@media (pointer:coarse){
  .ctl input, .otp input, .rec input{ font-size:16px; }
  /* os links do rodapé e o seletor de idioma são alvo de dedo */
  .auth-foot a, .legal a, .hint a, .lang a, .back{
    display:inline-flex; align-items:center; min-height:36px; }
  .theme, .eye{ min-width:40px; min-height:40px; }
  /* o campo cresce junto para a letra não encostar na borda */
  .ctl{ height:50px; }
  .otp input{ height:60px; }
}