/* Velortec — site institucional
   Usa só os tokens de tokens.css (copiado de 02-identidade, sem o @import de
   fontes: as fontes entram por <link> com preconnect no HTML). */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--texto-base);
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 {
  font-family: var(--fonte-titulo);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--cor-marca); text-underline-offset: 0.2em; }
a:hover { color: var(--cor-marca-forte); }
:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 3px;
  border-radius: var(--raio-xs);
}

.pular {
  position: absolute;
  left: var(--esp-4);
  top: -100px;
  z-index: var(--z-aviso);
  padding: var(--esp-3) var(--esp-4);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-md);
  font-weight: var(--peso-semibold);
}
.pular:focus { top: var(--esp-3); }

.container {
  width: 100%;
  max-width: calc(var(--largura-conteudo) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  --gutter: var(--esp-4);
}
@media (min-width: 640px) { .container { --gutter: var(--esp-6); } }
@media (min-width: 1024px) { .container { --gutter: var(--esp-8); } }

/* ---------- logo (regras de CONCEITOS.md) ----------
   Claro: V em gradiente + palavra #18132D (versão cor).
   Escuro: mono branco, porque no topo o lockup fica abaixo de 160 px. */
:root { --logo-palavra: var(--cor-noite-950); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) { --logo-palavra: var(--cor-branco); }
  :root:not([data-tema='claro']) .logo-v { fill: var(--cor-branco); }
}
:root[data-tema='escuro'] { --logo-palavra: var(--cor-branco); }
:root[data-tema='escuro'] .logo-v { fill: var(--cor-branco); }
.logo-palavra { fill: var(--logo-palavra); }
.defs-svg { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 3rem;
  padding: var(--esp-3) var(--esp-6);
  border-radius: var(--raio-lg);
  font: var(--peso-semibold) var(--texto-base)/1.2 var(--fonte-texto);
  text-decoration: none;
  text-align: center;
  transition: background-color var(--dur-rapida) var(--ease-padrao),
              box-shadow var(--dur-rapida) var(--ease-padrao),
              border-color var(--dur-rapida) var(--ease-padrao);
}
/* o CTA acende no hover, nos dois temas (DESIGN-SYSTEM §3) */
.botao-acao {
  background: var(--cor-acao);
  border: 1px solid var(--cor-acao-borda);
  color: var(--cor-acao-texto);
}
.botao-acao:hover { background: var(--cor-acao-forte); color: var(--cor-acao-texto); box-shadow: var(--sombra-acao); }
.botao-acao:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.botao-secundario {
  background: transparent;
  border: 1px solid var(--cor-borda-forte);
  color: var(--cor-texto);
}
.botao-secundario:hover { color: var(--cor-texto); border-color: var(--cor-texto); }
.botao-grande { min-height: 3.5rem; padding-inline: var(--esp-8); font-size: var(--texto-lg); }

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-weight: var(--peso-semibold);
  text-decoration: none;
}
.link-seta::after { content: '→'; transition: transform var(--dur-rapida) var(--ease-padrao); }
.link-seta:hover::after { transform: translateX(3px); }

