/* ===== 7 · onde (escuro) · prefixo on- ===== */
#onde{
  --on-px:.62;                 /* posição horizontal do pino na faixa do mapa (fração) */
  --on-corte:120px;            /* topo do mapa recortado (esconde ficha/nota do prédio) */
  --on-mapa-h:clamp(440px, 40vw, 620px);
  --on-pino-y:calc(50% - var(--on-corte) / 2);
  --on-linha:rgba(201,171,120,.28);
  padding:calc(var(--secao-y) * .85) 0 calc(var(--secao-y) * .75);
  overflow:clip;
  isolation:isolate;
  background:
    radial-gradient(70% 60% at 85% 6% in oklab, color-mix(in oklab, var(--b-petroleo) 75%, transparent), transparent 70%),
    radial-gradient(60% 50% at 0% 100% in oklab, color-mix(in oklab, var(--b-bronze) 22%, transparent), transparent 70%),
    var(--b-noite);
}

/* ---- cabeçalho: endereço como momento tipográfico ---- */
#onde .on-cabeca{
  display:grid;grid-template-columns:repeat(12, minmax(0,1fr));column-gap:clamp(1rem, 2vw, 2rem);
  padding:0 var(--b-borda);align-items:end;
}
#onde .on-endereco{grid-column:1 / span 7}
#onde .on-rot{margin:0 0 1.6rem;display:flex;align-items:center;gap:.9rem}
#onde .on-rot::before{content:"";width:2.6rem;height:1px;background:var(--b-ouro);opacity:.7}
#onde .on-titulo{margin:0;letter-spacing:-.02em}
#onde .on-titulo span{display:block}
#onde .on-titulo .on-leve{font-size:var(--t-secao);font-weight:300;line-height:1.02}
#onde .on-num{font-size:clamp(5.4rem, 2rem + 12vw, 13.5rem);font-weight:700;line-height:.86;letter-spacing:-.045em;margin-top:.06em;font-variant-numeric:lining-nums}
#onde .on-leve{font-weight:300}
#onde .on-forte{font-weight:700}
#onde .on-sub{margin:1.5rem 0 0;font-size:var(--t-sub);font-weight:300;line-height:1.25}
#onde .on-sub > span{display:block}
#onde .on-nq{white-space:nowrap}
#onde .on-sub > span:first-child{font-weight:500}
#onde .on-ref{margin:1.6rem 0 0;padding-top:1.1rem;border-top:1px solid var(--on-linha);max-width:34rem;font-size:var(--t-corpo);color:var(--b-texto-2);line-height:1.55}
#onde .on-ref .wf-rot{display:block;margin-bottom:.35rem}

#onde .on-ficha{grid-column:9 / span 4;margin:0;display:grid;border-top:1px solid rgba(201,171,120,.4)}
#onde .on-ficha-item{padding:1.2rem 0 1.25rem;border-bottom:1px solid var(--on-linha)}
#onde .on-ficha dt{margin:0 0 .4rem}
#onde .on-ficha dd{margin:0;font-size:var(--t-sub);font-weight:500;line-height:1.25;letter-spacing:-.01em;color:var(--b-creme)}
#onde .on-ficha dd > span,#onde .on-ficha dd > b{display:block}
#onde .on-ficha .on-nota{margin-top:.35rem;font-size:var(--t-corpo);font-weight:400;letter-spacing:0;color:var(--b-texto-2)}
#onde .on-ficha a{white-space:nowrap;text-decoration:none;border-bottom:1px solid rgba(201,171,120,.45);padding-bottom:.1rem}
#onde .on-ficha a:hover{border-bottom-color:var(--b-creme)}

