/* ============================================================
   Parque Una SJC — o que é só desta página.
   Fundos, tipografia, botões, formulário e responsivo vêm de
   assets/sistema.css. Aqui ficam apenas o herói com a implantação
   e os dois blocos próprios: trajetória e produtos.
   ============================================================ */

/* O acento segue o dourado da iCasa — que por sorte é primo do
   amarelo dos ipês do próprio empreendimento. Se um dia uma LP
   pedir outra cor, é só redefinir estas duas linhas. */
:root {
  --ic-acento:        var(--ic-ouro);
  --ic-acento-escuro: var(--ic-ouro-escuro);
}

/* ---------- Herói ---------- */
.heroi {
  background: var(--ic-marinho);
  color: var(--ic-sobre-escuro);
  padding-top: var(--e16);
  overflow: hidden;
}
.heroi-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: var(--e16);
  align-items: end;
}
.heroi-texto {
  padding-bottom: var(--e28);
  display: flex; flex-direction: column; gap: var(--e6);
}
.heroi .sobretitulo { color: var(--ic-acento); }
.heroi .conduz { color: var(--ic-sobre-escuro-suave); }
.heroi h1 { color: var(--ic-branco); }
.heroi h1 .destaque { color: var(--ic-acento); }
.heroi-acoes { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* ---------- A implantação: elemento-assinatura ---------- */
.prancheta {
  position: relative;
  /* A implantação vem recortada, sem fundo. Papel branco e sombra
     desenhariam uma moldura em volta de uma forma que não é
     retangular. */
  transform: translateY(var(--e12));
}
.prancheta-selo {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  font-family: var(--ic-fonte-titulo);
  font-size: .64rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ic-acento);
  padding-bottom: var(--e2);
}
.implantacao { position: relative; }
.implantacao img { width: 100%; height: auto; }

.pino {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: var(--e2);
  font-family: var(--ic-fonte-titulo);
  font-size: .64rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ic-marinho);
  white-space: nowrap;
  pointer-events: none;
  /* O fundo da implantação muda muito de ponto a ponto (bosque
     escuro, gramado claro, asfalto). A chapa garante leitura
     em qualquer lugar sem ajuste caso a caso. */
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(19,24,43,.16);
  border-radius: var(--ic-raio);
  padding: .22rem .45rem;
  box-shadow: 0 1px 6px rgba(19,24,43,.18);
}
.pino::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ic-acento); flex: none;
}
.pino-fim { flex-direction: row-reverse; }

/* ---------- Trajetória da Idealiza ---------- */
.trajeto { display: flex; flex-direction: column; }
.trajeto-linha {
  display: grid;
  grid-template-columns: 12rem 1fr auto;
  gap: var(--e4);
  align-items: baseline;
  padding-block: var(--e4);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.trajeto-linha:last-child { border-bottom: none; }
.trajeto-lugar { font-family: var(--ic-fonte-titulo); font-weight: 600; font-size: 1rem; }
.trajeto-nota { font-size: .9rem; color: var(--ic-sobre-escuro-suave); }
.trajeto-area {
  font-family: var(--ic-fonte-titulo);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ic-acento);
}
.trajeto-linha.aqui .trajeto-lugar { color: var(--ic-acento); }

/* ---------- Cartões de produto ---------- */
.produtos { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--e4); }
.produto {
  display: flex; flex-direction: column; gap: var(--e2);
  padding: var(--e6);
  background: var(--ic-branco);
  border: 1px solid var(--ic-linha);
  border-radius: var(--ic-raio);
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.produto:hover { border-color: var(--ic-acento); transform: translateY(-2px); }
.produto .estado {
  font-family: var(--ic-fonte-titulo);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ic-texto-3);
}
.produto.vende .estado { color: var(--ic-acento-escuro); }
.produto h3 { color: var(--ic-marinho); }
.produto p { font-size: .88rem; color: var(--ic-texto-2); }

/* ============================================================
   Planta de disponibilidade (#produtos)
   A seção é escura: a planta assenta sobre a foto aérea do terreno,
   rebaixada e puxada para o marinho da marca.
   Estados vêm de estoque.js; a geometria e o encaixe, de mapa-dados.js.
   ============================================================ */
.mapa { display: grid; gap: var(--e4); margin-bottom: var(--e12); }
.mapa-planta { width: 100%; }
.planta { display: block; width: 100%; height: auto; border-radius: var(--ic-raio); }
.mapa-dica { display: none; font-size: .72rem; color: var(--ic-sobre-escuro-suave); }
.planta path { vector-effect: non-scaling-stroke; }