/* ---------- cabeçalho ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: var(--z-fixo);
  background: color-mix(in srgb, var(--cor-fundo) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--cor-borda);
}
.topo-linha {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: 4rem;
}
.topo-logo { display: flex; align-items: center; padding: var(--esp-2) 0; margin-right: auto; }
.topo-logo .logo-horizontal { display: none; height: 28px; width: auto; }
.topo-logo .logo-simbolo { height: 32px; width: 32px; }
@media (min-width: 900px) {
  .topo-logo .logo-horizontal { display: block; }
  .topo-logo .logo-simbolo { display: none; }
}

.nav ul { display: flex; flex-direction: column; }
.nav a {
  display: block;
  padding: var(--esp-3) 0;
  color: var(--cor-texto-suave);
  text-decoration: none;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
}
.nav a:hover { color: var(--cor-texto); }
@media (max-width: 1023.98px) {
  .nav {
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--cor-fundo);
    border-bottom: 1px solid var(--cor-borda);
    padding: var(--esp-2) var(--esp-4) var(--esp-4);
  }
  .nav a { font-size: var(--texto-lg); padding: var(--esp-3) 0; border-bottom: 1px solid var(--cor-borda); }
  .js .menu-botao[aria-expanded='false'] ~ .nav { display: none; }
}
@media (min-width: 1024px) {
  .nav ul { flex-direction: row; gap: var(--esp-6); }
  .nav a { white-space: nowrap; }
  .topo .menu-botao { display: none; }
}
html:not(.js) .menu-botao, html:not(.js) .tema-botao { display: none; }
@media (max-width: 1023.98px) {
  html:not(.js) .nav { position: static; border: 0; padding: 0; flex-basis: 100%; order: 3; }
  html:not(.js) .topo-linha { flex-wrap: wrap; }
}

.icone-botao {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: transparent;
  color: var(--cor-texto);
  cursor: pointer;
}
.icone-botao:hover { border-color: var(--cor-borda-forte); }
.icone-botao svg { width: 20px; height: 20px; }
.tema-botao .i-sol { display: none; }
.tema-botao[aria-pressed='true'] .i-sol { display: block; }
.tema-botao[aria-pressed='true'] .i-lua { display: none; }
.menu-botao .i-fechar { display: none; }
.menu-botao[aria-expanded='true'] .i-fechar { display: block; }
.menu-botao[aria-expanded='true'] .i-menu { display: none; }
.topo-contato { display: none; }
@media (min-width: 1024px) {
  .topo-contato { display: inline-flex; min-height: 2.75rem; padding-inline: var(--esp-4); font-size: var(--texto-sm); }
  .nav { margin-right: var(--esp-2); }
}

/* ---------- seções ---------- */
.secao { padding-block: clamp(5rem, 3rem + 7vw, 9rem); }
.secao-sutil { background: var(--cor-fundo-sutil); }
.secao + .secao:not(.secao-sutil):not(.faixa-noite) { border-top: 1px solid var(--cor-borda); }

.rotulo {
  display: block;
  margin-bottom: var(--esp-4);
  font-family: var(--fonte-mono);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--cor-destaque);
}
.titulo-secao {
  font-size: clamp(2rem, 1.35rem + 2.8vw, 3.5rem);
  font-weight: var(--peso-extrabold);
  line-height: var(--lh-apertada);
  letter-spacing: var(--ls-display);
  max-width: 20ch;
}
.lead {
  margin-top: var(--esp-6);
  max-width: 60ch;
  font-size: var(--texto-lg);
  line-height: var(--lh-corpo);
  color: var(--cor-texto-suave);
}
.cabeca-secao { margin-bottom: clamp(3rem, 2rem + 4vw, 5rem); }

/* ---------- hero ---------- */
.hero { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(4rem, 2rem + 7vw, 8rem); }
.hero-grade { display: grid; gap: clamp(3rem, 2rem + 4vw, 5rem); align-items: center; }
@media (min-width: 1024px) { .hero-grade { grid-template-columns: 1.08fr 1fr; } }
.hero h1 {
  font-size: clamp(2.6rem, 1.5rem + 5.2vw, 5.25rem);
  font-weight: var(--peso-extrabold);
  line-height: 1;
  letter-spacing: var(--ls-display);
  max-width: 12ch;
}
.hero .lead { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.35rem); max-width: 36rem; }
.hero-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-4) var(--esp-6); margin-top: var(--esp-10); }
.hero-nota { margin-top: var(--esp-4); font-size: var(--texto-sm); color: var(--cor-texto-suave); }

@media (prefers-reduced-motion: no-preference) {
  .surge { animation: surge var(--dur-entrada) var(--ease-entrada) both; }
  .surge-2 { animation-delay: 90ms; }
  .surge-3 { animation-delay: 180ms; }
  .surge-4 { animation-delay: 300ms; }
}
@keyframes surge { from { opacity: 0; transform: translateY(12px); } }