/* ---- faixa do mapa: o papel onde a pena escreve ---- */
#onde .on-mapa{position:relative;height:var(--on-mapa-h);margin-top:clamp(3rem, 4.5vw, 4.5rem)}
#onde .on-mapa-fundo{
  position:absolute;inset:0;
  background:
    linear-gradient(var(--grade-escura-forte) 1px, transparent 1px) 0 0/25px 25px,
    linear-gradient(90deg, var(--grade-escura-forte) 1px, transparent 1px) 0 0/25px 25px,
    linear-gradient(var(--grade-escura) 1px, transparent 1px) 0 0/5px 5px,
    linear-gradient(90deg, var(--grade-escura) 1px, transparent 1px) 0 0/5px 5px,
    var(--b-noite-2);
}
#onde .on-mapa-moldura{position:absolute;inset:0;overflow:hidden}
#onde .on-iframe{
  position:absolute;left:0;top:calc(-1 * var(--on-corte));
  width:calc(200% * var(--on-px));height:calc(100% + var(--on-corte));
  border:0;display:block;
  filter:invert(.9) hue-rotate(180deg) grayscale(1) brightness(.78) contrast(1.08);
}
/* tinge o mapa inteiro de verde-petróleo e põe o papel milimetrado por cima */
#onde .on-mapa-cor{position:absolute;inset:0;pointer-events:none;background:var(--b-agua-escuro);mix-blend-mode:color;opacity:.85}
#onde .on-mapa-tinta{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(var(--grade-escura) 1px, transparent 1px) 0 0/25px 25px,
    linear-gradient(90deg, var(--grade-escura) 1px, transparent 1px) 0 0/25px 25px,
    radial-gradient(clamp(380px, 46vw, 760px) 120% at calc(var(--on-px) * 100%) var(--on-pino-y) in oklab, transparent 0, color-mix(in oklab, var(--b-noite) 30%, transparent) 45%, color-mix(in oklab, var(--b-noite) 78%, transparent) 100%),
    linear-gradient(to bottom, var(--b-noite) 0, transparent 16%, transparent 84%, var(--b-noite) 100%),
    linear-gradient(to right, color-mix(in oklab, var(--b-noite) 72%, transparent), transparent 38%);
}
#onde .on-pino{position:absolute;left:calc(var(--on-px) * 100%);top:var(--on-pino-y);width:0;height:0}
/* luz morna que acende sob o coração quando a pena chega */
#onde .on-luz{position:absolute;left:calc(var(--on-px) * 100%);top:calc(var(--on-pino-y) - 2.2rem);width:clamp(260px, 30vw, 460px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side in oklab, color-mix(in oklab, #f0d6a2 30%, transparent), color-mix(in oklab, var(--b-ouro) 10%, transparent) 55%, transparent);mix-blend-mode:screen}
.js #onde .on-luz{opacity:0;scale:.7;transition:opacity 1.8s var(--curva), scale 2.2s var(--curva)}
.js #onde.on-chegou .on-luz{opacity:1;scale:1}
#onde .on-traco{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#onde .on-traco path{fill:none;stroke-linecap:round;stroke-linejoin:round}
#onde .on-traco-halo{stroke:var(--b-noite);stroke-width:8;opacity:.6}
#onde .on-traco-linha{stroke:#f2e3c4;stroke-width:1.9}
#onde .on-traco path.on-coracao-fundo{fill:color-mix(in oklab, var(--b-noite) 90%, transparent);stroke:none}
#onde .on-coracao-halo{stroke:#f0d6a2;stroke-width:10;opacity:.17}
#onde .on-coracao{stroke:#f0d6a2;stroke-width:2.8}
#onde .on-pena{fill:#fff6e2;opacity:0;filter:drop-shadow(0 0 6px #f0d6a2)}

