/* Site Mapper Idea: o início (página geral, curta) e a escolha da história.
 * Usa as cores, o topo, os botões, o fecho e o rodapé de historia.css; aqui ficam só as faixas desta página.
 * Mesa quase-preta, folhas de papel para o que é real (mapa, gerador, código), azul da marca para a ação. */

.inicio-pagina main { padding-top: var(--topo); }

.sobretitulo { font: 700 0.85rem var(--mono); color: var(--azul-na-mesa); letter-spacing: 0.02em; }

/* ---------- herói: a frase e o caminho do mapa ao código ---------- */
.heroi {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center;
  min-height: calc(100svh - var(--topo)); padding: clamp(40px, 8vh, 96px) var(--gutter);
}
.heroi-texto { display: flex; flex-direction: column; gap: 24px; }
.heroi h1 {
  font-size: clamp(2.5rem, 5.4vw, 5.4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; color: var(--branco);
}
.heroi h1 span { display: block; color: var(--azul); }
.heroi-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.esteira { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.esteira::before {
  content: ""; position: absolute; left: 22px; top: 24px; bottom: 24px; width: 2px;
  background: linear-gradient(var(--azul), var(--ciano));
}
.esteira-folha {
  position: relative; margin-left: 46px; background: var(--papel); color: var(--texto-papel);
  border-radius: 8px; box-shadow: var(--sombra-folha); overflow: hidden;
}
.esteira-folha::before {
  content: ""; position: absolute; left: -30px; top: 18px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--azul); box-shadow: 0 0 0 4px var(--mesa);
}
.esteira-folha:nth-child(2) { transform: translateX(14px); }
.esteira-folha header { display: flex; justify-content: space-between; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--papel-borda); }
.esteira-folha header b { font: 700 0.78rem var(--mono); color: var(--azul-fundo); }
.esteira-folha header span { font-size: 0.8rem; color: var(--texto-papel-2); }
.esteira-folha pre { padding: 10px 14px 12px; font-size: clamp(0.68rem, 0.9vw, 0.8rem); line-height: 1.55; color: var(--texto-papel); overflow: hidden; }
.esteira-folha .k { color: var(--azul-fundo); font-weight: 700; }
.esteira-folha .c { color: var(--tinta-comentario); font-style: italic; }

/* ---------- faixas ---------- */
.faixa { padding: clamp(64px, 11vh, 128px) var(--gutter); border-top: 1px solid var(--mesa-borda); }
.faixa-titulo { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 800; letter-spacing: -0.035em; color: var(--branco); max-width: 22ch; }
.faixa-lead { margin-top: 14px; color: var(--texto-mesa-2); font-size: clamp(1.05rem, 1.3vw, 1.25rem); max-width: 60ch; }
.faixa h3 { margin: 0 0 8px; font-size: 1.35rem; font-weight: 800; color: var(--branco); line-height: 1.2; }
.faixa li p, .empresa p { color: var(--texto-mesa); }

.passos-como { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.passos-como li { border-top: 2px solid var(--azul); padding-top: 18px; }
.como-num { display: block; font: 800 0.95rem var(--mono); color: var(--azul-na-mesa); margin-bottom: 10px; }

.numeros { margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--mesa-borda); border: 1px solid var(--mesa-borda); border-radius: 10px; overflow: hidden; }
.numeros div { background: var(--mesa); padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.numeros dt { font-size: 0.95rem; color: var(--texto-mesa-2); }
.numeros dd { margin: 0; font: 800 clamp(2rem, 3.4vw, 3rem)/1 var(--mono); color: var(--branco); }
.numeros dd small { display: block; margin-top: 8px; font: 600 0.9rem/1.35 var(--fonte); color: var(--texto-mesa-2); }

.ferramentas { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ferramentas li { background: var(--mesa-alta); border: 1px solid var(--mesa-borda); border-radius: 10px; padding: 22px 22px 24px; }
.ferramentas code { font-size: 0.95em; }

.empresa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 96px); align-items: center; }
.empresa > div { display: flex; flex-direction: column; gap: 16px; max-width: 62ch; }
.empresa p { font-size: clamp(1.1rem, 1.35vw, 1.3rem); }
.empresa img { width: clamp(120px, 14vw, 200px); height: auto; opacity: 0.9; }

