/* ═══════════════════════════════════════════════════
   MAPA DE PROJETOS — Onde Estamos
   Figma 47:2022 · bg-light
   Mapa estático (1620×1280) + 6 pins com popup no hover
   Desktop-first · base 1920px
   ═══════════════════════════════════════════════════ */

#mapa {
  background-color: var(--c-light);
  padding: clamp(80px, 10.42vw, 200px) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 5vw, 96px);
  /* ── Camada da FRENTE do reveal do footer ──
     Fica SOBRE o #cta-footer (sticky, z:1) e o cobre. O GSAP sobe esta
     seção (translateY) e achata o raio da base no scroll → o footer
     escuro emerge por baixo (efeito "carta virada", ref. Motto).
     Raio base 48px = estado de repouso / fallback sem JS. */
  position: relative;
  z-index: 2;
  border-bottom-left-radius: 48px;
  border-bottom-right-radius: 48px;
  will-change: transform;
}


/* ─────────────────────────────────────────────────── */
/*  HEADER — badge + título (esq) · descrição (dir)    */
/* ─────────────────────────────────────────────────── */

.map__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(40px, 5vw, 96px);
}

.map__header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(24px, 2.08vw, 40px);
  flex-shrink: 0;
}

/* Badge "ONDE ESTAMOS" */
.map__badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 6px;
  background: rgba(85, 85, 85, 0.10);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

.map__badge-dot {
  display: block;
  width:  8.628px;
  height: 8.628px;
  background: var(--c-red);
  flex-shrink: 0;
}

.map__badge-text {
  font-family: var(--f-mono);
  font-size: clamp(13px, 0.94vw, 18px);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--c-dark);
  white-space: nowrap;
}

/* Título 88px — leading 1.15 · tracking -0.05em */
.map__title {
  font-family: var(--f-sans);
  font-size: clamp(40px, 4.58vw, 88px);
  font-weight: var(--fw-regular);
  line-height: 1.15;
  letter-spacing: -0.05em;
  color: var(--c-dark);
  margin: 0;
}

/* Descrição direita — 24px · opacity 80 · w-642 */
.map__desc {
  font-family: var(--f-sans);
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: rgba(27, 27, 27, 0.80);
  max-width: clamp(320px, 33.5vw, 643px);
  flex-shrink: 0;
  margin: 0;
}


/* ─────────────────────────────────────────────────── */
/*  MAPA — box 1620×1280 com SVG + pins + legenda      */
/* ─────────────────────────────────────────────────── */

.map__canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1620 / 1280;
  border-radius: 12px;
  border: 1px solid rgba(85, 85, 85, 0.40);
  /* overflow: visible — popups podem ultrapassar a borda sem ser cortados.
     O SVG é clipado individualmente via clip-path abaixo. */
  overflow: visible;
}

/* SVG do mapa preenche o box (mesmo viewBox 1620×1280) */
.map__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  /* Clipa o SVG aos cantos arredondados do canvas,
     sem afetar os pins e popups. */
  clip-path: inset(0 round 12px);
}


/* ── Pins: posicionados por % do box 1620×1280 ── */
.map__pin {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* O dot clicável */
.map__pin-dot {
  display: block;
  width:  clamp(24px, 2vw, 38.459px);
  height: clamp(24px, 2vw, 38.459px);
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}

.map__pin--andamento .map__pin-dot { background: var(--c-red); }
.map__pin--entregue  .map__pin-dot { background: var(--c-dark); }

/* Halo no hover/focus (estado ativo cinza do Figma) */
.map__pin:hover  .map__pin-dot,
.map__pin:focus-within .map__pin-dot {
  box-shadow: 0 0 0 12px rgba(85, 85, 85, 0.18);
  transform: scale(1.06);
}

/* Pin ativo sobe acima de todos os outros (corrige sobreposição do popup) */
.map__pin:hover,
.map__pin:focus-within {
  z-index: 10;
}


/* ─────────────────────────────────────────────────── */
/*  CARD POPUP — aparece no hover/focus do pin         */
/*  Layout horizontal: imagem esq · info dir           */
/* ─────────────────────────────────────────────────── */

.map__card {
  position: absolute;
  display: flex;
  align-items: flex-start;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(27, 27, 27, 0.22);
  overflow: hidden;
  z-index: 5;

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              visibility 0s linear var(--dur-base);
}

.map__pin:hover  .map__card,
.map__pin:focus-within .map__card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              visibility 0s;
}

