/* ==========================================================================
   BRIFT — camada de marca
   ==========================================================================

   Fonte: artefato "BRIFT — Kit de Marca" (v1.0, nov/2026), seções 02 a 06.
   Carregada em base.html DEPOIS de site.css e app.css, para os tokens daqui
   valerem no site inteiro sem reescrever as duas folhas antigas de uma vez.

   Paleta do kit (nomes da marca → uso):
     Tinta       #01121C  base escura, texto sobre claro
     Papel       #F6F3EE  base clara, fundo de leitura
     Brasa       #FF5A1F  acento de ação (CTA, ponto do "i", destaque).
                          NUNCA texto sobre Papel/branco: 2,8:1, reprova.
                          Sobre Tinta passa (6,1:1).
     Menta       #5FFAD5  realce de interface sobre Tinta (14,6:1)
     Verde-água  #02C2AD  gradiente do símbolo, séries de gráfico
     Petróleo    #026A76  profundidade; é o verde que passa como TEXTO
                          sobre claro (≈5,9:1 sobre Papel)
   Proporção de referência: Tinta/Papel 70%, tons de apoio 20%, Brasa 10%.

   Os nomes antigos das variáveis (--navy-*, --blue-*, --gray-*) ficam: são
   usados em centenas de regras. Só os VALORES passam para a paleta BRIFT.
   A família "blue" (que já era verde desde a identidade anterior) vira a
   escala Petróleo → Menta: --blue-600 é a cor de link/ação sobre fundo
   claro, por isso é Petróleo, e não Verde-água (que reprova como texto).
   ========================================================================== */

:root{
  /* Nomes da marca — use estes em regra nova. */
  --tinta:#01121C;
  --tinta-2:#0A2230;      /* superfície elevada sobre Tinta (cards) */
  --tinta-linha:#1B2E39;  /* fio e borda sobre Tinta (kit: grade 50 px) */
  --papel:#F6F3EE;
  --papel-linha:#D9D4CB;  /* borda sobre Papel (kit) */
  --brasa:#FF5A1F;
  --brasa-escura:#E04A12; /* hover do CTA */
  --menta:#5FFAD5;
  --verde-agua:#02C2AD;
  --petroleo:#026A76;
  --ambar:#F2B01E;        /* funcional: atenção (só interface) */
  --risco:#C62828;        /* funcional: erro e risco (só interface) */
  --texto-suave-escuro:#9FB3BC; /* texto secundário sobre Tinta (kit) */
  --texto-suave-claro:#4A5A63;  /* texto secundário sobre Papel (kit) */

  /* Escala escura antiga → Tinta. */
  --navy-950:#01121C;
  --navy-900:#0A2230;
  --navy-800:#1B2E39;
  --navy-700:#4A5A63;

  /* Família "blue" (verde) → Petróleo/Verde-água/Menta. */
  --blue-700:#01535C;
  --blue-600:#026A76;
  --blue-500:#02C2AD;
  --blue-300:#5FFAD5;
  --blue-100:#D2F6EC;
  --blue-50:#EBFAF5;
  --orange-solid:#02C2AD;
  --amber:#026A76;

  /* Neutros: puxados para a temperatura da marca (Papel é quente, Tinta é
     azul-petróleo). Os degraus 500+ seguem passando 4,5:1 sobre branco. */
  --gray-900:#01121C;
  --gray-800:#1B2E39;
  --gray-700:#4A5A63;
  --gray-600:#55666F;
  --gray-500:#5F717B;
  --gray-400:#9FB3BC;
  --gray-300:#C3CFD4;
  --gray-200:#E3DED5;
  --gray-100:#EFEBE4;
  --gray-50:#F6F3EE;
  --line:#D9D4CB;
  --taupe:#5F717B;

  /* Tipografia do kit: Archivo para decidir, Plex Sans para ler, Plex Mono
     para dado e etiqueta. --serif é o nome que h1–h4 usam (site.css). */
  --serif:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sans:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --fw-heading:700;
  --fw-heading-strong:800;
  --ls-heading:-0.012em;
  --lh-body:1.6;

  --shadow-sm:0 1px 2px rgba(1,18,28,0.06), 0 1px 1px rgba(1,18,28,0.04);
  --shadow-md:0 8px 24px rgba(1,18,28,0.10);
  --shadow-lg:0 20px 48px rgba(1,18,28,0.18);
}

