/* ==========================================================================
   sections.css — blocos de conteudo
   ========================================================================== */

/* --- Situacoes no trabalho ------------------------------------------------ */

.situacoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--e-3);
  margin: 0 0 var(--e-6);
  padding: 0;
  list-style: none;
}
.situacoes li { margin: 0; }
.situacoes a,
.situacoes span {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  height: 100%;
  min-height: 56px;
  padding: 0.9rem 1.1rem;
  background: var(--c-papel-3);
  border: 1px solid var(--c-linha);
  border-radius: var(--r-md);
  color: var(--c-tinta);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido), transform var(--mov-rapido);
}
.situacoes a::before,
.situacoes span::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-marca);
}
.situacoes a:hover {
  border-color: var(--c-linha-2);
  box-shadow: var(--sombra-card);
  transform: translateY(-2px);
  color: var(--c-tinta);
}

.nota {
  max-width: var(--largura-leitura);
  padding: var(--e-5);
  background: var(--c-marca-clara);
  border-left: 3px solid var(--c-marca);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--t-sm);
  color: var(--c-tinta-2);
}
.nota p { max-width: none; }

/* --- Areas de atuacao ----------------------------------------------------- */

.areas { display: grid; gap: var(--e-5); }
@media (min-width: 52rem) {
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.area {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--c-papel-3);
  border: 1px solid var(--c-linha);
  border-radius: var(--r-lg);
  scroll-margin-top: calc(var(--altura-header) + 1.5rem);
}
.area__numero {
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-marca-escura);
}
.area h3 { font-size: var(--t-lg); }
.area__pergunta {
  margin: 0;
  padding-left: var(--e-4);
  border-left: 2px solid var(--c-marca);
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-style: italic;
  color: var(--c-tinta);
}
.area p { font-size: var(--t-sm); }
.area .link-avanca { margin-top: auto; align-self: flex-start; }

/* --- Alcance / SEO local -------------------------------------------------- */

.alcance {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 60rem) {
  .alcance { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}
.alcance__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: var(--e-5) 0 0;
  padding: 0;
  list-style: none;
}
.alcance__lista li {
  margin: 0;
  padding: 0.4rem 0.85rem;
  background: var(--c-papel-3);
  border: 1px solid var(--c-linha);
  border-radius: 999px;
  font-size: var(--t-xs);
  color: var(--c-tinta-2);
}
.painel {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--c-papel-3);
  border: 1px solid var(--c-linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-card);
}
.painel h3 { margin-bottom: var(--e-4); font-size: var(--t-md); font-family: var(--f-texto); font-weight: 600; }
.painel dl { margin: 0; font-size: var(--t-sm); }
.painel dt {
  margin-top: var(--e-4);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-tinta-3);
}
.painel dt:first-of-type { margin-top: 0; }
.painel dd { margin: var(--e-1) 0 0; color: var(--c-tinta); }

/* --- Sobre ---------------------------------------------------------------- */

.sobre {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (min-width: 60rem) {
  .sobre { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
.sobre__retrato img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-card);
  background: var(--c-papel-2);
}
.sobre__texto h1,
.sobre__texto h2 { margin-bottom: var(--e-4); }
.sobre__texto p { font-size: var(--t-md); }

.credenciais {
  display: grid;
  gap: var(--e-3);
  margin: var(--e-6) 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) {
  .credenciais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.credenciais > div {
  padding: var(--e-4) var(--e-5);
  background: var(--c-papel-3);
  border: 1px solid var(--c-linha);
  border-radius: var(--r-md);
}
.credenciais dt {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-tinta-3);
}
.credenciais dd { margin: var(--e-2) 0 0; font-size: var(--t-sm); color: var(--c-tinta); }

.pendente {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: var(--c-papel-2);
  border: 1px dashed var(--c-linha-2);
  border-radius: var(--r-sm);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--c-tinta-3);
}

/* --- Etapas do atendimento ------------------------------------------------ */

.etapas {
  counter-reset: etapa;
  display: grid;
  gap: var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  .etapas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
}
.etapas li {
  counter-increment: etapa;
  margin: 0;
  padding: var(--e-5);
  background: var(--c-papel-3);
  border: 1px solid var(--c-linha);
  border-radius: var(--r-md);
}
.etapas li::before {
  content: counter(etapa, decimal-leading-zero);
  display: block;
  margin-bottom: var(--e-3);
  font-family: var(--f-titulo);
  font-size: 1.5rem;
  color: var(--c-marca);
}
.etapas h3 { margin-bottom: var(--e-2); font-size: var(--t-md); font-family: var(--f-texto); font-weight: 600; letter-spacing: 0; }
.etapas p { font-size: var(--t-sm); }

