/* Cerravia, versão 6. Paisagem ilustrada, superfícies de papel e transparência,
   com tipografia da escola suíça: uma grotesca só, hierarquia por peso e corpo. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fontes/HankenGrotesk-Variavel.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --tinta: #262826;
  --branco: #FFFFFF;
  --laterita: #7A3A27;
  --azul-escuro: #4E5F68;
  --azul: #748791;
  --verde-profundo: #2C3322;
  --verde: #404833;
  --papel: #F4F0EA;
  --areia: #E6DACB;
  --margem: 18px;
  --vao: 20px;
  --largura: 1320px;
}
@media (min-width: 760px) { :root { --margem: 32px; --vao: 24px; } }
@media (min-width: 1280px) { :root { --margem: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: "Hanken Grotesk", Arial, sans-serif; font-size: 17px; font-weight: 420;
  line-height: 27px; text-align: left;
}
img, svg { display: block; height: auto; max-width: 100%; }
p { margin: 0 0 18px; }
ul, ol { margin: 0 0 20px; padding-left: 22px; }
li { margin-bottom: 8px; }
p, li { text-wrap: pretty; }
strong { font-weight: 680; }
a { color: var(--laterita); text-decoration-thickness: 1px; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--azul-escuro); outline-offset: 2px; }

h1, h2, h3 { color: var(--tinta); font-family: "Hanken Grotesk", Arial, sans-serif; font-weight: 620; letter-spacing: -0.021em; margin-top: 0; text-wrap: balance; }
h1 { font-size: 54px; letter-spacing: -0.028em; line-height: 53px; margin-bottom: 22px; }
h2 { font-size: 34px; line-height: 35px; margin-bottom: 16px; }
h3 { font-size: 24px; letter-spacing: -0.014em; line-height: 28px; margin: 30px 0 8px; }

.grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); margin: 0 auto; max-width: calc(var(--largura) + 2 * var(--margem)); padding-left: var(--margem); padding-right: var(--margem); }
.grade > * { grid-column: 1 / -1; }
.pular { left: -9999px; position: absolute; top: 0; }
.pular:focus { background: var(--branco); color: var(--tinta); left: var(--margem); padding: 8px 12px; top: 42px; z-index: 30; }

/* A mesma barra flutua sobre cada abertura; a cor opaca é o caso de apoio. */
.topo { left: 0; position: absolute; right: 0; top: 48px; z-index: 10; }
.topo .grade { align-items: center; background: rgba(244, 240, 234, 0.96); border: 1px solid rgba(38, 40, 38, 0.18); border-radius: 24px; box-shadow: 0 8px 24px rgba(38, 40, 38, 0.10); min-height: 66px; }
@supports (backdrop-filter: blur(10px)) { .topo .grade { background: rgba(244, 240, 234, 0.78); backdrop-filter: blur(14px); } }
.topo .marca { display: inline-block; grid-column: 1 / span 8; width: 155px; }
.marca img { width: 155px; }
.navegacao { grid-column: 9 / -1; justify-self: end; position: relative; }
.menu { display: none; }
.menu-celular summary { border: 1px solid var(--tinta); border-radius: 999px; cursor: pointer; display: block; font-size: 16px; font-weight: 650; line-height: 24px; list-style: none; padding: 6px 14px; }
.menu-celular summary::-webkit-details-marker { display: none; }
.menu-celular[open] summary { background: var(--verde-profundo); color: var(--papel); }
.menu-celular ul { background: var(--papel); border: 1px solid rgba(38, 40, 38, 0.18); border-radius: 18px; box-shadow: 0 8px 24px rgba(38, 40, 38, 0.10); list-style: none; margin: 8px 0 0; min-width: 260px; padding: 12px 18px 16px; position: absolute; right: 0; top: 100%; z-index: 4; }
.menu-celular li { margin: 0; }
.menu-celular a { color: var(--tinta); display: block; font-size: 16px; font-weight: 600; line-height: 24px; padding: 8px 0; text-decoration: none; }
.menu-celular a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.menu-celular .botao-contorno { display: inline-block; margin-top: 8px; padding: 8px 13px; }
@media (min-width: 1180px) {
  .topo { top: 52px; }
  .topo .grade { min-height: 72px; }
  .topo .marca { grid-column: 1 / span 2; width: 166px; }
  .marca img { width: 166px; }
  .navegacao { grid-column: 3 / -1; }
  .menu-celular { display: none; }
  .menu { align-items: center; column-gap: 18px; display: flex; list-style: none; margin: 0; padding: 0; }
  .menu li { margin: 0; }
  .menu a { color: var(--tinta); font-size: 15px; font-weight: 620; line-height: 24px; text-decoration: none; }
  .menu a:hover, .menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
  .menu .item-botao { margin-left: 4px; }
}

