/* OGLSYSTEM — classes, construídas só em cima do token de componente.
   Nenhuma classe aqui pula direto pro valor bruto (--ogl-raw-*) nem pro
   semântico (--ogl-color-*) quando existe um token de componente pro
   mesmo lugar — é assim que a marca troca o visual de uma peça só sem
   mexer nas outras. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&family=Sora:wght@400;500;600;700;800&display=swap');

.ogl-page{
  min-height:100%; background:var(--ogl-fundo-pagina); color:var(--ogl-color-fg);
  font-family:var(--ogl-font-corpo); position:relative; overflow:hidden;
}
/* camada 1: trama de pontos. a marca fala de estrutura, o fundo é estrutura */
.ogl-page::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:var(--ogl-trama-pontos); background-size:var(--ogl-trama-tamanho) var(--ogl-trama-tamanho);
  -webkit-mask-image:radial-gradient(118% 88% at 50% -6%, #000 0%, rgba(0,0,0,.4) 52%, transparent 86%);
          mask-image:radial-gradient(118% 88% at 50% -6%, #000 0%, rgba(0,0,0,.4) 52%, transparent 86%);
}
/* camada 2: grão, tira o aspecto chapado de tela */
.ogl-page::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ogl-page > *{ position:relative; z-index:1; }

/* ---------- texto ---------- */
.ogl-eyebrow{
  font-family:var(--ogl-font-titulo); font-size:var(--ogl-text-legenda); font-weight:700;
  text-transform:uppercase; letter-spacing:var(--ogl-tracking-eyebrow); color:var(--ogl-color-acento-suave);
}
.ogl-title{
  font-family:var(--ogl-font-titulo); font-weight:var(--ogl-peso-titulo);
  line-height:var(--ogl-leading-apertado); letter-spacing:var(--ogl-tracking-titulo); color:var(--ogl-color-fg);
}
.ogl-title-1{ font-size:var(--ogl-text-h1); }
.ogl-title-2{ font-size:var(--ogl-text-h2); }
.ogl-title-3{ font-size:var(--ogl-text-h3); }
.ogl-body{
  font-family:var(--ogl-font-corpo); font-size:var(--ogl-text-corpo); font-weight:var(--ogl-peso-corpo);
  line-height:var(--ogl-leading-corpo); color:var(--ogl-color-fg-suave);
}
/* ênfase: branco em peso 700 dentro do parágrafo cinza. nunca cor, nunca sublinhado */
.ogl-em{ color:var(--ogl-color-fg); font-weight:var(--ogl-peso-enfase); }
.ogl-rule{
  width:96px; height:3px; border-radius:var(--ogl-radius-pill);
  background:linear-gradient(90deg, var(--ogl-color-fg) 0%, var(--ogl-color-acento) 70%, rgba(59,123,255,0) 100%);
}

/* ---------- botão: sempre pílula ---------- */
.ogl-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--ogl-space-2);
  font-family:var(--ogl-font-corpo); font-weight:600; line-height:1;
  border-radius:var(--ogl-btn-radius); border:1px solid transparent;
  cursor:pointer; text-decoration:none;
  transition:transform var(--ogl-duracao-micro) var(--ogl-curva-padrao),
             opacity var(--ogl-duracao-micro) var(--ogl-curva-padrao),
             background var(--ogl-duracao-micro) var(--ogl-curva-padrao);
}
.ogl-btn:active{ transform:translateY(1px); }
.ogl-btn:focus-visible{ outline:2px solid var(--ogl-btn-anel-foco); outline-offset:2px; }
.ogl-btn[disabled]{ opacity:.45; cursor:not-allowed; }
.ogl-btn--sm{ padding:var(--ogl-space-2) var(--ogl-space-4); font-size:var(--ogl-text-legenda); }
.ogl-btn--md{ padding:var(--ogl-space-3) var(--ogl-space-5); font-size:var(--ogl-text-corpo); }
.ogl-btn--lg{ padding:var(--ogl-space-4) var(--ogl-space-6); font-size:var(--ogl-text-lead); }
.ogl-btn--primary{ background:var(--ogl-btn-bg-primario); color:var(--ogl-btn-fg-primario); }
.ogl-btn--primary:hover{ background:var(--ogl-btn-bg-primario-hover); }
.ogl-btn--ghost{ background:transparent; border-color:var(--ogl-btn-borda-secundario); color:var(--ogl-color-fg); }
.ogl-btn--ghost:hover{ background:var(--ogl-btn-bg-secundario-hover); }
.ogl-btn--link{ background:none; padding-inline:0; color:var(--ogl-color-fg); }
.ogl-btn--link:hover{ color:var(--ogl-color-acento-suave); }

