/* =========================================================
   LUMEN EDTECH — folha de estilos
   Conceito: da escuridão para a luz. Capa, faixa de tecnologia,
   chamada e rodapé em azul-noite; conteúdo em áreas claras.
   Grade com coluna de margem (numeração) e coluna de texto.
   ========================================================= */

/* ---------- Fontes locais ---------- */
@font-face {
  font-family: "Sora";
  src: url("assets/fonts/sora-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Paleta institucional */
  --noite: #101D35;          /* primária: azul-noite profundo */
  --noite-2: #17284A;        /* superfícies sobre o azul-noite */
  --noite-3: #0A1426;        /* fundo escuro mais profundo */
  --violeta: #6257E8;        /* secundária: azul-violeta */
  --violeta-claro: #8E86FF;  /* violeta sobre fundo escuro */
  --violeta-suave: #ECEBFD;  /* realce suave sobre claro */
  --champagne: #E9C98B;      /* destaque: champagne luminoso */
  --branco: #F8F9FC;         /* fundo claro: branco suave */
  --papel-2: #EFF1F7;        /* fundo claro alternado */
  --ardosia: #526071;        /* texto secundário: cinza-ardósia */
  --texto: #101D35;          /* texto principal */
  --fio: #DCE0EA;            /* linhas sobre claro */
  --fio-escuro: #263A61;     /* linhas sobre escuro */
  --claro-2: #A7B1C5;        /* texto secundário sobre escuro */
  --erro: #B23A3A;

  /* Tipografia */
  --display: "Sora", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  --t-marca: clamp(84px, 21vw, 300px);
  --t-h1: clamp(34px, 4.4vw, 58px);
  --t-h2: clamp(30px, 4vw, 52px);
  --t-h2g: clamp(34px, 5vw, 66px);
  --t-lede: clamp(19px, 1.7vw, 23px);
  --t-corpo: 17px;
  --t-rotulo: 12px;

  /* Medidas */
  --largura: 1280px;
  --gut: clamp(16px, 4vw, 48px);
  --margem: 220px;
  --sec: clamp(80px, 11vw, 144px);
  --topo-h: 72px;
  --raio: 4px;

  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--branco); color: var(--texto);
  font-family: var(--sans); font-size: var(--t-corpo); line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: var(--violeta); color: #fff; }
:focus-visible { outline: 2px solid var(--violeta); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }

.wrap { max-width: var(--largura); margin-inline: auto; padding-inline: var(--gut); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--champagne); color: var(--noite); padding: 8px 14px; z-index: 100; font-weight: 600; }
.skip:focus { left: 8px; }

.rotulo {
  font-family: var(--sans); font-size: var(--t-rotulo); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ardosia); line-height: 1.5;
}
.destaque { color: var(--violeta); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; padding: 14px 24px;
  border: 1px solid transparent; border-radius: var(--raio);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn:active { transform: translateY(1px); }
.btn-luz { background: var(--champagne); color: var(--noite); }
.btn-luz:hover { background: #F3DBAB; }
.btn-contorno { border-color: rgba(248, 249, 252, .35); color: var(--branco); background: transparent; }
.btn-contorno:hover { border-color: var(--branco); background: rgba(248, 249, 252, .06); }
.btn-noite { background: var(--noite); color: var(--branco); }
.btn-noite:hover { background: var(--violeta); }

/* =========================================================
   CABEÇALHO (sempre escuro)
   ========================================================= */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(16, 29, 53, .94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
  padding-top: env(safe-area-inset-top, 0px); color: var(--branco);
}
.topo.rolado { border-bottom-color: var(--fio-escuro); }
.topo-in { height: var(--topo-h); display: flex; align-items: center; gap: 28px; }

.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--branco); flex: none; }
.marca-simbolo { width: 26px; height: 29px; color: var(--branco); flex: none; }
.marca-nome { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: .1em; line-height: 1; }
.marca-sub { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne); margin-left: 8px; }

