/* ==========================================================
   ROTA PLANTA: a praça vira desenho. Traço fino de planta, muito branco e uma rua que liga as peças.
   As cores e as letras vêm de tokens.css (o mesmo do site); aqui ficam só as regras da rota.

   Regras de traço (para não sumir no celular nem no projetor; ver README):
   - quadra: 1,5 px no site, 3 px na lâmina de 1920; lote: 1 px no site, 2 px na lâmina;
   - rua: duas bordas de 2 px (4 px na lâmina) e o eixo tracejado de 2 px (3 px na lâmina);
   - nenhuma linha abaixo de 1 px no site; as linhas que se usam (a rua, as paradas) com contraste de 3:1.
   - vermelho: a praça da assinatura e a parada escolhida, nada mais.
   ========================================================== */
:root {
  --fundo: var(--branco);
  --planta-quadra: #A3A3A9;
  --planta-lote: #D2D2D7;
  --rua-borda: #8E8E94;     /* 3,3:1 sobre o branco */
  --rua-eixo: #B4B4BA;
  --traco-rua: 2px;
  --rua-largura: 36px;      /* no celular; 52 px no computador */
  --parada: 22px;
  --parada-escolhida: 30px;
  --cabecalho: 64px;
  --logo: 24px;             /* altura do desenho da assinatura (sem a margem do SVG) */
}
@media (min-width: 900px) {
  :root { --rua-largura: 52px; --parada: 26px; --parada-escolhida: 36px; --cabecalho: 76px; --logo: 30px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--cabecalho); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: var(--peso-texto) var(--texto-corpo)/1.55 var(--font-texto); overflow-x: clip; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.container { width: min(100% - 2 * var(--margem), var(--largura-maxima)); margin-inline: auto; }
.pular { position: absolute; left: -9999px; top: 8px; background: var(--tinta); color: var(--quase-branco); padding: 12px 16px; z-index: 30; }
.pular:focus { left: 8px; }

/* Botão e link com seta (os do site) */
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: var(--altura-controle); padding: 0 26px; font: 600 var(--texto-apoio)/1.2 var(--font-texto); text-decoration: none; border: 1px solid var(--botao-fundo); background: var(--botao-fundo); color: var(--botao-texto); transition: background-color .2s, color .2s; }
.botao:hover { background: transparent; color: var(--texto); }
.link-seta { display: inline-block; padding: 13px 0; font: 600 var(--texto-apoio)/1.4 var(--font-texto); text-decoration: none; }
.link-seta::after { content: ""; display: inline-block; vertical-align: -.25em; margin-left: 12px; width: 36px; aspect-ratio: 2 / 1; background: currentColor; -webkit-mask: var(--seta-forma) center / contain no-repeat; mask: var(--seta-forma) center / contain no-repeat; transition: transform .2s; }
.link-seta:hover::after { transform: translateX(4px); }

/* ---------- Cabeçalho ---------- */
.cabecalho { position: sticky; top: 0; z-index: 20; background: var(--fundo); border-bottom: 1px solid var(--linha); }
.cabecalho-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--cabecalho); }
/* O SVG do kit tem 15 unidades de margem em volta de um desenho de 100 de altura: a margem negativa desconta. */
.logo { display: block; flex: none; }
.logo img { height: calc(var(--logo) * 1.3); width: auto; margin: calc(var(--logo) * -.15); }
.menu-botao { min-height: var(--altura-controle); padding: 0 18px; font: 600 var(--texto-apoio)/1 var(--font-texto); color: var(--texto); background: var(--fundo); border: 1px solid var(--borda-controle); cursor: pointer; }
.menu { display: none; }
.menu.aberto { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%; padding: 8px var(--margem) 24px; background: var(--fundo); border-bottom: 1px solid var(--linha); }
.menu a:not(.botao) { display: flex; align-items: center; min-height: 52px; font: 500 var(--texto-apoio)/1.2 var(--font-texto); text-decoration: none; border-bottom: 1px solid var(--linha); }
.menu .botao { margin-top: 16px; }
@media (min-width: 900px) {
  .menu-botao { display: none; }
  .menu, .menu.aberto { display: flex; flex-direction: row; align-items: center; gap: 28px; position: static; padding: 0; border: 0; }
  .menu a:not(.botao) { min-height: 48px; border: 0; }
  .menu .botao { margin: 0; }
}

