/* GERADO de src/styles/tokens.css por `npm run site:tokens`. Não edite aqui: o teste tests/unit/site.test.ts compara com o original. */
/* ==========================================================================
   TOKENS DA SEQUOIA
   ==========================================================================
   Esta é a ÚNICA folha da plataforma onde cor literal é permitida
   (scripts/checar-css.mjs recusa literal em qualquer outro lugar). Toda tela lê
   daqui, então trocar o tema é trocar o atributo data-tema no <html> -- nunca
   duplicar tela.

   Três classes de cor, e só a primeira mora aqui:
     1. marca da PLATAFORMA  -> estes tokens;
     2. marca do CLIENTE     -> vem do banco e é aplicada inline; nunca vira token;
     3. DOCUMENTO impresso   -> literal em src/documentos/ e src/styles/print.css,
                                porque o papel é branco em qualquer tema.

   Convenções que os testes leem PELO NOME (tests/unit/contraste.test.ts):
     --sobre-X        tinta sobre a cor sólida --X: contraste mínimo 4,5:1.
                      Toda cor sólida usada como fundo de botão ou selo tem a sua.
                      --sobre-X-2 é a tinta secundária sobre a mesma --X.
     --texto*, --X-texto   texto: 4,5:1 sobre --fundo e todas as --superficie*.
     --X-suave        fundo de selo/aviso: --X-texto sobre ele, 4,5:1; e também --texto, --texto-2
                      e --texto-3 (número em destaque, nota dentro de aviso).
     --borda-campo    contorno de campo de formulário: 3:1 (WCAG 1.4.11).
     --serie-N        cor de série de gráfico: 3:1 sobre --fundo e todas as --superficie*.
   E os dois temas precisam definir EXATAMENTE o mesmo conjunto de tokens: token
   que só existe num tema cai no valor herdado sem erro nenhum no console.
   O que não muda com o tema (tipo, espaço, raio, alturas, movimento) fica no bloco `:root` do fim.
   ========================================================================== */