.menu { display: flex; gap: 4px; margin-left: auto; }
.menu a {
  position: relative; text-decoration: none; font-size: 15px; font-weight: 500;
  color: var(--claro-2); padding: 8px 12px; transition: color .2s;
}
.menu a i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--violeta-claro); margin-right: 7px; letter-spacing: .04em; }
.menu a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1px; background: var(--champagne); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.menu a:hover, .menu a.ativo { color: var(--branco); }
.menu a:hover::after, .menu a.ativo::after { transform: scaleX(1); }
.topo-cta { padding: 10px 18px; font-size: 14px; }

.sumario-btn {
  display: none; margin-left: auto; align-items: center; gap: 12px;
  background: none; border: 0; padding: 10px 0; cursor: pointer;
  font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--branco);
}
.sumario-ico { width: 22px; height: 10px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transition: transform .3s; }
.sumario-btn[aria-expanded="true"] .sumario-ico { transform: scaleY(.3); }

.sumario-mobile {
  border-top: 1px solid var(--fio-escuro); background: var(--noite);
  padding-block: 16px 32px; max-height: calc(100dvh - var(--topo-h)); overflow-y: auto;
}
.sumario-mobile .btn { width: 100%; margin-top: 24px; }
.toc-mobile li { border-bottom: 1px solid var(--fio-escuro); }
.toc-mobile a { display: flex; gap: 18px; align-items: baseline; padding: 16px 0; text-decoration: none; }
.toc-mobile .toc-n { font-size: 13px; font-weight: 600; color: var(--violeta-claro); width: 28px; }
.toc-mobile .toc-t { font-family: var(--display); font-size: 24px; font-weight: 500; color: var(--branco); }

@media (max-width: 1080px) {
  .menu, .topo-cta { display: none; }
  .sumario-btn { display: inline-flex; }
}

/* =========================================================
   CAPA
   ========================================================= */
.capa {
  position: relative; overflow: hidden;
  background: var(--noite); color: var(--branco);
  padding-block: clamp(28px, 4vw, 48px) clamp(64px, 9vw, 112px);
}
.capa::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--fio-escuro) 1px, transparent 1px), linear-gradient(90deg, var(--fio-escuro) 1px, transparent 1px);
  background-size: 96px 96px; opacity: .28;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 60%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 70% 60%, #000, transparent 75%);
}
.capa-brilho {
  position: absolute; width: 900px; height: 900px; right: -260px; bottom: -420px; pointer-events: none;
  background: radial-gradient(circle, rgba(98, 87, 232, .30), rgba(98, 87, 232, 0) 62%);
}
.capa .wrap { position: relative; }
.capa-linha {
  display: flex; flex-wrap: wrap; gap: 6px 26px;
  font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--claro-2);
  padding-bottom: 14px; border-bottom: 1px solid var(--fio-escuro);
}
.capa-linha span + span::before { content: "·"; color: var(--champagne); margin: 0 26px 0 -14px; }

.capa-marca-bloco { border-bottom: 1px solid var(--fio-escuro); position: relative; }
.capa-marca-bloco::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 20%; background: linear-gradient(90deg, var(--champagne), rgba(233, 201, 139, 0)); }
.capa-marca {
  display: flex; justify-content: space-between;
  font-family: var(--display); font-weight: 600; font-size: var(--t-marca);
  line-height: .9; letter-spacing: -.02em; color: var(--branco);
  padding-top: clamp(18px, 3vw, 36px);
}
.capa-marca span { display: inline-block; animation: subir 1s cubic-bezier(.2, .7, .2, 1) both; }
.capa-marca span:nth-child(2) { animation-delay: .05s; }
.capa-marca span:nth-child(3) { animation-delay: .10s; }
.capa-marca span:nth-child(4) { animation-delay: .15s; }
.capa-marca span:nth-child(5) { animation-delay: .20s; }
@keyframes subir { from { opacity: 0; transform: translateY(.1em); } to { opacity: 1; transform: none; } }
.capa-sub {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-block: 12px 16px;
  font-size: 13px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--champagne);
}
.capa-dominio { letter-spacing: .08em; text-transform: none; color: var(--claro-2); font-weight: 500; }

