/* ==========================================================
   O SEU MODELO DE NEGÓCIO (#modelo): os sete fatores e a customização
   Versão 2: a foto dos prédios com verde vem antes, numa faixa inteira, sem nada por cima; o conteúdo
   fica num cartão claro, centralizado, com letras moderadas.
   ========================================================== */
.modelo { overflow: hidden; }

.modelo-cartao { position: relative; max-width: 1160px; margin: 0 auto; padding: clamp(36px, 4.4vw, 64px); text-align: center; border-radius: var(--raio);
  background: var(--superficie); box-shadow: 0 0 0 1px var(--linha); }
.modelo-cartao > .rotulo::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; vertical-align: .08em; background: var(--praca); }
.modelo-cartao h2 { margin: var(--espaco-3) auto 0; }
.modelo-texto { max-width: 54ch; margin: var(--espaco-3) auto 0; color: var(--texto-suave); }

.modelo-instrucao { margin-top: var(--espaco-3); font-size: 15px; color: var(--texto-suave); }
/* O título como o slide do sócio: "7 FATORES" grande entre colchetes vermelhos, e a frase embaixo */
.fatores-titulo { margin-top: var(--espaco-6); }
.fatores-titulo-n { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 28px); font: 400 clamp(46px, 6vw, 84px)/1 var(--font-titulo); letter-spacing: .02em; text-transform: uppercase; color: var(--texto); }
.colchete { flex: none; width: clamp(40px, 7vw, 120px); height: .62em; border-top: 3px solid var(--praca); }
.colchete-esq { border-left: 3px solid var(--praca); }
.colchete-dir { border-right: 3px solid var(--praca); }
.fatores-titulo-apoio { max-width: 48ch; text-wrap: balance; margin: 14px auto 0; font-size: 15px; font-weight: 500; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; color: var(--texto-suave); }

/* A linha dos sete: os círculos numerados num fio, com setas entre eles, e os nomes alternando em cima e embaixo */
.fatores-linha { --circulo: 64px; --faixa: 112px; position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: 1080px; margin: var(--espaco-4) auto 0; padding: 0; list-style: none; }
.fatores-linha::before { content: ""; position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: calc(var(--faixa) + var(--circulo) / 2 - 2px); height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--texto) 22%, var(--fundo)); }
.fatores-linha li { position: relative; }
.fatores-linha li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; right: -15px; top: calc(var(--faixa) + var(--circulo) / 2 - 8px); width: 30px; height: 16px; background: var(--acento);
  -webkit-mask: var(--seta-forma) center / contain no-repeat; mask: var(--seta-forma) center / contain no-repeat; pointer-events: none; }
.fator { position: relative; display: grid; grid-template-rows: var(--faixa) var(--circulo) var(--faixa); justify-items: center; width: 100%; padding: 0 4px; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.fator-circulo { grid-row: 2; display: grid; place-items: center; width: var(--circulo); height: var(--circulo); border-radius: 50%; font: 400 28px/1 var(--font-titulo); background: var(--superficie); box-shadow: 0 0 0 2px color-mix(in srgb, var(--texto) 30%, var(--fundo)); transition: background-color .25s, color .25s, box-shadow .25s; }
.fator-nome { position: relative; grid-row: 1; align-self: end; padding-bottom: 18px; font-size: 14px; font-weight: 500; line-height: 1.3; text-align: center; }
.fatores-linha li:nth-child(even) .fator-nome { grid-row: 3; align-self: start; padding: 18px 0 0; }
/* o fio vermelho que liga o nome ao círculo, como no slide */
.fator-nome::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 2px; height: 14px; background: var(--praca); transform: translateX(-50%); }
.fatores-linha li:nth-child(even) .fator-nome::after { top: 0; bottom: auto; }
.fator:hover .fator-circulo { box-shadow: 0 0 0 2px var(--texto); }
.fator[aria-pressed="true"] .fator-circulo { background: var(--texto); color: var(--fundo); box-shadow: 0 0 0 2px var(--texto); }
.fator[aria-pressed="true"] .fator-nome { font-weight: 600; }

html:not(.js) .modelo-instrucao { display: none; }
.fator-textos { max-width: 60ch; min-height: 150px; margin: var(--espaco-4) auto 0; }
.fator-texto h3 { font-size: 19px; line-height: 1.35; }
.fator-texto p { margin-top: 8px; font-size: var(--texto-apoio); line-height: 1.6; color: var(--texto-suave); }
.js .fator-texto.ativo { animation: entrar .45s ease both; }
html:not(.js) .fator-texto + .fator-texto { margin-top: var(--espaco-4); }

.modelo-passos { display: flex; align-items: center; justify-content: center; gap: var(--espaco-4); list-style: none; margin-top: var(--espaco-5); padding-top: var(--espaco-5); border-top: 1px solid var(--linha); }
.modelo-passos li:not(.modelo-passo-seta) { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 250px; font-size: var(--texto-apoio); line-height: 1.45; }
.modelo-passo-num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--texto); font: 400 17px/1 var(--font-titulo); }
.modelo-passo-seta { color: var(--acento); --seta-largura: 56px; }

@media (max-width: 760px) {
  .modelo-cartao { padding: 32px 20px 36px; }
  .fatores-titulo-n { gap: 10px; font-size: 34px; white-space: nowrap; }
  .colchete { width: 26px; }
  .fatores-titulo-apoio { font-size: 13px; }
  /* No celular, a linha vertical: o círculo à esquerda, o nome ao lado, o fio e as setas descendo */
  .fatores-linha { --circulo: 48px; grid-template-columns: minmax(0, 1fr); max-width: 420px; gap: 14px; text-align: left; }
  .fatores-linha::before { left: calc(var(--circulo) / 2 - 2px); right: auto; top: 24px; bottom: 24px; width: 4px; height: auto; }
  .fatores-linha li:not(:last-child)::after { right: auto; left: calc(var(--circulo) / 2 - 8px); top: auto; bottom: -15px; width: 16px; height: 16px; transform: rotate(90deg); }
  .fator { grid-template-rows: none; grid-template-columns: var(--circulo) minmax(0, 1fr); align-items: center; justify-items: start; gap: 14px; min-height: var(--circulo); padding: 0; }
  .fator-circulo { grid-row: 1; font-size: 22px; }
  .fator-nome, .fatores-linha li:nth-child(even) .fator-nome { grid-row: 1; grid-column: 2; align-self: center; padding: 0; text-align: left; font-size: 15px; }
  .fator-nome::after { display: none; }
  .fator-textos { min-height: 0; }
  .modelo-passos { flex-direction: column; gap: var(--espaco-3); }
  .modelo-passo-seta .seta { transform: rotate(90deg); }
}