/* ==========================================================================
   SmartCartório — landing (smartcartorio.com.br)
   Paleta, tipografia e espaçamento vindos do Design System SmartCartório
   (wwwroot/brand/tokens.css). Este arquivo redeclara os tokens como var(--*)
   curtas para uso na página e monta os componentes da landing.

   REGRA DA MARCA: o lima (#AEDF45 / #5C7A18 em fundo claro) é EXCLUSIVO do que
   a IA produziu e ainda espera validação da serventia. Nunca superfície de
   página, nunca botão comum.
   ========================================================================== */

:root{
  /* Fonte da verdade da paleta: wwwroot/brand/tokens.css (--sc-*), carregado ANTES
     deste arquivo no App.razor. Aqui só damos nomes curtos aos tokens do design
     system. O hex depois da vírgula é fallback: se tokens.css não carregar, a
     página continua na cor certa. Mexer em cor de marca é em tokens.css, não aqui. */

  /* marca */
  --navy:      var(--sc-navy, #012F8D);
  --navy-deep: #012269;                      /* derivado: hover do botão primário */
  --blue:      var(--sc-blue, #007FFF);
  --sky:       var(--sc-blue-light, #7FC0FF);
  --lime:      var(--sc-lime, #AEDF45);      /* saída de IA sobre fundo ESCURO */
  --lime-ink:  var(--sc-lime-dark, #5C7A18); /* saída de IA sobre fundo CLARO  */

  /* neutros */
  --white: var(--sc-n0, #FFFFFF);
  --paper: var(--sc-n1, #F7F8FA);
  --mist:  var(--sc-n2, #EDF0F5);
  --line:  var(--sc-n3, #D8DEE9);
  --muted: var(--sc-n4, #8A93A6);
  --slate: var(--sc-n5, #3A4358);
  --ink:   var(--sc-n6, #0B1220);

  /* semânticos */
  --ok:   var(--sc-registrado, #2E8B57);
  --warn: var(--sc-exigencia, #C77700);
  --err:  var(--sc-impeditivo, #B3261E);

  /* ---- derivados (NÃO são cores novas da marca) ----
     Tons calculados a partir da paleta fechada para o que a landing precisa e o
     design system não fixa: superfícies e textos sobre o quase-preto #0B1220 e as
     versões "soft/line" dos semânticos. Trocar aqui muda a página inteira.
     Exceções: --lime-field e --lime-line vêm do design system — são o fundo e a
     borda do campo "PREENCHIDO PELA IA" (#FCFEF6 / #C7E389). */
  --blue-soft:#E8F2FF; --blue-line:#BFDCFF;
  --lime-soft:#F4FBE4; --lime-line:#C7E389;
  --lime-field:#FCFEF6;   /* fundo do campo da IA     */
  --ink-2:#131C2E;        /* superfície sobre o ink   */
  --ink-line:#24304A;     /* borda sobre o ink        */
  --ink-3:#39425A;        /* elemento inativo no ink  */
  --on-ink:#C3CCDD;       /* texto forte sobre o ink  */
  --on-ink-2:#B6C0D3;     /* texto corpo sobre o ink  */
  --on-ink-3:#A9B3C8;     /* texto de apoio           */
  --on-ink-mute:#8894AC;  /* texto mono/secundário    */
  --on-ink-label:#7E8BA5; /* rótulo mono sobre o ink  */
  --ok-soft:#E7F3EC; --ok-line:#BCDFC9;
  --warn-soft:#FCF1DF; --warn-line:#EAD3A8;

  /* tipografia */
  --display: var(--sc-font-display, "Archivo", system-ui, sans-serif);
  --sans:    var(--sc-font-sans, "IBM Plex Sans", system-ui, sans-serif);
  --mono:    var(--sc-font-mono, "IBM Plex Mono", ui-monospace, monospace);

  /* forma */
  --r-field:   var(--sc-radius-field, 4px);
  --r-card:    var(--sc-radius-card, 8px);
  --r-overlay: var(--sc-radius-overlay, 12px);
  --r-pill:    999px;
  --shadow:    var(--sc-shadow-md, 0 1px 2px rgba(11,18,32,.05), 0 8px 24px rgba(11,18,32,.07));
  --shadow-lg: 0 28px 64px -22px rgba(1,47,141,.30);
  --maxw:1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:700; letter-spacing:-.03em; line-height:1.08; margin:0; }
h1:focus{ outline:none; }
p{ margin:0; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--blue); display:inline-block;
}
.lead{ color:var(--slate); font-size:18px; }
.acctext{ color:var(--navy); }
section{ padding:88px 0; }
.sec-head{ max-width:680px; }
.sec-head h2{ font-size:40px; margin-top:12px; }
.sec-head .lead{ margin-top:16px; }

/* --------------------------------------------------------------- logotipo */
.sc-lockup{
  display:inline-flex; align-items:center; font-family:var(--display);
  font-weight:700; letter-spacing:-.035em; line-height:1.15; color:var(--ink); white-space:nowrap;
}
.sc-lockup__cart{ font-weight:400; color:var(--navy); }
.sc-lockup__ianr{
  display:inline-flex; flex-direction:column; align-items:flex-start; align-self:center;
  line-height:1; gap:.06em; flex:none;
  border-left:2px solid var(--lime-ink); padding-left:.14em; margin-left:.16em;
}
.sc-lockup__ia,.sc-lockup__nr{
  font-family:var(--display); font-size:max(7.5px,.3em); font-weight:700; letter-spacing:.06em; line-height:1;
}
.sc-lockup__ia{ color:var(--lime-ink); }
.sc-lockup__nr{ color:var(--navy); }
.sc-lockup.is-dark{ color:#fff; }
.sc-lockup.is-dark .sc-lockup__cart{ color:var(--sky); }
.sc-lockup.is-dark .sc-lockup__ianr{ border-left-color:var(--lime); }
.sc-lockup.is-dark .sc-lockup__ia{ color:var(--lime); }
.sc-lockup.is-dark .sc-lockup__nr{ color:var(--sky); }

/* A marca reduzida (quadrado navy com SC e IA lima abaixo — sem NR, que não é legível
   a 16-32 px) vive em wwwroot/brand/favicon.svg: é o ícone de aba e do menu recolhido.
   Na página usamos só o logotipo completo, para não repetir o sinal IA duas vezes. */

/* robô do agente Sele IA — SEMPRE 20 a 28 px (regra fechada do cliente) */
.robo{ height:24px; width:auto; object-fit:contain; align-self:flex-start; flex:none; }
.robo.sm{ height:20px; }

/* ---------------------------------------------------------------- botões */
.btn{
  font-family:var(--sans); font-weight:600; font-size:15px; border-radius:var(--r-pill);
  padding:12px 22px; border:1.5px solid var(--navy); background:transparent; color:var(--navy);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background .16s, color .16s, border-color .16s, transform .16s; white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn.p{ background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:0 10px 22px -10px rgba(1,47,141,.7); }
.btn.p:hover{ background:var(--navy-deep); border-color:var(--navy-deep); }
.btn.p:disabled{ opacity:.55; cursor:default; transform:none; }
.btn.ghost{ border-color:var(--line); color:var(--ink); }
.btn.ghost:hover{ border-color:var(--navy); color:var(--navy); }
.btn.light{ background:#fff; border-color:#fff; color:var(--navy); }
.btn.light:hover{ background:var(--blue-soft); border-color:var(--blue-soft); }
.btn.sm{ padding:9px 16px; font-size:13.5px; }

/* --------------------------------------------------- barra: em desenvolvimento */
.devbar{ background:var(--ink); color:#fff; font-size:13px; }
.devbar-row{ display:flex; align-items:center; gap:10px; padding:9px 24px; flex-wrap:wrap; }
/* Azul "em processamento", nao lima: "em desenvolvimento" nao e saida de IA. */
.devbar .devdot{ width:8px; height:8px; border-radius:50%; background:var(--blue); animation:pulse-blue 2s infinite; flex:none; }
.devbar a{ color:#fff; font-weight:600; border-bottom:1px solid rgba(255,255,255,.4); }
.devbar a:hover{ border-color:#fff; }
@keyframes pulse-lime{
  0%{ box-shadow:0 0 0 0 rgba(174,223,69,.55);} 70%{ box-shadow:0 0 0 7px rgba(174,223,69,0);} 100%{ box-shadow:0 0 0 0 rgba(174,223,69,0);}
}
@keyframes pulse-blue{
  0%{ box-shadow:0 0 0 0 rgba(0,127,255,.5);} 70%{ box-shadow:0 0 0 6px rgba(0,127,255,0);} 100%{ box-shadow:0 0 0 0 rgba(0,127,255,0);}
}

/* ------------------------------------------------------------------- nav */
.nav{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .2s;
}
.nav.scrolled{ border-color:var(--line); }
.nav .row{ display:flex; align-items:center; gap:16px; height:70px; }
.nav .brand{ display:flex; align-items:center; gap:10px; }
/* Idem: azul de "em processamento". O lima fica reservado ao que a IA produziu. */
.devpill{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy); background:var(--blue-soft); border:1px solid var(--blue-line);
  border-radius:var(--r-pill); padding:3px 10px; white-space:nowrap;
}
.nav .links{ display:flex; gap:24px; margin-left:12px; }
.nav .links a{ font-size:14.5px; color:var(--slate); font-weight:500; }
.nav .links a:hover{ color:var(--navy); }
.nav .sp{ flex:1; }
.cta-curto{ display:none; }

/* ------------------------------------------------------------------ hero */
.hero{ padding:64px 0 44px; background:linear-gradient(180deg, var(--white) 0%, var(--paper) 100%); }
.hero .grid{ display:grid; grid-template-columns:1.02fr 1fr; gap:52px; align-items:center; }
.hero h1{ font-size:56px; margin:18px 0 0; }
.hero .lead{ font-size:19px; margin:20px 0 0; max-width:540px; }
.hero .acts{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.hero .note{ margin-top:16px; font-size:13px; color:var(--slate); display:flex; align-items:center; gap:8px; }
.hero .note .dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none; }

/* competências no hero */
.comp-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; }
.comp-chip{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--navy); background:var(--blue-soft); border:1px solid var(--blue-line);
  border-radius:var(--r-pill); padding:5px 12px;
}

/* ------------------------------------------------- moldura do produto (mock) */
.frame{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-overlay);
  box-shadow:var(--shadow-lg); overflow:hidden; min-width:0;
}
.frame .bar{
  height:42px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px;
  padding:0 14px; background:var(--paper);
}
.frame .bar .dots{ display:flex; gap:6px; }
.frame .bar .dots i{ width:9px; height:9px; border-radius:50%; background:var(--line); display:block; }
.frame .bar .ftab{ margin-left:6px; font-family:var(--mono); font-size:10.5px; color:var(--muted); }
.frame .bar .fpill{
  margin-left:auto; font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; color:var(--lime-ink);
  background:var(--lime-soft); border:1px solid var(--lime-line); border-radius:var(--r-pill);
  padding:3px 9px; display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.frame .bar .fpill .pulse{ width:6px; height:6px; border-radius:50%; background:var(--lime); flex:none; animation:pulse-lime 1.9s infinite; }
.frame .stage{ padding:12px; background:var(--paper); display:flex; flex-direction:column; gap:10px; }

.fila{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.fila .fh{
  display:grid; grid-template-columns:66px 1fr 74px 62px; gap:8px; padding:7px 10px;
  background:var(--mist); font-family:var(--mono); font-size:8.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
.fila .fr{
  display:grid; grid-template-columns:66px 1fr 74px 62px; gap:8px; padding:8px 10px;
  border-top:1px solid var(--line); align-items:center; font-size:10px;
}
.fila .fr .prot{ font-family:var(--mono); font-size:9.5px; color:var(--slate); }
.fila .fr .ato{ font-weight:600; color:var(--ink); }
.fila .fr .comp{ display:block; font-size:8.5px; font-weight:400; color:var(--muted); }
.est{
  font-family:var(--mono); font-size:8px; letter-spacing:.06em; border-radius:var(--r-pill);
  padding:2px 7px; white-space:nowrap; display:inline-block;
}
.est.ia{ background:var(--lime-soft); color:var(--lime-ink); border:1px solid var(--lime-line); }
.est.ok{ background:var(--ok-soft); color:var(--ok); border:1px solid var(--ok-line); }
.est.ex{ background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn-line); }
.conf{ font-family:var(--mono); font-size:9px; color:var(--slate); text-align:right; }

.agente{
  background:var(--ink); border-radius:var(--r-card); padding:11px 12px; display:flex; flex-direction:column; gap:8px;
}
.agente .ah{ display:flex; align-items:center; gap:8px; }
.agente .ah span{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--sky); }
.agente .passo{ display:flex; align-items:center; gap:8px; font-size:9.5px; color:var(--on-ink); }
.agente .passo i{ width:7px; height:7px; border-radius:2px; flex:none; display:block; }
.agente .passo i.done{ background:var(--lime); }
.agente .passo i.run{ background:var(--blue); animation:pulse-blue 1.9s infinite; }
.agente .passo i.wait{ background:var(--ink-3); }

/* ------------------------------------------------------ faixa de conformidade */
.trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--white); }
.trust .row{ display:flex; align-items:center; gap:24px; padding:20px 0; flex-wrap:wrap; }
.trust .lbl{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); }
.trust .chips{ display:flex; gap:10px 22px; flex-wrap:wrap; flex:1; }
.tchip{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--slate); }
.tchip .d{ width:8px; height:8px; border-radius:50%; background:var(--blue); flex:none; }

/* ---------------------------------------------------------- competências */
.comp-grid{ margin-top:48px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.comp-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-overlay);
  padding:26px 24px; display:flex; flex-direction:column; gap:14px; transition:box-shadow .16s, border-color .16s, transform .16s;
}
.comp-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--blue-line); }
.comp-card .sigla{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--navy); border:1px solid var(--blue-line); background:var(--blue-soft);
  border-radius:var(--r-field); padding:4px 8px; align-self:flex-start;
}
.comp-card h3{ font-size:21px; }
.comp-card p{ color:var(--slate); font-size:14.5px; }
.comp-card .nome-oficial{ font-family:var(--mono); font-size:11.5px; line-height:1.5; color:var(--slate); margin-top:-6px; }
.comp-card ul{ list-style:none; margin:auto 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.comp-card li{ display:flex; gap:9px; font-size:13.5px; color:var(--slate); }
.comp-card li::before{ content:""; width:6px; height:6px; border-radius:2px; background:var(--blue); margin-top:7px; flex:none; }

/* ----------------------------------------------------------- como funciona */
.steps{ margin-top:52px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; }
.steps::before{
  content:""; position:absolute; top:26px; left:9%; right:9%; height:2px;
  background:repeating-linear-gradient(90deg, var(--blue-line) 0 10px, transparent 10px 18px);
}
.step{ position:relative; }
.step .num{
  width:54px; height:54px; border-radius:50%; background:var(--white); border:2px solid var(--navy);
  color:var(--navy); display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:20px; box-shadow:var(--shadow);
}
.step.ia .num{ border-color:var(--lime-ink); color:var(--lime-ink); background:var(--lime-soft); }
.step h3{ font-size:18px; margin-top:18px; }
.step p{ color:var(--slate); font-size:14.5px; margin-top:8px; }
.step .tag{
  font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--navy); margin-top:10px; display:block;
}
.step.ia .tag{ color:var(--lime-ink); }

/* ------------------------------------------------------------- faixa da IA */
.band{
  background:var(--ink); color:#fff; border-radius:20px; padding:64px; position:relative; overflow:hidden;
}
.band::after{
  content:""; position:absolute; right:-140px; top:-140px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,127,255,.20), transparent 68%); pointer-events:none;
}
.band .eyebrow{ color:var(--sky); }
.band h2{ font-size:42px; max-width:780px; margin-top:14px; color:#fff; }
.band h2 .acctext{ color:var(--sky); }
.band > p{ color:var(--on-ink-2); font-size:18px; max-width:620px; margin-top:18px; position:relative; }
.pillars{ margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:860px; position:relative; }
.pillar{ border-top:2px solid rgba(255,255,255,.16); padding-top:16px; }
.pillar .pt{ font-family:var(--display); font-weight:600; font-size:17px; }
.pillar .pd{ color:var(--on-ink-3); font-size:13.5px; margin-top:6px; }

/* cartão "preenchido pela IA" — padrão do design system */
.ia-demo{
  margin-top:40px; background:var(--ink-2); border:1px solid var(--ink-line); border-radius:var(--r-overlay);
  padding:20px; display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; position:relative; max-width:860px;
}
.ia-demo .campo{ flex:1 1 260px; min-width:0; display:flex; flex-direction:column; gap:6px; }
.ia-demo .campo .rot{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--on-ink-label); }
.ia-demo .campo .valor{
  background:var(--lime-field); border:1px solid var(--lime-line); border-radius:var(--r-field);
  padding:9px 11px; color:var(--ink); font-size:14px; font-weight:600;
}
.ia-demo .badge-ia{
  font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--lime-ink); background:var(--lime-soft); border:1px solid var(--lime-line);
  border-radius:var(--r-field); padding:3px 7px; align-self:flex-start;
}
.ia-demo .origem{ flex:1 1 240px; min-width:0; display:flex; flex-direction:column; gap:8px; }
.ia-demo .origem .oh{ display:flex; align-items:center; gap:8px; }
.ia-demo .origem .oh span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--sky); }
.ia-demo .origem .oi{ font-size:12.5px; color:var(--on-ink-2); display:flex; gap:8px; }
.ia-demo .origem .oi b{ color:#fff; font-weight:600; }
.ia-demo .acoes{ flex:1 1 100%; display:flex; gap:10px; flex-wrap:wrap; padding-top:4px; }

/* ---------------------------------------------------------------- recursos */
.feat-grid{ margin-top:48px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feat{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-overlay);
  padding:24px; transition:transform .16s, box-shadow .16s, border-color .16s;
}
.feat:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--blue-line); }
.feat .ic{
  width:44px; height:44px; border-radius:var(--r-card); background:var(--blue-soft); color:var(--navy);
  display:flex; align-items:center; justify-content:center;
}
.feat .ic svg{ width:23px; height:23px; }
.feat.lima .ic{ background:var(--lime-soft); color:var(--lime-ink); }
.feat h3{ font-size:18px; margin-top:16px; }
.feat p{ color:var(--slate); font-size:14.5px; margin-top:8px; }

/* ------------------------------------------------------------ comunicações */
.com-grid{ margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.com-col{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-overlay); padding:22px;
  display:flex; flex-direction:column; gap:12px;
}
.com-col h3{ font-size:17px; }
.com-col .sigla{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--navy); align-self:flex-start;
}
.com-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
.com-col li{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--slate);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-field); padding:4px 8px;
}
.com-nota{
  margin-top:22px; display:flex; gap:12px; align-items:flex-start;
  border-left:3px solid var(--blue); background:var(--blue-soft); border-radius:0 var(--r-card) var(--r-card) 0;
  padding:14px 16px; font-size:14px; color:var(--slate);
}
.com-nota b{ color:var(--ink); font-weight:600; }

