/* ==========================================================
   A ROTA VISUAL
   Tudo o que muda com a linguagem visual escolhida pelo sócio fica aqui, e este arquivo é carregado
   por último em todas as páginas:
     1. os fundos das seções (quais são claras, brancas ou escuras);
     2. a abertura da página inicial;
     3. a aparência do bloco das fases (a estrutura está em css/secoes/fases.css);
     4. o estilo dos diagramas (setas, linhas, caixas).
   A rota de agora é a base sóbria do plano B: a paleta, a assinatura e as fontes da marca, sem
   decoração. Para aplicar a rota escolhida (Quadras ou Planta), troque o conteúdo deste arquivo;
   o HTML e as outras folhas não mudam.
   ========================================================== */

/* ---------- 1. Fundos das seções ----------
   As seções não levam classe de tema no HTML: o tema de cada uma é escolhido aqui.
   Escuras: as mesmas variáveis de .tema-escuro (css/tokens.css). Brancas: as de .tom-branco. */
:is(#contato, .rodape, #fatores, #instrumentos-rede) {
  --fundo: var(--tinta); --superficie: var(--tinta-escura); --texto: var(--quase-branco); --texto-suave: var(--cinza-claro); --texto-apagado: var(--cinza-claro);
  --linha: var(--linha-sobre-escuro); --borda-controle: var(--cinza-intermediario); --simbolo-modulo-escuro: var(--cinza-claro); --simbolo-modulo-claro: var(--cinza-medio);
  --acento: var(--cinza-claro); --botao-fundo: var(--quase-branco); --botao-texto: var(--tinta); --logo-filtro: invert(1);
}
:is(#por-que, #experiencia, #organizacao, #metodologia, #atuacao, #territorios) { --fundo: var(--branco); --superficie: var(--quase-branco); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(#contato, .rodape, #fatores, #instrumentos-rede) { --fundo: var(--tinta-escura); --superficie: var(--tinta); }
  :root:not([data-theme="light"]) :is(#por-que, #experiencia, #organizacao, #metodologia, #atuacao, #territorios) { --fundo: var(--tinta-clara); --superficie: var(--tinta); }
}
:root[data-theme="dark"] :is(#contato, .rodape, #fatores, #instrumentos-rede) { --fundo: var(--tinta-escura); --superficie: var(--tinta); }
:root[data-theme="dark"] :is(#por-que, #experiencia, #organizacao, #metodologia, #atuacao, #territorios) { --fundo: var(--tinta-clara); --superficie: var(--tinta); }
/* O rodapé, escuro como o contato, sem linha entre os dois */
.rodape { border-top: 1px solid var(--linha); }

/* ---------- 2. A abertura (página inicial) ----------
   Como no plano B: a foto ocupa a abertura inteira, sem véu nem traçado, e o texto fica num painel de
   vidro fosco no canto de baixo, à esquerda (a foto, desfocada, aparece atrás dele; só blur, sem saturate).
   No HTML, o texto vem antes da foto; aqui a foto vai para trás (position: absolute, presa à seção, não ao
   container) e o texto vira o painel, por cima dela (z-index).
   A abertura fica sempre clara, mesmo no tema escuro: o vidro é quase branco. */
.abertura { position: relative; overflow: hidden; background: var(--quase-branco);
  --fundo: var(--quase-branco); --texto: var(--tinta); --texto-suave: var(--tinta); --botao-fundo: var(--tinta); --botao-texto: var(--quase-branco); color: var(--texto); }
.abertura-foto { position: absolute; inset: 0; margin: 0; }
.abertura-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.abertura-grade { display: flex; align-items: flex-end; min-height: calc(100vh - var(--altura-cabecalho)); min-height: calc(100svh - var(--altura-cabecalho)); padding-top: var(--espaco-5); padding-bottom: clamp(28px, 6vh, 64px); }
.abertura-texto { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--espaco-4); align-items: flex-start; max-width: 560px; padding: clamp(24px, 2.4vw, 36px);
  background: color-mix(in srgb, var(--quase-branco) 72%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid color-mix(in srgb, var(--branco) 50%, transparent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .abertura-texto { background: var(--veu-cabecalho); } }
.abertura h1 { font-size: clamp(32px, 3.4vw, 48px); max-width: 14ch; text-wrap: balance; }
.abertura-lead { font-size: 19px; line-height: 1.5; max-width: 36ch; color: var(--tinta); font-weight: 400; }
.abertura-lead::before { content: ""; display: block; width: var(--filete-vermelho); height: 3px; background: var(--praca); margin-bottom: var(--espaco-3); }
@media (max-width: 900px) {
  .abertura-foto img { object-position: 22% 40%; }
  .abertura-grade { padding-bottom: 16px; }
  .abertura-texto { gap: var(--espaco-3); padding: 20px 20px 22px; max-width: none; }
  .abertura h1 { font-size: clamp(28px, 8vw, 36px); }
  .abertura-lead { font-size: 17px; }
  .abertura-texto .botao { align-self: stretch; }
}
/* Telas baixas (notebook de 640 a 720 px de altura): painel mais compacto, para não cobrir o centro da foto. */
@media (min-width: 901px) and (max-height: 720px) {
  .abertura-texto { gap: var(--espaco-3); padding: 22px 28px 24px; }
}

/* ---------- 3. O bloco das fases ----------
   Estilo neutro: a rota escolhida desenha este bloco de novo. */
.fase { border-top: 1px solid var(--linha); }
.fase:last-child { border-bottom: 1px solid var(--linha); }
.fase-abrir { color: var(--texto); }
.fase-num { font-size: var(--texto-legenda); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); }
.fase-nome { font-family: var(--font-titulo); font-weight: var(--peso-titulo); font-size: 22px; line-height: 1.25; }
.fase-texto { font-size: var(--texto-corpo); }
.fases.em-abas .fase { border: 0; }
.fases-abas { border-bottom: 1px solid var(--linha); }
.fase-aba { color: var(--texto-suave); border-top: 3px solid transparent; transition: color .2s, border-color .2s, background-color .2s; }
.fase-aba:hover { color: var(--texto); background: var(--superficie); }
.fase-aba[aria-selected="true"] { color: var(--texto); border-top-color: var(--praca); background: var(--superficie); }
.fase-aba .fase-num { color: inherit; }
.fases.em-abas .fase-texto { font-size: var(--texto-destaque); line-height: 1.5; }

/* ---------- 4. Os diagramas ----------
   As setas e as linhas usam --acento (grafite no claro, cinza claro no escuro). */