/* ============================================================
   SOFIA — produto do GRUPO COVENANT
   Mesma identidade do Covenant (app.grupocovenant.com.br): preto quase puro,
   prata/grafite de destaque, superfícies em grafite, letra Inter e números em
   JetBrains Mono, botão principal claro com letra escura, brilho contido.
   Origem: COVENANT/app/tailwind.config.js (cores ink/s1/s2/s3/acc/good/bad/wait),
   src/index.css e src/lib/status-cores.ts (hierarquia de status).
   Só tema escuro: o Covenant também é só escuro (color-scheme: dark).
   ============================================================ */

/* Fontes locais (offline, sem Google Fonts). Corpo e títulos: Inter, a letra do
   Covenant. Se a Inter estiver instalada no aparelho, ela é usada; senão vale a
   fonte do sistema (San Francisco no iPhone/Mac, Segoe no Windows, Roboto no
   Android), que tem o mesmo desenho. Para servir a Inter pelo próprio site,
   coloque fonts/inter-var.woff2 e acrescente o url() abaixo.
   Números e etiquetas: JetBrains Mono (igual ao Covenant). */
@font-face{font-family:'Inter';font-weight:100 900;font-display:swap;
  src:local('Inter Variable'),local('InterVariable'),local('Inter')}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;
  src:url('fonts/jetbrains-500.woff2') format('woff2')}

:root{
  /* ============================================================
     MARCA: a ÚNICA fonte de cor, letra, raio e sombra do produto.
     Todas as telas (landing, nichos, login, painel, /gestao, convite,
     termos, status) leem daqui. Para trocar a marca, mude SÓ este bloco.
     Cores em dois formatos: "-rgb" (os 3 números, para usar com
     transparência: rgba(var(--acc-rgb),.3)) e a cor cheia (var(--acc)).
     Logo, ícone e imagem de compartilhamento ficam em /marca/ (arquivos únicos).
     ============================================================ */
  /* Neutros: branco (texto/brilho) e preto (sombra/máscara) */
  --fg-rgb:255,255,255;  --fg:rgb(var(--fg-rgb));
  --sombra-rgb:0,0,0;    --preto:rgb(var(--sombra-rgb));
  /* Destaque da marca: base, claro (brilho, tinta clara) e escuro (fim de degradê) */
  --acc-rgb:217,224,232;        --acc:rgb(var(--acc-rgb));
  --acc-claro-rgb:242,245,248; --acc-claro:rgb(var(--acc-claro-rgb));
  --acc-escuro-rgb:126,138,153; --acc-escuro:rgb(var(--acc-escuro-rgb));
  /* Segundo tom de apoio (halos, ícones alternativos) */
  --ciano-rgb:154,166,180;      --ciano:rgb(var(--ciano-rgb));
  /* Tinta sobre o destaque (texto em cima do botão principal) */
  --tinta-rgb:5,5,5;         --tinta:rgb(var(--tinta-rgb));
  /* Fundos: página, superfícies (1 = mais escura … 3 = mais clara) */
  --fundo-rgb:5,5,5;   --painel-rgb:21,24,29;
  --bg:#050505; --ink-2:#0b0d10; --panel:#0f1114; --panel-2:#15181d; --panel-3:#1b1f25;
  /* Texto: principal, forte (títulos/realce), apagado e mais apagado */
  --txt-rgb:236,239,243;       --txt:rgb(var(--txt-rgb));
  --txt-forte-rgb:255,255,255; --txt-forte:rgb(var(--txt-forte-rgb));
  --muted:#9AA6B4; --muted-2:#848E9A;
  /* Linhas e bordas */
  --linha-rgb:255,255,255;
  --line:rgba(var(--linha-rgb),.08); --line-2:rgba(var(--linha-rgb),.16);
  /* Estados (iguais em todo o produto): certo, atenção, erro, informação + 2 tons de etiqueta */
  --ok-rgb:31,224,122;       --ok:rgb(var(--ok-rgb));
  --warn-rgb:245,197,66;     --warn:rgb(var(--warn-rgb));   --warn-claro:#F8D77A;
  --bad-rgb:255,61,61;       --bad:rgb(var(--bad-rgb));     --bad-claro:#FF8080; --bad-escuro:#B32D2D;
  --info-rgb:58,111,196;     --info:rgb(var(--info-rgb));   --info-claro:#9CC0F5;
  --violeta-rgb:210,140,255; --violeta-claro:#e0bcff;
  --rosa-rgb:255,140,180;    --rosa-claro:#ffc0d4;
  /* Degradês */
  --grad-neon:linear-gradient(180deg,var(--fg) 0%,var(--acc-claro) 45%,var(--acc) 100%);
  --grad-glass:linear-gradient(158deg,rgba(var(--painel-rgb),.72),rgba(var(--fundo-rgb),.6));
  /* Sombras / brilho. Todo brilho colorido das telas usa --brilho-rgb, e a força
     dele é multiplicada por --brilho (1 = como desenhado, 0 = sem brilho). */
  --brilho-rgb:var(--acc-rgb); --brilho:.35;
  --atmosfera:.2;   /* força dos halos de fundo (0 a 1) */
  --sh-neon:0 0 34px -8px rgba(var(--brilho-rgb),calc(.55*var(--brilho)));
  --sh-card:0 1px 0 rgba(var(--fg-rgb),.05) inset,0 34px 70px -34px rgba(var(--sombra-rgb),.94),0 0 46px -30px rgba(var(--brilho-rgb),calc(.4*var(--brilho)));
  --sh-soft:0 10px 30px -16px rgba(var(--sombra-rgb),.85);
  /* Tipografia */
  --font-d:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-b:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --peso-titulo:600;     /* títulos em seminegrito, como no Covenant */
  --tracking-titulo:-.035em;
  --font-m:'JetBrains Mono',ui-monospace,monospace;
  /* Raios (escala única, do menor ao maior): toda tela usa só estes */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-2xl:28px; --r-pill:999px;
  --radius:var(--r-xl);   /* cartão de vidro */
  --r-btn:var(--r-pill);  /* botões: pílula, como no Covenant */
  --r-campo:var(--r-lg);  /* campos de digitar */
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Apelidos de compatibilidade (nomes antigos ainda usados pelas telas) */
  --neon:var(--acc); --neon-2:var(--acc-claro); --neon-3:var(--acc-escuro); --neon-deep:var(--acc-escuro);
  --teal:var(--ciano); --cyan:var(--ciano);
  --gold:var(--acc); --gold-2:var(--acc-claro); --gold-3:var(--acc-escuro);
  --grad-gold:var(--grad-neon); --amber:var(--acc); --sh-gold:var(--sh-neon);
  --violet:var(--ciano); --plum:var(--panel); --err:var(--bad);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark}
