.sobre-intro { background: #fff; padding: var(--esp-sec-y) 0; }
.sobre-intro__grid { display: grid; grid-template-columns: 1fr 1.45fr; gap: 3.75rem; align-items: center;
  position: relative; z-index: 4; }
.sobre-intro__media { margin-top: -9vw; }
.sobre-intro__txt { margin-top: -6vw; }

@media (max-width: 768px) {
  .sobre-intro__grid { grid-template-columns: 1fr; gap: 2rem; }
  .sobre-intro__media, .sobre-intro__txt { margin-top: 0; }
}

/* pins ancoram por coordenada (--x/--y = cx/1828, cy/968 do map.svg); margin-top sobrepõe a intro */
.sobre-map {
  position: relative;
  margin-top: -14vw;
  background-image: url("../assets/wave-section-1.svg"), var(--esp-grad-section);
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center bottom;
  background-size: 100% auto, 100% calc(100% - 33vw);
  padding: 19vw 0 var(--esp-sec-y);
}
/* sem padding: o % dos pins bate com a imagem */
.sobre-map__frame { position: relative; width: min(calc(100% - 2 * var(--esp-gutter)), 96rem); margin: 0 auto; }
.sobre-map__img { display: block; width: 100%; height: auto; }

/* ponta em --x/--y; cabeça (círculo) a --h; --down = cabeça abaixo da ponta */
.sobre-map__loc { position: absolute; left: var(--x); top: var(--y); z-index: 2; line-height: 1; }
.sobre-map__stem { position: absolute; left: 0; width: 2px; height: var(--h, 4rem);
  background: var(--esp-yellow); transform: translateX(-50%); top: calc(-1 * var(--h, 4rem)); }
.sobre-map__stem::after { content: ""; position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: var(--esp-yellow); }
.sobre-map__stem::before { content: ""; position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  width: 1rem; height: 1rem; border-radius: 50%; background: var(--esp-yellow); box-shadow: var(--esp-sh-pin); }
.sobre-map__loc--down .sobre-map__stem { top: 0; }
.sobre-map__loc--down .sobre-map__stem::after { bottom: auto; top: -3px; }
.sobre-map__loc--down .sobre-map__stem::before { top: 100%; bottom: auto; }

.sobre-map__head { position: absolute; top: calc(-1 * var(--h, 4rem)); transform: translateY(-.5rem);
  display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.sobre-map__loc--down .sobre-map__head { top: var(--h, 4rem); }
.sobre-map__loc[data-side="right"] .sobre-map__head { left: 1rem; align-items: flex-start; }
.sobre-map__loc[data-side="left"]  .sobre-map__head { right: 1rem; align-items: flex-end; }

/* reveal do mapa em 3 atos (varredura pelo --order): 1) os pontos-base pipocam (as POSIÇÕES);
   2) as hastes crescem deles com o círculo maior na ponta; 3) rótulos + quantidades entram.
   No mobile os stems somem e os cards herdam o stagger do fade. */
.js .sobre-map[data-reveal] .sobre-map__stem::after { opacity: 0; transform: translateX(-50%) scale(0.4);
  transition: opacity .25s ease calc(var(--order) * 60ms + 200ms), transform .3s cubic-bezier(.22,1,.36,1) calc(var(--order) * 60ms + 200ms); }
.js .sobre-map[data-reveal].is-in .sobre-map__stem::after { opacity: 1; transform: translateX(-50%) scale(1); }
/* ancora pela PONTA (o ponto do mapa fica imóvel; a haste cresce a partir dele): normais crescem
   p/ cima (bottom fixo em --y), --down crescem p/ baixo (top fixo). Estado final = geometria original. */
.js .sobre-map[data-reveal] .sobre-map__stem { top: auto; bottom: 0; height: 0; transition: height .45s cubic-bezier(.22,1,.36,1) calc(var(--order) * 90ms + 750ms); }
.js .sobre-map[data-reveal] .sobre-map__loc--down .sobre-map__stem { top: 0; bottom: auto; }
.js .sobre-map[data-reveal].is-in .sobre-map__stem { height: var(--h, 4rem); }
.js .sobre-map[data-reveal] .sobre-map__stem::before { opacity: 0; transition: opacity .2s ease calc(var(--order) * 90ms + 750ms); }
.js .sobre-map[data-reveal].is-in .sobre-map__stem::before { opacity: 1; }
.js .sobre-map[data-reveal] .sobre-map__head { opacity: 0; transform: translateY(4px);
  transition: opacity .35s ease calc(var(--order) * 90ms + 1050ms), transform .4s cubic-bezier(.22,1,.36,1) calc(var(--order) * 90ms + 1050ms); }
.js .sobre-map[data-reveal].is-in .sobre-map__head { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .sobre-map[data-reveal] .sobre-map__stem,
  .js .sobre-map[data-reveal] .sobre-map__stem::before,
  .js .sobre-map[data-reveal] .sobre-map__stem::after,
  .js .sobre-map[data-reveal] .sobre-map__head { transition: none; }
}

.sobre-map__label { color: #fff; font: italic 700 var(--fs-sm)/1.2 var(--esp-font); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.sobre-map__loc[data-side="right"] .sobre-map__label { text-align: left; }
.sobre-map__loc[data-side="left"]  .sobre-map__label { text-align: right; }
.sobre-map__label--wrap { white-space: normal; max-width: 5.5rem; }
.sobre-map__stats { list-style: none; margin: 0; padding: 0; display: flex; gap: .85rem; }
.sobre-map__stats li { display: flex; flex-direction: column; align-items: center; gap: .3rem; flex-shrink: 0; }
.sobre-map__stats b { color: #fff; font: 700 var(--fs-body)/1.2 var(--esp-font); }
/* max-width:none anula o img{max-width:100%} global (senão o ícone esmaga) */
.sobre-map__ico { height: 1.8rem; width: auto; max-width: none; flex-shrink: 0; display: block; }
/* sr-only no desktop; visível no mobile */
.sobre-map__cat { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.sobre-map__legend { list-style: none; margin: 2.5rem auto 0; padding: 0 var(--esp-gutter); max-width: 96rem;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 1.75rem 3.25rem; }
.sobre-map__legend li { display: flex; align-items: center; gap: .85rem; }
.sobre-map__legend img { height: 2.6rem; width: auto; display: block; }
.sobre-map__legend span { color: #fff; font: 700 var(--fs-body)/1.2 var(--esp-font); }

/* mobile: os 8 locais viram cards empilhados (reflow do mesmo HTML) */
@media (max-width: 768px) {
  /* +2px sangra 1px/lado (cobre o fio sub-pixel em larguras fracionárias) */
  .sobre-map { padding: 24vw 0 3rem; margin-top: 0; background-size: calc(100% + 2px) auto, 100% calc(100% - 33vw); }
  /* flex column ordena os cards por --order (no desktop os locais são absolutos → order ignorado) */
  .sobre-map__frame { width: 100%; overflow: hidden; display: flex; flex-direction: column; }
  .sobre-map__img { order: -1; width: 150%; max-width: none; margin-left: -25%; margin-bottom: -22vw; border-radius: 0;
    -webkit-mask: linear-gradient(to bottom, #000 54%, transparent);
            mask: linear-gradient(to bottom, #000 54%, transparent); }

  .sobre-map__loc { order: var(--order); position: static; transform: none; display: block; width: 100%;
    padding: 1.45rem var(--esp-gutter); border-top: 1px solid rgba(255,255,255,.18); }
  .sobre-map__loc[style*="--order:1"] { border-top: 0; }
  .sobre-map__label--wrap { max-width: none; }
  .sobre-map__stem { display: none; }
  .sobre-map__head,
  .sobre-map__loc--down .sobre-map__head { position: static; transform: none; top: auto; left: auto; right: auto; gap: .6rem; }
  .sobre-map__loc[data-side="left"] .sobre-map__head,
  .sobre-map__loc[data-side="right"] .sobre-map__head { align-items: flex-start; }
  .sobre-map__loc[data-side="left"] .sobre-map__label,
  .sobre-map__loc[data-side="right"] .sobre-map__label { text-align: left; }
  .sobre-map__label { white-space: normal; font-size: var(--fs-body); margin-bottom: .1rem; }

  .sobre-map__stats { flex-direction: column; align-items: flex-start; gap: .55rem; margin-top: .25rem; }
  .sobre-map__stats li { flex-direction: row; align-items: center; gap: .75rem; }
  .sobre-map__ico { height: 1.9rem; width: 2.4rem; object-fit: contain; object-position: center; }   /* largura fixa: alinha o texto */
  .sobre-map__stats b { font-size: var(--fs-lead); min-width: 1.7em; text-align: right; }
  .sobre-map__cat { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto;
    white-space: normal; color: rgba(255,255,255,.92); font: 600 var(--fs-body)/1.2 var(--esp-font); }

  .sobre-map__legend { display: none; }
}

/* base = corte diagonal (clip-path ~11°) → transição p/ o branco da última seção */
.sobre-numbers { position: relative; background: var(--esp-grad-section); color: #fff;
  padding: 2.5rem 0 calc(var(--esp-sec-y) + 13vw);
  /* topo estendido (-18vw) só p/ o outline subir p/ o vão sobre o mapa; a base segue a diagonal */
  clip-path: polygon(0 -18vw, 100% -18vw, 100% 100%, 0 calc(100% - 20vw)); }
/* outline decorativo no VÃO entre o mapa e os números (sobe além do topo da seção), atrás do conteúdo */
.sobre-numbers__outline { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sobre-numbers__outline svg { position: absolute; left: 0; top: -15vw; width: 100%; height: auto; display: block; overflow: visible; }
.sobre-numbers > .esp-container { position: relative; z-index: 1; }
.sobre-numbers .esp-tick { margin-bottom: 1rem; }
.sobre-numbers__title { color: #fff; margin: 0; }
.sobre-numbers__title strong { color: var(--esp-yellow); }
.sobre-numbers__intro { color: #fff; max-width: 46rem; margin: 1.25rem 0 0; }
.sobre-numbers__intro strong { color: #fff; }

/* max-width força 3 stats na linha 1, 2 na linha 2 */
.sobre-numbers__grid { list-style: none; margin: 3.5rem auto 0; padding: 0; max-width: 54rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 3rem 3.5rem; }
.sobre-stat { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 1.1rem; }
.sobre-stat__ico { height: 3.5rem; width: auto; max-width: none; flex-shrink: 0; }
.sobre-stat__txt { margin: 0; display: flex; flex-direction: column; color: #fff; font: 400 var(--fs-body)/1.2 var(--esp-font); }
.sobre-stat__txt b { font: 700 var(--fs-h2)/1 var(--esp-font); }

.sobre-numbers__action { display: flex; justify-content: center; margin-top: 3.5rem; }

@media (max-width: 768px) {
  .sobre-numbers__grid { flex-direction: column; align-items: flex-start; max-width: none; gap: 2rem; }
  .sobre-stat__ico { width: 4.4rem; object-fit: contain; object-position: center; }   /* largura fixa: alinha o texto */
  .sobre-numbers { padding-bottom: calc(var(--esp-sec-y) + 17vw); }   /* +folga: o CTA é mais largo no mobile */
}

/* sem background próprio: o branco opaco achataria a diagonal do degradê da seção anterior */
.sobre-feature { padding: var(--esp-sec-y) 0 calc(var(--esp-sec-y) * 2); margin-top: -7vw; position: relative; z-index: 1; }
.sobre-feature__grid { display: grid; grid-template-columns: 1fr 1.45fr; gap: 3.75rem; align-items: center;
  position: relative; z-index: 1; }
.sobre-feature__media { margin-top: -9vw; }
.sobre-feature__txt { margin-top: -6vw; }
.sobre-feature__txt .esp-h2 { margin: 0.75rem 0 0; }
.sobre-feature__cta { margin-top: 2rem; }

@media (max-width: 768px) {
  .sobre-feature { margin-top: 0; }
  .sobre-feature__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  /* reset APÓS a base (senão -9/-6vw vence por ordem de source e a composição cola no CTA) */
  .sobre-feature__txt, .sobre-feature__media { margin-top: 0; }
}