/* ==========================================================
   SETE FATORES (#fatores)
   ========================================================== */
.fatores { overflow: hidden; }
.fatores .malha { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .14; }
.fatores .container { position: relative; }
.fatores-intro { max-width: var(--largura-texto); font-size: 19px; }
/* Os botões e o desenho à esquerda; o painel do fator selecionado à direita, na altura dos dois */
.fatores-corpo { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "fatores painel" "diagrama painel"; gap: var(--espaco-5) clamp(32px, 4vw, 48px); margin-top: var(--espaco-6); align-items: stretch; }
.fatores-corpo > :first-child { grid-area: fatores; }
.fator-painel { grid-area: painel; }
.fatores-diagrama { grid-area: diagrama; align-self: start; }
.fatores-instrucao { font-size: 16px; margin-bottom: var(--espaco-3); }

/* Os sete fatores: quatro em cima e três embaixo, centralizados (oito colunas, cada fator ocupa duas) */
.fatores-grade { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.fator { grid-column: span 2; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--espaco-3); text-align: left; padding: 16px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 0; cursor: pointer; min-height: 148px; transition: background-color .3s, color .3s, border-color .3s, transform .3s; }
.fator:nth-child(5) { grid-column: 2 / span 2; }
.fator:hover { border-color: var(--cinza-claro); }
.fator-numero { font-size: 15px; font-weight: 600; letter-spacing: 0.12em; color: var(--texto-suave); transition: color .3s; }
.fator-nome { font-size: 17px; font-weight: 600; line-height: 1.35; }
.fator[aria-pressed="true"] { background: var(--quase-branco); color: var(--tinta); border-color: var(--quase-branco); }
.fator[aria-pressed="true"] .fator-numero { color: var(--cinza-texto); }
.fator::after { content: ""; position: absolute; right: 14px; top: 14px; width: 10px; height: 10px; background: var(--praca); transform: scale(0); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.fator[aria-pressed="true"]::after { transform: scale(1); }

/* O empreendimento e as setas: cada número fica sobre o início da sua seta (sete colunas iguais) */
.fatores-origens { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; font-size: 16px; font-weight: 600; letter-spacing: 0.12em; color: var(--texto-suave); padding-bottom: 6px; }
.fatores-origens span { transition: color .3s; }
.fatores-diagrama svg { display: block; width: 100%; height: auto; }
.seta-fator path { fill: none; stroke: var(--cinza-claro); stroke-width: 10; stroke-linecap: round; transition: stroke .3s, fill .3s, opacity .3s; }
.seta-fator { opacity: .38; transition: opacity .3s; }
.seta-fator .seta-ponta { fill: var(--cinza-claro); stroke: var(--cinza-claro); stroke-width: 4; stroke-linejoin: round; }
.seta-fator.ativo { opacity: 1; }
.seta-fator.ativo path { stroke: var(--quase-branco); }
.seta-fator.ativo .seta-ponta { fill: var(--quase-branco); }
.fatores-origens span.ativo { color: var(--texto); }
.emp-moldura { fill: var(--superficie); stroke: var(--cinza-claro); stroke-width: 1.5; }
.emp-terreno { fill: var(--cinza-claro); opacity: .18; }
.emp-chao { fill: none; stroke: var(--quase-branco); stroke-width: 2; }
.emp-casa, .emp-comercio { fill: none; stroke: var(--quase-branco); stroke-width: 2; stroke-linejoin: round; }
.emp-toldo { fill: var(--cinza-claro); opacity: .6; }
.emp-predio { fill: var(--cinza-claro); opacity: .9; }
.emp-andares { fill: none; stroke: var(--superficie); stroke-width: 2; }
.emp-copa { fill: var(--cinza-claro); opacity: .5; }
.emp-arvore { fill: none; stroke: var(--cinza-claro); stroke-width: 2; }
.emp-marco { fill: var(--praca); }

.fator-painel { display: flex; flex-direction: column; justify-content: center; gap: var(--espaco-3); padding: var(--espaco-5); border: 1px solid var(--linha); min-height: 320px; }
.fator-painel .painel-numero { font-size: clamp(56px, 7vw, 88px); line-height: 1; font-weight: 600; color: var(--cinza-claro); letter-spacing: -0.02em; }
.fator-painel h3 { font-size: clamp(22px, 2.4vw, 28px); }
.fator-painel p { font-size: 18px; }
.fator-painel .filete { margin: var(--espaco-2) 0; }
.fator-painel.trocando .painel-conteudo { opacity: 0; transform: translateY(8px); }
.painel-conteudo { display: flex; flex-direction: column; gap: var(--espaco-3); transition: opacity .25s, transform .25s; }

/* Visuais do painel (fatores 3 e 5) */
.painel-visual:empty { display: none; }
.painel-visual { margin-top: var(--espaco-2); padding-top: var(--espaco-3); border-top: 1px solid var(--linha); }
.diagramas { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 16px 12px; }
.diagramas figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.diagramas svg { width: 100%; max-width: 88px; height: auto; aspect-ratio: 1; display: block; }
.diagramas figcaption { font-size: 15px; line-height: 1.3; color: var(--texto-suave); }
.diagramas-legenda { font-size: 15px; margin-top: 10px; color: var(--texto-suave); }
.dg-lote { fill: none; stroke: var(--cinza-claro); stroke-width: 1.2; }
.dg-via { fill: none; stroke: var(--cinza-claro); stroke-width: 1; stroke-dasharray: 2 2; opacity: .7; }
.dg-perimetro { fill: none; stroke: var(--quase-branco); stroke-width: 1.6; }
.dg-predio { fill: var(--cinza-claro); opacity: .9; }
.dg-acesso { fill: var(--acento); }
.governanca-mini { width: 100%; height: auto; display: block; }
.governanca-mini text { font: 500 16px var(--font-texto); fill: var(--cinza-claro); }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.painel-visual > * { animation: aparecer .5s cubic-bezier(.2, .7, .2, 1) both; }

@media (max-width: 900px) {
  /* Uma coluna: os botões, o painel logo abaixo deles e, por último, o desenho */
  .fatores-corpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "fatores" "painel" "diagrama"; }
  .fator-painel { min-height: 0; }
}
@media (max-width: 640px) {
  .fatores-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fator, .fator:nth-child(5) { grid-column: auto; }
  .fator:first-child { grid-column: 1 / -1; }
  .fator { min-height: 112px; padding: 16px; }
  .fator-numero { font-size: 16px; }
  .fator-painel { padding: var(--espaco-4); }
  .diagramas figcaption, .diagramas-legenda { font-size: 16px; }
}