/* o "produto" do hero: um Mapa das Horas de exemplo, sobre o único gradiente da vista */
/* figure: zera a margem padrão do navegador */
.mapa-painel {
  margin: 0;
  background: var(--grad-marca);
  border-radius: var(--raio-2xl);
  padding: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  box-shadow: var(--sombra-marca);
}
.mapa-cartao {
  background: var(--cor-superficie);
  border-radius: var(--raio-xl);
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  box-shadow: var(--sombra-xl);
}
.mapa-cabeca {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--esp-3);
  padding-bottom: var(--esp-4);
  border-bottom: 1px solid var(--cor-borda);
}
.mapa-cabeca strong { font-family: var(--fonte-titulo); font-size: var(--texto-lg); letter-spacing: var(--ls-subtitulo); }
.mapa-cabeca span, .mapa-conta, .mono { font-family: var(--fonte-mono); font-size: var(--texto-xs); color: var(--cor-texto-suave); }
.mapa-tarefas li { padding-block: var(--esp-4); border-bottom: 1px solid var(--cor-borda); }
.mapa-linha { display: flex; justify-content: space-between; gap: var(--esp-3); align-items: baseline; }
.mapa-linha span:first-child { font-size: var(--texto-sm); font-weight: var(--peso-medio); }
.mapa-horas { font-family: var(--fonte-mono); font-size: var(--texto-sm); font-weight: var(--peso-medio); white-space: nowrap; }
.mapa-conta { display: block; margin-top: var(--esp-1); }
.barra { height: 6px; margin-top: var(--esp-3); border-radius: var(--raio-pilula); background: var(--cor-fundo-sutil); overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: inherit; background: var(--cor-marca); }
.barra .b-21 { width: 21%; } .barra .b-69 { width: 69%; } .barra .b-10 { width: 10%; }
.mapa-total { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--esp-3); padding-top: var(--esp-5); flex-wrap: wrap; }
.mapa-total small { display: block; font-size: var(--texto-sm); color: var(--cor-texto-suave); }
.mapa-total strong {
  font-family: var(--fonte-titulo);
  font-size: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--cor-destaque);
}
.mapa-legenda { margin-top: var(--esp-4); font-size: var(--texto-sm); color: var(--cor-branco); }

/* ---------- três portas: empilhadas até 1024 px, lado a lado depois ---------- */
.portas { display: grid; gap: var(--esp-4); }
@media (min-width: 1024px) { .portas { grid-template-columns: repeat(3, 1fr); gap: var(--esp-6); } }
.porta {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-xl);
  transition: border-color var(--dur-rapida) var(--ease-padrao), box-shadow var(--dur-rapida) var(--ease-padrao);
}
.porta:hover { border-color: var(--cor-borda-forte); box-shadow: var(--sombra-lg); }
.porta h3 { font-size: clamp(1.6rem, 1.3rem + 0.9vw, 1.9rem); line-height: var(--lh-titulo); letter-spacing: var(--ls-titulo); }
.porta p { margin-top: var(--esp-4); font-size: var(--texto-lg); color: var(--cor-texto-suave); max-width: 32ch; }
.chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-8); }
.chips li {
  padding: var(--esp-1) var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pilula);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}
.porta .link-seta { margin-top: auto; padding-top: var(--esp-8); }
/* porta Eventos: as três entradas no lugar do link único */
.porta-entradas { margin-top: auto; padding-top: var(--esp-8); }
.porta-entradas li { border-top: 1px solid var(--cor-borda); }
.porta-entradas .link-seta { display: flex; justify-content: space-between; margin-top: 0; padding-block: var(--esp-3); }