.capa-grade {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px);
  align-items: center; margin-top: clamp(36px, 5vw, 64px);
}
.capa-titulo {
  font-family: var(--display); font-weight: 600; font-size: var(--t-h1);
  line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; max-width: 14ch;
}
.capa-titulo .destaque { color: var(--champagne); }
.capa-lede { margin-top: 22px; font-size: 19px; line-height: 1.6; color: var(--claro-2); max-width: 44ch; }
.capa-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.capa-figura { min-width: 0; }
.diagrama { width: 100%; height: auto; display: block; overflow: visible; }
.s-l { fill: var(--branco); }
.pagina { transform-box: fill-box; transform-origin: 0% 100%; animation: abrir-folha 1s cubic-bezier(.2, .7, .2, 1) both; }
.p1 { fill: var(--violeta-claro); animation-delay: .5s; }
.p2 { fill: #B9B2FF; animation-delay: .65s; }
.p3 { fill: var(--champagne); animation-delay: .8s; }
@keyframes abrir-folha { from { transform: rotate(-38deg); opacity: 0; } }
.rotulos circle { fill: var(--claro-2); }
.rotulos .c1 { fill: var(--violeta-claro); }
.rotulos .c2 { fill: #B9B2FF; }
.rotulos .c3 { fill: var(--champagne); }
.rotulos .c0 { fill: var(--branco); }
.rotulos path { stroke: var(--claro-2); stroke-width: 1; stroke-dasharray: 2 4; opacity: .55; }
.rotulos text { font-family: var(--sans); font-size: 13px; font-weight: 500; fill: var(--claro-2); letter-spacing: .02em; }
.rotulos { animation: aparecer .8s 1.5s both; }
@keyframes aparecer { from { opacity: 0; } }
.capa-figura figcaption { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--fio-escuro); font-size: 14px; color: var(--claro-2); }

@media (max-width: 920px) {
  .capa-grade { grid-template-columns: 1fr; }
  .capa-figura { max-width: 560px; }
}
@media (max-width: 560px) {
  .capa-linha span:nth-child(n+3) { display: none; }
  .capa-linha { flex-direction: column; }
  .capa-linha span + span::before { display: none; }
  .capa-sub { letter-spacing: .22em; }
  .capa-dominio { display: none; }
  .rotulos path { stroke: var(--claro-2); stroke-width: 1; stroke-dasharray: 2 4; opacity: .55; }
.rotulos text { font-size: 15px; }
  .capa-acoes .btn { flex: 1 1 100%; }
}

/* =========================================================
   ÍNDICE
   ========================================================= */
.sumario { padding-block: clamp(56px, 7vw, 88px) 0; }
.toc:not(.toc-mobile) li { border-bottom: 1px solid var(--fio); }
.toc:not(.toc-mobile) li:first-child { border-top: 1px solid var(--noite); }
.toc:not(.toc-mobile) a { display: flex; align-items: baseline; gap: 18px; padding: 16px 0; text-decoration: none; transition: padding .3s ease; }
.toc:not(.toc-mobile) .toc-n { font-size: 13px; font-weight: 600; color: var(--violeta); width: 32px; flex: none; }
.toc:not(.toc-mobile) .toc-t { font-family: var(--display); font-weight: 500; font-size: clamp(21px, 2.2vw, 28px); letter-spacing: -.02em; color: var(--noite); }
.toc-p { flex: 1; display: flex; align-items: baseline; gap: 12px; justify-content: flex-end; font-size: 14px; color: var(--ardosia); text-align: right; }
.toc-p::before { content: ""; flex: 1; min-width: 24px; border-bottom: 1.5px dotted var(--fio); transform: translateY(-4px); }
.toc:not(.toc-mobile) a:hover { padding-left: 10px; }
.toc:not(.toc-mobile) a:hover .toc-t { color: var(--violeta); }
@media (max-width: 640px) { .toc-p { display: none; } }

/* =========================================================
   CAPÍTULOS — grade com coluna de margem
   ========================================================= */
.capitulo { padding-block: var(--sec); }
.sumario + .capitulo { padding-top: clamp(80px, 10vw, 128px); }
.capitulo-papel { background: var(--papel-2); }
.grade-margem { display: grid; grid-template-columns: var(--margem) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.margem { display: flex; flex-direction: column; gap: 12px; }
.cap-num { font-family: var(--display); font-weight: 300; font-size: 80px; line-height: .9; letter-spacing: -.04em; color: var(--violeta); }
.nota-margem { font-size: 14.5px; line-height: 1.55; color: var(--ardosia); padding-top: 14px; border-top: 1px solid var(--fio); max-width: 26ch; margin-top: 8px; }
.corpo { min-width: 0; }

.sub-cap { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ardosia); }
.sub-cap span { color: var(--violeta); letter-spacing: .04em; }

.titulo { font-family: var(--display); font-weight: 600; font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.03em; color: var(--noite); text-wrap: balance; max-width: 20ch; }
.titulo-grande { font-size: var(--t-h2g); max-width: 17ch; }
.lede { font-size: var(--t-lede); line-height: 1.55; color: var(--texto); margin-top: clamp(20px, 2.4vw, 28px); max-width: 48ch; }

@media (max-width: 900px) {
  .grade-margem { grid-template-columns: 1fr; }
  .margem { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 6px 18px; }
  .cap-num { font-size: 52px; }
  .nota-margem { flex-basis: 100%; max-width: 60ch; }
}

/* ---------- 01 · Sobre ---------- */
.colunas-texto { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 32px; color: var(--ardosia); max-width: 900px; }
.proposta { margin-top: clamp(48px, 6vw, 72px); padding: clamp(28px, 4vw, 44px); background: var(--noite); color: var(--branco); border-radius: var(--raio); position: relative; overflow: hidden; }
.proposta::after { content: ""; position: absolute; width: 360px; height: 360px; left: -120px; bottom: -220px; background: radial-gradient(circle, rgba(98, 87, 232, .35), rgba(98, 87, 232, 0) 65%); pointer-events: none; }
.proposta .rotulo { color: var(--champagne); position: relative; }
.proposta-texto { position: relative; font-family: var(--display); font-weight: 500; font-size: clamp(24px, 3vw, 38px); line-height: 1.2; letter-spacing: -.025em; margin-top: 14px; max-width: 26ch; }

.diferenciais { margin-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--noite); }
.diferenciais li { display: grid; grid-template-columns: 56px minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(16px, 3vw, 40px); align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--fio); transition: background-color .3s; }
.diferenciais li:hover { background: linear-gradient(90deg, var(--violeta-suave), rgba(236, 235, 253, 0)); }
.d-n { font-size: 13px; font-weight: 600; color: var(--violeta); padding-left: 4px; }
.diferenciais h3 { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.diferenciais p { color: var(--ardosia); font-size: 16.5px; max-width: 48ch; }

@media (max-width: 760px) {
  .colunas-texto { grid-template-columns: 1fr; gap: 16px; }
  .diferenciais li { grid-template-columns: 40px minmax(0, 1fr); row-gap: 6px; }
  .diferenciais p { grid-column: 2; }
}

/* ---------- 02 · Soluções ---------- */
.solucoes { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); margin-top: clamp(40px, 5vw, 60px); border-top: 1px solid var(--noite); padding-top: 8px; }
.sol-indice { display: flex; flex-direction: column; }
.sol-indice button {
  display: flex; align-items: baseline; gap: 14px; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--fio); padding: 15px 0;
  font: 500 17px/1.3 var(--display); letter-spacing: -.01em; color: var(--ardosia); transition: color .25s, padding .25s;
}
.sol-indice button span { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--violeta); width: 22px; flex: none; }
.sol-indice button:hover { color: var(--noite); }
.sol-indice button[aria-selected="true"] { color: var(--noite); padding-left: 12px; box-shadow: inset 2px 0 0 var(--violeta); }