/* --- Documentos ----------------------------------------------------------- */

.documentos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--e-3) var(--e-5);
  margin: 0 0 var(--e-6);
  padding: 0;
  list-style: none;
}
.documentos li {
  display: flex;
  gap: 0.7rem;
  margin: 0;
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--c-linha);
  font-size: var(--t-sm);
  color: var(--c-tinta);
}
.documentos li::before {
  content: "";
  flex: none;
  width: 14px; height: 14px;
  margin-top: 0.4rem;
  border: 1px solid var(--c-marca);
  border-radius: 3px;
}

/* --- FAQ ------------------------------------------------------------------ */

.faq { display: grid; gap: var(--e-6); }
@media (min-width: 52rem) {
  .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-7) var(--e-8); }
}
.faq__item { padding-top: var(--e-5); border-top: 1px solid var(--c-linha); }
.faq__item h3 { margin-bottom: var(--e-3); font-size: var(--t-md); }
.faq__item p { font-size: var(--t-sm); max-width: none; }

/* --- Conteudos ------------------------------------------------------------ */

.conteudos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.conteudos li { margin: 0; }
.conteudos article {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  height: 100%;
  padding: var(--e-5);
  background: var(--c-papel-3);
  border: 1px solid var(--c-linha);
  border-radius: var(--r-md);
}
.conteudos h3 { font-size: var(--t-md); font-family: var(--f-texto); font-weight: 600; letter-spacing: 0; }
.conteudos p { font-size: var(--t-sm); }
.conteudos .selo {
  align-self: flex-start;
  margin-top: auto;
  padding: 0.2rem 0.6rem;
  background: var(--c-papel-2);
  border: 1px solid var(--c-linha);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-tinta-3);
}

/* --- Chamada final -------------------------------------------------------- */

.chamada {
  display: grid;
  gap: var(--e-6);
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--c-papel-3);
  border: 1px solid var(--c-linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-card);
}
@media (min-width: 52rem) {
  .chamada { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; }
}
.chamada--afastada { margin-top: var(--e-7); }
.chamada h2 { font-size: var(--t-xl); }
.chamada p { margin-top: var(--e-4); font-size: var(--t-sm); }

/* --- Autoria -------------------------------------------------------------- */

.autoria {
  display: grid;
  gap: var(--e-5);
  margin: 0;
  padding-top: var(--e-6);
  border-top: 1px solid var(--c-linha);
  font-size: var(--t-sm);
}
@media (min-width: 48rem) {
  .autoria { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
}
.autoria dt {
  margin-bottom: var(--e-2);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-tinta-3);
}
.autoria dd { margin: 0; color: var(--c-tinta); }
.autoria dd + dd { margin-top: var(--e-1); }

/* --- Paginas de texto (privacidade) --------------------------------------- */

.pagina-texto { padding-block: var(--e-8) var(--e-9); }
.pagina-texto .envoltorio { max-width: 48rem; }
.pagina-texto h1 { font-size: var(--t-2xl); margin-bottom: var(--e-5); }
.pagina-texto h2 { font-size: var(--t-lg); margin-top: var(--e-7); margin-bottom: var(--e-3); }
.pagina-texto p, .pagina-texto li { font-size: var(--t-sm); max-width: none; }

/* --- Pilares da estrutura digital ----------------------------------------- */

.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pilares li {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin: 0;
  padding: var(--e-5);
  background: var(--c-papel-3);
  border: 1px solid var(--c-linha);
  border-top: 2px solid var(--c-marca);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.pilares__numero {
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-marca-escura);
}
.pilares h3 {
  font-family: var(--f-texto);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: 0;
}
.pilares p { font-size: var(--t-sm); }

/* --- Reconhecimento externo ----------------------------------------------- */

.reconhecimento {
  margin-bottom: var(--e-6);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--c-papel-3);
  border: 1px solid var(--c-linha);
  border-left: 3px solid var(--c-marca);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.reconhecimento__rotulo {
  margin: 0 0 var(--e-2);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-tinta-3);
}
.reconhecimento h3 {
  margin-bottom: var(--e-3);
  font-size: var(--t-md);
  font-family: var(--f-texto);
  font-weight: 600;
  letter-spacing: 0;
}
.reconhecimento p { font-size: var(--t-sm); max-width: none; }
.reconhecimento .link-avanca { margin-top: var(--e-4); }