/* ---------- Abertura ---------- */
.abertura-texto { padding-top: 32px; }
.abertura h1 { font: var(--peso-titulo) var(--texto-titulo-1)/1.06 var(--font-titulo); letter-spacing: -.015em; }
.abertura-texto p { margin: 16px 0 24px; max-width: 34ch; color: var(--texto); }
.abertura-foto { margin: 32px calc(-1 * var(--margem)) 0; }
.abertura-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 50%; }
/* A faixa de planta: uma fileira de quadras de cada lado de uma rua, repetida na largura. */
.faixa-planta { height: 176px; background: url("../marca/faixa-planta.svg") repeat-x left center / auto 176px; }
@media (min-width: 900px) {
  .abertura-grade { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; min-height: clamp(480px, calc(100svh - var(--cabecalho) - 176px), 760px); }
  .abertura-texto { padding: 48px 0; }
  .abertura-texto p { font-size: var(--texto-destaque); }
  .abertura-foto { margin: 0; height: 100%; }
  .abertura-foto img { height: 100%; aspect-ratio: auto; }
}

/* ---------- Em que fase está o seu empreendimento? ---------- */
.fases-secao { padding: 64px 0 72px; }
.fases-secao h2 { font: var(--peso-titulo) var(--texto-titulo-2)/1.12 var(--font-titulo); letter-spacing: -.01em; max-width: 20ch; }
.fases-apoio { margin-top: 16px; max-width: 64ch; color: var(--texto-suave); }
.fases { position: relative; margin: 40px 0 24px; --eixo: 24px; }

/* A rua: no celular, vertical, à esquerda, feita de trechos (um por fase e por painel, para seguir a altura de cada um);
   no computador, uma rua horizontal só, sobre as paradas. */
.rua { display: none; }
.fases::before, .fase-cabeca::before, .fase-painel::before, .continua::before {
  content: ""; position: absolute; left: calc(var(--eixo) - var(--rua-largura) / 2); width: var(--rua-largura); top: 0; bottom: 0;
  border-inline: var(--traco-rua) solid var(--rua-borda); background: var(--fundo);
  background-image: repeating-linear-gradient(180deg, var(--rua-eixo) 0 12px, transparent 12px 22px); background-size: var(--traco-rua) 100%; background-position: center; background-repeat: no-repeat; }
.fases::before { top: -40px; bottom: auto; height: 40px; }   /* a rua chega de cima */
.continua::before { bottom: auto; height: 32px; }            /* e entra na rotatória */

