/* lo · Onde ela está (contato) */
.lo { padding-top: clamp(72px, 8vw, 120px); padding-bottom: clamp(64px, 7vw, 104px); }
.lo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--malha-funda); opacity: .35;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
          mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.lo::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg in oklab, transparent, var(--indigo-fundo) 70%);
}
.lo-grade {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px); align-items: center;
}
.lo-onde { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.6rem 2rem; margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.lo-bloco h3 {
  margin: 0 0 .6rem; font-family: var(--f-texto); font-weight: 400;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--noite-suave);
}
.lo-bloco address, .lo-bloco p { margin: 0; font-style: normal; font-size: 1.02rem; line-height: 1.6; color: var(--noite-texto); }

.lo-acoes { margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.lo-numero {
  display: inline-block; text-decoration: none; color: #fff;
  font-family: var(--f-display); font-variation-settings: "opsz" 100; font-weight: 420;
  font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1; letter-spacing: .005em;
}
.lo-ddd { color: var(--pervinca); font-weight: 300; }
.lo-numero:hover { color: #dcdaff; }
.lo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 1.4rem; }
.lo-zap { font-size: 1.02rem; }
.lo-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; }
.lo-links a {
  display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px;
  color: var(--noite-texto); text-decoration: none; font-size: .95rem; line-height: 1.3;
}
.lo-links a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--pervinca); text-underline-offset: 4px; }
.lo-rede { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--noite-suave); }

.lo-mapa { position: relative; margin: 0; min-width: 0; }
.lo-mapa::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -24%; right: 46%; bottom: 3.2rem; height: clamp(70px, 10vw, 140px);
  background: var(--malha-clara);
  -webkit-mask: url(../img/pincel-1.png) center / 100% 100% no-repeat;
          mask: url(../img/pincel-1.png) center / 100% 100% no-repeat;
  transform: rotate(-5deg) scaleX(-1); opacity: .9;
}
.lo-etiqueta {
  position: absolute; left: 50%; top: calc(50% - 30px - 80px); transform: translateX(-50%);
  padding: .45em .9em; border-radius: var(--raio); white-space: nowrap; pointer-events: none;
  background: var(--papel); color: var(--indigo-noite); font-size: .78rem; letter-spacing: .04em;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6);
}
.lo-etiqueta::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--papel);
  transform: translateX(-50%) rotate(45deg);
}
.lo-tinta { position: relative; z-index: 1; aspect-ratio: 1 / 1; overflow: hidden; background: #1d1b55; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7); }
.lo-tinta iframe {
  position: absolute; left: 0; top: -60px; width: 100%; height: calc(100% + 60px); border: 0;
  filter: invert(.92) hue-rotate(180deg) saturate(.6) brightness(.9) contrast(1.05);
}
/* tinta índigo sobre o mapa: vira mais uma mancha da malha funda */
.lo-tom { position: absolute; inset: 0; pointer-events: none; background: var(--malha-funda); mix-blend-mode: color; }
.lo-tinta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 70% at 50% 50% in oklab, transparent 55%, rgba(7, 7, 42, .55)); }
.lo-mapa figcaption { position: relative; z-index: 1; text-wrap: balance; margin-top: .8rem; font-size: .8rem; letter-spacing: .08em; color: var(--noite-suave); }
/* gesto: o mapa é revelado por uma pincelada da esquerda para a direita */
.js .lo-mapa[data-wf] .lo-tinta { clip-path: inset(0 100% 0 0); }
.js .lo-mapa.wf-visto .lo-tinta { clip-path: inset(0 0 0 0); transition: clip-path 1.3s cubic-bezier(.6, 0, .2, 1) .2s; }

.lo-fecho { max-width: 1240px; margin: clamp(56px, 6vw, 88px) auto 0; text-align: center; }
.lo-fecho blockquote {
  margin: 0 auto; max-width: 46rem;
  font-family: var(--f-display); font-variation-settings: "opsz" 60; font-weight: 380;
  font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.15; color: var(--noite-texto);
}
.lo-fecho blockquote .wf-grifo::after { bottom: -.02em; }
.lo-fecho figcaption { text-wrap: balance; margin-top: 1rem; font-size: .8rem; letter-spacing: .08em; color: var(--noite-suave); }

@media (max-width: 899px) {
  .lo::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg in oklab, transparent, var(--indigo-fundo) 70%);
}
.lo-grade { grid-template-columns: minmax(0, 1fr); }
  .lo-onde { grid-template-columns: minmax(0, 1fr); }
  .lo-zap { width: 100%; justify-content: center; }
  .lo-linha { gap: .6rem 1.6rem; }
  .lo-tinta { aspect-ratio: 4 / 3; }
  .lo-mapa::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .lo-mapa[data-wf] .lo-tinta { clip-path: none; transition: none; }
}