/* --- Perfil profissional --------------------------------------------------- */

.perfil__subtitulo {
  margin-bottom: var(--e-5);
  font-family: var(--f-texto);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--c-marca-escura);
}

.texto-longo { max-width: 46rem; }
.texto-longo p { font-size: var(--t-md); }
.texto-longo p:last-child { margin-top: var(--e-5); }

/* --- Artigo --------------------------------------------------------------- */

.artigo { max-width: 42rem; }
.artigo h1 { margin-bottom: var(--e-4); }
.artigo h2 { margin-top: var(--e-7); margin-bottom: var(--e-4); font-size: var(--t-lg); }
.artigo h3 { font-size: var(--t-md); }
.artigo p, .artigo li { font-size: var(--t-base); max-width: none; }

.artigo__meta {
  margin-bottom: var(--e-6);
  padding-bottom: var(--e-5);
  border-bottom: 1px solid var(--c-linha);
  font-size: var(--t-xs);
  color: var(--c-tinta-3);
}

.resposta-inicial {
  padding: var(--e-5);
  background: var(--c-papel-3);
  border: 1px solid var(--c-linha);
  border-left: 3px solid var(--c-marca);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.resposta-inicial p { font-size: var(--t-md); color: var(--c-tinta); }

.exemplo {
  padding: var(--e-5);
  background: var(--c-papel-2);
  border-radius: var(--r-md);
}

.fontes { list-style: none; padding: 0; font-size: var(--t-sm); }
.fontes li {
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--c-linha);
  color: var(--c-tinta-3);
}
.artigo .faq { margin-top: var(--e-4); }
.artigo .autoria { margin-top: var(--e-7); }

/* --- Artigo: abertura ------------------------------------------------------ */

.artigo__subtitulo {
  margin-bottom: var(--e-5);
  font-size: var(--t-md);
  color: var(--c-tinta-2);
}

/* --- Falas do trabalhador -------------------------------------------------- */

.falas {
  display: grid;
  gap: var(--e-3);
  margin: var(--e-5) 0 var(--e-6);
  padding: 0;
  list-style: none;
}
@media (min-width: 38rem) {
  .falas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.falas li {
  margin: 0;
  padding: var(--e-4) var(--e-5);
  background: var(--c-papel-3);
  border: 1px solid var(--c-linha);
  border-left: 2px solid var(--c-marca);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-style: italic;
  color: var(--c-tinta);
}

/* --- Jornada real x ponto x pagamento -------------------------------------- */

.comparacao {
  display: grid;
  gap: var(--e-3);
  margin: var(--e-5) 0 var(--e-6);
  padding: 0;
  list-style: none;
  counter-reset: none;
}
@media (min-width: 40rem) {
  .comparacao { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.comparacao li {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin: 0;
  padding: var(--e-5);
  background: var(--c-papel-3);
  border: 1px solid var(--c-linha);
  border-top: 2px solid var(--c-marca);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.comparacao__numero {
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-marca-escura);
}
.comparacao h3 {
  font-family: var(--f-texto);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: 0;
}
.comparacao p { font-size: var(--t-sm); }

/* --- Checklist ------------------------------------------------------------- */

.checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--e-3) var(--e-5);
  margin: var(--e-5) 0 var(--e-6);
  padding: 0;
  list-style: none;
}
.checklist li {
  display: flex;
  gap: 0.7rem;
  margin: 0;
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--c-linha);
  font-size: var(--t-sm);
  color: var(--c-tinta);
}
.checklist li::before {
  content: "";
  flex: none;
  width: 14px; height: 14px;
  margin-top: 0.4rem;
  border: 1px solid var(--c-marca);
  border-radius: 3px;
}

/* --- Etapas em coluna unica (dentro do artigo) ----------------------------- */

@media (min-width: 48rem) {
  .etapas--lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Bloco do autor -------------------------------------------------------- */

.autor {
  margin-top: var(--e-8);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--c-papel-2);
  border-radius: var(--r-lg);
}
.autor h2 { margin-bottom: var(--e-1); font-size: var(--t-lg); }
.autor__cargo {
  margin-bottom: var(--e-4);
  font-family: var(--f-texto);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-marca-escura);
}
.autor p { font-size: var(--t-sm); max-width: none; }
.autor .autoria { margin-top: var(--e-6); border-top-color: var(--c-linha-2); }