/* --------------------------------------------------------------- segurança */
.sec-split{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
.sec-split h2{ font-size:36px; margin-top:12px; }
.sec-list{ margin-top:24px; display:flex; flex-direction:column; gap:16px; }
.sec-list .li{ display:flex; gap:13px; align-items:flex-start; }
.sec-list .li .ck{
  width:26px; height:26px; border-radius:var(--r-card); background:var(--blue-soft); color:var(--navy);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.sec-list .li .ck svg{ width:14px; height:14px; }
.sec-list .li .lt b{ font-weight:600; display:block; }
.sec-list .li .lt p{ color:var(--slate); font-size:14px; margin-top:3px; }

.trilha{
  background:var(--ink); border-radius:var(--r-overlay); padding:24px; display:flex; flex-direction:column; gap:10px;
}
.trilha .th{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--sky); }
.trilha .ev{
  display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-top:1px solid rgba(255,255,255,.09);
}
.trilha .ev .qd{ width:8px; height:8px; border-radius:2px; margin-top:6px; flex:none; }
.trilha .ev .qd.ia{ background:var(--lime); }
.trilha .ev .qd.hum{ background:var(--sky); }
.trilha .ev .tx{ min-width:0; }
.trilha .ev .tx b{ display:block; font-size:13px; color:#fff; font-weight:600; }
.trilha .ev .tx span{ font-family:var(--mono); font-size:10.5px; color:var(--on-ink-mute); word-break:break-all; }

/* --------------------------------------------------------------- interesse */
.interesse{ background:linear-gradient(180deg, var(--white), var(--paper)); }
.interesse-grid{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.interesse-copy h2{ font-size:40px; margin-top:12px; }
.interesse-copy .lead{ margin-top:16px; max-width:470px; }
.interesse-bullets{ list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:12px; }
.interesse-bullets li{ display:flex; align-items:center; gap:11px; font-weight:500; color:var(--slate); }
.interesse-bullets .b-dot{ width:8px; height:8px; border-radius:2px; background:var(--blue); flex:none; }
.interesse-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-overlay);
  box-shadow:var(--shadow-lg); padding:28px; min-width:0;
}

/* ------------------------------------------------------------- formulário */
.sc-form{ display:flex; flex-direction:column; gap:14px; }
.sc-form .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sc-form .grid-cidade{ display:grid; grid-template-columns:1fr 88px; gap:14px; }
.sc-form .field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.sc-form label{ font-size:13px; font-weight:600; color:var(--ink); }
.sc-form input, .sc-form select, .sc-form textarea{
  font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--line); border-radius:var(--r-field); padding:11px 12px;
  flex:1 1 0; min-width:0; width:100%; transition:border-color .14s, box-shadow .14s, background .14s;
}
.sc-form textarea{ resize:vertical; min-height:72px; }
.sc-form input:focus, .sc-form select:focus, .sc-form textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); background:var(--white);
}
.sc-form input.invalid, .sc-form select.invalid, .sc-form textarea.invalid{ border-color:var(--err); }
.sc-form .btn{ margin-top:4px; }
.sc-form .form-nota{ font-size:11.5px; color:var(--slate); text-align:center; }
.sc-form .form-erro{ color:var(--err); font-size:13px; font-weight:600; }
.validation-message{ color:var(--err); font-size:12px; }