/* ---------- Mapa das Horas ---------- */
.mapa-grade { display: grid; gap: var(--esp-12); }
@media (min-width: 1024px) { .mapa-grade { grid-template-columns: 1fr 1fr; gap: var(--esp-20); } }
.mapa-grade .botao { margin-top: var(--esp-10); }
.mapa-grade .hero-nota { margin-top: var(--esp-3); }
.bloco + .bloco { margin-top: var(--esp-12); }
.bloco h3 { font-size: var(--texto-xl); letter-spacing: var(--ls-subtitulo); margin-bottom: var(--esp-5); }
.passos { counter-reset: passo; }
.passos li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--esp-3);
  padding-block: var(--esp-4);
  border-top: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave);
}
.passos li::before {
  content: counter(passo, decimal-leading-zero);
  font-family: var(--fonte-mono);
  font-size: var(--texto-sm);
  color: var(--cor-destaque);
  padding-top: 0.15em;
}
.marcas li {
  position: relative;
  padding: var(--esp-4) 0 var(--esp-4) var(--esp-8);
  border-top: 1px solid var(--cor-borda);
}
.marcas li::before {
  content: '';
  position: absolute;
  left: 0.2rem;
  top: 1.45rem;
  width: 0.9rem;
  height: 0.5rem;
  border-left: 2px solid var(--cor-marca);
  border-bottom: 2px solid var(--cor-marca);
  transform: rotate(-45deg);
}
.frase-marca {
  margin-top: var(--esp-10);
  padding-left: var(--esp-5);
  border-left: 3px solid var(--cor-destaque);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-xl);
  font-weight: var(--peso-semibold);
  line-height: var(--lh-subtitulo);
  letter-spacing: var(--ls-subtitulo);
}

/* ---------- linhas: 2 colunas, Piloto Automático na largura toda ---------- */
.linhas { display: grid; gap: var(--esp-4); }
@media (min-width: 768px) {
  .linhas { grid-template-columns: 1fr 1fr; gap: var(--esp-6); }
  .linha-estrela { grid-column: 1 / -1; }
  .linha-estrela .modulos { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--esp-8); }
}
@media (min-width: 1024px) {
  .linha-estrela { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--esp-16); }
  .linha-estrela .modulos-rotulo { margin-top: 0; }
}
.linha {
  position: relative;
  padding: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-xl);
}
.linha-estrela { border-color: var(--cor-destaque); }
.linha-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-6); }
.selo {
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--raio-pilula);
  background: var(--cor-destaque-suave);
  color: var(--cor-destaque);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
}
.linha h3 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); letter-spacing: var(--ls-titulo); line-height: var(--lh-titulo); }
.promessa {
  margin-top: var(--esp-3);
  font-size: var(--texto-lg);
  font-weight: var(--peso-medio);
  line-height: var(--lh-subtitulo);
  color: var(--cor-marca-forte);
}
.para-quem { margin-top: var(--esp-4); color: var(--cor-texto-suave); }
.modulos-rotulo {
  margin-top: var(--esp-8);
  font-family: var(--fonte-mono);
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-rotulo);
  color: var(--cor-texto-suave);
}
.modulos { margin: var(--esp-3) 0 0; }
.modulos div { padding-block: var(--esp-4); border-top: 1px solid var(--cor-borda); }
.modulos dt { font-weight: var(--peso-semibold); }
.modulos dd { margin: var(--esp-1) 0 0; font-size: var(--texto-sm); color: var(--cor-texto-suave); }
.linha .chips { margin-top: var(--esp-3); }
.linha .link-seta { margin-top: var(--esp-6); }
.nota-linhas { margin-top: var(--esp-8); font-size: var(--texto-sm); color: var(--cor-texto-suave); }

/* ---------- Eventos ---------- */
.exemplos h3 { margin-bottom: var(--esp-3); font-size: var(--texto-xl); letter-spacing: var(--ls-subtitulo); line-height: var(--lh-subtitulo); }
@media (min-width: 640px) { .exemplos.exemplos-3 { grid-template-columns: 1fr; } }
@media (min-width: 1024px) { .exemplos.exemplos-3 { grid-template-columns: repeat(3, 1fr); } }
.entradas { display: grid; gap: var(--esp-4); margin-top: var(--esp-12); }
@media (min-width: 1024px) { .entradas { grid-template-columns: repeat(3, 1fr); gap: var(--esp-6); } }
.entrada {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-xl);
}
.entrada h3 { font-size: var(--texto-xl); letter-spacing: var(--ls-subtitulo); line-height: var(--lh-subtitulo); }
.entrada p { margin: var(--esp-3) 0 var(--esp-8); color: var(--cor-texto-suave); }
.entrada .botao { margin-top: auto; }

