/* 06 — Localidades (Figma 27110:2647) */
.loc {
  background: var(--color-white);
  padding: 80px 74px 80px 100px;
  --loc-start: #CA3E7A;
  --loc-summer: #BBD485;
}
.loc__inner {
  display: grid;
  grid-template-columns: 520px minmax(0, 646px);
  column-gap: 100px;
  align-items: start;
}
.loc__side { display: flex; flex-direction: column; min-width: 0; }

.loc__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-light);
  color: var(--color-primary);
}
.loc__title strong { display: block; font-weight: var(--fw-bold); }
.loc__accent { color: var(--color-purple-02); }
.loc__lead {
  margin-top: 24px;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  font-weight: var(--fw-light);
  color: var(--color-gray);
}

/* Lista scrollável de localidades */
.loc__scroll { position: relative; margin-top: 40px; width: 503px; max-width: 100%; }
.loc__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 330px;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: none;
}
.loc__list::-webkit-scrollbar { display: none; }
.loc__item {
  flex-shrink: 0;
  border: 1px solid var(--color-purple-02);
  border-radius: 12px;
  background: var(--color-white);
}
.loc__item-title { font-size: inherit; }
.loc__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: 16px 24px;
  background: none;
  border: 0;
  border-radius: 12px;
  color: var(--color-primary);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body);
  text-align: left;
  cursor: pointer;
}
.loc__trigger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.loc__trigger img { flex-shrink: 0; transition: transform var(--transition); }
.loc__trigger[aria-expanded="true"] img { transform: rotate(180deg); }
.loc__panel { padding: 0 24px 16px; font-size: 16px; color: var(--color-gray); }
.loc__panel[hidden] { display: none; }
.loc__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; list-style: none; }
.loc__tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-off);
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1.4;
}
.loc__tag--start, .loc__legend-item--start { color: var(--loc-start); }
.loc__tag--expert, .loc__legend-item--expert { color: var(--color-secondary); }
.loc__tag--summer, .loc__legend-item--summer { color: var(--loc-summer); }

/* Indicador de rolagem (posição acompanhada por js/sections/06-localidades.js) */
.loc__thumb {
  position: absolute;
  left: calc(100% + 7px);
  top: 0;
  width: 8px;
  height: 102px;
  display: none;
  pointer-events: none;
}
.loc__thumb.is-active { display: block; }
.loc__thumb img {
  position: absolute;
  left: 50%; top: 50%;
  max-width: none;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Mapa */
.loc__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 646 / 558;
  margin-top: 24px;
}
.loc__glow {
  position: absolute;
  left: 8.82%; top: -7.35%;
  width: 91.33%;
  max-width: none;
  pointer-events: none;
}
.loc__map {
  position: absolute;
  left: 12.23%; top: 0;
  width: 87.77%;
  aspect-ratio: 566.946 / 558;
}
.loc__map-img {
  position: absolute;
  inset: -0.01% 4.72% 0.02% 0;
  width: 95.28%;
  height: 100%;
  max-width: none;
}
.loc__marker { position: absolute; width: 14px; height: 14px; max-width: none; }
.loc__marker--1 { inset: auto; left: 56.19%; top: 66.49%; width: 2.47%; height: auto; aspect-ratio: 1; }
.loc__marker--2 { inset: auto; left: 59.19%; top: 67.74%; width: 2.47%; height: auto; aspect-ratio: 1; }
.loc__marker--3 { inset: auto; left: 61.84%; top: 70.07%; width: 2.47%; height: auto; aspect-ratio: 1; }

/* "Escolha sua porta" — composição em % + container query para o texto */
.loc__door {
  position: absolute;
  left: 0; top: 47.56%;
  width: 50.77%;
  aspect-ratio: 328 / 142.871;
  container-type: inline-size;
}
.loc__door-bg, .loc__door-card, .loc__door-text { position: absolute; max-width: none; }
.loc__door-bg { display: block; }
.loc__door-bg--roxo  { inset: 49.2% 6.26% 0 13.95%; width: 79.79%; height: 50.8%; }
.loc__door-bg--claro { inset: 0 0 51% 6.82%; width: 93.18%; height: 49%; }
.loc__door-bg--sua   { inset: 44.9% 72.17% 25.13% 0; width: 27.83%; height: 29.97%; }
.loc__door-card { left: 75.27%; top: -4.98%; width: 24.9%; height: 106.2%; }
.loc__door-text {
  font-weight: var(--fw-bold);
  line-height: 1;
  white-space: nowrap;
  display: flex; align-items: center;
}
.loc__door-text--escolha { left: 18.48%; top: 1.41%; height: 44.09%; font-size: 14.78cqw; color: var(--color-secondary); }
.loc__door-text--porta   { left: 29.1%;  top: 42.36%; height: 53.9%;  font-size: 18.12cqw; color: var(--color-white); }
.loc__door-text--sua     { left: 4.29%;  top: 39.35%; height: 37.09%; font-size: 12.39cqw; color: var(--color-white); }

/* Legenda */
.loc__legend {
  position: absolute;
  left: 87.15%; top: 84.77%;
  display: flex; flex-direction: column; gap: 6px;
  list-style: none;
}
.loc__legend-item { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: var(--fw-bold); line-height: 1.4; white-space: nowrap; }
.loc__legend-item img { flex-shrink: 0; }

@media (max-width: 1024px) {
  .loc { padding: 64px 40px; }
  .loc__inner { grid-template-columns: 1fr; row-gap: 48px; }
  .loc__scroll { width: 100%; }
  .loc__thumb { display: none !important; }
  .loc__stage { max-width: 646px; margin-inline: auto; margin-top: 0; }
}
@media (max-width: 640px) {
  .loc { padding: 48px 16px; }
  .loc__trigger { padding: 14px 16px; font-size: 18px; }
  .loc__panel { padding: 0 16px 14px; }
  .loc__legend { left: auto; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .loc__trigger img { transition: none; }
}