/* seleção de competências */
.comp-pick{ display:flex; flex-direction:column; gap:8px; }
.comp-pick > span{ font-size:13px; font-weight:600; color:var(--ink); }
.comp-pick .opts{ display:flex; gap:8px; flex-wrap:wrap; }
.comp-opt{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:1.5px solid var(--line); border-radius:var(--r-pill); padding:7px 13px;
  font-size:13px; font-weight:500; color:var(--slate); background:var(--paper); transition:.14s;
}
.comp-opt:hover{ border-color:var(--blue-line); }
.comp-opt input{ width:15px; height:15px; flex:none; margin:0; accent-color:var(--navy); }
.comp-opt.on{ border-color:var(--navy); background:var(--blue-soft); color:var(--navy); font-weight:600; }

/* sucesso */
.sc-form--ok{ text-align:center; align-items:center; gap:12px; padding:12px 4px; }
.sc-form--ok .okmark{
  width:58px; height:58px; border-radius:50%; background:var(--ok-soft); color:var(--ok);
  display:flex; align-items:center; justify-content:center;
}
.sc-form--ok .okmark svg{ width:28px; height:28px; }
.sc-form--ok h3{ font-size:23px; }
.sc-form--ok p{ color:var(--slate); font-size:15px; max-width:380px; }