/* --- a foto ao fundo --- */
.c-foto image      { opacity: .40; }
.c-foto .fundo-base { fill: var(--ic-marinho); }
/* o véu por cima tira o resto do contraste da foto, para o desenho mandar */
.c-foto .fundo-veu  { fill: var(--ic-marinho); opacity: .42; }

/* --- contexto do projeto --- */
.c-viario path                 { fill: rgba(226,232,244,.13); }
.c-contexto path               { fill: rgba(226,232,244,.10); }
.c-contexto .uso-area_verde    { fill: rgba(150,205,120,.24); }
.c-contexto .uso-sistema_lazer { fill: rgba(170,215,135,.20); }
.c-contexto .uso-institucional { fill: rgba(150,185,220,.18); }
.c-quadras path   { fill: none; stroke: rgba(12,17,32,.55); stroke-width: 1.1px; }
.c-perimetro path { fill: none; stroke: var(--ic-acento-claro); stroke-width: 1.6px;
                    stroke-dasharray: 8 6; opacity: .9; }
/* A hachura do vendido é textura, não enfeite: com vermelho e verde na
   mesma planta, ela é o que separa os dois estados para quem não distingue
   as duas cores. */
.hachura-fundo    { fill: rgba(150,44,38,.58); }
.hachura-traco    { stroke: rgba(255,176,168,.5); stroke-width: 2.2px; }

/* --- os lotes --- */
.c-lotes .lote {
  stroke: rgba(14,19,36,.5); stroke-width: .6px; cursor: pointer;
  transition: fill .14s ease;
}
.c-lotes .lote:focus-visible { outline: none; stroke: var(--ic-branco); stroke-width: 2px; }
.c-lotes .lote.ativa { stroke: var(--ic-branco); stroke-width: 2px; }