.fase-cabeca { position: relative; font: inherit; }
.fase-botao { position: relative; display: grid; grid-template-columns: calc(var(--eixo) * 2) 1fr; column-gap: 16px; align-items: center; width: 100%; min-height: 76px; padding: 12px 0; text-align: left; font: inherit; color: var(--texto); background: none; border: 0; cursor: pointer; }
.parada { grid-row: 1 / span 2; justify-self: center; width: var(--parada); height: var(--parada); background: var(--fundo); border: 3px solid var(--tinta); position: relative; z-index: 1; transition: width .2s, height .2s, background-color .2s; }
.fase-numero { font: 600 var(--texto-apoio)/1.2 var(--font-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.fase-nome { font: var(--peso-titulo) var(--texto-destaque)/1.2 var(--font-titulo); }
.fase-botao:hover .fase-nome { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.fase-botao[aria-expanded="true"] .parada { width: var(--parada-escolhida); height: var(--parada-escolhida); background: var(--praca); border-color: var(--praca); }
.fase-botao[aria-expanded="true"] .fase-numero { color: var(--texto); }

.fase-painel { position: relative; padding: 4px 0 28px calc(var(--eixo) * 2 + 16px); }
.fase-painel > p { max-width: 60ch; }
.fase-painel h4 { margin: 22px 0 10px; font: 600 var(--texto-apoio)/1.2 var(--font-texto); letter-spacing: .08em; text-transform: uppercase; }
.fase-painel ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.fase-painel li { position: relative; padding-left: 22px; line-height: 1.45; }
.fase-painel li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; background: var(--acento); }
.fase-painel .link-seta { margin-top: 16px; }

/* A rotatória: depois da entrega, a rua não acaba; gira. O contínuo (a governança) é um anel, a sequência (as fases) são paradas. */
.continua { position: relative; display: grid; grid-template-columns: calc(var(--eixo) * 2) 1fr; column-gap: 16px; align-items: start; min-height: 64px; margin-top: 4px; text-decoration: none; color: var(--texto); }
.rotatoria { width: 64px; height: 64px; justify-self: center; position: relative; z-index: 1; overflow: visible; }
.rotatoria-borda { fill: var(--fundo); stroke: var(--rua-borda); stroke-width: 3.75; }
.rotatoria circle + circle.rotatoria-borda { fill: none; }
.rotatoria-eixo { fill: none; stroke: var(--rua-eixo); stroke-width: 3.75; stroke-dasharray: 14 10; }
.rotatoria-seta { fill: var(--tinta); }
.continua-texto { display: grid; gap: 2px; padding-top: 6px; }
.continua-texto strong { font: var(--peso-titulo) var(--texto-destaque)/1.2 var(--font-titulo); }
.continua-texto span { font-size: var(--texto-apoio); color: var(--texto-suave); }
.continua:hover strong { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

@media (min-width: 900px) {
  .fases-secao { padding: 96px 0; }
  .fases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 260px; column-gap: 32px; margin-top: 56px; --linha-rua: 60px; }
  .fases::before, .fase-cabeca::before, .fase-painel::before, .continua::before { content: none; }
  /* A rua vem da borda da tela e entra na rotatória */
  .rua { display: block; position: absolute; left: calc(-1 * max(var(--margem), (100vw - var(--largura-maxima)) / 2)); right: 200px; background-color: var(--fundo); background-repeat: no-repeat; background-position: center; width: auto; top: calc(var(--linha-rua) - var(--rua-largura) / 2); bottom: auto; height: var(--rua-largura);
    border-inline: 0; border-block: var(--traco-rua) solid var(--rua-borda);
    background-image: repeating-linear-gradient(90deg, var(--rua-eixo) 0 14px, transparent 14px 26px); background-size: 100% var(--traco-rua); }
  .fase-cabeca { grid-row: 1; }
  .fase-botao { grid-template-columns: 1fr; grid-template-rows: calc(var(--linha-rua) * 2) auto auto; align-items: start; padding: 0 0 8px; row-gap: 6px; }
  .parada { grid-row: 1; justify-self: start; align-self: center; margin-left: calc(24px + (var(--parada-escolhida) - var(--parada)) / 2); }
  .fase-botao[aria-expanded="true"] .parada { margin-left: 24px; }
  /* O mastro: da parada escolhida até o painel */
  .fase-botao[aria-expanded="true"]::after { content: ""; position: absolute; left: calc(24px + var(--parada-escolhida) / 2 - 1px); top: calc(var(--linha-rua) + var(--parada-escolhida) / 2); bottom: -28px; width: 2px; background: var(--tinta); }
  /* O texto fica à direita do mastro, como o número e o texto de cada etapa na lâmina */
  .fase-numero, .fase-nome { padding-left: calc(24px + var(--parada-escolhida) + 14px); padding-right: 8px; }
  .fase-painel { grid-row: 2; grid-column: 1 / 4; margin-top: 28px; padding: 36px 0 8px; border-top: 2px solid var(--tinta);
    display: grid; grid-template-columns: 5fr 6fr; column-gap: 56px; align-content: start; }
  .fase-painel > p { grid-column: 1; grid-row: 1 / span 3; font-size: var(--texto-destaque); line-height: 1.45; }
  .fase-painel > h4, .fase-painel > ul, .fase-painel > .link-seta { grid-column: 2; }
  .fase-painel h4 { margin-top: 4px; }
  .continua { grid-row: 1; grid-column: 4; grid-template-columns: 1fr; align-items: start; align-content: start; row-gap: 12px; margin: 0; min-height: 0; }
  .rotatoria { width: 120px; height: 120px; justify-self: start; }
  .rotatoria-borda, .rotatoria-eixo { stroke-width: 2.4; }
}