::selection{background:var(--menta); color:var(--tinta);}

/* --------------------------------------------------------------------------
   NAVEGAÇÃO (todas as páginas)
   A pílula continua de vidro escuro; sai o brilho esmeralda animado (o kit
   não usa glow) e o CTA passa para Brasa com texto Tinta (6,1:1).
   -------------------------------------------------------------------------- */
.nav::before{
  background:rgba(1,18,28,0.82);
  box-shadow:0 20px 46px -12px rgba(0,0,0,0.55), inset 0 0 0 1px var(--tinta-linha);
}
.nav__glow{display:none;}
.brand__logo{height:30px;}
.nav__links a,
.nav__top-link{font-family:var(--sans);}
.nav__links a:hover,
.nav__top-link:hover{background:rgba(95,250,213,0.08); color:var(--papel);}
.nav__top-link--cta{background:var(--brasa); color:var(--tinta); font-weight:600;}
.nav__top-link--cta:hover{background:var(--brasa-escura); color:var(--tinta);}
.nav__user{
  background:var(--tinta-2);
  box-shadow:0 0 0 1px var(--tinta-linha);
}
@media(max-width:1024px){ .brand__logo{height:26px;} }
@media(max-width:480px){ .brand__logo{height:22px;} }

/* --------------------------------------------------------------------------
   RODAPÉ (todas as páginas)
   -------------------------------------------------------------------------- */
.footer{background:var(--tinta); color:var(--texto-suave-escuro); border-top:1px solid var(--tinta-linha);}
.footer__logo{height:38px;}
.footer h4{font-family:var(--mono); font-weight:500; letter-spacing:.12em; color:var(--papel);}
.footer a{color:var(--texto-suave-escuro);}
.footer a:hover{color:var(--menta);}

/* --------------------------------------------------------------------------
   PÁGINA INICIAL (body.home-v2)
   Segue o mockup "Site · página inicial" do kit (seção 11): fundo Tinta,
   etiqueta em Plex Mono, título em Archivo 800 com a segunda frase em Brasa,
   CTA Brasa + secundário em contorno. A ilustração é a "viga" do kit (seção
   06): barras do símbolo sobre a grade de 50 px.
   -------------------------------------------------------------------------- */
body.home-v2{background:var(--tinta);}
html:has(body.home-v2){background:var(--tinta);}
body.home-v2 .nav-top-backdrop{background:var(--tinta);}

/* Etiqueta de seção: Plex Mono em caixa alta, marcador quadrado em Brasa
   (a "viga" em miniatura) no lugar da bolinha verde. */
.home-v2 .secao__eyebrow,
.home-v2 .hero__eyebrow{
  font-family:var(--mono); font-weight:500; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--menta);
  background:none; border:0; padding:0; box-shadow:none;
}
.home-v2 .secao__eyebrow .dot,
.home-v2 .hero__eyebrow .dot{
  width:10px; height:10px; border-radius:2px; background:var(--brasa); box-shadow:none;
}
.home-v2 .secao__title,
.home-v2 .stats-section__title,
.home-v2 .up-upsell__title,
.home-v2 .closing-cta h2{
  font-family:var(--serif); font-weight:800; letter-spacing:-0.015em; color:var(--papel);
}
.home-v2 .secao__title em,
.home-v2 .stats-section__title em{color:var(--menta); font-style:normal;}
.home-v2 .secao__desc{color:var(--texto-suave-escuro);}

/* Seções: todas em Tinta; a alternância de superfície vem de --tinta-2 e da
   linha de 1 px, não de degradê (o kit dispensa "gradient wash"). */
