/* =================================================================
   ESTILO DO SITE — Diagnóstico de Riscos Psicossociais (NR-1)
   Ana Carolina Gomes Souza

   Este arquivo é o único lugar onde as cores, as fontes e os
   espaçamentos são definidos. As cinco páginas puxam daqui.
   Mudar um valor aqui muda o site inteiro de uma vez.

   Referência visual: clinica.psidofuturo.com.br — de lá vieram o par
   de fontes (serifada nos títulos, fonte do sistema no corpo), as
   larguras de coluna e o respiro largo entre as seções.

   A PALETA NÃO é a da referência. Em 23/08/2026 ficou definido
   bege e marrom: fundo bege claro, faixas em bege fechado, marrom
   nos títulos, botões e rodapé. Todos os pares de cor foram
   conferidos e passam no contraste mínimo de acessibilidade
   (4,5:1) — ao trocar qualquer cor, conferir de novo.

   O site é SEMPRE CLARO. Não existe versão escura: quem abrir com o
   computador no modo escuro continua vendo o site branco. Foi decisão
   de 23/08/2026 — a referência também é clara, e o público é RH e
   direção de empresa.
   ================================================================= */

:root {
  /* O site e sempre claro, mesmo se o computador estiver no modo escuro. */
  color-scheme: light;

  /* --- cores ------------------------------------------------- */
  --primaria: #5c4033;        /* marrom — títulos, botões, rodapé          */
  --primaria-clara: #7a5544;  /* marrom mais claro, para links            */
  --verde: #0f5132;           /* verde — só detalhes: chapéu, marcadores,  */
                              /* borda dos avisos e a página aberta no menu.
                                 É o mesmo verde do portfolio-empresas.html,
                                 o que reaproxima os dois materiais.        */
  --secundaria: #e8d5bc;      /* bege médio — faixa de chamada            */
  --terciaria: #f2ebe1;       /* bege fechado — faixas alternadas         */
  --fundo: #faf6f0;           /* bege claro — fundo de tudo               */
  --fundo-cartao: #ffffff;    /* branco — faz o cartão sobressair no bege */
  --texto: #2e2620;           /* marrom quase preto, mais quente que preto */
  --texto-suave: #6b5d52;     /* marrom acinzentado                       */
  --linha: #e0d5c7;           /* linha bege                               */

  /* --- fontes ------------------------------------------------- */
  --fonte-titulo: "Source Serif 4", "Source Serif Pro", Georgia, "Iowan Old Style", serif;
  --fonte-texto: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- larguras ----------------------------------------------- */
  --coluna-texto: 650px;      /* largura de leitura confortável */
  --coluna-larga: 1000px;     /* cabeçalho, rodapé e grades      */

  /* --- respiros ----------------------------------------------- */
  --respiro-secao: clamp(4rem, 10vw, 8rem);
  --respiro-lateral: max(1.25rem, 5vw);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 1.125rem;      /* corpo grande, como na referência */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Segura o conteúdo largo (cabeçalho, rodapé, grades de cartão) */
.largura {
  max-width: var(--coluna-larga);
  margin: 0 auto;
  padding-left: var(--respiro-lateral);
  padding-right: var(--respiro-lateral);
}

/* Segura o texto corrido numa coluna estreita, que cansa menos a leitura */
.texto {
  max-width: var(--coluna-texto);
  margin: 0 auto;
  padding-left: var(--respiro-lateral);
  padding-right: var(--respiro-lateral);
}

.centro { text-align: center; }

/* -----------------------------------------------------------------
   TOPO — nome, registro profissional e menu
   ----------------------------------------------------------------- */
header.cabecalho {
  border-bottom: 1px solid var(--linha);
  padding: 2rem 0 1.25rem;
}

.cabecalho .identidade {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-bottom: 1.25rem;
}

/* Linha pequena em maiúsculas acima do nome */
.chapeu {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--verde);
  font-weight: 600;
}

.cabecalho .nome {
  font-family: var(--fonte-titulo);
  font-size: 1.4rem;
  font-weight: 400;
  margin: 0.15rem 0 0;
  color: var(--texto);
}

.cabecalho .credenciais {
  font-size: 0.95rem;
  color: var(--texto-suave);
}

nav.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  font-size: 0.98rem;
}

nav.menu a {
  color: var(--texto-suave);
  text-decoration: none;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid transparent;
}

nav.menu a:hover { color: var(--primaria); }

/* Marca a página em que a pessoa está agora */
nav.menu a[aria-current="page"] {
  color: var(--verde);
  font-weight: 600;
  border-bottom-color: var(--verde);
}

/* -----------------------------------------------------------------
   FAIXAS — cada seção ocupa a largura toda da tela e alterna o fundo
   ----------------------------------------------------------------- */
.faixa {
  padding: var(--respiro-secao) 0;
}

.faixa-clara { background: var(--terciaria); }

.faixa-destaque {
  background: var(--secundaria);
  color: var(--texto);
  border-top: 3px solid var(--verde);
}

/* A primeira faixa não precisa de tanto respiro em cima */
.faixa.abertura { padding-top: clamp(2.5rem, 6vw, 5rem); }

