/* KM 7 · Chegada — endereço (prefixo en-)
   A seção é uma cena só: o mapa ilustrativo deitado em perspectiva (visto de Vila Velha, olhando para o norte),
   a pista do hero cruzando a Terceira Ponte e a torre do endereço de pé no KM 0.
   A cena tem 1600 x 900 unidades; --en-k é o tamanho de uma unidade em px. */
.en { --en-k: 1; --en-desvio: 260px; --en-centro: 800; padding-bottom: 0; }
.en-miolo { position: relative; z-index: 2; min-height: calc(900px - var(--respiro) + 60px); padding-bottom: clamp(56px, 6vw, 88px); pointer-events: none; }
.en-miolo > * { pointer-events: auto; }
.en-topo { width: min(100%, 520px); }
.en-ficha { width: min(100%, 452px); }
.en-titulo { font-size: clamp(2.3rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.018em; }

/* ---------- cena ---------- */
.en-cena { position: absolute; inset: auto 0 0 0; height: calc(900px * var(--en-k)); z-index: 0; }
.en-cena__quadro { position: absolute; top: 0; left: calc(50% - var(--en-centro) * var(--en-k) * 1px + var(--en-desvio)); width: calc(1600px * var(--en-k)); height: calc(900px * var(--en-k)); }
.en-cena__chao { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 22%, #000 35%, #000 93%, transparent 100%); mask-image: linear-gradient(to right, transparent 22%, #000 35%, #000 93%, transparent 100%); }
.en-grat { fill: none; stroke: rgb(140 165 240 / .1); stroke-width: 1; }
.en-serra { fill: #141c40; }
.en-terra { fill: url(#en-g-terra); stroke: rgb(243 238 230 / .34); stroke-width: 1; stroke-linejoin: round; }
.en-terra--longe { fill: #141c44; stroke: rgb(243 238 230 / .16); }
.en-terra--perto { fill: #10183a; stroke: rgb(243 238 230 / .42); }
.en-luz { fill: none; stroke-linecap: round; stroke: #f0c286; opacity: .9; }
.en-luz--f { stroke: #cfd8ff; }
.en-luz--0 { stroke-width: 1.5; opacity: .75; } .en-luz--1 { stroke-width: 2.1; } .en-luz--2 { stroke-width: 3; } .en-luz--3 { stroke-width: 4.2; }
.en-reflexo { fill: none; stroke: rgb(240 194 134 / .09); stroke-width: 2.2; stroke-linecap: round; }
.en-pista { fill: #16181d; stroke: rgb(243 238 230 / .3); stroke-width: 1; }
.en-pista--ponte { stroke: rgb(243 238 230 / .6); }
.en-pilar { fill: none; stroke: rgb(243 238 230 / .45); stroke-width: 1.6; }
.en-rota path { fill: var(--d-faixa); }
.en-rota-masc { stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 3.4s cubic-bezier(.4, .1, .3, 1) .2s; }
.js .en:not(.en-chegou) .en-rota-masc { stroke-dashoffset: 100; }

/* tudo o que fica por cima do desenho usa as coordenadas da cena */
.en-torre, .en-fio, .en-ponto, .en-km0, .en-nome { position: absolute; left: calc(var(--x) * var(--en-k) * 1px); top: calc(var(--y) * var(--en-k) * 1px); margin: 0; }
.en-torre { --x: 540; --y: 150; width: calc(520px * var(--en-k)); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 88%, transparent 100%), linear-gradient(to bottom, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 88%, transparent 100%), linear-gradient(to bottom, #000 84%, transparent 100%); mask-composite: intersect; }
.en-torre img { display: block; width: 100%; filter: saturate(.62) brightness(.6) contrast(1.16); }
/* a noite desce pela fachada: véu índigo no alto, luz quente da rua no pé (recortado pela própria foto) */
.en-torre::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(in oklab to bottom, rgb(12 18 38 / .5) 0%, rgb(22 32 82 / .3) 45%, rgb(43 64 137 / .12) 70%, rgb(232 184 119 / .26) 100%); -webkit-mask: url("../img/en-torre.webp") center / 100% 100% no-repeat; mask: url("../img/en-torre.webp") center / 100% 100% no-repeat; }
.en-torre__poste { position: absolute; left: 92.8%; top: 54.2%; width: 0; height: 0; }
.en-torre__poste::before { content: ""; position: absolute; left: -50px; top: -50px; width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(in oklab circle, rgb(255 236 200 / .95) 0 4%, rgb(232 184 119 / .5) 10%, rgb(232 184 119 / .12) 38%, transparent 68%); }

.en-ponto { --x: 854; --y: 543; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--d-faixa); box-shadow: 0 0 0 2.5px #10131f, 0 0 18px 4px rgb(224 168 60 / .55); }
.en-ponto::before, .en-ponto::after { content: ""; position: absolute; inset: -18px; border-radius: 50%; border: 1.5px solid var(--d-faixa); opacity: 0; }
.en-chegou .en-ponto::before { animation: en-pulso 4.4s ease-out 3.6s infinite; }
.en-chegou .en-ponto::after { animation: en-pulso 4.4s ease-out 5.8s infinite; }
@keyframes en-pulso { 0% { transform: scale(.3); opacity: .9; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.en-fio { --x: 854; --y: 236; width: 1.5px; margin-left: -.75px; height: calc(307px * var(--en-k)); background: linear-gradient(to bottom, #f3eee6, rgb(243 238 230 / .5)); }
.en-km0 { --x: 842; --y: 190; white-space: nowrap; }
.js .en-km0, .js .en-fio, .js .en-ponto { transition: opacity .9s ease 3.1s; }
.js .en:not(.en-chegou) :is(.en-km0, .en-fio, .en-ponto) { opacity: 0; }

.en-nome { font-size: .75rem; font-weight: 600; letter-spacing: .14em; line-height: 1.35; text-transform: uppercase; color: rgb(243 238 230 / .82); white-space: nowrap; text-shadow: 0 0 3px #0b1024, 0 0 8px #0b1024, 0 0 14px #0b1024; }
.en-nome--ilha { --x: 590; --y: 556; }
.en-nome--baia { --x: 560; --y: 648; }
.en-nome--ponte { --x: 1046; --y: 628; }
.en-nome--vv { --x: 610; --y: 786; }
.en-nome--mar { --x: 1130; --y: 462; }
.en-nota { position: absolute; left: calc(50% + 40px); bottom: 22px; width: min(30em, 30vw); font-size: .75rem; line-height: 1.45; letter-spacing: .02em; color: rgb(243 238 230 / .78); text-shadow: 0 0 3px #0b1024, 0 0 8px #0b1024, 0 0 14px #0b1024; }

/* ---------- ficha ---------- */
.en-apoio { margin-top: clamp(16px, 2vw, 24px); }
.en-ficha { margin-top: clamp(30px, 3.4vw, 46px); }
.en-end { margin-top: 8px; font-style: normal; font-weight: 800; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.12; letter-spacing: -.008em; text-wrap: balance; }
.en-end2 { margin-top: 8px; font-size: var(--d-corpo); color: var(--tinta-2); }
.en-end2 .dado { margin-left: .6em; font-size: .9em; letter-spacing: .04em; white-space: nowrap; }
.en-dados { margin-top: 22px; border-top: 1px solid var(--linha); }
.en-dado { display: grid; grid-template-columns: 8.2em minmax(0, 1fr); column-gap: 18px; padding: 14px 0 12px; border-bottom: 1px solid var(--linha); }
.en-dado dt { padding-top: .28em; }
.en-dado dd { font-size: var(--d-corpo); line-height: 1.4; }
.en-obs { display: block; margin-top: 2px; font-size: var(--t-mini); color: var(--tinta-2); white-space: nowrap; }
.en-horario { display: block; }
.en-agora { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 2px; padding: 5px 10px 3px; border: 1.5px solid rgb(243 238 230 / .4); border-radius: 6px; font-size: var(--t-mini); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; vertical-align: middle; }
.en-agora[hidden] { display: none; }
.en-agora i { width: 9px; height: 9px; border-radius: 50%; background: rgb(243 238 230 / .45); }
.en-agora--aberto { border-color: var(--d-faixa); }
.en-agora--aberto i { background: var(--d-faixa); box-shadow: 0 0 0 4px rgb(224 168 60 / .22); }
.en-link { display: inline-flex; align-items: center; min-height: 48px; margin-block: -12px; text-underline-offset: .3em; text-decoration-color: rgb(243 238 230 / .4); }
.en-link:hover { text-decoration-color: var(--d-faixa); }
.en-link.dado { font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.en-link--email { display: inline-block; min-height: 0; padding-block: 12px; overflow-wrap: anywhere; }
.en-acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(24px, 3vw, 34px); }
.en-rota-botao { border: 1.5px solid rgb(243 238 230 / .55); background: rgb(10 13 28 / .5); color: #f3eee6; }
.en-rota-botao:hover, .en-rota-botao:focus-visible { border-color: var(--d-faixa); transform: translateY(-2px); }

@media (max-width: 1180px) {
  .en { --en-k: .65; --en-desvio: 0px; --en-centro: 890; padding-bottom: var(--respiro); }
  .en-miolo { display: contents; }
  .en-topo, .en-ficha { width: min(100%, 620px); position: relative; z-index: 2; }
  .en-topo { order: 1; } .en-cena { order: 2; } .en-ficha { order: 3; }
  .en { display: flex; flex-direction: column; }
  .en > .secao__ceu { position: absolute; }
  .en-cena { position: relative; inset: auto; margin: calc(-78px * var(--en-k)) calc(var(--d-margem) * -1) 0; height: auto; }
  .en-cena__quadro { position: relative; }
  .en-cena__chao { -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); }
  .en-nome { font-size: var(--t-mini); letter-spacing: .1em; }
  .en-nome--ilha, .en-nome--mar { display: none; }
  /* nomes presos à margem da tela quando ela é estreita */
  .en-nome--baia { --x: 606; --y: 660; left: max(calc(var(--x) * var(--en-k) * 1px), calc(var(--en-centro) * var(--en-k) * 1px - 50vw + 16px)); }
  .en-nome--vv { --x: 610; --y: 800; left: max(calc(var(--x) * var(--en-k) * 1px), calc(var(--en-centro) * var(--en-k) * 1px - 50vw + 16px)); }
  .en-nome--ponte { --x: 1050; --y: 610; left: min(calc(var(--x) * var(--en-k) * 1px), calc(var(--en-centro) * var(--en-k) * 1px + 50vw - 100px)); }
  .en-km0 { left: calc(var(--en-centro) * var(--en-k) * 1px + 50vw - 14px); transform: translateX(-100%); --y: 176; }
  .en-fio { --y: 246; height: calc(297px * var(--en-k)); }
  .en-nota { position: static; width: auto; margin: 4px var(--d-margem) 0; font-size: var(--t-mini); }
  .en-dado { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .en-dado dt { padding-top: 0; }
  .en-titulo { font-size: clamp(2.5rem, 12vw, 3.2rem); }
  .en-acoes .d-botao { flex: 1 1 100%; }
}
@media (min-width: 700px) and (max-width: 1180px) {
  .en { --en-k: .85; }
  .en-km0 { left: calc(866 * var(--en-k) * 1px); transform: none; --y: 150; }
  .en-fio { --y: 196; height: calc(347px * var(--en-k)); }
}
@media (min-width: 1181px) and (max-width: 1379px) {
  .en-nome--mar { display: none; }
}
@media (max-width: 420px) {
  .en-end2 .dado { display: block; margin: 2px 0 0; }
}