/* ---------- Clientes ---------- */
.clientes { display: grid; gap: var(--esp-6); margin-top: var(--esp-12); }
@media (min-width: 768px) and (max-width: 1023px) { .clientes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .clientes { grid-template-columns: repeat(3, 1fr); } }
.cliente {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-xl);
}
.cliente img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--cor-borda); }
.cliente-corpo { display: flex; flex-direction: column; flex: 1; padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
.cliente-corpo .linha-topo { flex-direction: column; align-items: flex-start; gap: var(--esp-3); margin-bottom: var(--esp-4); }
.cliente h3 { font-size: var(--texto-2xl); letter-spacing: var(--ls-titulo); line-height: var(--lh-titulo); }
.cliente .chips { margin-top: var(--esp-6); }
.cliente .link-seta { margin-top: auto; padding-top: var(--esp-6); }
.selo-no-ar { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }

/* ---------- o que dá para automatizar ---------- */
.exemplos { display: grid; gap: 1px; background: var(--cor-borda); border: 1px solid var(--cor-borda); border-radius: var(--raio-xl); overflow: hidden; }
@media (min-width: 640px) { .exemplos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .exemplos { grid-template-columns: repeat(4, 1fr); } }
.exemplos li { background: var(--cor-superficie); padding: var(--esp-6); }
.exemplos .mono { display: block; margin-bottom: var(--esp-3); color: var(--cor-marca); text-transform: uppercase; letter-spacing: var(--ls-rotulo); }
.exemplos p { font-size: var(--texto-base); }
.teste {
  display: grid;
  gap: var(--esp-6);
  margin-top: var(--esp-12);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-xl);
  background: var(--cor-marca-suave);
}
@media (min-width: 1024px) { .teste { grid-template-columns: 1fr 1.4fr; align-items: start; gap: var(--esp-16); } }
.teste h3 { font-size: var(--texto-2xl); letter-spacing: var(--ls-titulo); line-height: var(--lh-titulo); }
.teste ol { counter-reset: q; }
.teste li { counter-increment: q; display: flex; gap: var(--esp-3); padding-block: var(--esp-3); border-bottom: 1px solid var(--cor-borda); font-size: var(--texto-lg); }
.teste li::before { content: counter(q) '.'; font-family: var(--fonte-mono); color: var(--cor-destaque); font-size: var(--texto-base); padding-top: 0.15em; }
.teste-fim { margin-top: var(--esp-5); }
.teste-fim strong { display: block; margin-bottom: var(--esp-2); }

/* ---------- como a gente trabalha ---------- */
.etapas { display: grid; gap: var(--esp-4); counter-reset: etapa; }
@media (min-width: 768px) { .etapas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .etapas { grid-template-columns: repeat(3, 1fr); gap: var(--esp-6) var(--esp-8); } }
.etapa {
  counter-increment: etapa;
  padding-top: var(--esp-5);
  border-top: 2px solid var(--cor-texto);
}
.etapa::before { content: counter(etapa, decimal-leading-zero); font-family: var(--fonte-mono); font-size: var(--texto-sm); color: var(--cor-destaque); }
.etapa h3 { margin-top: var(--esp-4); font-size: var(--texto-xl); letter-spacing: var(--ls-subtitulo); line-height: var(--lh-subtitulo); }
.etapa .prazo { display: inline-block; margin-top: var(--esp-2); font-family: var(--fonte-mono); font-size: var(--texto-xs); color: var(--cor-marca); }
.etapa p { margin-top: var(--esp-3); font-size: var(--texto-sm); color: var(--cor-texto-suave); }
.etapa p strong { color: var(--cor-texto); }
.etapa { padding-bottom: var(--esp-6); }

