/* Seção 8 · Contato (prefixo ct-)
   O fio do hero termina aqui: entra no mapa e acende no ponto do endereço. */

.ct { --ct-h: clamp(28rem, 42vw, 38rem); --ct-py: calc(var(--ct-h) / 2 - 90px - 21px); }
.ct-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 5.5vw, 5.5rem); row-gap: clamp(2.5rem, 4vw, 4rem); align-items: center; }
.ct-cabeca { grid-column: 1 / -1; }
.ct-texto { align-self: start; padding-top: calc(var(--ct-py) - .85em); } /* a primeira linha do endereço na altura do fio */
.ct-h2 { font-size: clamp(2.5rem, 1rem + 4.6vw, 5.6rem); }
.ct-sem-quebra { white-space: nowrap; }

.ct-end { font-style: normal; margin: 0; display: grid; gap: .1rem; font-size: clamp(1.1875rem, 1.05rem + .4vw, 1.375rem); line-height: 1.55; color: var(--tinta-noite); }
.ct-nota { color: var(--tinta-noite-suave); margin-top: .5rem; }

.ct-agenda { margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--linha-noite); }
.ct-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.ct-acoes .ligar { min-height: 48px; display: inline-flex; align-items: center; }
.ct-horario { margin: 1rem 0 0; font-size: var(--t-mini); letter-spacing: .04em; color: var(--tinta-noite-suave); }
.ct-rota { margin-top: .6rem; color: var(--tinta-noite); border-bottom-color: var(--ambar-luz); }
.ct-rota::after { content: "↗"; margin-left: .5em; color: var(--ambar-luz); }

/* ---------- mapa ---------- */
.ct-mapa { position: relative; margin: 0; }
.ct-janela {
  position: relative; height: var(--ct-h); overflow: hidden; isolation: isolate;
  border-radius: 140px var(--raio) var(--raio) var(--raio);
  background: var(--noite-2);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .6), inset 0 0 0 1px var(--linha-noite);
}
/* espera: quarteirões desenhados enquanto o mapa não chega */
.ct-espera {
  position: absolute; inset: 0; z-index: 0; display: grid; place-items: end start; padding: 1.4rem 1.8rem;
  background:
    linear-gradient(90deg, transparent 0 calc(50% - 30px), rgb(244 236 226 / .07) calc(50% - 30px) calc(50% - 22px), transparent calc(50% - 22px)),
    repeating-linear-gradient(90deg, transparent 0 86px, rgb(244 236 226 / .05) 86px 90px),
    repeating-linear-gradient(0deg, transparent 0 120px, rgb(244 236 226 / .05) 120px 124px),
    radial-gradient(60% 60% at 50% 38% in oklab, var(--noite-3), var(--noite-2));
}
.ct-espera span { font-size: var(--t-mini); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-noite-suave); }
.ct-janela iframe {
  position: absolute; z-index: 1; left: 0; top: -180px; width: 100%; height: calc(100% + 180px); border: 0;
  filter: grayscale(1) invert(.92) sepia(.5) brightness(.82) contrast(1.08);
}
.js .ct-janela iframe { opacity: 0; transition: opacity 1.2s var(--suave); }
.js .ct-carregado .ct-janela iframe { opacity: 1; }
.ct-janela::after { /* véu morno por cima, sem tirar o clique */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(in oklab 100deg, rgb(38 27 20 / .55), rgb(38 27 20 / 0) 45%),
              radial-gradient(40% 40% at 50% var(--ct-py) in oklab, rgb(240 194 127 / .16), transparent);
}

/* o fio entra no mapa e termina no ponto */
.ct-fio {
  position: absolute; z-index: 3; left: calc(clamp(2.5rem, 5.5vw, 5.5rem) * -1); top: var(--ct-py);
  width: calc(50% + clamp(2.5rem, 5.5vw, 5.5rem) - 15px); height: 1px; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--ambar-luz) 22%, var(--ambar-luz));
  transform-origin: left center;
}
.ct-pino {
  position: absolute; z-index: 4; left: 50%; top: var(--ct-py); width: 30px; height: 30px; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle closest-side, var(--ambar) 0 6.5px, var(--noite) 7.5px);
  border: 1px solid var(--ambar-luz);
  box-shadow: 0 0 0 7px rgb(192 130 58 / .18), 0 0 30px 8px rgb(240 194 127 / .45);
}
.ct-placa {
  position: absolute; z-index: 4; left: calc(50% + 26px); top: var(--ct-py); translate: 0 -50%; pointer-events: none; white-space: nowrap;
  padding: .45rem .85rem; border-radius: 999px; font-size: var(--t-mini); letter-spacing: .04em;
  background: color-mix(in oklab, var(--noite) 86%, transparent); color: var(--tinta-noite); border: 1px solid var(--linha-noite);
}

.js .ct-mapa[data-rev] .ct-fio { transform: scaleX(0); transition: transform 1.7s cubic-bezier(.45,.05,.2,1) .5s; }
.js .ct-mapa[data-rev] .ct-pino { scale: .3; opacity: 0; transition: scale .6s var(--suave) 2.1s, opacity .4s 2.1s; }
.js .ct-mapa[data-rev] .ct-placa { opacity: 0; transition: opacity .9s var(--suave) 2.5s; }
.js .ct-mapa.wf-on .ct-fio { transform: scaleX(1); }
.js .ct-mapa.wf-on .ct-pino { scale: 1; opacity: 1; }
.js .ct-mapa.wf-on .ct-placa { opacity: 1; }

/* a voz de quem veio de longe, sobre o canto do mapa (como a prova sobre o retrato) */
.ct-cita { position: absolute; z-index: 5; right: -1.5rem; top: -3rem; width: min(21rem, 58%); backdrop-filter: blur(12px); }
/* o ponto pulsa devagar, uma batida calma, como o traço do Doppler */
.ct-pino::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--ambar-luz); opacity: 0; }
.ct-mapa.wf-on .ct-pino::after { animation: ct-pulso 3.2s var(--suave) 2.8s infinite; }
.wf-fora .ct-pino::after { animation-play-state: paused; }
@keyframes ct-pulso { 0% { scale: 1; opacity: .8; } 70%, 100% { scale: 2.6; opacity: 0; } }

@media (min-width: 981px) and (max-width: 1200px) {
  .ct-cita { right: -.5rem; }
}
@media (max-width: 980px) {
  .ct { --ct-h: min(108vw, 30rem); }
  .ct-grade { grid-template-columns: 1fr; gap: 3rem; }
  .ct-texto { padding-top: 0; }
  .ct-janela { border-radius: 90px 22px 22px 22px; }
  .ct-fio { left: 0; width: calc(50% - 15px); background: linear-gradient(to right, transparent, var(--ambar-luz) 40%); }
  .ct-placa { left: 50%; translate: -50% 0; top: calc(var(--ct-py) + 26px); }
  .ct-cita { position: relative; right: auto; top: auto; width: auto; margin: 1.4rem 0 0; }
  .ct-sem-quebra { white-space: normal; }
}