/* ── Direção de abertura (vertical) ── */
.map__pin--up   .map__card { bottom: calc(100% + 14px); }
.map__pin--down .map__card { top:    calc(100% + 14px); }

/* Bridge invisível cobre o gap pin↔card (evita flicker do hover) */
.map__card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 18px;
}
.map__pin--up   .map__card::after { top: 100%; }
.map__pin--down .map__card::after { bottom: 100%; }

/* ── Direção de abertura (horizontal) ── */
.map__pin--right .map__card { left:  0; }
.map__pin--left  .map__card { right: 0; }


/* ── Painel de imagem (esquerda) ── */
.map__card-media {
  position: relative;
  width: 335px;
  flex-shrink: 0;
  align-self: stretch;
  overflow: hidden;
}

.map__card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Badge de status sobre a imagem */
.map__card-label {
  position: absolute;
  left: 29px;
  top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(244, 245, 247, 0.25);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

.map__card-label-dot {
  display: block;
  width:  7.5px;
  height: 7.5px;
  flex-shrink: 0;
}

.map__pin--andamento .map__card-label-dot { background: var(--c-red); }
.map__pin--entregue  .map__card-label-dot { background: var(--c-dark); }

.map__card-label-text {
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--c-dark);
  white-space: nowrap;
}


/* ── Painel de informações (direita) ── */
.map__card-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
}

.map__card-loc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map__card-city {
  font-family: var(--f-sans);
  font-size: 24px;
  font-weight: var(--fw-regular);
  line-height: 1.15;
  letter-spacing: -0.05em;
  color: var(--c-dark);
  white-space: nowrap;
  margin: 0;
}

.map__card-place {
  display: flex;
  align-items: center;
  gap: 4px;
}

.map__card-place-icon {
  width: 13.343px;
  height: 13.343px;
  display: block;
  flex-shrink: 0;
  opacity: 0.5;
}

.map__card-place span {
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: rgba(27, 27, 27, 0.50);
}

.map__card-text {
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: 1.55;
  letter-spacing: -0.03em;
  color: rgba(27, 27, 27, 0.80);
  width: 240px;
  margin: 0;
}

/* Botão "Ver mais" — pílula vermelha + quadrado escuro c/ seta */
.map__card-btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 6px 6px 6px 20px;
  border-radius: 10px;
  background: var(--c-red);
  text-decoration: none;
  align-self: flex-start;
  transition: background var(--dur-base) var(--ease);
}

.map__card-btn:hover { background: #c42a2d; }

.map__card-btn-text {
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--c-light);
  white-space: nowrap;
}

.map__card-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width:  34px;
  height: 34px;
  border-radius: 7px;
  background: var(--c-dark);
  flex-shrink: 0;
}

.map__card-btn-icon img {
  width: 13px;
  height: auto;
  display: block;
  transition: transform var(--dur-base) var(--ease);
}

.map__card-btn:hover .map__card-btn-icon img {
  transform: translate(3px, -3px);
}


/* ─────────────────────────────────────────────────── */
/*  LEGENDA — canto inferior esquerdo do mapa          */
/* ─────────────────────────────────────────────────── */

.map__legend {
  position: absolute;
  left: 58px;
  bottom: 49px;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 18px;
  border-radius: 6px;
  background: rgba(85, 85, 85, 0.10);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  z-index: 3;
}

.map__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.map__legend-dot {
  display: block;
  width:  8.628px;
  height: 8.628px;
  flex-shrink: 0;
}

.map__legend-item--andamento .map__legend-dot { background: var(--c-red); }
.map__legend-item--entregue  .map__legend-dot { background: var(--c-dark); }

.map__legend-text {
  font-family: var(--f-mono);
  font-size: clamp(13px, 0.94vw, 18px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--c-dark);
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .map__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .map__desc {
    max-width: 100%;
  }

  .map__legend {
    left: 24px;
    bottom: 24px;
  }
}

@media (max-width: 768px) {
  /* Card vira vertical em mobile */
  .map__card {
    flex-direction: column;
    width: 260px;
  }

  .map__card-media {
    width: 100%;
    height: 150px;
    align-self: auto;
  }

  .map__card-body {
    gap: 14px;
    padding: 18px;
  }

  .map__card-city {
    font-size: 18px;
  }

  .map__card-text {
    width: auto;
    font-size: 13px;
  }

  .map__legend {
    flex-direction: column;
    gap: 12px;
  }
}