/* =========================================================
   EcoChapada — folha de estilo base
   Paleta: verde profundo, terracota, areia, dourado, carvão
   Tipografia: Lora (editorial) + Inter (interface)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..600&family=Inter:wght@400;500;600&display=swap');

:root{
  --verde: #284B3F;
  --verde-escuro: #1B332A;
  --terracota: #B9633C;
  --terracota-escuro: #964F30;
  --areia: #F4EFE6;
  --areia-clara: #FAF7F1;
  --dourado: #C99A4A;
  --carvao: #252824;
  --branco: #FFFFFF;

  --editorial: 'Lora', 'Source Serif 4', Georgia, serif;
  --interface: 'Inter', -apple-system, sans-serif;

  --linha: 92ch;
  --raio: 2px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--areia);
  color: var(--carvao);
  font-family: var(--interface);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

.sr-only{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pular-conteudo{
  position: fixed;
  top: .6rem;
  left: .6rem;
  z-index: 100;
  transform: translateY(-160%);
  padding: .65rem 1rem;
  background: var(--areia-clara);
  color: var(--verde-escuro);
  border: 2px solid var(--terracota);
  font-weight: 600;
}
.pular-conteudo:focus{ transform: translateY(0); }

h1, h2, h3, h4{
  font-family: var(--editorial);
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 .5em;
  color: var(--verde-escuro);
}

p{ margin: 0 0 1.1em; max-width: var(--linha); }

.container{
  width: min(1180px, 92%);
  margin: 0 auto;
}

.container--estreito{
  width: min(720px, 92%);
  margin: 0 auto;
}

/* botões */
.botao{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--interface);
  font-size: .95rem;
  font-weight: 600;
  padding: .78em 1.5em;
  border-radius: var(--raio);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.botao--primario{
  background: var(--terracota);
  color: var(--areia-clara);
}
.botao--primario:hover{ background: var(--terracota-escuro); }
.botao--secundario{
  background: transparent;
  border-color: var(--areia-clara);
  color: var(--areia-clara);
}
.botao--secundario:hover{ background: rgba(255,255,255,.1); }
.botao--contorno{
  border-color: var(--verde);
  color: var(--verde);
}
.botao--contorno:hover{ background: var(--verde); color: var(--areia-clara); }

/* =================== CABEÇALHO =================== */
.cabecalho{
  background: var(--areia-clara);
  border-bottom: 1px solid rgba(37,40,36,.08);
  position: sticky;
  top: 0;
  z-index: 40;
}
.cabecalho .container{ width: min(1240px, 94%); }
.cabecalho__linha{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.35rem;
  padding: .8rem 0;
}
.marca{
  font-family: var(--editorial);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--verde-escuro);
  letter-spacing: .01em;
  white-space: nowrap;
}
.marca span{ color: var(--terracota); }

.nav-principal{
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: nowrap;
  margin-left: auto;
}
.nav-principal a{
  font-size: .84rem;
  font-weight: 500;
  color: var(--carvao);
  padding: .3em 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-principal a:hover,
.nav-principal a[aria-current="page"]{
  border-bottom-color: var(--terracota);
  color: var(--verde-escuro);
}

.busca{
  display: flex;
  align-items: center;
  gap: .4em;
  border: 1px solid rgba(37,40,36,.18);
  border-radius: var(--raio);
  padding: .4em .7em;
  background: var(--branco);
}
.busca input{
  border: none;
  background: transparent;
  font-family: var(--interface);
  font-size: .88rem;
  width: 5.2em;
  outline: none;
}
.busca:focus-within{
  border-color: var(--terracota);
  box-shadow: 0 0 0 2px rgba(185,99,60,.12);
}

.menu-mobile-botao{
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--verde-escuro);
}

@media (max-width: 1080px){
  .nav-principal{
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: .5rem;
  }
  .nav-principal.aberto{ display: flex; }
  .nav-principal a{ width: 100%; padding: .75em 0; border-bottom: 1px solid rgba(37,40,36,.08); }
  .cabecalho__linha{ flex-wrap: wrap; }
  .menu-mobile-botao{ display: block; }
  .busca{ order: 3; width: 100%; margin-top: .5rem; }
  .busca input{ width: 100%; }
}