.sol-painel { padding-top: 16px; animation: aparecer .45s ease both; }
.sol-painel h3 { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -.03em; margin-top: 10px; max-width: 22ch; }
.sol-painel > p:not(.rotulo) { margin-top: 16px; color: var(--ardosia); max-width: 56ch; }
.itens { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; margin-top: 30px; border-top: 1px solid var(--fio); }
.itens li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--fio); font-size: 16px; }
.itens b { font-size: 12px; font-weight: 600; color: var(--violeta); flex: none; width: 28px; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .solucoes { grid-template-columns: 1fr; gap: 8px; }
  .sol-indice { flex-direction: row; overflow-x: auto; gap: 24px; scrollbar-width: none; border-bottom: 1px solid var(--fio); }
  .sol-indice::-webkit-scrollbar { display: none; }
  .sol-indice button { border-bottom: 0; white-space: nowrap; font-size: 16px; padding: 14px 0; flex: none; }
  .sol-indice button[aria-selected="true"] { padding-left: 0; box-shadow: inset 0 -2px 0 var(--violeta); }
}
@media (max-width: 560px) { .itens { grid-template-columns: 1fr; } }

/* ---------- 03 · Abordagem: especialistas ---------- */
.criterios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--noite); }
.criterios li { padding: 28px 22px 30px 0; display: flex; flex-direction: column; gap: 12px; }
.criterios li + li { padding-left: 22px; border-left: 1px solid var(--fio); }
.glifo { width: 46px; height: 50px; margin-bottom: 6px; overflow: visible; }
.g-l { fill: var(--noite); }
.g-pag { fill: var(--violeta); }
.g-p1 { fill: #6257E8; }
.g-p2 { fill: #9C8FEF; }
.g-p3 { fill: #D9B26A; }
.criterios h3 { font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.2; letter-spacing: -.02em; }
.criterios p { color: var(--ardosia); font-size: 16px; }
.encontro { background: linear-gradient(180deg, var(--violeta-suave), rgba(236, 235, 253, 0)); }
.encontro p { color: var(--texto); }

.nota { margin-top: 32px; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio); max-width: 820px; }
.nota-sinal { font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--violeta); }
.nota p { font-size: 18px; line-height: 1.5; color: var(--noite); }

@media (max-width: 980px) {
  .criterios { grid-template-columns: 1fr 1fr; }
  .criterios li:nth-child(3) { padding-left: 0; border-left: 0; }
  .criterios li:nth-child(n+3) { border-top: 1px solid var(--fio); }
}
@media (max-width: 540px) {
  .criterios { grid-template-columns: 1fr; }
  .criterios li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--fio); }
  .encontro { padding-left: 14px !important; }
  .nota { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- 03 · Abordagem: método ---------- */
.metodo { margin-top: clamp(40px, 5vw, 60px); position: relative; border-top: 1px solid var(--noite); }
.metodo::before { content: ""; position: absolute; left: 27px; top: 0; bottom: 0; width: 1px; background: var(--fio); }
.metodo::after { content: ""; position: absolute; left: 27px; top: 0; width: 1px; height: 100%; background: var(--violeta); transform-origin: top; transform: scaleY(var(--progresso, 0)); transition: transform .2s linear; }
.metodo li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 200px; gap: clamp(16px, 3vw, 40px); align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--fio); position: relative; }
.m-n { position: relative; z-index: 1; font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--noite); background: var(--papel-2); text-align: center; padding: 4px 0; transition: color .3s; font-variant-numeric: tabular-nums; }
.metodo li:hover .m-n { color: var(--violeta); }
.metodo h3 { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.metodo p { color: var(--ardosia); margin-top: 6px; max-width: 54ch; font-size: 16.5px; }
.m-prod { font-size: 15px; }
.m-prod i { display: block; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ardosia); margin-bottom: 2px; }
@media (max-width: 760px) {
  .metodo li { grid-template-columns: 56px minmax(0, 1fr); }
  .m-prod { grid-column: 2; }
}