.home-v2 .home-secao,
.home-v2 .mapa-secao,
.home-v2 .consultas-secao,
.home-v2 .atualizacoes-secao,
.home-v2 .wce,
.home-v2 .stats-section{background:var(--tinta);}
.home-v2 .home-secao + .home-secao{border-top:1px solid var(--tinta-linha);}
.home-v2 .section--alt{background:var(--tinta-2);}

/* ---------------------------------------------------------------- hero */
.home-v2 .hero-brift{
  position:relative; overflow:hidden; background:var(--tinta);
  padding:clamp(24px, 3vw, 48px) 0 clamp(56px, 7vw, 104px);
  border-bottom:1px solid var(--tinta-linha);
}
/* Grade de 50 px do kit, só como textura de fundo e esmaecendo para a
   esquerda, para não competir com o texto. */
.home-v2 .hero-brift::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--tinta-linha) 1px, transparent 1px),
    linear-gradient(90deg, var(--tinta-linha) 1px, transparent 1px);
  background-size:50px 50px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 35%, #000 70%);
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 35%, #000 70%);
  opacity:.7;
}
.home-v2 .hero-brift__inner{
  position:relative; display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  gap:clamp(32px, 5vw, 80px); align-items:center;
}
.home-v2 .hero-brift__eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:22px;
  font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brasa);
}
.home-v2 .hero-brift__eyebrow::before{
  content:""; width:10px; height:10px; border-radius:2px; background:var(--brasa);
}
.home-v2 .hero-brift h1{
  font-family:var(--serif); font-weight:800; color:var(--papel);
  font-size:clamp(40px, 5vw, 68px); line-height:1.02; letter-spacing:-0.02em;
  margin:0 0 22px; max-width:15ch;
}
.home-v2 .hero-brift h1 span{color:var(--brasa); display:block;}
.home-v2 .hero-brift__lede{
  font-size:clamp(17px, 1.35vw, 20px); line-height:1.6; color:var(--texto-suave-escuro);
  max-width:50ch; margin:0;
}
.home-v2 .hero-brift__ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px;}
.home-v2 .hero-brift__nota{
  margin-top:16px; font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  color:var(--texto-suave-escuro);
}

/* Botões da Home. Escopados aqui: o .btn--primary do resto do site é usado
   sobre fundo claro e muda junto com cada página, numa etapa própria. */