/* =================== HERO =================== */
.hero{
  position: relative;
  background: var(--verde-escuro);
  color: var(--areia-clara);
  overflow: hidden;
}
.hero__conteudo{
  position: relative;
  z-index: 2;
  padding: 5.5rem 0 4.5rem;
  max-width: 640px;
}
.hero__chapeu{
  font-family: var(--editorial);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--dourado);
  margin-bottom: 1.1em;
}
.hero__conteudo h1{
  color: var(--areia-clara);
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  max-width: 12em;
}
.hero__conteudo p{
  font-size: 1.08rem;
  color: rgba(250,247,241,.86);
  max-width: 34em;
}
.hero__acoes{
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}
.hero__arte{
  position: absolute;
  right: -4%;
  bottom: -6%;
  width: 56%;
  min-width: 480px;
  opacity: .95;
  z-index: 1;
}
@media (max-width: 780px){
  .hero__arte{ display: none; }
  .hero__conteudo{ padding: 3.2rem 0 3rem; }
}

/* =================== SEÇÃO GENÉRICA =================== */
.secao{ padding: 4.2rem 0; }
.secao--alt{ background: var(--areia-clara); }
.secao--escura{ background: var(--verde-escuro); color: var(--areia-clara); }
.secao--escura h2, .secao--escura h3{ color: var(--areia-clara); }
.secao__cabecalho{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 2.2rem;
  border-bottom: 1px solid rgba(37,40,36,.12);
  padding-bottom: 1.1rem;
}
.secao--escura .secao__cabecalho{ border-bottom-color: rgba(250,247,241,.18); }
.secao__cabecalho h2{ margin: 0; font-size: 1.7rem; }
.secao__cabecalho p{ margin: 0; color: rgba(37,40,36,.6); max-width: 34em; }
.secao--escura .secao__cabecalho p{ color: rgba(250,247,241,.7); }
.ver-tudo{
  font-size: .9rem;
  font-weight: 600;
  color: var(--terracota);
  white-space: nowrap;
}