.botao, .botao-contorno { border-radius: 999px; display: inline-block; font-size: 16px; font-weight: 680; line-height: 24px; padding: 11px 19px; text-decoration: none; }
.botao { font-size: 16px; line-height: 24px; }
.botao { background: var(--verde-profundo); color: var(--papel); }
.botao-contorno { border: 1px solid var(--tinta); color: var(--tinta); }
.link-avanco { align-items: center; color: var(--tinta); display: inline-flex; font-size: 16px; font-weight: 680; gap: 8px; line-height: 24px; text-decoration: none; }
.link-avanco svg { height: 18px; width: 18px; }
.acoes { align-items: center; display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 28px; }

/* Abertura: a moldura deixa espaço real para o manifesto no centro. */
/* Véu de papel sobre a moldura pintada: garante contraste do texto, que sem ele cai a 1,4
   sobre a folhagem escura. No celular o véu desce de cima, porque o texto ocupa a largura toda. */
.abertura-inicio {
  background:
    linear-gradient(180deg, rgba(244, 240, 234, 0.96) 0%, rgba(244, 240, 234, 0.92) 58%, rgba(244, 240, 234, 0.55) 78%, rgba(244, 240, 234, 0) 100%),
    var(--papel) url("../img/foto-abertura.webp") center top / cover no-repeat;
  min-height: 730px; padding: 166px 0 106px;
}
@media (min-width: 900px) {
  .abertura-inicio {
    background:
      linear-gradient(100deg, rgba(244, 240, 234, 0.95) 0%, rgba(244, 240, 234, 0.90) 34%, rgba(244, 240, 234, 0.34) 56%, rgba(244, 240, 234, 0) 72%),
      var(--papel) url("../img/foto-abertura.webp") 68% center / cover no-repeat;
  }
}
.abertura-texto { max-width: 720px; }
.slogan { color: var(--verde); font-size: 14px; font-weight: 720; letter-spacing: 0.12em; line-height: 20px; margin-bottom: 22px; text-transform: uppercase; }
.abertura-inicio h1 { font-size: 58px; letter-spacing: -0.031em; line-height: 55px; max-width: 720px; }
.linha-fina { font-size: 20px; line-height: 30px; max-width: 560px; }
.abertura-estagio { align-self: start; background: rgba(244, 240, 234, 0.94); border: 1px solid rgba(38, 40, 38, 0.18); border-radius: 18px; margin-top: 42px; max-width: 360px; padding: 18px 18px 5px; }
.abertura-estagio p { font-size: 14px; line-height: 20px; }
@supports (backdrop-filter: blur(10px)) { .abertura-estagio { background: rgba(244, 240, 234, 0.74); backdrop-filter: blur(12px); } }

.painel-areas { margin-top: 0; padding: 20px 0 70px; position: relative; z-index: 2; }
.painel-areas-interno { background: rgba(244, 240, 234, 0.96); border: 1px solid rgba(38, 40, 38, 0.16); border-radius: 24px; box-shadow: 0 12px 32px rgba(38, 40, 38, 0.10); display: grid; gap: 10px; padding: 12px; }
@supports (backdrop-filter: blur(10px)) { .painel-areas-interno { background: rgba(244, 240, 234, 0.78); backdrop-filter: blur(14px); } }
.cartao-area { border-radius: 16px; color: var(--tinta); display: grid; gap: 7px; grid-template-columns: 76px minmax(0, 1fr); padding: 12px; text-decoration: none; }
.cartao-area img { grid-row: span 3; width: 70px; }
.cartao-area span { align-self: end; font-size: 17px; font-weight: 720; line-height: 22px; }
.cartao-area em { color: var(--verde); font-size: 14px; font-style: normal; font-weight: 720; line-height: 20px; }
.cartao-area small { color: var(--azul-escuro); font-size: 14px; line-height: 20px; }