/* ---------- 03 · Abordagem: tecnologia (faixa escura) ---------- */
.tecnologia { background: var(--noite); color: var(--branco); padding-block: var(--sec); position: relative; overflow: hidden; }
.tecnologia::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--fio-escuro) 1px, transparent 1px), linear-gradient(90deg, var(--fio-escuro) 1px, transparent 1px);
  background-size: 96px 96px; opacity: .3;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.tecnologia .wrap { position: relative; }
.tecnologia .rotulo { color: var(--claro-2); }
.tecnologia .sub-cap { color: var(--claro-2); }
.tecnologia .sub-cap span { color: var(--violeta-claro); }
.tecnologia .titulo { color: var(--branco); }
.tecnologia .destaque { color: var(--champagne); }
.tecnologia .lede { color: #D2D8E4; max-width: 54ch; }
.divisao { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(40px, 5vw, 60px); border-top: 1px solid var(--fio-escuro); }
.divisao > div { padding: 24px 0; }
.divisao > div:first-child { padding-right: clamp(24px, 4vw, 56px); }
.divisao > div + div { padding-left: clamp(24px, 4vw, 56px); border-left: 1px solid var(--fio-escuro); }
.divisao > div + div .rotulo { color: var(--champagne); }
.divisao ul { margin-top: 12px; }
.divisao li { padding: 12px 0; border-bottom: 1px solid var(--fio-escuro); font-size: 16.5px; display: flex; gap: 12px; }
.divisao li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--violeta-claro); flex: none; transform: translateY(9px); }
.divisao > div + div li::before { background: var(--champagne); }
@media (max-width: 680px) {
  .divisao { grid-template-columns: 1fr; }
  .divisao > div:first-child { padding-right: 0; }
  .divisao > div + div { padding-left: 0; border-left: 0; }
}

