/* pesquisalegis: identidade em DESIGN.md */

@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fontes/overpass-400-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fontes/overpass-400-800-latin.woff2") format("woff2");
  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 {
  /* paleta (DESIGN.md) */
  --ameixa: #4A1F5C;
  --ameixa-clara: #F4EDF6;
  --lilas: #E3D0EA;
  --branco: #FFFFFF;
  --tinta: #2A2030;
  --cinza: #675E6C;
  --divisa: #E6DCEA;

  /* papéis: um estudo de paleta troca só estes */
  --fundo: var(--branco);
  --topo: var(--ameixa);
  --topo-texto: var(--branco);
  --topo-suave: var(--lilas);
  --estacao-cheia: var(--branco);
  --etiqueta: var(--lilas);
  --etiqueta-texto: var(--ameixa);
  --acao: var(--ameixa);
  --acao-texto: var(--branco);
  --acao-hover: var(--tinta);
  --link: var(--ameixa);
  --foco: var(--ameixa);
  --marcador: var(--ameixa);
  --bloco: var(--ameixa-clara);

  --fonte: 'Overpass', system-ui, sans-serif;

  --largura: 72rem;
  --margem: clamp(1rem, 4vw, 2.5rem);
  --coluna-cabeca: 20rem;
  --estacao: 1.25rem;
  --alvo: 2.75rem;
}

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 1.0625rem;
  line-height: 1.6;
}

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

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 2px; }

h1, h2 { margin: 0; font-weight: 750; line-height: 1.2; text-wrap: balance; }

/* ---------- Topo ---------- */

.topo {
  background: var(--topo);
  color: var(--topo-texto);
  padding: 2rem var(--margem) 3rem;
}
.topo a { color: var(--topo-texto); }
.topo :focus-visible { outline-color: var(--topo-texto); }

.topo-dentro { max-width: var(--largura); margin: 0 auto; }

.marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin-bottom: 2.5rem;
}

.topo h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.875rem);
  letter-spacing: -0.015em;
  max-width: 24em;
  margin-bottom: 1.25rem;
}

.abertura { font-size: 1.1875rem; max-width: 38rem; color: var(--topo-suave); }

.aviso { max-width: 37rem; }
.aviso strong { font-weight: 750; }

.marca-simbolo { width: 2.25rem; height: 1rem; flex: none; }
.s-linha, .s-ponto { fill: var(--topo-suave); }
.s-estacao { fill: var(--estacao-cheia); }

/* Trajeto: estações em linha (desktop) ou em coluna (celular e tablet) */

.trajeto { margin: 3rem 0 0; }
.trajeto figcaption { color: var(--topo-suave); font-size: 0.9375rem; margin-bottom: 1.25rem; }

.etapas {
  list-style: none;
  margin: 0;
  padding: 1.75rem 0 0; /* espaço para o laço da etapa condicional */
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.etapa {
  position: relative;
  padding: calc(var(--estacao) + 0.75rem) 0.75rem 0 0;
}
/* trecho da linha até a próxima estação */
.etapa:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--estacao) / 2 - 2px);
  left: calc(var(--estacao) / 2);
  width: 100%;
  height: 4px;
  background: var(--topo-suave);
}

.estacao {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: var(--estacao);
  height: var(--estacao);
  border-radius: 50%;
  background: var(--estacao-cheia);
}
/* etapa sem projeto: ponto pequeno e cheio, onde o trem passa sem parar (o anel fica para "em preparação") */
.etapa:not(.acompanhada) .estacao {
  --ponto: 0.75rem;
  width: var(--ponto);
  height: var(--ponto);
  margin: calc((var(--estacao) - var(--ponto)) / 2);
  background: var(--topo-suave);
}
/* a volta à Casa de origem é um desvio: a linha principal segue reta e a etapa fica num laço acima dela */
.condicional::after {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: calc(var(--estacao) / 2 - 1.75rem);
  width: 3.5rem;
  height: calc(1.5rem + var(--estacao) / 2);
  border: 4px solid var(--topo-suave);
  border-bottom: 0;
  border-radius: 1.25rem 1.25rem 0 0;
}
.etapa.condicional .estacao {
  margin: 0;
  top: calc(-1.5rem + 2px - var(--ponto) / 2);
  left: calc(var(--estacao) / 2 - var(--ponto) / 2);
}

.etapa-nome { display: block; font-weight: 750; line-height: 1.3; }
.etapa-o-que { display: block; color: var(--topo-suave); font-size: 0.875rem; line-height: 1.4; margin-top: 0.2rem; }
.etapa:not(.acompanhada) .etapa-nome { color: var(--topo-suave); font-weight: 600; }

.quem { display: block; margin-top: 0.6rem; }
.quem a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.3rem 0.6rem 0.2rem;
  border-radius: 4px;
  background: var(--etiqueta);
  color: var(--etiqueta-texto);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}