/* Aberturas internas ficam claras e silenciosas, reservando a imagem para o conteúdo pertinente. */
.abertura { background: var(--branco); padding: 150px 0 70px; }
.abertura .linha-fina { max-width: 650px; }
.abertura .nota { max-width: 650px; }
.aviso { color: var(--verde); font-size: 26px; font-weight: 600; letter-spacing: -0.018em; line-height: 30px; margin-top: 20px; }

.secao { background: var(--branco); padding: 58px 0; }
.secao .fio { border-top: 1px solid rgba(38, 40, 38, 0.30); margin-bottom: 22px; }
.secao .conteudo > p, .secao .conteudo > ul, .secao .conteudo > ol, .secao .conteudo > table { max-width: 700px; }
.nota { color: var(--azul-escuro); font-size: 14px; line-height: 20px; }
.marcador { background: var(--areia); color: var(--tinta); font-size: 14px; font-weight: 650; line-height: 20px; padding: 1px 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.estagio { border: 1px solid var(--verde); border-radius: 999px; color: var(--verde-profundo); display: inline-block; font-size: 14px; font-weight: 700; line-height: 20px; margin: 0 0 20px; padding: 3px 10px; }
.links { list-style: none; padding-left: 0; }
.lista-numerada { counter-reset: passo; list-style: none; padding-left: 0; }
.lista-numerada li { counter-increment: passo; display: grid; gap: 14px; grid-template-columns: 34px minmax(0, 1fr); margin-bottom: 23px; }
.lista-numerada li::before { color: var(--laterita); content: counter(passo); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 27px; }
table { border-collapse: collapse; margin: 0 0 24px; width: 100%; }
th, td { border-bottom: 1px solid rgba(38, 40, 38, 0.30); padding: 13px 16px 13px 0; text-align: left; vertical-align: top; }
th { font-weight: 700; }

/* Método da abertura: texto editorial e prancha partilham um único cartão. */
.pagina-inicio .secao-proposta { padding-top: 8px; }
.pagina-inicio .secao-proposta .fio { display: none; }
.pagina-inicio .secao-proposta .conteudo > p:first-child { font-size: 20px; line-height: 30px; }
.pagina-inicio .secao-metodo { background: var(--papel); }
.cartao-metodo { background: var(--branco); border-radius: 24px; overflow: hidden; }
.metodo-editorial { padding: 28px 22px 10px; }
.principios { display: grid; gap: 20px; margin-bottom: 24px; }
.principios p { border-left: 2px solid var(--areia); margin: 0; padding-left: 13px; }
.principios strong { display: block; font-size: 17px; line-height: 24px; margin-bottom: 3px; }
.prancha-metodo { margin: 0; min-height: 360px; overflow: hidden; position: relative; }
.prancha-metodo img { height: 100%; min-height: 360px; object-fit: cover; width: 100%; }
.pagina-inicio .secao-territorio-e-estagio { background: var(--papel) url("../img/foto-capim.webp") center center / cover no-repeat; }
.par { display: grid; gap: 28px; }
.par .bloco { background: rgba(244, 240, 234, 0.88); border-radius: 18px; padding: 22px; }
.mapa { background: var(--branco); border-radius: 18px; margin: 28px 0 0; padding: 20px 14px 18px; }
.mapa-svg { width: 100%; }
.mapa-bioma { fill: var(--areia); stroke: var(--branco); stroke-width: 1.2; }
/* O Cerrado entra como primeiro território, em contorno e tinta leve, não como mancha dominante. */
.mapa-cerrado { fill: rgba(64, 72, 51, 0.22); stroke: var(--verde); stroke-width: 2.8; }
.mapa-uf { fill: none; stroke: var(--branco); stroke-width: 0.7; }
.mapa-reticulado { fill: none; stroke: var(--azul); stroke-dasharray: 3 5; stroke-width: 0.8; }
.mapa-escala { fill: none; stroke: var(--tinta); stroke-width: 2; }
.mapa-rotulo { fill: var(--azul-escuro); font-family: "Hanken Grotesk", Arial, sans-serif; font-size: 42px; }
.mapa-rotulo-fim { text-anchor: end; }
.mapa-rotulo-zero { display: none; }
.mapa figcaption { color: var(--azul-escuro); font-size: 14px; line-height: 20px; margin-top: 18px; max-width: 760px; }
.mapa figcaption p { margin-bottom: 8px; }
.legenda { color: var(--tinta); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.legenda span { align-items: center; display: inline-flex; gap: 8px; }
.amostra { display: inline-block; height: 13px; width: 13px; }
.amostra-cerrado { background: rgba(64, 72, 51, 0.22); border: 2px solid var(--verde); }
.amostra-bioma { background: var(--areia); }
@media (min-width: 600px) { .mapa-rotulo { font-size: 32px; } .mapa-rotulo-zero { display: inline; } }
@media (min-width: 760px) { .mapa { padding: 30px 30px 20px; } .mapa-rotulo { font-size: 22px; } }

.faixa-solo { background: var(--papel); min-height: 360px; overflow: hidden; position: relative; }
.faixa-solo > img { height: 430px; object-fit: cover; object-position: center top; width: 100%; }
.faixa-solo .grade { left: 0; padding-top: 38px; position: absolute; right: 0; top: 0; }
.faixa-solo p { background: rgba(244, 240, 234, 0.94); border-radius: 18px; color: var(--verde-profundo); font-size: 30px; font-weight: 620; letter-spacing: -0.022em; line-height: 32px; max-width: 460px; padding: 14px 16px 16px; text-wrap: balance; }
@supports (backdrop-filter: blur(10px)) { .faixa-solo p { background: rgba(244, 240, 234, 0.78); backdrop-filter: blur(10px); } }
.pagina-inicio .secao-artigos { background: var(--verde-profundo); color: var(--papel); }
.pagina-inicio .secao-artigos h2, .pagina-inicio .secao-artigos a { color: var(--papel); }
.pagina-inicio .secao-artigos .fio { border-color: rgba(244, 240, 234, 0.35); }
.pagina-inicio .secao-colaboracao { background: var(--papel); padding-bottom: 94px; }
.chamada { color: var(--verde-profundo); font-size: 34px; font-weight: 620; letter-spacing: -0.024em; line-height: 36px; margin: 28px 0 32px; max-width: 680px; }

/* Imagens internas permanecem pontuais e explicativas, nunca documentais. */
.figura-interna { background: var(--branco); padding: 0 0 24px; }
.imagem-interna { margin: 0 0 26px; }
.imagem-interna img { border-radius: 18px; width: 100%; }
.pagina-areas-de-atuacao .secao-pesquisa .conteudo, .pagina-areas-de-atuacao .secao-dados .conteudo, .pagina-areas-de-atuacao .secao-conhecimento .conteudo { border-left: 2px solid var(--areia); padding-left: 16px; }

.rodape { background: var(--verde-profundo); color: var(--papel); padding: 58px 0 40px; }
.rodape a { color: var(--papel); }
.rodape :focus-visible { outline-color: var(--papel); }
.rodape .grade { row-gap: 26px; }
.rodape-marca img { width: 220px; }
.rodape p { margin-bottom: 8px; }
.rodape .nota { color: var(--areia); }
.rodape .marcador { background: var(--areia); color: var(--tinta); }
.rodape .nota .marcador { display: inline-block; white-space: nowrap; }
.nota-cnpj { grid-column: 1 / -1; }
.rodape-links ul { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.rodape-links li { margin: 0; }
.rodape-links a { font-size: 16px; line-height: 24px; }
.acessibilidade { align-items: center; display: inline-flex; font-weight: 650; gap: 8px; }
.acessibilidade svg { height: 30px; width: 30px; }
.credito-ilustracao { color: var(--areia); font-size: 14px; grid-column: 1 / -1; line-height: 20px; margin: 10px 0 0; }

@media (min-width: 900px) {
  h1 { font-size: 68px; letter-spacing: -0.03em; line-height: 63px; }
  h2 { font-size: 42px; letter-spacing: -0.024em; line-height: 43px; }
  .abertura { padding: 190px 0 120px; }
  .abertura h1 { grid-column: 1 / span 7; margin-bottom: 0; }
  .abertura .linha-fina, .abertura .nota, .abertura .aviso { align-self: end; grid-column: 9 / -1; }
  .abertura-inicio { background-attachment: fixed; background-position: center top; background-size: 100% auto; min-height: 850px; padding: 198px 0 142px; }
  .abertura-texto { grid-column: 2 / span 8; }
  .abertura-inicio h1 { font-size: 86px; letter-spacing: -0.034em; line-height: 79px; max-width: 980px; }
  .abertura-estagio { grid-column: 10 / -1; margin-top: 74px; }
  .painel-areas { margin-top: -54px; padding-bottom: 110px; }
  .painel-areas-interno { gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 16px; }
  .cartao-area { grid-template-columns: 1fr; min-height: 230px; padding: 14px; }
  .cartao-area img { grid-row: auto; width: 92px; }
  .cartao-area span { align-self: auto; font-size: 19px; line-height: 24px; }
  .secao { padding: 92px 0; }
  .secao .fio { grid-column: 1 / -1; margin-bottom: 28px; }
  .secao .cabeca { grid-column: 1 / span 4; }
  .secao .cabeca h2 { max-width: 330px; }
  .secao .conteudo { grid-column: 6 / span 6; }
  .pagina-inicio .secao-proposta { padding-bottom: 114px; }
  .pagina-inicio .secao-proposta .cabeca { grid-column: 2 / span 4; }
  .pagina-inicio .secao-proposta .conteudo { grid-column: 7 / span 5; }
  .pagina-inicio .secao-proposta .conteudo > p:first-child { font-size: 23px; line-height: 33px; }
  .pagina-inicio .secao-metodo .cabeca { grid-column: 1 / span 5; }
  .pagina-inicio .secao-metodo .conteudo { grid-column: 2 / -1; }
  .cartao-metodo { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .metodo-editorial { padding: 42px 36px 24px; }
  .prancha-metodo, .prancha-metodo img { min-height: 520px; }
  .par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagina-inicio .secao-territorio-e-estagio .conteudo { grid-column: 1 / -1; }
  .mapa { margin: 32px 0 0; max-width: none; padding: 34px 34px 22px; width: 100%; }
  .faixa-solo { min-height: 520px; }
  .faixa-solo > img { height: 550px; }
  .faixa-solo .grade { padding-top: 66px; }
  .faixa-solo p { font-size: 44px; line-height: 45px; max-width: 620px; }
  .pagina-inicio .secao-artigos .cabeca { grid-column: 2 / span 4; }
  .pagina-inicio .secao-artigos .conteudo { grid-column: 7 / span 5; }
  .pagina-inicio .secao-colaboracao .cabeca { grid-column: 2 / span 4; }
  .pagina-inicio .secao-colaboracao .conteudo { grid-column: 7 / span 5; }
  .chamada { font-size: 44px; line-height: 45px; }
  .rodape { padding: 76px 0 44px; }
  .rodape-marca { grid-column: 1 / span 3; }
  .rodape-texto { grid-column: 5 / span 5; }
  .rodape-links { grid-column: 11 / -1; }
  .nota-cnpj { grid-column: 5 / -1; }
}
/* No celular o marcador quebra em duas linhas, com o fundo repetido em cada linha
   (box-decoration-break: clone), em vez de ser comprimido na horizontal. */
@media (max-width: 899px) { .rodape .nota .marcador { display: inline; white-space: normal; } }

@media (prefers-reduced-motion: no-preference) {
  .botao, .botao-contorno, .link-avanco, .cartao-area { transition: background-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
  .botao:hover { background: var(--laterita); color: var(--branco); transform: translateY(-1px); }
  .botao-contorno:hover { background: var(--tinta); color: var(--branco); transform: translateY(-1px); }
  .link-avanco:hover { color: var(--laterita); }
  .cartao-area:hover { background: rgba(230, 218, 203, 0.58); box-shadow: 0 5px 12px rgba(38, 40, 38, 0.08); transform: translateY(-2px); }
}

.so-impressao { display: none; }
@media print {
  .so-tela { display: none; }
  .so-impressao { display: block; }
  .topo { display: none; }
  .rodape { background: var(--branco); color: var(--tinta); }
  .rodape a, .rodape .nota, .credito-ilustracao { color: var(--tinta); }
}

/* Legenda de imagem gerada: aparece em toda figura fotográfica e na faixa de solo. */
.imagem-interna figcaption, .prancha-metodo figcaption, .credito-foto {
  color: var(--azul-escuro); font-size: 14px; line-height: 20px; margin-top: 10px; max-width: 620px;
}
.faixa-solo .credito-foto { background: rgba(244, 240, 234, 0.92); border-radius: 12px; display: inline-block;
  font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 20px; margin-top: 14px; max-width: 420px;
  padding: 7px 12px; }
@supports (backdrop-filter: blur(10px)) { .faixa-solo .credito-foto { background: rgba(244, 240, 234, 0.78); backdrop-filter: blur(8px); } }

/* Contraste reforçado, quando o sistema pede mais contraste: links e bordas mais fortes, cores da mesma paleta. */
@media (prefers-contrast: more) {
  a { text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .botao-contorno, .menu-celular summary { border-width: 2px; }
  .nota, figcaption, .credito-foto, .credito-ilustracao { color: var(--tinta); }
  .rodape .nota, .rodape .credito-ilustracao { color: var(--papel); }
}

/* Raio-X do território (protótipo, 12/10/2026): formulário, indicadores, gráficos e tabelas.
   Só a paleta do manual e a Hanken Grotesk; nenhuma fonte abaixo de 14 px. As cores dos marcos
   (verde para a chuva, laterita para a máxima e a média, azul-escuro para a mínima) foram
   validadas em contraste e em visão com deficiência de cor sobre o branco. */
.pagina-raio-x-do-territorio .abertura .nota { color: var(--verde-profundo); font-size: 16px; font-weight: 650; line-height: 24px; }
.sem-script { background: var(--areia); border-radius: 12px; padding: 12px 16px; }
.js .sem-script { display: none; }
.consulta { display: grid; gap: 16px; max-width: 700px; }
.consulta .campo label { display: block; font-size: 17px; font-weight: 680; line-height: 24px; }
.consulta .ajuda { color: var(--azul-escuro); font-size: 14px; line-height: 20px; margin: 8px 0 0; }
.consulta input { background: var(--branco); border: 1px solid var(--tinta); border-radius: 14px; color: var(--tinta); font-family: inherit; font-size: 17px; font-weight: 420; line-height: 24px; margin-top: 8px; padding: 12px 16px; width: 100%; }
.consulta .acoes { margin-top: 0; }
button.botao, button.botao-contorno { border: 0; cursor: pointer; font-family: inherit; }
button.botao-contorno { background: transparent; border: 1px solid var(--tinta); }
button.botao[disabled] { cursor: progress; opacity: 0.7; }
.exemplos { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.exemplos li { margin: 0; }
.exemplo { background: var(--papel); border: 1px solid rgba(38, 40, 38, 0.30); border-radius: 999px; color: var(--tinta); cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 650; line-height: 20px; padding: 5px 12px; }
.exemplo[disabled] { cursor: progress; opacity: 0.6; }
.consulta input[readonly] { background: var(--papel); }
.estado { color: var(--verde-profundo); font-weight: 650; margin: 0; min-height: 27px; }
.estado.erro { color: var(--laterita); }
.ponto { font-size: 20px; line-height: 30px; }
.indicadores { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 0 0 28px; }
.indicador { background: var(--branco); border: 1px solid rgba(38, 40, 38, 0.16); border-radius: 16px; margin: 0; padding: 16px 16px 14px; }
.indicador dt { color: var(--verde); font-size: 14px; font-weight: 720; letter-spacing: 0.08em; line-height: 20px; text-transform: uppercase; }
.indicador dd { margin: 6px 0 0; }
.indicador .valor { display: block; font-size: 30px; font-weight: 620; letter-spacing: -0.02em; line-height: 34px; }
.indicador .detalhe { color: var(--azul-escuro); display: block; font-size: 14px; line-height: 20px; margin-top: 4px; }
.graficos { display: grid; gap: 20px; margin: 0 0 28px; }
.grafico { background: var(--branco); border: 1px solid rgba(38, 40, 38, 0.16); border-radius: 16px; margin: 0; padding: 18px 16px 12px; }
.grafico h3 { margin: 0 0 4px; }
.grafico .subtitulo { color: var(--azul-escuro); font-size: 14px; line-height: 20px; margin: 0 0 12px; }
.grafico svg { height: auto; overflow: visible; width: 100%; }
.barra { fill: var(--verde); }
.barra-destaque { fill: var(--laterita); }
.hachura-fundo { fill: var(--areia); }
.hachura-linha { stroke: var(--laterita); stroke-width: 2; }
.rotulo-direto { fill: var(--tinta); font-family: "Hanken Grotesk", Arial, sans-serif; font-size: 14px; font-weight: 650; }
.linha-media { stroke: var(--laterita); stroke-linecap: round; stroke-width: 2; }
.linha-tmax { fill: none; stroke: var(--laterita); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.linha-tmin { fill: none; stroke: var(--azul-escuro); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.ponto-tmax { fill: var(--laterita); stroke: var(--branco); stroke-width: 2; }
.ponto-tmin { fill: var(--azul-escuro); stroke: var(--branco); stroke-width: 2; }
.grade-grafico { stroke: rgba(38, 40, 38, 0.16); stroke-width: 1; }
.eixo-base { stroke: rgba(38, 40, 38, 0.30); stroke-width: 1; }
.rotulo-eixo { fill: var(--azul-escuro); font-family: "Hanken Grotesk", Arial, sans-serif; font-size: 14px; }
.legenda-grafico { color: var(--tinta); display: flex; flex-wrap: wrap; font-size: 14px; gap: 6px 18px; line-height: 20px; margin: 10px 0 0; }
.legenda-grafico span { align-items: center; display: inline-flex; gap: 8px; }
.chave { border-radius: 2px; display: inline-block; height: 4px; width: 18px; }
.chave-barra { background: var(--verde); border-radius: 3px; height: 12px; width: 12px; }
.chave-destaque { background: repeating-linear-gradient(45deg, #7A3A27 0 2px, #E6DACB 2px 6px); border-radius: 3px; height: 12px; width: 12px; }
.chave-media, .chave-tmax { background: var(--laterita); }
.chave-tmin { background: var(--azul-escuro); }
.detalhes { margin: 0 0 24px; }
.detalhes summary { cursor: pointer; font-weight: 680; }
.detalhes table { margin-top: 12px; }
.tabela-rolante { overflow-x: auto; }
.secao-resultado .conteudo > h2 { margin-bottom: 20px; }
.secao-resultado .conteudo > h3 { margin-top: 8px; }
@media (min-width: 900px) {
  .pagina-raio-x-do-territorio .secao-resultado .conteudo { grid-column: 1 / -1; }
  .pagina-raio-x-do-territorio .secao-resultado .conteudo > p { max-width: 820px; }
  .graficos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .graficos .grafico-largo { grid-column: 1 / -1; }
  .indicador .valor { font-size: 34px; line-height: 38px; }
}
@media (prefers-reduced-motion: no-preference) {
  .exemplo { transition: background-color 160ms ease, color 160ms ease; }
  .exemplo:hover { background: var(--tinta); color: var(--branco); }
}
@media (prefers-contrast: more) {
  .exemplo, .indicador, .grafico { border-color: var(--tinta); }
}

/* Laboratório (12/10/2026): área fora do menu, com os cruzamentos do Raio-X em cartões. */
.pagina-laboratorio-raio-x-cruzado .abertura .nota { color: var(--laterita); font-size: 16px; font-weight: 680; line-height: 24px; }
.cartoes-cruzamento { display: grid; gap: 16px; margin: 0 0 28px; }
.cruzamento { background: var(--branco); border: 1px solid rgba(38, 40, 38, 0.16); border-radius: 16px; margin: 0; padding: 18px 16px 14px; }
.cruzamento h3 { margin: 0 0 6px; }
.cruzamento dl { margin: 0 0 8px; }
.cruzamento dt { font-weight: 680; margin-top: 10px; }
.cruzamento dd { margin: 2px 0 0; }
.cruzamento .nota { margin: 8px 0 0; }
.estado-cruzamento { color: var(--azul-escuro); font-size: 14px; line-height: 20px; margin: 0 0 6px; }
.estado-cruzamento.erro { color: var(--laterita); font-weight: 650; }
@media (min-width: 900px) {
  .pagina-laboratorio-raio-x-cruzado .secao-resultado .conteudo, .pagina-laboratorio-raio-x-cruzado .secao-cruzamentos .conteudo { grid-column: 1 / -1; }
  .pagina-laboratorio-raio-x-cruzado .secao-resultado .conteudo > p, .pagina-laboratorio-raio-x-cruzado .secao-cruzamentos .conteudo > p { max-width: 820px; }
  .cartoes-cruzamento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-contrast: more) { .cruzamento { border-color: var(--tinta); } }

/* Investidores (12/10/2026): cartões em duas colunas na inicial e na página própria; título dos cartões. */
.par .bloco h3 { font-size: 19px; line-height: 25px; margin: 0 0 10px; }
.par + .par { margin-top: 28px; }
@media (min-width: 900px) {
  .pagina-inicio .secao-investir .conteudo, .pagina-investidores .secao-construindo .conteudo, .pagina-investidores .secao-caminhos .conteudo { grid-column: 1 / -1; }
  .pagina-investidores .secao-caminhos .conteudo > p, .pagina-investidores .secao-caminhos .principios { max-width: 820px; }
}

/* Mapa dos imóveis (laboratório): o Leaflet fica em css/leaflet.css; aqui só o encaixe no site. */
.mapa-imoveis { background: var(--areia); border: 1px solid rgba(38, 40, 38, 0.16); border-radius: 16px; height: 420px; margin: 0; overflow: hidden; width: 100%; }
.leaflet-container { font-family: "Hanken Grotesk", Arial, sans-serif; font-size: 14px; }
.mapa-controles { align-items: center; display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 12px; }
.mapa-controles label { font-weight: 680; }
.mapa-controles select { background: var(--branco); border: 1px solid var(--tinta); border-radius: 10px; color: var(--tinta); font-family: inherit; font-size: 16px; line-height: 24px; padding: 6px 10px; }
/* Painel de camadas dentro do próprio mapa, como o seletor de camadas de um app de mapa comum. */
.mapa-wrap { margin: 0 0 12px; position: relative; }
.mapa-camadas { background: rgba(244, 240, 234, 0.94); border: 1px solid rgba(38, 40, 38, 0.18); border-radius: 12px; box-shadow: 0 4px 14px rgba(38, 40, 38, 0.18); max-height: calc(100% - 24px); max-width: 240px; overflow-y: auto; padding: 10px 12px; position: absolute; right: 12px; top: 12px; z-index: 1000; }
.mapa-camadas summary { cursor: pointer; font-size: 14px; font-weight: 680; line-height: 20px; list-style: none; }
.mapa-camadas summary::-webkit-details-marker { display: none; }
.mapa-camadas summary::after { content: "▾"; float: right; }
.mapa-camadas[open] summary { margin: 0 0 8px; }
.mapa-checkbox { align-items: center; display: flex; font-weight: 420; gap: 8px; margin: 6px 0; }
.mapa-checkbox input { flex: none; height: 18px; width: 18px; }
.mapa-checkbox-sub { margin-left: 26px; }
.mapa-info { min-height: 27px; }
.mapa-lista { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 12px 0 0; padding: 0; }
.mapa-lista li { margin: 0; }
.mapa-lista .exemplo { text-align: left; white-space: normal; }
.leaflet-tooltip.rotulo-mapa { background: none; border: none; box-shadow: none; color: var(--tinta); font-size: 14px; font-weight: 680; padding: 0; text-shadow: -1px -1px 0 var(--areia), 1px -1px 0 var(--areia), -1px 1px 0 var(--areia), 1px 1px 0 var(--areia); }
.leaflet-tooltip.rotulo-mapa::before { display: none; }
@media (max-width: 480px) {
  .mapa-camadas { max-width: 170px; right: 8px; top: 8px; }
}
@media (min-width: 900px) {
  .pagina-laboratorio-raio-x-cruzado .secao-mapa .conteudo { grid-column: 1 / -1; }
  .pagina-laboratorio-raio-x-cruzado .secao-mapa .conteudo > p { max-width: 820px; }
  .mapa-imoveis { height: 580px; }
}