/* ---------- compromissos ---------- */
.valores { display: grid; gap: 0 var(--esp-12); counter-reset: valor; }
@media (min-width: 768px) { .valores { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .valores { grid-template-columns: repeat(3, 1fr); } }
.valores li { counter-increment: valor; padding-block: var(--esp-8); border-top: 1px solid var(--cor-borda); }
.valores li::before { content: counter(valor, decimal-leading-zero); display: block; margin-bottom: var(--esp-4); font-family: var(--fonte-mono); font-size: var(--texto-sm); color: var(--cor-destaque); }
.valores h3 { font-size: var(--texto-xl); line-height: var(--lh-subtitulo); letter-spacing: var(--ls-subtitulo); }
.valores p { margin-top: var(--esp-3); color: var(--cor-texto-suave); }

/* ---------- IA sem milagre: faixa escura em qualquer tema ----------
   Reaplica os papéis do tema escuro (mesmos tokens, nenhuma cor nova). */
.faixa-noite {
  --cor-texto: var(--cor-neutro-50);
  --cor-texto-suave: var(--cor-neutro-300);
  --cor-borda: rgb(255 255 255 / 0.14);
  --cor-destaque: var(--cor-magenta-300);
  --cor-marca: var(--cor-roxo-300);
  --cor-foco: var(--cor-acento-300);
  background: var(--grad-noite);
  color: var(--cor-texto);
}
.ia-grade { display: grid; gap: var(--esp-12); }
@media (min-width: 1024px) { .ia-grade { grid-template-columns: 1fr 1fr; gap: var(--esp-20); align-items: start; } }
.citacao { margin: var(--esp-10) 0 0; }
.citacao p {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  font-weight: var(--peso-semibold);
  line-height: var(--lh-subtitulo);
  letter-spacing: var(--ls-subtitulo);
}
.posturas li { padding-block: var(--esp-6); border-top: 1px solid var(--cor-borda); }
.posturas li:last-child { border-bottom: 1px solid var(--cor-borda); }
.posturas h3 { font-size: var(--texto-xl); letter-spacing: var(--ls-subtitulo); }
.posturas p { margin-top: var(--esp-2); color: var(--cor-texto-suave); }

/* ---------- perguntas ---------- */
.faq-grade { display: grid; gap: var(--esp-10); }
@media (min-width: 1024px) { .faq-grade { grid-template-columns: 1fr 1.6fr; gap: var(--esp-20); } }
.faq details { border-top: 1px solid var(--cor-borda); }
.faq details:last-child, .faq details:has(+ .faq-grupo) { border-bottom: 1px solid var(--cor-borda); }
.faq-grupo {
  margin: var(--esp-12) 0 var(--esp-4);
  font-family: var(--fonte-mono);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--ls-rotulo);
  color: var(--cor-destaque);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-4);
  padding-block: var(--esp-6);
  cursor: pointer;
  list-style: none;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  font-weight: var(--peso-semibold);
  letter-spacing: var(--ls-subtitulo);
  line-height: var(--lh-subtitulo);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: 0.65rem;
  height: 0.65rem;
  margin-right: 0.3rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--dur-media) var(--ease-padrao);
}
.faq details[open] summary::after { transform: translateY(25%) rotate(-135deg); }
.faq summary:hover { color: var(--cor-marca); }
.faq .resposta { padding-bottom: var(--esp-6); max-width: 62ch; color: var(--cor-texto-suave); }
.faq .resposta p + p { margin-top: var(--esp-3); }

/* ---------- sobre ---------- */
.sobre-grade { display: grid; gap: var(--esp-10); align-items: center; }
@media (min-width: 900px) { .sobre-grade { grid-template-columns: 0.8fr 1.2fr; gap: var(--esp-20); } }
.foto-reservada {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  max-width: 26rem;
  width: 100%;
  border-radius: var(--raio-2xl);
  background: var(--grad-marca);
}
.foto-reservada svg { width: 30%; height: auto; }
.foto-reservada .logo-v { fill: var(--cor-branco); }
.sobre-texto p { margin-top: var(--esp-5); max-width: 58ch; color: var(--cor-texto-suave); font-size: var(--texto-lg); }
.assinatura-pessoa { margin-top: var(--esp-10); padding-top: var(--esp-6); border-top: 1px solid var(--cor-borda); }
.assinatura-pessoa h3 { font-size: var(--texto-xl); letter-spacing: var(--ls-subtitulo); }
.assinatura-pessoa p { margin-top: var(--esp-1); font-size: var(--texto-base); }