.quem a:hover { background: var(--topo-texto); }
.quem.em-preparacao a {
  background: transparent;
  color: var(--etiqueta);
  box-shadow: inset 0 0 0 1.5px var(--etiqueta);
}
.quem.em-preparacao a:hover { color: var(--topo-texto); box-shadow: inset 0 0 0 1.5px var(--topo-texto); }
/* o mesmo projeto em outra etapa: só a marca e o nome; o link fica na primeira */
.quem-repetido {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
}
.quem-repetido::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  background: var(--etiqueta);
}

/* Página de erro (404.html): só o bloco do topo */
.erro { min-height: 100vh; min-height: 100dvh; }
.erro h1 { margin-bottom: 1rem; }
.contato-erro { max-width: 37rem; overflow-wrap: anywhere; }
.topo .botao-claro { background: var(--topo-texto); color: var(--topo); }
.topo .botao-claro:hover { background: var(--etiqueta); }

/* ---------- Projetos ---------- */

main, .rodape { max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); }

.projeto {
  display: grid;
  grid-template-columns: var(--coluna-cabeca) minmax(0, 35rem);
  gap: 1rem 3.5rem;
  padding: 3.5rem 0;
  scroll-margin-top: 1rem;
}
.projeto + .projeto { border-top: 1px solid var(--divisa); }

.projeto h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
/* a estação do trajeto abre o título: cheia = aberto, vazada = em preparação */
.projeto h2::before {
  content: "";
  display: block;
  width: var(--estacao);
  height: var(--estacao);
  border-radius: 50%;
  background: var(--marcador);
  margin-bottom: 0.9rem;
}
.projeto.em-preparacao h2::before { background: transparent; box-shadow: inset 0 0 0 4px var(--marcador); }

.endereco { color: var(--cinza); font-size: 0.9375rem; margin-bottom: 0.25rem; overflow-wrap: anywhere; }
.acesso { font-size: 0.9375rem; font-weight: 600; }

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 1.25rem; }
.botao {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
  padding: 0.15rem 1.15rem 0;
  border-radius: 6px;
  background: var(--acao);
  color: var(--acao-texto);
  font-weight: 700;
  text-decoration: none;
}
.botao:hover { background: var(--acao-hover); }
.secundario { display: inline-flex; align-items: center; min-height: var(--alvo); font-weight: 600; }

.projeto-texto { padding-top: 2.15rem; }

/* ---------- Método ---------- */

.metodo {
  border-top: 1px solid var(--divisa);
  padding: 3.5rem 0 4rem;
}
.metodo h2 { font-size: 1.5rem; margin-bottom: 1.75rem; }
.metodo dl { margin: 0; }
.metodo dl > div {
  display: grid;
  grid-template-columns: var(--coluna-cabeca) minmax(0, 35rem);
  gap: 0.25rem 3.5rem;
  padding: 0.9rem 0;
}
.metodo dt { font-weight: 750; }
.metodo dd { margin: 0; }

/* ---------- Quem faz ---------- */

.quem-faz { background: var(--bloco); padding: 3.5rem var(--margem); scroll-margin-top: 0; }
.quem-faz-dentro { max-width: var(--largura); margin: 0 auto; }
.quem-faz-dentro > * { max-width: 37rem; }
.quem-faz h2 { font-size: 1.5rem; margin-bottom: 1.25rem; }
.aviso-forte { font-weight: 700; }

.rodape { padding-top: 1.5rem; padding-bottom: 2rem; color: var(--cinza); font-size: 0.875rem; }

/* ---------- Celular e tablet ---------- */

@media (max-width: 68rem) {
  .etapas { display: block; padding-top: 0; }
  .etapa { padding: 0 0 1.4rem calc(var(--estacao) + 0.9rem); min-height: 3.5rem; }
  .etapa:last-child { padding-bottom: 0; }
  .etapa:not(:last-child)::before {
    top: calc(var(--estacao) / 2);
    left: calc(var(--estacao) / 2 - 2px);
    width: 4px;
    height: 100%;
  }
  .estacao { top: 0.05rem; }
  /* no celular, o laço da volta à Casa de origem sai para a direita da linha */
  .etapa.condicional { padding-left: 3rem; }
  .condicional::after {
    top: -0.8rem;
    left: calc(var(--estacao) / 2);
    width: 1.5rem;
    height: 3rem;
    border: 4px solid var(--topo-suave);
    border-left: 0;
    border-radius: 0 1.25rem 1.25rem 0;
  }
  .etapa.condicional .estacao {
    top: calc(0.7rem - var(--ponto) / 2);
    left: calc(var(--estacao) / 2 + 1.5rem - 2px - var(--ponto) / 2);
  }
  .quem-repetido { margin-top: 0.4rem; }
  .quem { display: inline-block; margin: 0.5rem 0.4rem 0 0; }
  .quem a { min-height: var(--alvo); font-size: 0.875rem; padding: 0.3rem 0.75rem 0.15rem; }

  .projeto, .metodo dl > div { grid-template-columns: minmax(0, 1fr); }
  .projeto { padding: 2.75rem 0; }
  .projeto-texto { padding-top: 0.25rem; }
  .metodo dl > div { gap: 0.15rem; }
}

@media (pointer: coarse) {
  .quem a { min-height: var(--alvo); }
}