.home-v2 .btn{
  font-family:var(--sans); font-weight:600; font-size:15.5px;
  min-height:48px; padding:0 24px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
/* Brasa é 10% da composição (kit, seção 05): só o CTA principal do hero e
   o do fechamento levam .btn--brasa. Os demais botões de ação são Papel
   sobre Tinta, e Tinta dentro dos cards claros (cursos). */
.home-v2 .btn--primary,
.home-v2 .btn--dark.btn--primary{background:var(--papel); color:var(--tinta); border:1px solid var(--papel);}
.home-v2 .btn--primary:hover,
.home-v2 .btn--dark.btn--primary:hover{background:#fff; border-color:#fff; color:var(--tinta);}
.home-v2 .btn--brasa,
.home-v2 .btn--primary.btn--brasa{background:var(--brasa); color:var(--tinta); border-color:var(--brasa);}
.home-v2 .btn--primary.btn--brasa:hover{background:var(--brasa-escura); border-color:var(--brasa-escura); color:var(--tinta);}
.home-v2 .course-card .btn--primary{background:var(--tinta); color:var(--papel); border-color:var(--tinta);}
.home-v2 .course-card .btn--primary:hover{background:var(--petroleo); border-color:var(--petroleo); color:#fff;}
.home-v2 .btn--ghost{background:transparent; color:var(--papel); border:1px solid rgba(246,243,238,.4);}
.home-v2 .btn--ghost:hover{background:rgba(246,243,238,.08); border-color:var(--papel);}
.home-v2 .btn:focus-visible{outline:2px solid var(--menta); outline-offset:3px;}

/* Ilustração: a "viga" — barras do símbolo como linha do tempo da
   transição (EC 132/2023, LC 214/2025). */
.home-v2 .hero-brift__art{position:relative;}
.home-v2 .hero-brift__art svg{display:block; width:100%; height:auto; max-width:600px; margin-left:auto;}
.home-v2 .viga__rotulo{font-family:var(--mono); font-size:13px; letter-spacing:.06em; fill:var(--texto-suave-escuro);}
.home-v2 .viga__ano{font-family:var(--mono); font-size:15px; font-weight:500; fill:var(--papel);}
.home-v2 .viga__ano--tinta{fill:var(--tinta);}

@media(max-width:980px){
  .home-v2 .hero-brift__inner{grid-template-columns:1fr;}
  .home-v2 .hero-brift h1{max-width:none;}
  .home-v2 .hero-brift__art svg{margin:8px auto 0;}
}
@media(max-width:560px){
  .home-v2 .hero-brift__ctas .btn{flex:1 1 100%;}
}

/* ------------------------------------------------- cards da Home (escuros) */
.home-v2 .wce-card,
.home-v2 .hub-card,
.home-v2 .up-upsell{
  border-color:var(--tinta-linha);
}
.home-v2 .wce-card{background:var(--tinta-2); box-shadow:none;}
.home-v2 .wce-card:hover{border-color:var(--verde-agua);}
.home-v2 .wce-card__num{font-family:var(--mono); color:var(--texto-suave-escuro);}
.home-v2 .wce-card__category,
.home-v2 .hub-card__category{font-family:var(--mono); letter-spacing:.12em; color:var(--menta);}
.home-v2 .wce-card__title,
.home-v2 .hub-card__title{font-family:var(--serif); font-weight:700; color:var(--papel);}
.home-v2 .wce-card__desc,
.home-v2 .hub-card__desc{color:var(--texto-suave-escuro);}
.home-v2 .wce-card__cta,
.home-v2 .hub-card__cta{color:var(--menta);}
.home-v2 .wce-card__tag{background:var(--brasa); color:var(--tinta); font-family:var(--mono); font-weight:500;}
.home-v2 .wce-card--highlight{border-color:var(--verde-agua);}

/* Números: Plex Mono em Menta, como "2026–2033" no kit. */
.home-v2 .stats-section [class*="__value"],
.home-v2 .stats-section [class*="__num"],
.home-v2 .stats-section strong{font-family:var(--mono); font-weight:500; color:var(--menta);}

/* Cards de propaganda (debates, Panorama): sem o degradê e o halo verde de
   app.css — superfície chapada com fio, como os cards do kit. O Panorama
   mantém a foto, sob uma película Tinta. */
.home-v2 .up-upsell{background:var(--tinta-2); border:1px solid var(--tinta-linha);}
.home-v2 .up-upsell::before{background:none;}
.home-v2 .up-upsell--panorama{background-image:url('/static/img/panorama-empresa-bg.webp'); background-size:cover; background-position:center;}
.home-v2 .up-upsell--panorama::before{
  background:linear-gradient(90deg, rgba(1,18,28,.97) 0%, rgba(1,18,28,.9) 40%, rgba(1,18,28,.6) 70%, rgba(1,18,28,.4) 100%);
}
.home-v2 .up-upsell__badge{background:var(--menta); color:var(--tinta); border-radius:4px;}
.home-v2 .up-upsell__price-value{font-family:var(--mono); font-weight:500; color:var(--menta);}

/* Fechamento: chapado em Tinta-2, sem degradê. */
.home-v2 .closing-cta{background:var(--tinta-2); border-top:1px solid var(--tinta-linha);}
.home-v2 .closing-cta p{color:var(--texto-suave-escuro);}

@media print{
  .home-v2 .hero-brift__art, .home-v2 .hero-brift::before{display:none !important;}
  .home-v2 .hero-brift h1, .home-v2 .hero-brift h1 span{color:#000 !important;}
}