/* ---------- contato ---------- */
.contato-caixa {
  display: grid;
  gap: var(--esp-12);
  padding: clamp(2rem, 1rem + 5vw, 5rem);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-3xl);
}
@media (min-width: 1024px) { .contato-caixa { grid-template-columns: 1.4fr 1fr; align-items: end; } }
.contato-caixa .titulo-secao { max-width: 16ch; }
.contato-caixa .botao { margin-top: var(--esp-10); }
.canais div { padding-block: var(--esp-5); border-top: 1px solid var(--cor-borda); }
.canais dt { font-family: var(--fonte-mono); font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: var(--ls-rotulo); color: var(--cor-texto-suave); }
.canais dd { margin: var(--esp-1) 0 0; font-size: var(--texto-lg); font-weight: var(--peso-medio); }
.canais dd a { color: var(--cor-texto); text-decoration-color: var(--cor-borda-forte); }
.canais dd a:hover { color: var(--cor-marca); }

/* ---------- rodapé ---------- */
.rodape { padding-block: var(--esp-16) var(--esp-10); border-top: 1px solid var(--cor-borda); }
.rodape-grade { display: grid; gap: var(--esp-10); }
@media (min-width: 900px) { .rodape-grade { grid-template-columns: 1fr auto; align-items: start; } }
.rodape .logo-horizontal { height: 26px; width: auto; }
.rodape-descritor { margin-top: var(--esp-4); color: var(--cor-texto-suave); font-size: var(--texto-sm); }
.rodape nav ul { display: flex; flex-wrap: wrap; gap: var(--esp-3) var(--esp-6); }
.rodape nav a { color: var(--cor-texto-suave); font-size: var(--texto-sm); text-decoration: none; }
.rodape nav a:hover { color: var(--cor-texto); text-decoration: underline; }
.rodape-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--esp-3) var(--esp-8);
  margin-top: var(--esp-12);
  padding-top: var(--esp-6);
  border-top: 1px solid var(--cor-borda);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}
.rodape-legal a { color: var(--cor-texto-suave); }

/* ---------- páginas de texto (privacidade, 404) ---------- */
.pagina-texto { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.pagina-texto .conteudo { max-width: var(--largura-leitura); }
.pagina-texto h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.5rem); font-weight: var(--peso-extrabold); line-height: var(--lh-apertada); letter-spacing: var(--ls-display); }
.pagina-texto h2 { margin-top: var(--esp-12); font-size: var(--texto-2xl); letter-spacing: var(--ls-titulo); line-height: var(--lh-titulo); }
.pagina-texto p, .pagina-texto li { margin-top: var(--esp-4); line-height: var(--lh-solta); color: var(--cor-texto-suave); }
.pagina-texto ul { list-style: disc; padding-left: var(--esp-6); }
.pagina-texto strong { color: var(--cor-texto); }
.atualizacao { font-family: var(--fonte-mono); font-size: var(--texto-xs); }
.erro-404 { min-height: 70vh; display: grid; align-content: center; }
.erro-404 .codigo {
  font-family: var(--fonte-titulo);
  font-size: clamp(5rem, 3rem + 10vw, 10rem);
  font-weight: var(--peso-extrabold);
  line-height: 1;
  letter-spacing: var(--ls-display);
  background: var(--grad-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.erro-404 .botao { margin-top: var(--esp-10); justify-self: start; }

/* ---------- celular: CTA em largura total, caixas mais justas ---------- */
@media (max-width: 479.98px) {
  .botao-grande { width: 100%; padding-inline: var(--esp-4); font-size: var(--texto-base); }
  .contato-caixa { padding: var(--esp-8) var(--esp-5); border-radius: var(--raio-2xl); }
}
@media (max-width: 899.98px) {
  .foto-reservada { max-width: 16rem; }
}