/* balão de laudo ligado ao coração: aparece quando a pena chega */
#onde .on-balao{
  position:absolute;left:calc(var(--on-px) * 100% + 4.6rem);top:calc(var(--on-pino-y) - 5.6rem);
  width:max-content;max-width:20rem;padding:1rem 1.15rem 1.1rem;
  background:color-mix(in oklab, var(--b-noite) 90%, transparent);
  border:1px solid rgba(201,171,120,.42);border-radius:6px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.6);
}
#onde .on-balao::before{content:"";position:absolute;right:100%;top:2.1rem;width:2.4rem;height:1px;background:var(--b-ouro);opacity:.8}
#onde .on-balao .wf-rot{margin:0 0 .4rem}
#onde .on-balao-end{margin:0 0 .9rem;font-size:1.15rem;font-weight:500;line-height:1.3}
.js #onde .on-balao{opacity:0;transform:translateX(-14px);transition:opacity .9s var(--curva), transform 1.1s var(--curva)}
.js #onde.on-chegou .on-balao{opacity:1;transform:none}
#onde .on-chegar{
  display:inline-flex;align-items:center;gap:.55rem;padding:.7rem 1.15rem;border-radius:var(--b-raio);
  background:var(--b-creme);color:var(--b-noite);font-weight:600;font-size:1rem;text-decoration:none;
}
#onde .on-chegar:hover{background:#fff6e2}
#onde .on-chegar svg{width:18px;height:18px}
#onde .on-escala{position:absolute;left:var(--b-borda);bottom:1.5rem;margin:0;padding:.4rem .65rem;color:var(--b-texto-2);background:color-mix(in oklab, var(--b-noite) 88%, transparent);border:1px solid var(--on-linha);border-radius:4px}

/* ---- convite final ---- */
#onde .on-convite{margin:clamp(2.5rem, 4vw, 4rem) var(--b-borda) 0;padding-top:clamp(2.2rem, 3vw, 3rem);border-top:1px solid var(--on-linha);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:2rem 3rem}
#onde .on-convite-txt{margin:0;font-size:var(--t-secao);line-height:1.04;letter-spacing:-.02em}
#onde .on-convite-txt > span{display:block}
#onde .on-agenda{margin:0 0 .2rem;display:flex;align-items:center;gap:.6rem}
#onde .on-mini{width:1.35rem;height:auto;overflow:visible;color:var(--b-ouro)}
#onde .on-acoes{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
#onde .on-botao{display:inline-flex;align-items:center;gap:.65rem;padding:1.05rem 1.6rem;border-radius:var(--b-raio);background:var(--b-creme);color:var(--b-noite);font-weight:600;font-size:1.05rem;text-decoration:none;box-shadow:0 14px 34px -14px rgba(240,214,162,.45)}
#onde .on-botao:hover{background:#fff6e2}
#onde .on-botao svg{width:20px;height:20px;fill:currentColor}
#onde .on-tel{text-decoration:none;font-size:1.05rem;border-bottom:1px solid rgba(201,171,120,.5);padding-bottom:.2rem}
#onde .on-tel span{color:var(--b-texto-2)}

@media (max-width:1200px){
  #onde{--on-px:.56}
}
@media (max-width:900px){
  #onde{--on-px:.7;--on-corte:90px;--on-mapa-h:520px;padding-bottom:calc(var(--secao-y) * .6 + 90px)}
  #onde .on-cabeca{grid-template-columns:minmax(0,1fr);row-gap:2.6rem}
  #onde .on-endereco,#onde .on-ficha{grid-column:1 / -1}
  #onde .on-ficha{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:1.25rem}
  #onde .on-ficha-item:first-child{grid-column:1 / -1}
  #onde .on-balao{left:var(--b-borda);right:var(--b-borda);top:calc(var(--on-pino-y) + 2.4rem);max-width:none;width:auto}
  #onde .on-balao::before{right:auto;left:calc(var(--on-px) * 100vw - var(--b-borda));top:auto;bottom:100%;width:1px;height:1.9rem}
  .js #onde .on-balao{transform:translateY(-12px)}
  #onde .on-escala{display:none}
  #onde .on-pt{display:none}
  #onde .on-nq{display:block}
  #onde .on-ficha dd{font-size:1.2rem}
  #onde .on-luz{width:300px}
  #onde .on-convite{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  #onde .wf-rot{font-size:max(12px, var(--b-t-mono))}
}
@media (max-width:380px){
  #onde .on-ficha{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .js #onde .on-balao,.js #onde .on-luz{opacity:1;transform:none;scale:1;transition:none}
}