/* ------------------------------------------------------------------ rodapé */
footer{ border-top:1px solid var(--line); padding:52px 0 36px; background:var(--white); }
footer .frow{ display:flex; gap:40px; justify-content:space-between; flex-wrap:wrap; }
footer .fbrand{ max-width:300px; }
footer .tagline{ color:var(--slate); font-size:13.5px; margin-top:12px; }
footer .assinatura{ display:flex; flex-direction:column; gap:8px; margin-top:18px; }
footer .assinatura span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); }
footer .assinatura img{ height:24px; width:auto; object-fit:contain; align-self:flex-start; }
footer .cols{ display:flex; gap:52px; flex-wrap:wrap; }
footer .col h4{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate); margin:0 0 12px; font-weight:500;
}
footer .col a{ display:block; font-size:14px; color:var(--slate); margin-bottom:9px; }
footer .col a:hover{ color:var(--navy); }
footer .legal{
  margin-top:38px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:var(--slate);
}

/* --------------------------------------------------------------- erro 404 */
.erro-404{ padding:120px 24px; text-align:center; }
.erro-404 h1{ font-size:42px; margin-top:14px; }
.erro-404 .lead{ margin:14px auto 26px; max-width:420px; }

/* --------------------------------------------------------------- erro geral */
.erro-app{ padding:96px 24px; max-width:760px; }
.erro-app h1{ font-size:38px; margin-top:12px; }
.erro-app p{ color:var(--slate); margin-top:14px; }
.erro-app code{ font-family:var(--mono); font-size:13px; background:var(--mist); border-radius:var(--r-field); padding:2px 6px; }
.blazor-error-boundary{ background:var(--err); padding:1rem; color:#fff; }
.blazor-error-boundary::after{ content:"Ocorreu um erro."; }

/* ------------------------------------------------------------- responsivo */
@media(max-width:1000px){
  .comp-grid, .feat-grid, .com-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .steps::before{ display:none; }
}
@media(max-width:880px){
  section{ padding:64px 0; }
  .nav .links{ display:none; }
  /* a mesma informacao ja esta na barra preta acima — evita estourar a largura do cabecalho */
  .nav .devpill{ display:none; }
  .hero .grid, .sec-split, .interesse-grid{ grid-template-columns:1fr; }
  .hero{ padding:44px 0 32px; }
  .hero h1{ font-size:38px; }
  .sec-head h2, .interesse-copy h2, .sec-split h2{ font-size:29px; }
  .band{ padding:40px 24px; border-radius:var(--r-overlay); }
  .band h2{ font-size:29px; }
  .pillars{ grid-template-columns:1fr; }
}
@media(max-width:640px){
  .comp-grid, .feat-grid, .com-grid, .steps{ grid-template-columns:1fr; }
  .sc-form .grid2{ grid-template-columns:1fr; }
  .wrap{ padding:0 18px; }
  .cta-full{ display:none; }
  .cta-curto{ display:inline; }
  .nav .row{ gap:10px; }
  .devbar-row{ padding:9px 18px; }
  .hero h1{ font-size:32px; }
  .interesse-card{ padding:20px; }
  .fila .fh, .fila .fr{ grid-template-columns:56px 1fr 66px; }
  .fila .conf{ display:none; }
}