:root {
  color-scheme: dark;
  --gls-bg: #161826;
  --gls-surface: #232532;
  --gls-text: #E9E9ED;
  --gls-muted: #B2B6CA;
  --gls-accent: #9184D9;
  --gls-accent-strong: #B5ABFC;
  --gls-accent-text: #D2CEFD;
  --gls-accent-hover: #E7E5FE;
  --gls-accent-tint: #2B2741;
  --gls-line: rgba(233, 233, 237, .16);
  --gls-line-suave: rgba(233, 233, 237, .08);
  /* Vidro: sobre o fundo Noite resulta no Grafite */
  --gls-vidro: rgba(233, 233, 237, .06);
  /* Relevo de placa de vidro: fio de luz na borda de cima, brilho interno e sombra fria e leve */
  --gls-relevo: inset 0 1px 0 rgba(233, 233, 237, .1), inset 0 24px 48px rgba(207, 211, 229, .03), 0 12px 24px rgba(13, 14, 24, .28);
  --gls-profundidade: rgba(43, 39, 65, .75);
  --gls-topo: rgba(22, 24, 38, .78);
  --gls-controle: #75798C;
  --gls-erro: #E3B4B4;
  /* Faixa de chamada: Índigo no tema escuro, Lilás 200 no claro */
  --gls-faixa: #262A60;
  --gls-faixa-texto: #CFD3E5;
  --gls-faixa-link: #E7E5FE;
  --gls-visto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.5 2.5 4.5-5.5' fill='none' stroke='%23B5ABFC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --gls-radius-sm: 4px;
  --gls-radius: 8px;
  --gls-radius-lg: 14px;
  --gls-font: Geist, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;
  --margem: 24px;
  --secao: 64px;
}

/* Tema claro, para quem usa o sistema em modo claro: a paleta clara do Kit de Marca
   (Gelo, Tinta, Chumbo e Lilás profundo). Só as cores mudam; o desenho é o mesmo. */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --gls-bg: #F3F5FE;
    --gls-surface: #E4E7F5;
    --gls-text: #292B31;
    --gls-muted: #595D6C;
    --gls-accent: #796CBF;
    --gls-accent-strong: #5D5294;
    --gls-accent-text: #5D5294;
    --gls-accent-hover: #423A6A;
    --gls-accent-tint: #E7E5FE;
    --gls-line: rgba(41, 43, 49, .16);
    --gls-line-suave: rgba(41, 43, 49, .08);
    --gls-vidro: rgba(41, 43, 49, .04);
    --gls-relevo: 0 1px 2px rgba(41, 43, 49, .06), 0 12px 24px rgba(41, 43, 49, .06);
    --gls-profundidade: rgba(231, 229, 254, .9);
    --gls-topo: rgba(243, 245, 254, .82);
    --gls-erro: #8A3B3B;
    --gls-faixa: #E7E5FE;
    --gls-faixa-texto: #595D6C;
    --gls-faixa-link: #5D5294;
    --gls-visto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.5 2.5 4.5-5.5' fill='none' stroke='%235D5294' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

@media (min-width: 900px) {
  :root { --margem: 64px; --secao: 96px; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--gls-bg);
  background-image: radial-gradient(900px 600px at 100% 0, var(--gls-profundidade), transparent 70%);
  background-repeat: no-repeat;
  color: var(--gls-text);
  font: 400 17px/1.55 var(--gls-font);
}

h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; }
h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.1; letter-spacing: -0.02em; margin-block-end: var(--e5); }
/* Palavra de destaque do título: a que carrega a promessa aparece em Lilás, sem mudar de peso */
h1 .destaque { color: var(--gls-accent-strong); }
h2 { font-size: clamp(32px, 3.6vw, 40px); line-height: 1.15; letter-spacing: -0.02em; margin-block-end: var(--e5); }
h3 { font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; margin-block-end: var(--e2); }

p { margin: 0; max-width: 72ch; }
p + p { margin-block-start: var(--e4); }
ul, ol { margin: 0; padding-inline-start: 1.2em; max-width: 72ch; }
li + li { margin-block-start: var(--e2); }

a { color: var(--gls-accent-text); }
a:hover { color: var(--gls-accent-hover); }

:focus-visible { outline: 2px solid var(--gls-accent); outline-offset: 2px; }

img { display: block; max-width: 100%; height: auto; }

.conteiner {
  max-width: calc(1200px + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: var(--margem);
}

main { padding-block-end: var(--secao); }
main > section { padding-block-start: var(--secao); }
main > section:first-child { padding-block-start: var(--e7); }
/* Cada seção abre com uma linha que nasce lilás na margem esquerda, esfria aos poucos e some à direita.
   As seções que já têm moldura própria (faixa e atalho) ficam sem a linha. */
main > section + section:not(:has(> .faixa, > .atalho)) { position: relative; }
/* Posicionada fora do fluxo, para não virar item das seções em grade ou em linha */
main > section + section:not(:has(> .faixa, > .atalho))::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--secao) / 2);
  inset-inline: var(--margem);
  height: 1px;
  background: linear-gradient(90deg, var(--gls-accent), var(--gls-line) 240px, var(--gls-line) 60%, transparent);
}
/* Cadência de tons: uma seção por página sobe um degrau, do Noite ao Grafite, de ponta a ponta
   da janela. A sombra espalhada estende o fundo para fora do contêiner sem criar rolagem lateral.
   A borda da faixa já separa as seções, então ela e a seção seguinte ficam sem a linha de abertura. */
main > section + section.tom {
  margin-block-start: calc(var(--secao) / 2);
  padding-block: calc(var(--secao) * .75);
  background: var(--gls-surface);
  box-shadow: 0 0 0 100vmax var(--gls-surface);
  clip-path: inset(0 -100vmax);
}
main > section.tom + section { padding-block-start: calc(var(--secao) * .75); }
main > section + section.tom::before,
main > section.tom + section::before { display: none; }

.lead { font-size: 18px; color: var(--gls-muted); max-width: 60ch; }
.auxiliar { font-size: 14px; line-height: 1.45; color: var(--gls-muted); }
/* Usar em elemento interno, nunca junto com .conteiner (as margens automáticas centralizariam o bloco) */
.estreito { max-width: 760px; }
.centro { margin-inline: auto; }
/* Página de texto corrido com vários títulos na mesma seção */
.texto > h2 { margin-block-start: var(--e7); }
.texto > h2:first-child { margin-block-start: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}