/* ---------- os perfis: a porta para cada história ---------- */
.perfis { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.perfil {
  display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 24px 22px 22px;
  background: var(--mesa-alta); border: 1px solid var(--mesa-borda); border-radius: 12px;
  color: var(--texto-mesa); text-decoration: none;
  transition: border-color 0.25s, transform 0.35s var(--saida), background-color 0.25s;
}
.perfil:hover { border-color: var(--azul); transform: translateY(-3px); background: #20202d; }
.perfil-num { font: 700 0.78rem var(--mono); color: var(--texto-mesa-2); }
.perfil b { font-size: 1.45rem; font-weight: 800; line-height: 1.15; color: var(--branco); }
.perfil-texto { flex: 1; font-size: 1rem; line-height: 1.5; }
.perfil-ler { font-weight: 800; color: var(--azul-na-mesa); }
.perfil-ler i { display: inline-block; font-style: normal; transition: transform 0.3s var(--saida); }
.perfil:hover .perfil-ler i { transform: translateX(4px); }

.escolha-perfil { border-top: 0; min-height: calc(70svh - var(--topo)); display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.escolha-perfil h1 { font-size: clamp(2.6rem, 6vw, 5.6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; color: var(--branco); }

@media (max-width: 1100px) {
  .perfis, .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .heroi { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .passos-como, .ferramentas { grid-template-columns: minmax(0, 1fr); }
  .empresa { grid-template-columns: minmax(0, 1fr); }
  .empresa img { display: none; }
}
@media (max-width: 560px) {
  .perfis, .numeros { grid-template-columns: minmax(0, 1fr); }
  .esteira-folha { margin-left: 34px; }
  .esteira::before { left: 14px; }
  .esteira-folha::before { left: -26px; }
  .esteira-folha:nth-child(2) { transform: none; }
}

/* ---------- documentos legais: termos de uso e política de privacidade ---------- */
.documento { max-width: 860px; margin: 0 auto; padding: clamp(48px, 9vh, 96px) var(--gutter) clamp(64px, 10vh, 112px); }
.documento-topo { display: flex; flex-direction: column; gap: 14px; padding-bottom: 28px; margin-bottom: 32px; border-bottom: 1px solid var(--mesa-borda); }
.documento h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--branco); }
.documento-vigencia { font: 600 0.95rem var(--mono); color: var(--texto-mesa-2); }
.documento-corpo { font-size: 1.05rem; line-height: 1.7; color: var(--texto-mesa); overflow-wrap: anywhere; }
.documento-corpo p, .documento-corpo ul, .documento-corpo ol, .documento-corpo table { margin: 0 0 1.1em; }
.documento-corpo p, .documento-corpo li, .documento-corpo td { text-wrap: wrap; }
.documento-corpo h2 { margin: 2.2em 0 0.8em; font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; color: var(--branco); scroll-margin-top: calc(var(--topo) + 16px); }
.documento-corpo strong { color: var(--branco); }
.documento-corpo li { margin: 0.4em 0; }
.documento-corpo ul, .documento-corpo ol { padding-left: 1.4em; }
.documento-corpo .sumario { padding: 18px 22px 18px 2.6em; background: var(--mesa-alta); border: 1px solid var(--mesa-borda); border-radius: 10px; }
.documento-corpo .sumario ol { margin: 0.2em 0 0.4em; }
.documento-corpo .sumario a { color: var(--azul-na-mesa); text-decoration: none; }
.documento-corpo .sumario a:hover { text-decoration: underline; }
.documento-corpo table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.documento-corpo td { padding: 10px 12px; border: 1px solid var(--mesa-borda); vertical-align: top; }
.documento-corpo thead td { font: 700 0.85rem var(--mono); color: var(--branco); background: var(--mesa-alta); }
.documento-corpo tbody td:last-child { width: 30%; color: var(--texto-mesa-2); }
@media (max-width: 560px) {
  .documento-corpo { font-size: 1rem; }
  .documento-corpo tbody td:last-child { width: 38%; }
}

/* rodapé: a empresa e os documentos legais em todas as páginas */
.rodape-texto { display: flex; flex-direction: column; gap: 8px; }
.rodape-legal a { color: var(--texto-mesa); }