/* -----------------------------------------------------------------
   TEXTO
   ----------------------------------------------------------------- */
h1 {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  line-height: 1.25;
  font-weight: 400;
  text-wrap: balance;
  margin: 0 0 1.2rem;
  color: var(--texto);
}

h2 {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  line-height: 1.3;
  font-weight: 400;
  text-wrap: balance;
  color: var(--primaria);
  margin: 0 0 1.2rem;
}

h3 {
  font-family: var(--fonte-titulo);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--texto);
  margin: 0 0 0.5rem;
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

/* Frase de apoio logo abaixo do título grande */
.destaque {
  font-size: 1.2rem;
  color: var(--texto-suave);
}

strong { font-weight: 600; }

a { color: var(--primaria-clara); }

/* -----------------------------------------------------------------
   FOTO DE APRESENTAÇÃO
   Retrato ao lado do texto. No celular a foto sobe e o texto desce.
   ----------------------------------------------------------------- */
.apresentacao {
  display: grid;
  grid-template-columns: minmax(0, 300px) 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 700px) {
  .apresentacao { grid-template-columns: 1fr; gap: 1.75rem; }
  .apresentacao .retrato { max-width: 280px; }
}

.retrato {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--linha);
}

/* Legenda discreta abaixo da foto */
.retrato-legenda {
  margin-top: 0.7rem;
  font-size: 0.9rem;
  color: var(--texto-suave);
  line-height: 1.4;
}

/* -----------------------------------------------------------------
   CARTÕES
   ----------------------------------------------------------------- */
.cartao {
  background: var(--fundo-cartao);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 1.75rem 1.9rem;
  margin-bottom: 1.25rem;
}

.cartao:last-child { margin-bottom: 0; }
.cartao p { font-size: 1.05rem; }

/* Grade de cartões lado a lado — vira uma coluna só no celular */
.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.grade .cartao { margin-bottom: 0; }

/* Cartão de aviso — usado para os limites do serviço */
.cartao.aviso {
  background: transparent;
  border-color: var(--linha);
  border-left: 3px solid var(--verde);
  font-size: 1rem;
  color: var(--texto-suave);
}

.cartao.aviso p { font-size: 1rem; }

/* Etapas numeradas */
ol.etapas {
  list-style: none;
  counter-reset: etapa;
  padding: 0;
  margin: 0;
}

ol.etapas > li {
  counter-increment: etapa;
  position: relative;
  padding-left: 3.2rem;
  margin-bottom: 2.2rem;
}

ol.etapas > li:last-child { margin-bottom: 0; }

ol.etapas > li::before {
  content: counter(etapa);
  position: absolute;
  left: 0;
  top: -0.1rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--primaria);
  color: var(--fundo);
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

ol.etapas p { font-size: 1.05rem; color: var(--texto-suave); }

ul.simples {
  margin: 0;
  padding-left: 1.2rem;
}

ul.simples li { margin-bottom: 0.7rem; }

/* O pontinho de cada item da lista, em verde */
ul.simples li::marker { color: var(--verde); }
ul.simples li:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------
   LISTA DE DADOS
   Alternativa leve aos cartões: rótulo à esquerda, conteúdo à
   direita, separados por um fio fino. Sem caixa, sem sombra.
   No celular o rótulo sobe e o conteúdo desce.
   ----------------------------------------------------------------- */
.dados {
  margin: 0;
  border-top: 1px solid var(--linha);
}

.dados > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.3rem 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--linha);
}

@media (max-width: 560px) {
  .dados > div { grid-template-columns: 1fr; padding: 1rem 0; }
}

.dados dt {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--verde);
  padding-top: 0.28rem;
}

.dados dd {
  margin: 0;
  font-size: 1.05rem;
}

/* Observação miúda, logo abaixo da lista */
.nota {
  margin-top: 1.4rem;
  font-size: 0.95rem;
  color: var(--texto-suave);
}

/* -----------------------------------------------------------------
   BOTÃO
   ----------------------------------------------------------------- */
.botao {
  display: inline-block;
  margin-top: 1.2rem;
  background: var(--primaria);
  color: var(--fundo);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0.85rem 1.9rem;
  border-radius: 6px;
  border: 2px solid var(--primaria);
}

.botao:hover {
  background: transparent;
  color: var(--primaria);
}

/* Chamada curta — uma linha só, para o meio das páginas longas.
   Serve para quem já se convenceu na metade e não quer rolar até o fim. */
.chamada-curta {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linha);
  font-size: 1.05rem;
  color: var(--texto-suave);
}

.chamada-curta a {
  font-weight: 600;
  color: var(--primaria);
}

/* -----------------------------------------------------------------
   RODAPÉ
   ----------------------------------------------------------------- */
footer.rodape {
  background: var(--primaria);
  color: var(--fundo);
  padding: 3rem 0;
  font-size: 1rem;
}

footer.rodape p { margin-bottom: 0.35rem; }
footer.rodape p:last-child { margin-bottom: 0; }

footer.rodape .rodape-nome {
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
}

footer.rodape a { color: var(--fundo); }