/* ============================================================
   FlyB — identidade visual (gradiente da libélula + toques de IA)
   Carregado por todas as páginas, além do <style> específico de
   cada uma. Não redefine tokens de cor — só adiciona componentes
   novos usados pela identidade aprovada.
   ============================================================ */

:root{
  --iris-1:#2C6E76;
  --iris-2:#4C6FA0;
  --iris-3:#7C6FA8;
  --iris-4:#B97AA0;
  --iris-gradient: linear-gradient(100deg, var(--iris-1) 0%, var(--iris-2) 38%, var(--iris-3) 66%, var(--iris-4) 100%);
}

/* Texto com o gradiente da marca — usar com moderação, só em 1-2 palavras de destaque */
.iris-text{
  background: var(--iris-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Botão/CTA com borda em gradiente — o "toque de IA" no clean visual */
.btn-iris{
  display:inline-block; padding:2px; border-radius:12px;
  background: var(--iris-gradient);
  text-decoration:none;
}
.btn-iris > span{
  display:block; background:var(--surface); border-radius:10px;
  padding:13px 26px; font-weight:600; font-size:.92rem; color:var(--ink);
  font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
  text-decoration:none;
}
.btn-iris:hover > span{ background:var(--surface-alt); }

/* Painel flutuante de leitura de IA — usado na hero da home e reutilizável
   em ferramentas/ como preview do que as calculadoras entregam. */
.ia-panel{
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(6px);
  border:1px solid var(--border);
  border-radius:18px;
  padding:24px;
  box-shadow: 0 24px 48px rgba(20,30,28,0.14);
}
.ia-panel .eyebrow{
  font-family:"IBM Plex Mono", monospace; font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-muted);
  display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
}
.ia-panel .eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--teal); }
.ia-panel h4{
  font-family:"Fraunces", serif; font-weight:600; font-size:1rem; margin:0 0 16px 0; color:var(--ink);
}
.ia-panel .row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; border-bottom:1px solid var(--border); font-size:.82rem;
}
.ia-panel .row:last-child{ border-bottom:none; }
.ia-panel .row .k{ color:var(--ink-muted); }
.ia-panel .row .v{ font-weight:600; }

/* Campo estilizado (raiz + rede neural) atrás da hero da home */
.field-motif{ position:absolute; z-index:0; pointer-events:none; }
.field-motif path, .field-motif circle{ }

/* Agrupa nav + CTA no cabeçalho, mantendo a marca isolada à esquerda */
.nav-right{ display:flex; align-items:center; gap:18px; }
.nav-cta > span{ padding:9px 20px; font-size:.85rem; white-space:nowrap; }

@media (max-width: 860px){
  .ia-panel{ position:static !important; margin-top:24px; width:100% !important; }
}
@media (max-width: 640px){
  .nav-cta > span{ padding:8px 16px; font-size:.8rem; }
}