.c-lotes .estado-disponivel { fill: #35C46B; }
.c-lotes .estado-ultimas    { fill: #D98A3A; }
.c-lotes .estado-breve      { fill: rgba(214,220,230,.34); }
.c-lotes .estado-vendido    { fill: url(#hachura-vendido); }

.c-lotes .estado-disponivel.ativa { fill: #6FE996; }
.c-lotes .estado-ultimas.ativa    { fill: #EFA65A; }
.c-lotes .estado-breve.ativa      { fill: rgba(226,231,240,.52); }
.c-lotes .estado-vendido.ativa    { fill: rgba(196,70,62,.62); }

/* --- rótulos --- */
.c-rotulos text, .c-entorno text { pointer-events: none; }
.c-rotulos .letra-quadra {
  font-family: var(--ic-fonte-titulo); font-size: 17px; font-weight: 700;
  fill: rgba(255,255,255,.72); text-anchor: middle; dominant-baseline: central;
  paint-order: stroke; stroke: rgba(10,14,26,.55); stroke-width: 3px;
}
.c-rotulos .rotulo {
  font-family: var(--ic-fonte-titulo); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  fill: #BFE0A8; text-anchor: middle;
  paint-order: stroke; stroke: rgba(10,14,26,.7); stroke-width: 3px;
}
.c-rotulos .norte-seta  { fill: var(--ic-acento-claro); fill-opacity: .85; }
.c-rotulos .norte-letra {
  font-family: var(--ic-fonte-titulo); font-size: 15px; font-weight: 700;
  fill: var(--ic-acento-claro); text-anchor: middle; dominant-baseline: central;
}

/* --- o entorno: o que existe hoje em volta do terreno --- */
.c-entorno .marco {
  font-family: var(--ic-fonte-texto); font-weight: 600;
  fill: rgba(255,255,255,.9); text-anchor: middle;
  paint-order: stroke; stroke: rgba(8,11,22,.85); stroke-width: 3.5px;
}
.c-entorno .marco-via {
  font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
  fill: rgba(214,226,248,.86); font-weight: 500;
}
.c-entorno .marco-marco {
  font-size: 15px; letter-spacing: .04em; fill: rgba(255,255,255,.92);
}

/* --- legenda --- */
.mapa-legenda {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: var(--e3) var(--e6); align-items: center;
}
.mapa-legenda li { display: flex; align-items: center; gap: var(--e2); font-size: .82rem; }
.mapa-legenda .amostra {
  width: .85rem; height: .85rem; flex: none; border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}
.mapa-legenda .estado-disponivel .amostra { background: #35C46B; }
.mapa-legenda .estado-ultimas    .amostra { background: #D98A3A; }
.mapa-legenda .estado-breve      .amostra { background: rgba(214,220,230,.5); }
.mapa-legenda .estado-vendido    .amostra {
  background: rgba(150,44,38,.75) repeating-linear-gradient(45deg, rgba(255,176,168,.55) 0 1.5px, transparent 1.5px 4px);
}
.mapa-legenda .rot { color: var(--ic-sobre-escuro); }
.mapa-legenda .qtd { color: var(--ic-sobre-escuro-suave); font-variant-numeric: tabular-nums; }

.mapa-fonte { font-size: .68rem; line-height: 1.5; color: var(--ic-sobre-escuro-suave); opacity: .8; }

/* --- o card, que segue o cursor --- */
.mapa-card {
  position: fixed; z-index: 40; top: 0; left: 0;
  width: min(19rem, calc(100vw - 1rem));
  background: var(--ic-branco);
  border: 1px solid var(--ic-linha);
  border-top: 2px solid var(--ic-acento);
  border-radius: var(--ic-raio);
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
  padding: var(--e3) var(--e4) var(--e4);
  pointer-events: none;          /* o clique pertence ao lote, não ao card */
  opacity: 0; visibility: hidden;
  transition: opacity .12s ease;
}
.mapa-card.on { opacity: 1; visibility: visible; }

.mapa-card-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); }
.mapa-selo {
  font-family: var(--ic-fonte-titulo); font-size: .6rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .18rem .45rem; border-radius: 1px; color: var(--ic-branco);
}
.mapa-selo.estado-disponivel { background: #2E7D46; }
.mapa-selo.estado-ultimas    { background: #8E4E27; }
.mapa-selo.estado-breve      { background: var(--ic-texto-3); }
.mapa-selo.estado-vendido    { background: #9E3B34; }
.mapa-codigo {
  font-size: .68rem; letter-spacing: .06em; color: var(--ic-texto-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mapa-card h3 { margin-top: var(--e2); color: var(--ic-marinho); font-size: 1.05rem; }
.mapa-tipo { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
             color: var(--ic-acento-escuro); font-weight: 600; }
.mapa-texto { font-size: .82rem; color: var(--ic-texto-2); margin-top: var(--e2); }
.mapa-dados { margin-top: var(--e3); border-top: 1px solid var(--ic-linha); padding-top: var(--e3);
              display: grid; gap: var(--e1); }
.mapa-dados div { display: flex; flex-wrap: wrap; justify-content: space-between;
                  gap: 0 var(--e4); align-items: baseline; }
.mapa-dados dt { font-size: .74rem; color: var(--ic-texto-3); flex: none; }
.mapa-dados dd { font-size: .78rem; font-weight: 600; text-align: right;
                 flex: 1 1 7rem; min-width: 0; }
.mapa-cta { display: inline-block; margin-top: var(--e3); font-size: .78rem;
            font-weight: 600; color: var(--ic-acento-escuro); }
.mapa-cta-off { color: var(--ic-texto-3); font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
  .c-lotes .lote, .mapa-card { transition: none; }
}

/* ============================================================
   Fechamento sobre a foto do parque
   ============================================================ */
.faixa-imagem-texto h2 .destaque { color: var(--ic-acento-claro); }
.faixa-imagem-texto .subtitulo {
  font-family: var(--ic-fonte-titulo);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 600; line-height: 1.35;
  color: var(--ic-branco); text-wrap: balance;
}

/* ---------- Responsivo próprio ---------- */
@media (max-width: 60rem) {
  .mapa-legenda { gap: var(--e2) var(--e4); font-size: .78rem; }
  /* Na largura do telefone a planta inteira daria lotes de 4 px, impossíveis
     de acertar com o dedo. Ela passa a ser mais larga que a tela e rola na
     horizontal, que é o mesmo recurso que a página já usa em tabela larga. */
  .mapa-planta { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mapa-planta::-webkit-scrollbar { height: 3px; }
  .mapa-planta::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 2px; }
  .planta { width: 1000px; max-width: none; }
  .mapa-dica { display: block; }

  .heroi-grade { grid-template-columns: 1fr; gap: var(--e8); }
  .heroi-texto { padding-bottom: var(--e8); }
  .prancheta { transform: none; margin-bottom: var(--e12); }
  .prancheta-selo { position: static; transform: none; display: block; padding-bottom: var(--e3); }
}

@media (max-width: 40rem) {
  .pino { font-size: .55rem; letter-spacing: .06em; }
  .trajeto-linha { grid-template-columns: 1fr auto; }
  .trajeto-nota { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .produto { transition: none; }
}