/* ---------- pílula de rótulo ---------- */
.ogl-pill{
  display:inline-flex; align-items:center; gap:var(--ogl-space-2);
  padding:var(--ogl-space-1) var(--ogl-space-3);
  border-radius:var(--ogl-radius-pill); border:1px solid var(--ogl-pill-borda);
  background:var(--ogl-pill-bg);
  font-family:var(--ogl-font-titulo); font-size:var(--ogl-text-legenda); font-weight:600;
  letter-spacing:var(--ogl-tracking-rotulo); text-transform:uppercase; color:var(--ogl-pill-fg);
}
.ogl-pill__dot{ width:6px; height:6px; border-radius:var(--ogl-radius-pill); background:var(--ogl-pill-ponto); }

/* ---------- card: gradiente metálico e rim light, nunca cor chapada ---------- */
.ogl-card{
  background:var(--ogl-card-bg);
  border:1px solid var(--ogl-card-borda);
  border-radius:var(--ogl-card-radius);
  padding:var(--ogl-card-padding);
  box-shadow:var(--ogl-card-glow);
  position:relative; overflow:hidden;
  transition:box-shadow var(--ogl-duracao-padrao) var(--ogl-curva-padrao);
}
/* highlight especular no topo: é o que separa vidro de retângulo cinza */
.ogl-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:40%;
  background:var(--ogl-card-highlight);
  pointer-events:none;
}
.ogl-card > *{ position:relative; }

/* ---------- número em destaque ---------- */
.ogl-stat__value{
  font-family:var(--ogl-font-titulo); font-size:var(--ogl-text-h2); font-weight:var(--ogl-peso-titulo);
  letter-spacing:var(--ogl-tracking-titulo); color:var(--ogl-stat-valor-fg);
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;
}
.ogl-stat__label{
  font-family:var(--ogl-font-titulo); font-size:var(--ogl-text-legenda); font-weight:600;
  text-transform:uppercase; letter-spacing:var(--ogl-tracking-rotulo); color:var(--ogl-stat-label-fg);
}
.ogl-stat__delta{ font-size:var(--ogl-text-legenda); color:var(--ogl-stat-delta-fg); }

/* ---------- campo de formulário ---------- */
.ogl-field{ display:flex; flex-direction:column; gap:var(--ogl-space-2); }
.ogl-field__label{
  font-family:var(--ogl-font-titulo); font-size:var(--ogl-text-legenda); font-weight:600;
  text-transform:uppercase; letter-spacing:var(--ogl-tracking-rotulo); color:var(--ogl-color-fg-suave);
}
.ogl-input{
  width:100%; padding:var(--ogl-space-3) var(--ogl-space-4);
  background:var(--ogl-input-bg); border:1px solid var(--ogl-input-borda); border-radius:var(--ogl-input-radius);
  font-family:var(--ogl-font-corpo); font-size:var(--ogl-text-corpo); color:var(--ogl-color-fg);
  transition:border-color var(--ogl-duracao-micro) var(--ogl-curva-padrao),
             box-shadow var(--ogl-duracao-micro) var(--ogl-curva-padrao);
}
.ogl-input::placeholder{ color:var(--ogl-input-placeholder); }
.ogl-input:focus{ outline:none; border-color:var(--ogl-input-borda-foco); box-shadow:var(--ogl-input-glow-foco); }
.ogl-field__hint{ font-size:var(--ogl-text-legenda); color:var(--ogl-color-fg-suave); }

/* ---------- tabela: lista de lead, de toque, de qualquer coisa ---------- */
.ogl-table{ width:100%; border-collapse:collapse; font-family:var(--ogl-font-corpo); }
.ogl-table th{
  text-align:left; padding:var(--ogl-space-3) var(--ogl-space-4);
  font-family:var(--ogl-font-titulo); font-size:var(--ogl-text-legenda); font-weight:600;
  text-transform:uppercase; letter-spacing:var(--ogl-tracking-rotulo); color:var(--ogl-tabela-cabecalho-fg);
  border-bottom:1px solid var(--ogl-tabela-borda);
}
.ogl-table td{
  padding:var(--ogl-space-4); font-size:var(--ogl-text-legenda); color:var(--ogl-color-fg-suave);
  border-bottom:1px solid var(--ogl-tabela-borda-linha);
}
.ogl-table td .ogl-em{ color:var(--ogl-color-fg); }
.ogl-table tbody tr{ transition:background var(--ogl-duracao-micro) var(--ogl-curva-padrao); }
.ogl-table tbody tr:hover{ background:var(--ogl-tabela-hover); }
.ogl-table__num{ text-align:right; font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }

/* ---------- etapa do funil: filete à esquerda, nunca caixa colorida ---------- */
.ogl-stage{
  display:inline-flex; align-items:center; gap:var(--ogl-space-2);
  padding-left:var(--ogl-space-3); border-left:2px solid var(--ogl-stage-borda);
  font-family:var(--ogl-font-titulo); font-size:var(--ogl-text-legenda); font-weight:600;
  text-transform:uppercase; letter-spacing:var(--ogl-tracking-rotulo); color:var(--ogl-stage-fg);
}
.ogl-stage--ativo{ border-left-color:var(--ogl-stage-borda-ativo); color:var(--ogl-stage-fg-ativo); }
.ogl-stage--frio{ opacity:.6; }