/* placeholder de imagem/foto (a trocar por fotografia real) */
.foto-espaco{
  position: relative;
  background-color: var(--verde);
  background-image:
    linear-gradient(180deg, rgba(27,51,42,0) 40%, rgba(27,51,42,.55) 100%),
    repeating-linear-gradient(115deg, rgba(244,239,230,.07) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(25deg, rgba(244,239,230,.05) 0 1px, transparent 1px 22px);
  aspect-ratio: 4 / 3;
  border-radius: var(--raio);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.foto-espaco::before{
  content: "";
  position: absolute;
  right: .7em;
  top: .7em;
  width: 1.6em;
  height: 1.6em;
  opacity: .55;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF7F1' stroke-width='1.6'%3E%3Cpath d='M4 17l5-6 3 3 4-6 4 5'/%3E%3Ccircle cx='18' cy='6' r='2'/%3E%3C/svg%3E");
}
.foto-espaco__legenda{
  position: relative;
  z-index: 2;
  font-size: .72rem;
  color: rgba(250,247,241,.85);
  background: rgba(27,51,42,.55);
  padding: .3em .6em;
  margin: .5em;
  border-radius: var(--raio);
}
.foto-espaco--4-3{ aspect-ratio: 4/3; }
.foto-espaco--16-9{ aspect-ratio: 16/9; }
.foto-espaco--quadrada{ aspect-ratio: 1/1; }

/* =================== DESTAQUE EDITORIAL (home) =================== */
.destaque{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2.5rem;
}
.destaque__principal .foto-espaco{ margin-bottom: 1.2rem; aspect-ratio: 16/10; }
.categoria{
  font-family: var(--interface);
  font-size: .78rem;
  font-weight: 600;
  color: var(--terracota-escuro);
  letter-spacing: .02em;
}
.destaque__principal h3{ font-size: 1.8rem; margin: .35em 0 .4em; }
.meta{
  font-size: .82rem;
  color: rgba(37,40,36,.6);
  display: flex;
  gap: .6em;
  flex-wrap: wrap;
  align-items: center;
}
.destaques-secundarios{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.cartao-secundario{
  display: flex;
  gap: 1rem;
  border-top: 1px solid rgba(37,40,36,.12);
  padding-top: 1.3rem;
}
.cartao-secundario:first-child{ border-top: none; padding-top: 0; }
.cartao-secundario .foto-espaco{ width: 6.5rem; flex: none; aspect-ratio: 1/1; }
.cartao-secundario h4{ font-size: 1.02rem; margin: .25em 0 .3em; }

@media (max-width: 860px){
  .destaque{ grid-template-columns: 1fr; }
}

/* =================== GRADE EXPLORE O CERRADO =================== */
.grade-editorias{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: rgba(37,40,36,.14);
  border: 1px solid rgba(37,40,36,.14);
}
.editoria{
  background: var(--areia-clara);
  padding: 1.9rem 1.5rem;
  transition: background .15s ease;
}
.editoria:hover{ background: var(--branco); }
.editoria__numero{
  font-family: var(--editorial);
  font-style: italic;
  color: var(--dourado);
  font-size: 1rem;
  margin-bottom: .6em;
}
.editoria h3{ font-size: 1.15rem; margin-bottom: .3em; }
.editoria p{ font-size: .9rem; color: rgba(37,40,36,.65); margin: 0; }

/* =================== ECOLOGIA HUMANA =================== */
.ecologia-humana{
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 3rem;
  align-items: center;
}
.ecologia-humana__texto p{ color: rgba(250,247,241,.82); }
.lista-vinculada{
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.lista-vinculada li{
  border-top: 1px solid rgba(250,247,241,.18);
  padding-top: .85rem;
  font-size: .95rem;
}
.lista-vinculada li:first-child{ border-top: none; padding-top: 0; }
.lista-vinculada a{ font-weight: 500; }
.lista-vinculada a:hover{ color: var(--dourado); }

@media (max-width: 860px){
  .ecologia-humana{ grid-template-columns: 1fr; }
}

/* =================== CADERNO DE CAMPO =================== */
.caderno-campo{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2.5rem;
  border: 1px solid rgba(37,40,36,.14);
  padding: 2.2rem;
  background: var(--branco);
}
.caderno-campo__autor{ text-align: left; }
.caderno-campo__autor .foto-espaco{ aspect-ratio: 1/1; margin-bottom: .9rem; }
.caderno-campo__autor strong{ display: block; font-family: var(--editorial); font-size: 1.05rem; }
.caderno-campo__autor span{ font-size: .82rem; color: rgba(37,40,36,.6); }
.relato{ border-top: 1px solid rgba(37,40,36,.1); padding-top: 1.2rem; margin-top: 1.2rem; }
.relato:first-of-type{ border-top: none; padding-top: 0; margin-top: 0; }
.relato h4{ font-size: 1.1rem; margin-bottom: .3em; }
.relato p{ font-size: .95rem; margin-bottom: .4em; }

@media (max-width: 780px){
  .caderno-campo{ grid-template-columns: 1fr; }
}

/* =================== PLANEJE SEM DEIXAR RASTROS =================== */
.grade-guias{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.6rem;
}
.guia-cartao{
  border-left: 3px solid var(--dourado);
  padding: .3rem 0 .3rem 1.2rem;
}
.guia-cartao h4{ font-size: 1.05rem; margin-bottom: .3em; }
.guia-cartao p{ font-size: .9rem; color: rgba(37,40,36,.65); margin: 0; }

/* =================== ÚLTIMOS ARTIGOS =================== */
.grade-artigos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem 1.8rem;
}
.artigo-cartao h3{ font-size: 1.08rem; margin: .5em 0 .35em; }
.artigo-cartao p{ font-size: .9rem; color: rgba(37,40,36,.65); }
.artigo-cartao .foto-espaco{ margin-bottom: .8rem; }

.paginacao{
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin-top: 3rem;
}
.paginacao a{
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(37,40,36,.18);
  font-size: .88rem;
  font-weight: 500;
}
.paginacao a[aria-current="page"]{ background: var(--verde); color: var(--areia-clara); border-color: var(--verde); }
.paginacao a:hover:not([aria-current="page"]){ border-color: var(--verde); }

/* =================== NEWSLETTER =================== */
.newsletter{
  background: var(--dourado);
  padding: 2.6rem 0;
}
.newsletter__caixa{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.newsletter h3{ margin: 0 0 .2em; color: var(--verde-escuro); font-size: 1.3rem; }
.newsletter p{ margin: 0; font-size: .88rem; color: rgba(37,40,36,.7); max-width: 30em; }
.newsletter-form{ display: flex; gap: .6rem; flex-wrap: wrap; }
.newsletter-form input[type="text"],
.newsletter-form input[type="email"]{
  padding: .7em .9em;
  border: 1px solid rgba(37,40,36,.25);
  font-family: var(--interface);
  font-size: .9rem;
  min-width: 200px;
}
.newsletter-form small{
  display: block;
  width: 100%;
  font-size: .74rem;
  color: rgba(37,40,36,.6);
  margin-top: .5rem;
}

/* =================== RODAPÉ =================== */
.rodape{
  background: var(--verde-escuro);
  color: rgba(250,247,241,.78);
  padding: 3.5rem 0 2rem;
  font-size: .89rem;
}
.rodape__grade{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.rodape h5{
  font-family: var(--interface);
  font-size: .82rem;
  font-weight: 600;
  color: var(--areia-clara);
  margin: 0 0 .9em;
}
.rodape ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55em; }
.rodape a:hover{ color: var(--dourado); }
.rodape__marca{ font-family: var(--editorial); font-size: 1.3rem; color: var(--areia-clara); margin-bottom: .5rem; }
.rodape__base{
  border-top: 1px solid rgba(250,247,241,.15);
  padding-top: 1.4rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .78rem;
  color: rgba(250,247,241,.55);
}
@media (max-width: 860px){
  .rodape__grade{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .rodape__grade{ grid-template-columns: 1fr; }
}

/* =================== PUBLICIDADE (espaços reservados) =================== */
.espaco-publicidade{
  border: 1px dashed rgba(37,40,36,.3);
  background: rgba(37,40,36,.03);
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .74rem;
  letter-spacing: .02em;
  color: rgba(37,40,36,.45);
  margin: 2.4rem 0;
}
.espaco-publicidade::before{ content: "Publicidade"; }

/* =================== PÁGINA DE ARTIGO =================== */
.trilha{
  font-size: .82rem;
  color: rgba(37,40,36,.55);
  padding: 1.4rem 0;
}
.trilha a:hover{ color: var(--terracota); }

.artigo-cabecalho{ padding-bottom: 2rem; }
.artigo-cabecalho .categoria{ display: block; margin-bottom: .6em; }
.artigo-cabecalho h1{ font-size: clamp(2rem, 4vw, 2.7rem); max-width: 16em; }
.artigo-cabecalho .subtitulo{
  font-family: var(--editorial);
  font-style: italic;
  font-size: 1.2rem;
  color: rgba(37,40,36,.72);
  max-width: 34em;
  margin-bottom: 1.4rem;
}
.artigo-autor{
  display: flex;
  align-items: center;
  gap: .8rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(37,40,36,.12);
}
.artigo-autor .foto-espaco{ width: 3rem; aspect-ratio: 1/1; flex: none; }
.artigo-autor strong{ font-size: .92rem; }
.artigo-autor .meta{ margin-top: .1em; }

.artigo-imagem-principal{ margin: 2rem 0; }
.artigo-imagem-principal .foto-espaco{ aspect-ratio: 16/9; }
.artigo-imagem-principal figcaption{
  font-size: .78rem;
  color: rgba(37,40,36,.55);
  margin-top: .6em;
}

.artigo-corpo{
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 3.5rem;
  align-items: start;
}
.artigo-corpo__texto{ max-width: 66ch; }
.artigo-corpo__texto h2{ font-size: 1.5rem; margin-top: 1.9em; }
.artigo-corpo__texto h3{ font-size: 1.18rem; margin-top: 1.5em; }
.artigo-corpo__texto p{ font-size: 1.03rem; }
.artigo-corpo__texto ul{ padding-left: 1.2em; }
.artigo-corpo__texto li{ margin-bottom: .5em; }

.caixa-editorial{
  border-left: 3px solid var(--verde);
  background: var(--areia-clara);
  padding: 1.3rem 1.5rem;
  margin: 1.8rem 0;
}
.caixa-editorial--ciencia{ border-color: var(--dourado); }
.caixa-editorial--conduta{ border-color: var(--terracota); }
.caixa-editorial--fontes{ border-color: rgba(37,40,36,.4); background: transparent; }
.caixa-editorial p:last-child{ margin-bottom: 0; }
.caixa-editorial__titulo{
  font-family: var(--interface);
  font-weight: 600;
  font-size: .82rem;
  margin-bottom: .6em;
  color: var(--verde-escuro);
}

.artigo-lateral{ position: sticky; top: 6.5rem; display: flex; flex-direction: column; gap: 2rem; }
.lateral-bloco h5{
  font-family: var(--interface);
  font-size: .8rem;
  font-weight: 600;
  color: rgba(37,40,36,.55);
  margin-bottom: .9em;
}
.lateral-lista{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8em; }
.lateral-lista a{ font-size: .92rem; font-weight: 500; }
.lateral-lista a:hover{ color: var(--terracota); }

.nota-correcao{
  font-size: .82rem;
  color: rgba(37,40,36,.6);
  border-top: 1px dashed rgba(37,40,36,.3);
  padding-top: 1rem;
  margin-top: 2.5rem;
}

.bio-autor{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.6rem;
  border-top: 1px solid rgba(37,40,36,.15);
  border-bottom: 1px solid rgba(37,40,36,.15);
  padding: 2rem 0;
  margin: 2.5rem 0;
}
.bio-autor .foto-espaco{ aspect-ratio: 1/1; }
.bio-autor h4{ font-size: 1.15rem; margin-bottom: .3em; }
.bio-autor p{ font-size: .92rem; }

.artigo-relacionados{ margin-top: 3rem; }

@media (max-width: 900px){
  .artigo-corpo{ grid-template-columns: 1fr; }
  .artigo-lateral{ position: static; flex-direction: row; overflow-x: auto; }
  .bio-autor{ grid-template-columns: 80px 1fr; }
}

/* =================== VERSÃO EDITORIAL 2026-09 =================== */
.container--texto{ max-width: 920px; }

.pagina-hero{
  position: relative;
  overflow: hidden;
  padding: 4.8rem 0 4.2rem;
  background:
    radial-gradient(circle at 88% 20%, rgba(201,154,74,.20), transparent 24%),
    linear-gradient(135deg, var(--verde-escuro), var(--verde));
  color: var(--areia-clara);
}
.pagina-hero::after{
  content: "";
  position: absolute;
  width: 21rem;
  height: 21rem;
  right: -7rem;
  bottom: -15rem;
  border: 1px solid rgba(250,247,241,.24);
  border-radius: 50%;
  box-shadow: 0 0 0 2rem rgba(250,247,241,.04), 0 0 0 5rem rgba(250,247,241,.03);
}
.pagina-hero h1{ color: var(--areia-clara); font-size: clamp(2.2rem, 5vw, 3.4rem); max-width: 15em; }
.pagina-hero p:not(.hero__chapeu){ color: rgba(250,247,241,.82); font-family: var(--editorial); font-size: 1.15rem; max-width: 46rem; }

.visual-editorial{
  --visual-acento: var(--dourado);
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 12rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--raio);
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 18%, rgba(255,255,255,.34) 0 7%, transparent 7.4%),
    linear-gradient(154deg, transparent 0 48%, rgba(27,51,42,.68) 48.2% 62%, transparent 62.2%),
    linear-gradient(25deg, var(--verde), var(--verde-escuro));
}
.visual-editorial::before,
.visual-editorial::after{
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50% 50% 10% 10%;
  transform-origin: bottom center;
}
.visual-editorial::before{
  width: 46%; height: 52%; left: 8%; bottom: -24%;
  background: color-mix(in srgb, var(--visual-acento) 82%, transparent);
  transform: rotate(18deg);
}
.visual-editorial::after{
  width: 42%; height: 72%; right: -8%; bottom: -42%;
  border: 2px solid rgba(250,247,241,.28);
  transform: rotate(-22deg);
}
.visual-editorial span{
  margin: 1rem;
  padding: .35rem .65rem;
  background: rgba(27,51,42,.68);
  color: var(--areia-clara);
  font-family: var(--editorial);
  font-size: .82rem;
}
.visual--agua{ --visual-acento: #72A9A0; background: radial-gradient(circle at 78% 18%, #EACB84 0 7%, transparent 7.5%), linear-gradient(155deg, transparent 0 48%, rgba(27,51,42,.64) 48.2% 62%, transparent 62.2%), linear-gradient(28deg,#306B6A,#173A45); }
.visual--estacoes{ --visual-acento: #D89045; background: radial-gradient(circle at 75% 18%, #F2C767 0 8%, transparent 8.5%), linear-gradient(155deg,transparent 0 47%,#4B7058 47.2% 62%,transparent 62.2%),linear-gradient(35deg,#A65B36,#243F34); }
.visual--seguranca{ --visual-acento: #C9A45B; background: linear-gradient(155deg,transparent 0 48%,#203A31 48.2% 63%,transparent 63.2%),linear-gradient(30deg,#704B35,#264D42); }
.visual--mochila{ --visual-acento: #C97548; background: radial-gradient(circle at 78% 18%,#E8C87A 0 7%,transparent 7.5%),linear-gradient(155deg,transparent 0 48%,#315A49 48.2% 63%,transparent 63.2%),linear-gradient(30deg,#394A37,#17352D); }
.visual--guia{ --visual-acento: #D49A54; background: linear-gradient(155deg,transparent 0 48%,#47664F 48.2% 63%,transparent 63.2%),linear-gradient(30deg,#9C603D,#243D33); }
.visual--territorio{ --visual-acento: #B98549; background: radial-gradient(circle at 75% 18%,#E8C878 0 7%,transparent 7.5%),linear-gradient(155deg,transparent 0 47%,#334F3C 47.2% 62%,transparent 62.2%),linear-gradient(30deg,#764B35,#1D392F); }
.visual-editorial--larga{ aspect-ratio: 16 / 8; min-height: 17rem; margin-bottom: 1.2rem; }
.visual-editorial--quadrada{ aspect-ratio: 1; }
.visual-editorial--mini{ width: 7rem; min-height: 7rem; aspect-ratio: 1; flex: none; }
.visual-editorial--mini span{ display: none; }

.avatar-fs{
  display: grid;
  place-items: center;
  width: 3rem;
  aspect-ratio: 1;
  flex: none;
  border-radius: 50%;
  background: var(--verde);
  color: var(--areia-clara);
  font-family: var(--editorial);
  font-weight: 700;
}
.avatar-fs--grande{ width: 7.5rem; }
.avatar-fs--extra{ width: 11rem; font-size: 2rem; }
.perfil{ display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2rem; margin: 2rem 0 3rem; }
.nota-discreta{ color: rgba(37,40,36,.62); font-size: .88rem; }
.chamada-campo{ max-width: 800px; }
.chamada-campo h2{ font-size: clamp(1.8rem, 4vw, 2.5rem); }
.passos{ counter-reset: passo; list-style: none; padding: 0; display: grid; gap: 1rem; }
.passos li{ counter-increment: passo; position: relative; padding: 1.1rem 1.1rem 1.1rem 4rem; background: var(--branco); border: 1px solid rgba(37,40,36,.1); }
.passos li::before{ content: counter(passo, decimal-leading-zero); position: absolute; left: 1.1rem; color: var(--terracota); font-family: var(--editorial); font-style: italic; }
.caixa-editorial a,
.artigo-corpo__texto > p a,
.container--estreito p a{ color: var(--terracota-escuro); text-decoration: underline; text-underline-offset: .18em; }
.artigo-corpo__texto{ padding-bottom: 2rem; }
.artigo-cabecalho{ padding-top: .7rem; }
.artigo-cabecalho h1{ max-width: 21em; }
.artigo-autor .avatar-fs{ margin-right: .1rem; }
.artigo-relacionados{ padding-bottom: 4rem; }
.grade-artigos .artigo-cartao{ display: flex; flex-direction: column; }
.grade-artigos .artigo-cartao .meta{ margin-top: auto; }
.grade-artigos .artigo-cartao > p:not(.categoria):not(.meta){ font-size: .88rem; }

@supports not (background: color-mix(in srgb, red 50%, transparent)){
  .visual-editorial::before{ background: rgba(201,154,74,.72); }
}

@media (max-width: 780px){
  body{ font-size: 16px; }
  .pagina-hero{ padding: 3.2rem 0 2.8rem; }
  .secao{ padding: 3rem 0; }
  .secao__cabecalho{ align-items: flex-start; flex-direction: column; gap: .6rem; }
  .visual-editorial--larga{ min-height: 12rem; aspect-ratio: 16/10; }
  .perfil{ grid-template-columns: 1fr; }
  .avatar-fs--extra{ width: 8rem; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ transition: none !important; }
}