:root,
:root[data-tema='claro'] {
  /* color-scheme no MESMO seletor da paleta: é ele que faz input, select, date
     picker e barra de rolagem nativos acompanharem o tema. */
  color-scheme: light;

  --fundo: #f5f6f9;
  --superficie: #ffffff;
  --superficie-2: #f0f2f7;
  --superficie-hover: #e9ecf4;
  --borda: rgba(15, 23, 42, 0.09);
  /* Divisor forte e borda de botão secundário: mais visível que --borda, sem a exigência de 3:1 do campo (o botão tem texto). */
  --borda-forte: rgba(15, 23, 42, 0.18);
  --borda-campo: #7c87a5;

  --texto: #0a1124;
  --texto-2: #3a4666;
  --texto-3: #5a6685;

  /* No claro o acento é o azul-violeta mais fundo da marca: branco sobre o
     #5b7cfa original dá 3,68:1 e reprova. Sobre #3f5ae0 dá 5,60:1. */
  --acento: #3f5ae0;
  --acento-forte: #2f47c4;
  --sobre-acento: #ffffff;
  --sobre-acento-forte: #ffffff;
  --acento-texto: #3248c8;
  --acento-suave: #e6ebff;
  /* Era o alto do degradê do botão principal. Desde a fase 1d do design system v2 o principal é chapado e este token não tem uso na
     tela; o valor fica (especificação v2, "Uso das cores"). Branco sobre ele dá 4,99:1. */
  --acento-brilho: #4663e8;
  --acento-anel: rgba(63, 90, 224, 0.3);

  --sucesso: #047857;
  --sobre-sucesso: #ffffff;
  --sucesso-texto: #03684b;
  --sucesso-suave: #e1f4ec;

  --aviso: #b45309;
  --sobre-aviso: #ffffff;
  --aviso-texto: #92400e;
  --aviso-suave: #fdf0dc;

  --perigo: #c0262d;
  --sobre-perigo: #ffffff;
  --perigo-texto: #a61b22;
  --perigo-suave: #fde8e8;

  --info: #0369a1;
  --sobre-info: #ffffff;
  --info-texto: #075985;
  --info-suave: #e0f0fa;

  /* A barra lateral fica azul-marinho nos DOIS temas: é onde a identidade da
     Sequoia aparece mesmo no claro, e é onde o logo (PNG de fundo escuro) assenta. */
  --navegacao: #0a1124;
  --sobre-navegacao: #e8edf9;
  --sobre-navegacao-2: #9aa8c7;
  /* Item da barra sob o mouse e item da página atual. Translúcidos sobre o
     azul-marinho: a tinta continua sendo --sobre-navegacao (mais de 12:1). */
  --navegacao-hover: rgba(255, 255, 255, 0.06);
  --navegacao-ativo: rgba(91, 124, 250, 0.2);
  /* A barra fina do item da página atual e o ícone dele: o acento claro, que só existe sobre o azul-marinho. */
  --navegacao-realce: #7d97ff;

  /* Fundo atrás do diálogo e da gaveta do menu no celular. */
  --veu: rgba(10, 17, 36, 0.55);

  /* Séries dos gráficos do BI. Objeto gráfico: 3:1 sobre todas as superfícies (WCAG 1.4.11;
     tests/unit/contraste.test.ts mede todo --serie-N). Azul e laranja têm a MESMA luminância:
     quem não distingue cor não as separa, por isso a série 2 também é listrada ou tracejada, e
     o nome de cada série vai em texto na legenda. */
  --serie-1: #2563eb;
  --serie-2: #c2410c;

  --sombra: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --sombra-media: 0 6px 16px -4px rgba(15, 23, 42, 0.12), 0 2px 6px -2px rgba(15, 23, 42, 0.06);
  --sombra-forte: 0 18px 40px -8px rgba(15, 23, 42, 0.22), 0 6px 14px -4px rgba(15, 23, 42, 0.1);
  /* O botão principal: a sombra de apoio e o fio de luz no topo. */
  --sombra-botao: 0 1px 2px rgba(15, 23, 42, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  /* O fio de luz no topo de cartão e diálogo (no claro some no branco, de propósito). */
  --brilho: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --anel: 0 0 0 3px var(--acento-anel);
  /* A luz azul, bem fraca, no alto da área de trabalho. */
  --fundo-detalhe: radial-gradient(1000px 420px at 30% -10%, rgba(63, 90, 224, 0.07), transparent 62%);

  /* As pontas do gradiente da árvore. Iguais nos dois temas, porque são o logo. */
  --marca-laranja: #ff922b;
  --marca-rosa: #f06595;
  --marca-violeta: #7048e8;
  --marca-azul: #1c7ed6;
  --marca-gradiente: linear-gradient(100deg, #ff922b 0%, #f06595 38%, #7048e8 68%, #1c7ed6 100%);

  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* Só a palavra SEQUOIA da barra e da entrada (a letra do logo): o resto da interface é Inter. */
  --fonte-marca: 'Outfit', var(--fonte);

  /* Apelidos do design system v2 (docs/design-system/especificacao-v2.md, "Superfícies"): o nível da superfície
     decide sombra OU contorno, e não cada tela. No claro, a sombra; o grupo leve dentro dela é o --superficie-2. */
  --elevacao-1: var(--sombra-media);
  --elevacao-2: var(--sombra-forte);
  --preenchimento-grupo: var(--superficie-2);
}

:root[data-tema='escuro'] {
  /* Sem isto, os campos nativos nascem brancos no meio da tela escura. */
  color-scheme: dark;

  --fundo: #070b18;
  --superficie: #0c1226;
  --superficie-2: #0f1730;
  --superficie-hover: #131b35;
  --borda: rgba(255, 255, 255, 0.08);
  --borda-forte: rgba(255, 255, 255, 0.16);
  --borda-campo: #56648a;

  --texto: #f1f5f9;
  --texto-2: #9aa8c7;
  /* O #6b7a9c do site dá 4,33:1 sobre o card e reprova texto pequeno. O #8290b2 passava sobre o card, mas
     dava 4,25:1 sobre --aviso-suave (selo, aviso, número em destaque): #8a97b9 passa em todos os fundos. */
  --texto-3: #8a97b9;

  /* No escuro as cores sólidas viram tons CLAROS, e texto branco em cima delas
     fica ilegível (1,92:1 no verde, 2,77:1 no vermelho). Tinta escura resolve. */
  --acento: #5b7cfa;
  --acento-forte: #7d97ff;
  --sobre-acento: #05102c;
  --sobre-acento-forte: #05102c;
  --acento-texto: #93a8ff;
  --acento-suave: rgba(91, 124, 250, 0.16);
  --acento-brilho: #6b8aff;
  --acento-anel: rgba(91, 124, 250, 0.4);

  --sucesso: #34d399;
  --sobre-sucesso: #070b18;
  --sucesso-texto: #6ee7b7;
  --sucesso-suave: rgba(52, 211, 153, 0.16);

  --aviso: #fbbf24;
  --sobre-aviso: #070b18;
  --aviso-texto: #fcd34d;
  --aviso-suave: rgba(251, 191, 36, 0.16);

  --perigo: #f87171;
  --sobre-perigo: #070b18;
  --perigo-texto: #fca5a5;
  --perigo-suave: rgba(248, 113, 113, 0.16);

  --info: #38bdf8;
  --sobre-info: #070b18;
  --info-texto: #7dd3fc;
  --info-suave: rgba(56, 189, 248, 0.16);

  --navegacao: #0a1124;
  --sobre-navegacao: #e8edf9;
  --sobre-navegacao-2: #9aa8c7;
  --navegacao-hover: rgba(255, 255, 255, 0.06);
  --navegacao-ativo: rgba(91, 124, 250, 0.2);
  --navegacao-realce: #7d97ff;

  --veu: rgba(0, 0, 0, 0.65);

  /* As séries clareiam no escuro, como as cores sólidas. */
  --serie-1: #60a5fa;
  --serie-2: #fb923c;

  /* Sombra clara não existe no escuro: vira profundidade de verdade. */
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.02);
  --sombra-media: 0 10px 24px -6px rgba(0, 0, 0, 0.6);
  --sombra-forte: 0 24px 56px -10px rgba(0, 0, 0, 0.7), 0 8px 18px -6px rgba(0, 0, 0, 0.5);
  --sombra-botao: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  --brilho: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --anel: 0 0 0 3px var(--acento-anel);
  --fundo-detalhe: radial-gradient(1000px 460px at 30% -10%, rgba(91, 124, 250, 0.13), transparent 62%);

  --marca-laranja: #ff922b;
  --marca-rosa: #f06595;
  --marca-violeta: #7048e8;
  --marca-azul: #1c7ed6;
  --marca-gradiente: linear-gradient(100deg, #ff922b 0%, #f06595 38%, #7048e8 68%, #1c7ed6 100%);

  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fonte-marca: 'Outfit', var(--fonte);

  /* Sombra preta não aparece sobre #070b18: no escuro a superfície se separa pelo fio e pela luz no topo. */
  --elevacao-1: 0 0 0 1px var(--borda), var(--brilho);
  --elevacao-2: var(--sombra-forte), 0 0 0 1px var(--borda-forte);
  --preenchimento-grupo: var(--superficie-2);
}

/* ==========================================================================
   ESCALAS: tipo, espaço, raio, alturas e movimento
   ==========================================================================
   Não mudam com o tema, por isso moram neste bloco `:root` SEM tema, e não nos dois
   de cima: repetidas lá, seriam manutenção em dobro, e esquecidas num deles a R5
   travaria o commit. scripts/checar-css.mjs recusa token de escala dentro de um
   bloco de tema. Os legados --raio, --raio-grande e --transicao saíram na fase 1g
   (o check recusa a volta deles), e --controle e --controle-pequeno vieram para cá.

   Os --tipo-* são o atalho `font` COM a família: sem ela o navegador descarta o
   valor em silêncio (CSS.supports('font', '500 12px/16px') dá false) e a R1 não pega,
   porque a variável existe. O --fonte vem do tema; a var() resolve no <html>, onde
   os dois blocos valem. O que o atalho não carrega (algarismos tabulares, espaçamento
   entre letras) fica em src/styles/tipo.module.css.
   ========================================================================== */

:root {
  --tipo-rotulo: 500 13px/20px var(--fonte);
  --tipo-corpo: 400 14px/20px var(--fonte);
  --tipo-corpo-forte: 600 14px/20px var(--fonte);
  --tipo-botao: 500 14px/20px var(--fonte);
  --tipo-bloco: 600 16px/24px var(--fonte);
  --tipo-numero: 600 20px/28px var(--fonte);
  --tipo-chave: 500 20px/28px var(--fonte);
  --tipo-pagina: 600 24px/32px var(--fonte);
  --tipo-heroi: 600 32px/40px var(--fonte);

  /* Base 4. Entre grupos, no mínimo o dobro do espaço de dentro do grupo. */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
  --espaco-7: 48px;
  --espaco-8: 64px;

  /* Raio decrescente: o de dentro é menor que o de fora (superfície 16, bloco 12, controle 8, selo 6). */
  --raio-selo: 6px;
  --raio-controle: 8px;
  --raio-bloco: 12px;
  --raio-superficie: 16px;
  --raio-sobreposicao: 20px;

  /* Uma altura de controle só, para uma linha com campo e botão alinhar: 36 px, na grade de 4. No toque (celular, tablet) as alturas
     sobem (base.css: 44, 34 e 48), porque o dedo precisa de alvo maior que o ponteiro. O pequeno (ação de linha, filtro, o ⋯) é a exceção
     deliberada; o grande, só o começo e o fim do atendimento (o campo-chave e o botão final do resumo). */
  --controle: 36px;
  --controle-pequeno: 28px;
  --controle-grande: 44px;
  --linha-lista: 48px;
  --linha-lista-dupla: 64px;
  /* A barra fixa do topo: base.css desconta dela o alvo de foco e de âncora. */
  --altura-topo: 52px;

  /* Duração e curva separadas: a redução de movimento zera a duração sem mexer no resto. */
  --duracao-rapida: 120ms;
  --duracao-media: 200ms;
  --duracao-entrar: 240ms;
  --duracao-realce: 1200ms;
  --curva-padrao: cubic-bezier(0.2, 0, 0, 1);
  --curva-entrar: cubic-bezier(0.05, 0.7, 0.1, 1);
}

/* ==========================================================================
   Site público da Sequoia
   As cores, as sombras e as curvas vêm do MESMO tokens.css do app (a cópia site/src/tokens.css, gerada por `npm run site:tokens`): nenhuma
   cor nova, nenhum literal aqui (o check:css recusa). A escala de letra e de espaço é a do site, que fala com quem decide a compra e não
   com quem opera a tela, então os tamanhos são maiores que os do app.
   O tema segue o sistema (prefers-color-scheme), pelo script do <head> que põe data-tema antes da primeira pintura.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fontes/inter-latin-opsz-normal.2c295d99e2.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --largura-miolo: 72rem;
  --largura-leitura: 44rem;
  --margem: clamp(1.25rem, 4.5vw, 2.5rem);
  --ritmo: clamp(4rem, 9vw, 8rem);
  --raio-janela: 0.75rem;
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: -0.006em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 1.2rem + 3.2vw, 3.25rem);
  letter-spacing: -0.038em;
  line-height: 1.06;
}

h2 {
  font-size: clamp(1.875rem, 1.2rem + 2.4vw, 2.875rem);
}

h3 {
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

a {
  color: var(--acento-texto);
  text-underline-offset: 0.2em;
}

a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 4px;
}

.somente-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.miolo {
  width: 100%;
  max-width: calc(var(--largura-miolo) + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: var(--margem);
}

.miolo-estreito {
  max-width: calc(var(--largura-leitura) + 2 * var(--margem));
}

.pular {
  position: absolute;
  left: var(--margem);
  top: -4rem;
  z-index: 10;
  padding: 0.625rem 1rem;
  border-radius: var(--raio-controle);
  background: var(--acento);
  color: var(--sobre-acento);
  font-weight: 600;
  text-decoration: none;
}

.pular:focus {
  top: 0.75rem;
}

/* Marcador de pendência: só aparece na prévia, e a publicação de produção recusa o build enquanto houver um (site/construir.mjs). */
.falta {
  padding: 0 0.3em;
  border-radius: 4px;
  background: var(--aviso-suave);
  color: var(--aviso-texto);
  font-weight: 600;
  font-size: 0.92em;
}

/* ---------- Botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--raio-controle);
  font: inherit;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  transition:
    background-color var(--duracao-rapida) var(--curva-padrao),
    border-color var(--duracao-rapida) var(--curva-padrao);
}

.botao-principal {
  background: var(--acento);
  color: var(--sobre-acento);
  box-shadow: var(--sombra-botao);
}

.botao-principal:hover {
  background: var(--acento-brilho);
}

.botao-fantasma {
  background: var(--navegacao-hover);
  border-color: var(--navegacao-ativo);
  color: var(--sobre-navegacao);
}

.botao-fantasma:hover {
  background: var(--navegacao-ativo);
}

.botao-compacto {
  min-height: 2.5rem;
  padding: 0 1.125rem;
  font-size: 0.9375rem;
  white-space: nowrap;
  background: var(--acento);
  color: var(--sobre-acento);
}

.botao-grande {
  min-height: 3.5rem;
  padding: 0 2rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

/* ---------- O topo e as faixas azul-marinho ---------- */

.topo,
.heroi,
.final {
  background: var(--navegacao);
  color: var(--sobre-navegacao);
}

.topo :focus-visible,
.heroi :focus-visible,
.final :focus-visible {
  outline-color: var(--navegacao-realce);
}

.filete {
  height: 3px;
  background: var(--marca-gradiente);
}

.topo-linha {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 4.25rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--sobre-navegacao);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.22em;
}

.marca img {
  border-radius: 7px;
}

.menu {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
}

.menu a {
  color: var(--sobre-navegacao-2);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.menu a:hover {
  color: var(--sobre-navegacao);
}

.topo .botao-compacto {
  margin-left: 0;
}

@media (max-width: 47.99rem) {
  .menu {
    display: none;
  }

  .topo .botao-compacto {
    margin-left: auto;
  }
}

/* ---------- O alto da página ---------- */

.heroi {
  padding-block: clamp(2.25rem, 6vw, 4.5rem) clamp(4rem, 9vw, 7rem);
  overflow: clip;
}

.heroi-grade {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .heroi-grade {
    grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
  }
}

.chamada {
  margin-bottom: 1.25rem;
  color: var(--sobre-navegacao-2);
  font-size: 1rem;
  font-weight: 500;
}

.heroi h1 {
  margin-bottom: 1.5rem;
}

.apoio {
  max-width: 34rem;
  margin-bottom: 2rem;
  color: var(--sobre-navegacao-2);
  font-size: 1.1875rem;
  line-height: 1.55;
}

.heroi .nota {
  margin: 1.25rem 0 0;
  color: var(--sobre-navegacao-2);
  font-size: 0.9375rem;
}

.vitrine {
  position: relative;
  margin: 0;
  padding-bottom: 8rem;
}

@media (min-width: 62rem) {
  .vitrine {
    margin-right: calc(-1 * var(--margem));
  }
}

.vitrine-tela {
  width: 100%;
  border-radius: var(--raio-janela);
  box-shadow:
    0 0 0 1px var(--navegacao-ativo),
    var(--sombra-forte);
}

/* O Resumo da OS sobre o canto de baixo da janela: pendura abaixo dela e fica longe dos números do alto da tela do Atendimento. */
.vitrine-destaque {
  position: absolute;
  left: clamp(-1.5rem, -2vw, -0.5rem);
  bottom: 1.5rem;
  width: min(40%, 17.5rem);
  animation: entrar 700ms var(--curva-entrar) 450ms both;
}

.vitrine-resumo {
  width: 100%;
  border-radius: 1rem;
  box-shadow:
    0 0 0 1px var(--navegacao-ativo),
    var(--sombra-forte);
}

@media (max-width: 40rem) {
  .vitrine {
    padding-bottom: 3.5rem;
  }

  .vitrine-destaque {
    left: auto;
    right: 0;
    bottom: 2.25rem;
    width: min(56%, 15rem);
  }
}

@keyframes entrar {
  from {
    opacity: 0;
    transform: translateY(0.875rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vitrine-destaque {
    animation: none;
  }
}

.vitrine figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  color: var(--sobre-navegacao-2);
  font-size: 0.8125rem;
}

/* A vitrine sangra para a margem da página nas duas colunas: a legenda volta para dentro, alinhada ao resto do conteúdo. */
@media (min-width: 62rem) {
  .vitrine figcaption {
    right: var(--margem);
  }
}

@media (max-width: 40rem) {
  .vitrine figcaption {
    left: 0;
    right: auto;
  }
}

/* ---------- As seções ---------- */

.secao {
  padding-block: var(--ritmo);
}

.secao-clara {
  background: var(--superficie);
}

.secao h2 {
  max-width: 24ch;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

/* O que escapa hoje: a dor ao lado da regra que o sistema impõe. Sem cor de estado (só a exceção leva cor, decisão 0004). */
.pares {
  border-bottom: 1px solid var(--borda-forte);
}

.par {
  display: grid;
  gap: 1rem 3rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--borda-forte);
}

@media (min-width: 52rem) {
  .par {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.par p {
  margin: 0;
}

.hoje {
  color: var(--texto-3);
}

.com {
  color: var(--texto);
}

.rotulo-par {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--texto-3);
  font-size: 0.875rem;
  font-weight: 500;
}

.com .rotulo-par {
  color: var(--acento-texto);
}

.fecho {
  max-width: 30ch;
  margin: clamp(2.5rem, 6vw, 4.5rem) 0 0;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.375rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

/* Um dia na ECV: cinco passos, de verdade em sequência (por isso o número). */
.passos {
  display: grid;
  gap: clamp(3.5rem, 7vw, 6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.passo {
  display: grid;
  gap: 2rem clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

@media (min-width: 62rem) {
  .passo {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.passo-num {
  margin: 0 0 0.75rem;
  color: var(--acento-texto);
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
}

.passo-texto h3 {
  margin-bottom: 1rem;
}

.passo-texto p {
  max-width: 36rem;
  color: var(--texto-2);
}

.passo-figura {
  margin: 0;
}

.passo-tela {
  width: 100%;
  border-radius: var(--raio-janela);
  box-shadow:
    0 0 0 1px var(--borda-forte),
    var(--elevacao-2);
}

/* A Nova OS é uma imagem em pé (só a coluna do formulário): mais estreita que as telas inteiras e ainda legível. */
.passo-figura-estreita {
  max-width: 34rem;
}

/* O caixa do dia com o Resumo do fechamento sobre ele (o mesmo cartão do alto da página): a gaveta e a conta da diferença. */
.passo-destaque {
  margin-top: 1rem;
}

.passo-fechamento {
  width: min(100%, 20rem);
  border-radius: 1rem;
  box-shadow:
    0 0 0 1px var(--borda-forte),
    var(--elevacao-2);
}

@media (min-width: 40rem) {
  .passo-figura-dupla {
    position: relative;
    padding-bottom: 4.5rem;
  }

  .passo-destaque {
    position: absolute;
    right: clamp(0.5rem, 3vw, 2rem);
    bottom: 1.75rem;
    width: 40%;
    max-width: 18rem;
    margin: 0;
  }

  .passo-fechamento {
    width: 100%;
  }

  .passo-figura.passo-figura-dupla figcaption {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
  }
}

.passo-figura figcaption,
.resposta-figura figcaption {
  margin-top: 0.75rem;
  color: var(--texto-3);
  font-size: 0.8125rem;
}

/* ---------- Quem faz a Sequoia ---------- */

.quem {
  display: grid;
  gap: 1.5rem 2.5rem;
  align-items: start;
}

@media (min-width: 40rem) {
  .quem {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.quem-foto {
  width: 9rem;
  height: 9rem;
  border-radius: 1rem;
  object-fit: cover;
}

.quem-texto {
  max-width: 38rem;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.55;
}

/* ---------- Preço ---------- */

.preco-painel {
  display: grid;
  gap: 2.5rem 4rem;
  padding: clamp(1.5rem, 4.5vw, 3.5rem);
  border-radius: 1.25rem;
  background: var(--superficie);
  box-shadow:
    0 0 0 1px var(--borda),
    var(--elevacao-1);
}

@media (min-width: 56rem) {
  .preco-painel {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
  }
}

.preco-valor {
  margin: 0;
  font-size: clamp(3rem, 2rem + 4vw, 4.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.preco-por {
  margin: 0.5rem 0 1.75rem;
  color: var(--texto-2);
  font-size: 1.25rem;
}

.preco-texto p:not(.preco-valor, .preco-por, .acoes) {
  max-width: 34rem;
  color: var(--texto-2);
}

.preco-texto .acoes {
  margin-top: 1.75rem;
}

.preco-tabela {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.preco-tabela th,
.preco-tabela td {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--borda-forte);
  text-align: left;
}

.preco-tabela th {
  color: var(--texto-3);
  font-size: 0.875rem;
  font-weight: 500;
}

.preco-tabela td:last-child,
.preco-tabela th:last-child {
  text-align: right;
}

.preco-tabela tbody th {
  color: var(--texto);
  font-size: 1.0625rem;
  font-weight: 500;
}

.preco-tabela td {
  font-size: 1.0625rem;
  font-weight: 600;
}

/* ---------- Como começar ---------- */

.comecar {
  display: grid;
  gap: 1.75rem;
  max-width: 46rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.comecar li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.comecar p {
  margin: 0;
  color: var(--texto-2);
  font-size: 1.1875rem;
}

.comecar-num {
  color: var(--acento-texto);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

/* ---------- Perguntas ---------- */

.perguntas-grade {
  display: grid;
  gap: 2rem 4rem;
}

@media (min-width: 62rem) {
  .perguntas-grade {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
  }

  .perguntas-grade h2 {
    position: sticky;
    top: 2rem;
  }
}

.perguntas-grade h2 {
  margin-bottom: 0;
}

.perguntas {
  border-bottom: 1px solid var(--borda-forte);
}

.pergunta {
  border-top: 1px solid var(--borda-forte);
}

.pergunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.375rem;
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.pergunta summary::-webkit-details-marker {
  display: none;
}

/* O mais e o menos desenhados com duas barras: um símbolo de texto dependeria da fonte (a Inter latina não tem setas nem sinais soltos). */
.pergunta summary::after {
  content: '';
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  background:
    linear-gradient(var(--texto-2), var(--texto-2)) center / 100% 2px no-repeat,
    linear-gradient(var(--texto-2), var(--texto-2)) center / 2px 100% no-repeat;
  transition: transform var(--duracao-media) var(--curva-padrao);
}

.pergunta[open] summary::after {
  background:
    linear-gradient(var(--texto-2), var(--texto-2)) center / 100% 2px no-repeat;
}

.resposta {
  padding-bottom: 1.5rem;
}

.resposta p {
  max-width: 40rem;
  margin: 0;
  color: var(--texto-2);
}

.resposta-figura {
  max-width: 17rem;
  margin: 1.5rem 0 0;
}

.resposta-celular {
  width: 100%;
  border-radius: 1.5rem;
  box-shadow:
    0 0 0 1px var(--borda-forte),
    var(--elevacao-2);
}

/* ---------- A chamada final ---------- */

.final {
  padding-block: clamp(4rem, 9vw, 7rem);
}

.final-grade {
  display: grid;
  gap: 2.5rem 4rem;
  align-items: center;
}

@media (min-width: 62rem) {
  .final-grade {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.final h2 {
  max-width: 20ch;
  margin-bottom: 1rem;
}

.final .apoio {
  margin: 0;
}

.final-acoes .acoes {
  margin-bottom: 1rem;
}

.final-acoes p {
  margin: 0 0 0.375rem;
  color: var(--sobre-navegacao-2);
  font-size: 0.9375rem;
}

.final-acoes a {
  color: var(--sobre-navegacao);
}

.final-acoes .acoes a.botao {
  color: var(--sobre-acento);
}

/* ---------- O rodapé ---------- */

.rodape {
  padding-block: 2.5rem;
  border-top: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto-2);
  font-size: 0.9375rem;
}

.rodape p {
  margin: 0 0 0.625rem;
}

.rodape-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.75rem;
}

.rodape-copia {
  margin-top: 1.25rem;
  color: var(--texto-3);
}

/* ---------- Páginas de texto (Privacidade deste site) ---------- */

.texto-pagina {
  padding-block: clamp(2.5rem, 7vw, 5rem) var(--ritmo);
}

.texto-pagina h1 {
  margin-bottom: 0.5rem;
  font-size: clamp(2.125rem, 1.4rem + 2.8vw, 3rem);
}

.texto-pagina h2 {
  max-width: none;
  margin: 2.5rem 0 0.75rem;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.texto-pagina p {
  color: var(--texto-2);
}

.texto-pagina .atualizada {
  margin-bottom: 2rem;
  color: var(--texto-3);
  font-size: 0.9375rem;
}

.texto-pagina .voltar {
  margin-top: 3rem;
}