/* ---------- 04 · Experiência ---------- */
.indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 60px); border-top: 1px solid var(--noite); }
.ind { padding: 28px 24px 32px 0; display: flex; flex-direction: column; gap: 14px; }
.ind + .ind { padding-left: 24px; border-left: 1px solid var(--fio); }
.ind-v { font-family: var(--display); font-weight: 600; font-size: clamp(44px, 5vw, 68px); line-height: 1; letter-spacing: -.04em; color: var(--noite); }
.ind-v-lista { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.25; letter-spacing: -.02em; }
.ind:first-child .ind-v { color: var(--violeta); }
.ind-l { font-size: 15px; color: var(--ardosia); max-width: 26ch; margin-top: auto; }
.instituicoes { margin-top: clamp(48px, 6vw, 72px); }
.inst-grade { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 14px; border-top: 1px solid var(--fio); border-left: 1px solid var(--fio); }
.inst-grade > * { height: 92px; display: grid; place-items: center; border-right: 1px solid var(--fio); border-bottom: 1px solid var(--fio); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #8A95A6; padding: 12px; }
.inst-grade img { max-height: 48px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.inst-grade img:hover { filter: none; opacity: 1; }
@media (max-width: 960px) {
  .indicadores { grid-template-columns: 1fr 1fr; }
  .ind:nth-child(3) { padding-left: 0; border-left: 0; }
  .ind:nth-child(n+3) { border-top: 1px solid var(--fio); }
  .inst-grade { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .indicadores { grid-template-columns: 1fr; }
  .ind + .ind { padding-left: 0; border-left: 0; border-top: 1px solid var(--fio); }
  .inst-grade { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   CONTATO
   ========================================================= */
.contato { padding-bottom: var(--sec); }
.chamada { background: var(--noite-3); color: var(--branco); padding-block: clamp(88px, 12vw, 160px); position: relative; overflow: hidden; }
.chamada-luz { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 90% at 85% 100%, rgba(98, 87, 232, .28), rgba(98, 87, 232, 0) 60%), radial-gradient(ellipse 40% 60% at 8% 0%, rgba(233, 201, 139, .10), rgba(233, 201, 139, 0) 60%); }
.chamada .wrap { position: relative; }
.chamada .rotulo { color: var(--champagne); }
.chamada-titulo { font-family: var(--display); font-weight: 600; font-size: clamp(38px, 6.4vw, 92px); line-height: 1.03; letter-spacing: -.04em; margin-top: 18px; max-width: 16ch; text-wrap: balance; }
.chamada-titulo .destaque { color: var(--champagne); }
.chamada-texto { font-size: var(--t-lede); line-height: 1.55; color: #D2D8E4; margin-top: 26px; max-width: 46ch; }
.chamada .btn { margin-top: 36px; font-size: 16px; padding: 17px 30px; }

.contato-grade { display: grid; grid-template-columns: var(--margem) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); padding-top: clamp(64px, 8vw, 104px); }
.contato-dados dl { display: grid; gap: 4px; }
.contato-dados dt { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ardosia); margin-top: 18px; }
.contato-dados dt:first-child { margin-top: 0; }
.contato-dados dd { font-weight: 500; font-size: 15.5px; color: var(--noite); overflow-wrap: break-word; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; border-top: 1px solid var(--noite); padding-top: 28px; }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo-largo { grid-column: 1 / -1; }
.campo label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ardosia); }
.campo label small { font-weight: 400; letter-spacing: .04em; text-transform: none; font-size: 12.5px; margin-left: 6px; }
.campo input, .campo select, .campo textarea {
  font: 400 17px var(--sans); color: var(--texto); background: transparent;
  border: 0; border-bottom: 1px solid #A9B2C2; border-radius: 0; padding: 10px 0; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.campo input::placeholder, .campo textarea::placeholder { color: #8A95A6; }
.campo select { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--noite) 50%), linear-gradient(135deg, var(--noite) 50%, transparent 50%); background-position: right 6px top 55%, right 1px top 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 20px; }
.campo textarea { resize: vertical; min-height: 120px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--violeta); box-shadow: 0 1px 0 var(--violeta); }
.campo.com-erro input, .campo.com-erro select, .campo.com-erro textarea { border-bottom-color: var(--erro); }
.erro { font-size: 13px; color: var(--erro); }
.form-pe { grid-column: 1 / -1; }
.form-ok { grid-column: 1 / -1; font-size: 17px; color: var(--noite); padding: 16px 0 16px 18px; border-left: 2px solid var(--violeta); }
@media (max-width: 900px) { .contato-grade { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .form { grid-template-columns: 1fr; } .form-pe .btn { width: 100%; } }

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape { background: var(--noite); color: var(--claro-2); padding-block: 56px calc(40px + env(safe-area-inset-bottom, 0px)); }
.rodape-grade { display: grid; grid-template-columns: auto 1fr; gap: 32px 64px; align-items: start; }
.rodape-marca { display: flex; gap: 14px; align-items: center; }
.rodape-marca .marca-simbolo { width: 34px; height: 38px; }
.rodape-marca .marca-nome { color: var(--branco); font-size: 22px; }
.rodape-lema { font-size: 15px; color: var(--claro-2); margin-top: 6px; }
.rodape-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: flex-end; }
.rodape-nav a { text-decoration: none; font-size: 15px; transition: color .2s; }
.rodape-nav a:hover { color: var(--champagne); }
.colofao { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--fio-escuro); font-size: 14px; }
@media (max-width: 720px) { .rodape-grade { grid-template-columns: 1fr; } .rodape-nav { justify-content: flex-start; } }

/* =========================================================
   ANIMAÇÃO DE ENTRADA (somente com JavaScript ativo)
   ========================================================= */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}