body{
  margin:0;font-family:var(--font-b);color:var(--txt);font-size:15px;line-height:1.5;
  letter-spacing:-.006em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:'cv11','ss01';
  background:radial-gradient(130% 90% at 50% -10%,var(--ink-2) 0%,var(--ink-2) 46%,var(--bg) 100%);
  min-height:100vh;overflow-x:hidden;
}
a{color:inherit;text-decoration:none;transition:color .2s var(--ease)}
/* Foco de teclado visível (acessibilidade) — vale para links, botões, campos e FAQ. */
:focus-visible{outline:2px solid var(--neon);outline-offset:2px;border-radius:var(--r-xs)}

/* ===== Atmosfera (halos prata ao fundo, como o Backdrop do Covenant) ===== */
.atmos,.grain{position:fixed;inset:0;pointer-events:none;z-index:0}
.atmos{inset:-25%;filter:blur(90px);opacity:var(--atmosfera);
  background:
    radial-gradient(38% 40% at 18% 16%, rgba(var(--acc-rgb),.5), transparent 68%),
    radial-gradient(32% 34% at 84% 20%, rgba(var(--ciano-rgb),.32), transparent 70%),
    radial-gradient(46% 46% at 78% 90%, rgba(var(--acc-escuro-rgb),.4), transparent 70%),
    radial-gradient(34% 34% at 26% 92%, rgba(var(--acc-claro-rgb),.22), transparent 72%);
  animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(0,-3%,0) scale(1.06) rotate(1.2deg)}}
.grain{opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ===== Logo "Giro": triângulos girando (vetorial, sempre nítido) =====
   Os triângulos giram no plano (rotação 2D via SVG) e um brilho especular varre
   o vidro. Chave da nitidez: NADA de filter/blur/3D/will-change na marca — isso
   forçava o navegador a rasterizar o SVG e borrava. Vetor puro = nítido. */
.logo3d{width:52px;height:52px;flex:none;position:relative;overflow:hidden;border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(158deg,rgba(var(--acc-rgb),.2),rgba(var(--acc-rgb),.03));
  border:1px solid rgba(var(--acc-claro-rgb),.34);
  box-shadow:0 0 30px -8px rgba(var(--brilho-rgb),calc(.5*var(--brilho))),inset 0 1px 0 rgba(var(--fg-rgb),.2),inset 0 -10px 22px rgba(var(--sombra-rgb),.55);
  transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
/* brilho especular que varre o vidro (sobre a marca, não a borra) */
.logo3d::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 36%,rgba(var(--fg-rgb),.4) 50%,transparent 64%);
  transform:translateX(-130%) skewX(-12deg);animation:logo-sheen 7s linear infinite}
@keyframes logo-sheen{
  0%{transform:translateX(-130%) skewX(-12deg);opacity:0}
  4%{opacity:1}
  18%{opacity:1}
  22%{transform:translateX(130%) skewX(-12deg);opacity:0}
  100%{transform:translateX(130%) skewX(-12deg);opacity:0}}
/* a marca: imagem única (/marca/sofia.svg), já animada por dentro. SEM filter,
   SEM will-change, SEM 3D aqui -> o vetor continua nítido. */
.logomark{position:relative;z-index:1;width:34px;height:34px;display:block}
/* hover: o vidro acende e a marca se aproxima. NÃO mexa em animation-duration
   do giro aqui: trocar a duração de uma animação em andamento faz o navegador
   reescalar o tempo já decorrido, e o giro salta na entrada E na saída do
   mouse. Aceleração de giro só com uma animação nova, não com esse atalho. */
a:hover .logo3d,.logo3d:hover{transform:translateY(-1px) scale(1.05);
  box-shadow:0 0 50px -6px rgba(var(--brilho-rgb),calc(.85*var(--brilho))),inset 0 1px 0 rgba(var(--fg-rgb),.26),inset 0 -10px 22px rgba(var(--sombra-rgb),.5)}
@media (prefers-reduced-motion: reduce){
  .logo3d::after,.atmos{animation:none !important}
  .logo3d{transition:none}
  a:hover .logo3d,.logo3d:hover{transform:none}
}

/* ===== Wordmark ===== */
.wordmark{font-family:var(--font-d);font-weight:var(--peso-titulo);letter-spacing:var(--tracking-titulo);line-height:1;
  background:linear-gradient(100deg,var(--txt-forte) 15%,var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ===== Selo "powered by Covenant" (login, rodapé do painel e da página inicial) =====
   Discreto de propósito: a marca do produto continua sendo a Sofia. */
.powered-linha{display:flex;justify-content:center;margin-top:14px}
.powered{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-m);font-size:10.5px;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);text-decoration:none;padding:6px 4px}
.powered img{width:16px;height:16px;flex:none}
.powered b{font-weight:500;color:var(--muted)}
.powered:hover,.powered:hover b{color:var(--txt)}

/* ===== Botões ===== */
.btn{font:inherit;font-weight:700;line-height:1;cursor:pointer;border:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:var(--r-btn);letter-spacing:.01em;transition:transform .16s cubic-bezier(.2,.7,.2,1),box-shadow .16s,filter .16s}
.btn-gold{background:var(--grad-neon);color:var(--tinta);
  box-shadow:0 1px 0 rgba(var(--fg-rgb),.45) inset,0 -2px 0 rgba(var(--acc-escuro-rgb),.4) inset,0 0 32px -6px rgba(var(--brilho-rgb),calc(.65*var(--brilho))),0 3px 8px rgba(var(--sombra-rgb),.4)}
.btn-gold:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 1px 0 rgba(var(--fg-rgb),.5) inset,0 -2px 0 rgba(var(--acc-escuro-rgb),.4) inset,0 0 44px -6px rgba(var(--brilho-rgb),calc(.85*var(--brilho))),0 4px 10px rgba(var(--sombra-rgb),.4)}
.btn-ghost{background:linear-gradient(180deg,rgba(var(--linha-rgb),.08),rgba(var(--linha-rgb),.02));color:var(--txt);
  border:1px solid var(--line-2);box-shadow:0 1px 0 rgba(var(--fg-rgb),.08) inset,var(--sh-soft)}
.btn-ghost:hover{transform:translateY(-2px);filter:brightness(1.18);border-color:rgba(var(--acc-rgb),.4)}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:9px 16px;font-size:14px;border-radius:var(--r-btn)}

/* ===== Cards de vidro ===== */
.glass{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--grad-glass);
  border:1px solid var(--line);box-shadow:var(--sh-card)}
.glass::before{content:"";position:absolute;top:0;left:22px;right:22px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--acc-claro-rgb),.55),transparent)}

/* ===== Navegação ===== */
.nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:14px 30px;
  background:linear-gradient(180deg,rgba(var(--fundo-rgb),.82),rgba(var(--fundo-rgb),.42));
  border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease),background .3s var(--ease),padding .3s var(--ease)}
.nav.scrolled{padding:11px 30px;background:linear-gradient(180deg,rgba(var(--fundo-rgb),.96),rgba(var(--fundo-rgb),.8));
  box-shadow:0 12px 40px -24px rgba(var(--sombra-rgb),.9),0 1px 0 rgba(var(--brilho-rgb),calc(.14*var(--brilho))) inset}
.nav .brand{transition:transform .25s var(--ease)}
.nav .brand:hover{transform:translateY(-1px)}
.nav .brand{display:flex;align-items:center;gap:12px}
.nav .brand .wordmark{font-size:22px}
.nav .sp{flex:1}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{color:var(--muted);font-weight:500;font-size:14px;transition:color .2s}
.nav-links a:hover{color:var(--txt)}
/* Quem está logado: o menu diz o nome, e não "Entrar". */

/* ===== Ícones SVG autorais ===== */
.ic{width:24px;height:24px;display:inline-block;vertical-align:middle;color:var(--neon)}
.itile{width:52px;height:52px;border-radius:var(--r-lg);display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(158deg,rgba(var(--acc-rgb),.18),rgba(var(--acc-rgb),.04));
  border:1px solid rgba(var(--acc-rgb),.28);
  box-shadow:inset 0 1px 0 rgba(var(--fg-rgb),.14),0 0 24px -10px rgba(var(--brilho-rgb),calc(.7*var(--brilho)))}
.itile .ic{width:26px;height:26px}
.itile.v{background:linear-gradient(158deg,rgba(var(--ciano-rgb),.2),rgba(var(--ciano-rgb),.05));border-color:rgba(var(--ciano-rgb),.32)}
.itile.v .ic{color:var(--teal)}

/* ===== Utils ===== */
.container{position:relative;z-index:2;max-width:1140px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--font-m);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--neon)}
.reveal{opacity:0;transform:translateY(22px);animation:rise .8s cubic-bezier(.2,.75,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}.d4{animation-delay:.32s}.d5{animation-delay:.4s}
h1,h2,h3{font-family:var(--font-d);font-weight:var(--peso-titulo);letter-spacing:var(--tracking-titulo);line-height:1.06;margin:0}

/* ===== Polish: hover, movimento e micro-interações ===== */
/* Cards de vidro reagem ao mouse: sobem, ganham brilho na borda */
.glass{transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease)}
.glass:hover{transform:translateY(-4px);border-color:var(--line-2);
  box-shadow:var(--sh-card),0 26px 60px -30px rgba(var(--sombra-rgb),.9),0 0 40px -22px rgba(var(--brilho-rgb),calc(.5*var(--brilho)))}
/* Tiles de ícone reagem junto com o card pai */
.sci .itile,.feat .itile,.tpl .itile{transition:transform .32s var(--ease),box-shadow .32s var(--ease)}
.glass:hover .itile{transform:translateY(-2px) scale(1.06);
  box-shadow:inset 0 1px 0 rgba(var(--fg-rgb),.18),0 0 30px -8px rgba(var(--brilho-rgb),calc(.85*var(--brilho)))}
/* Nada de acelerar o giro no hover do card: mesmo motivo da regra do logo mais
   acima. Trocar animation-duration com a animação rodando faz o ícone saltar,
   e num grid de cards isso pula a cada card que o mouse cruza. */

/* Links do menu com underline que cresce */
.nav-links a:not(.btn){position:relative}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;border-radius:var(--r-xs);
  background:var(--grad-neon);transition:right .28s var(--ease)}
.nav-links a:not(.btn):hover::after{right:0}

/* Botões: brilho que percorre no hover */
.btn{position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(var(--fg-rgb),.28) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s var(--ease)}
.btn:hover::before{transform:translateX(120%)}

/* Reveal on scroll — elementos sobem suavemente ao entrar na tela */
[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal].d1{transition-delay:.06s}[data-reveal].d2{transition-delay:.12s}
[data-reveal].d3{transition-delay:.18s}[data-reveal].d4{transition-delay:.24s}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .btn::before{display:none}
}

/* ===== Responsivo (celular / tablet) ===== */
@media(max-width:760px){
  .nav{padding:13px 16px;gap:10px}
  .nav .brand .wordmark{font-size:19px}
  .nav-links{gap:16px}
  .container{padding:0 16px}
}
@media(max-width:560px){
  /* Esconde os links de âncora e mantém só o botão principal (Entrar/Painel) */
  .nav-links a:not(.btn){display:none}
  .nav-links{gap:10px}
  .btn{padding:12px 18px}
  .channels{flex-wrap:wrap;gap:12px;font-size:12px}
}