/* ELC v3 - responsividade, mapa e animacoes */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.hero {
  overflow: visible !important;
  min-height: 0 !important;
  padding-bottom: clamp(44px, 6vw, 78px);
}

.hero__grid {
  grid-template-columns: minmax(0, 1.04fr) minmax(390px, .96fr) !important;
  gap: clamp(34px, 4.4vw, 68px) !important;
  align-items: center;
}

.hero__content,
.hero__grid > *,
.hero h1,
.hero__lead {
  min-width: 0;
  max-width: 100%;
}

.hero h1 {
  font-size: clamp(54px, 5.7vw, 88px) !important;
  line-height: .88 !important;
  overflow: visible;
}

.hero h1 em {
  display: block;
  max-width: 100%;
}

.hero-collage {
  min-width: 0;
  max-width: 100%;
}

.hero-metrics {
  margin-bottom: 0 !important;
  overflow: visible !important;
}

.hero-metrics article {
  min-width: 0;
  min-height: 118px;
  overflow: visible;
  padding-bottom: 24px !important;
}

.hero-metrics strong {
  display: block;
  min-width: 0;
  padding-block: .06em .12em;
  font-size: clamp(38px, 3.9vw, 52px) !important;
  line-height: 1.08 !important;
  overflow: visible;
  white-space: normal;
}

.hero-metrics span {
  min-width: 0;
  line-height: 1.35 !important;
  overflow-wrap: anywhere;
}

.section--light {
  padding-top: clamp(92px, 10vw, 145px) !important;
}

.directory-head,
.directory-head > *,
.regions-panel,
.region-map-filter,
.region-map-filter > * {
  min-width: 0;
}

.directory-head > p {
  padding-block: 4px 6px;
  line-height: 1.4;
  overflow: visible;
}

.region-map-filter > em {
  min-width: 34px !important;
  height: auto !important;
  min-height: 34px;
  padding: 5px 9px !important;
  line-height: 1.2 !important;
  overflow: visible;
}

/* Animacoes de entrada na rolagem */
.reveal {
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(0, 38px, 0) scale(.985);
  transition:
    opacity .78s cubic-bezier(.2,.75,.2,1),
    transform .78s cubic-bezier(.2,.75,.2,1),
    filter .72s ease !important;
  will-change: opacity, transform, filter;
}

.reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.modalities-grid .reveal:nth-child(2),
.gallery-grid .reveal:nth-child(2) { transition-delay: .06s !important; }
.modalities-grid .reveal:nth-child(3),
.gallery-grid .reveal:nth-child(3) { transition-delay: .12s !important; }
.modalities-grid .reveal:nth-child(4),
.gallery-grid .reveal:nth-child(4) { transition-delay: .18s !important; }
.modalities-grid .reveal:nth-child(5),
.gallery-grid .reveal:nth-child(5) { transition-delay: .24s !important; }
.modalities-grid .reveal:nth-child(6),
.gallery-grid .reveal:nth-child(6) { transition-delay: .30s !important; }
.modalities-grid .reveal:nth-child(7) { transition-delay: .36s !important; }

.reveal .reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
}

.reveal.is-visible .reveal-stagger > * {
  animation: elcRise .58s cubic-bezier(.2,.75,.2,1) both;
}

.reveal.is-visible .reveal-stagger > *:nth-child(2) { animation-delay: .08s; }
.reveal.is-visible .reveal-stagger > *:nth-child(3) { animation-delay: .16s; }
.reveal.is-visible .reveal-stagger > *:nth-child(4) { animation-delay: .24s; }
.reveal.is-visible .reveal-stagger > *:nth-child(5) { animation-delay: .32s; }
.reveal.is-visible .reveal-stagger > *:nth-child(6) { animation-delay: .40s; }
.reveal.is-visible .reveal-stagger > *:nth-child(7) { animation-delay: .48s; }

@keyframes elcRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mapa real */
.map-stage--real {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  background: #09100b;
}

.official-map {
  width: 100%;
  height: clamp(470px, 47vw, 610px);
  min-height: 470px;
  background: #09100b;
  isolation: isolate;
}

.official-map .leaflet-control-zoom {
  border: 0;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}

.official-map .leaflet-control-zoom a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #fff;
  background: #0c120e;
  border-color: rgba(255,255,255,.14);
}

.official-map .leaflet-control-attribution {
  color: #d6ded8;
  background: rgba(5,8,6,.82);
  font-size: 10px;
}

.official-map .leaflet-control-attribution a {
  color: #21f119;
}

.official-map .leaflet-popup-content-wrapper,
.official-map .leaflet-popup-tip {
  color: #fff;
  background: #0c120e;
}

.official-map .leaflet-popup-content {
  min-width: 210px;
  margin: 15px 17px;
  line-height: 1.45;
}

.elc-leaflet-marker-wrap {
  background: transparent !important;
  border: 0 !important;
}

.elc-leaflet-marker {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 12%;
  background: #21f119;
  box-shadow: 0 8px 22px rgba(0,0,0,.38), 0 0 0 6px rgba(33,241,25,.17);
  transform: rotate(-45deg);
  transition: transform .2s ease, box-shadow .2s ease;
}

.elc-leaflet-marker::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #071008;
}

.leaflet-marker-icon:hover .elc-leaflet-marker,
.leaflet-marker-icon:focus .elc-leaflet-marker {
  transform: rotate(-45deg) scale(1.15);
  box-shadow: 0 10px 28px rgba(0,0,0,.42), 0 0 0 9px rgba(33,241,25,.2);
}

.map-popup__modality {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #061006;
  background: #21f119;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.map-popup__title {
  display: block;
  margin-bottom: 5px;
  font-size: 17px;
  line-height: 1.1;
  text-transform: uppercase;
}

.map-popup__address {
  display: block;
  color: #b8c3bb;
  font-size: 12px;
}

.map-popup__button {
  display: inline-flex;
  margin-top: 11px;
  padding: 9px 11px;
  border: 0;
  color: #071008;
  background: #21f119;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.map-loading-state {
  position: absolute;
  z-index: 800;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(90%, 360px);
  padding: 14px 16px;
  color: #fff;
  background: rgba(5,8,6,.88);
  border: 1px solid rgba(255,255,255,.14);
  text-align: center;
  font-size: 12px;
  pointer-events: none;
}

.map-loading-state[hidden] { display: none; }

.map-legend {
  position: absolute;
  z-index: 700;
  left: 14px;
  bottom: 14px;
  margin: 0;
  padding: 9px 11px !important;
  color: rgba(255,255,255,.78) !important;
  background: rgba(5,8,6,.82);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}

.map-footer {
  min-width: 0;
}

.map-footer p:first-child {
  white-space: normal !important;
  line-height: 1.35 !important;
  padding-bottom: 2px;
}

@media (max-width: 1180px) {
  .hero__grid {
    grid-template-columns: 1fr !important;
    gap: 50px !important;
  }

  .hero__content,
  .hero-collage {
    width: 100%;
    max-width: 900px;
  }

  .hero h1 {
    font-size: clamp(58px, 9vw, 94px) !important;
  }
}

@media (max-width: 900px) {
  .hero__grid { padding-top: 58px !important; }
  .hero-collage { min-height: 510px !important; }
  .hero-metrics { grid-template-columns: 1fr 1fr !important; }
  .official-map {
    height: 520px;
    min-height: 520px;
  }
}

@media (max-width: 680px) {
  .hero {
    padding-bottom: 34px;
  }

  .hero__grid {
    padding-top: 48px !important;
    padding-bottom: 46px !important;
    gap: 38px !important;
  }

  .hero h1 {
    font-size: clamp(42px, 13.4vw, 61px) !important;
    line-height: .92 !important;
    letter-spacing: -.03em !important;
  }

  .hero-collage {
    min-height: 405px !important;
  }

  .hero-metrics {
    grid-template-columns: 1fr 1fr !important;
    margin-bottom: 0 !important;
  }

  .hero-metrics article {
    min-height: 110px !important;
    padding: 17px 14px 20px !important;
  }

  .hero-metrics strong {
    font-size: clamp(31px, 9vw, 38px) !important;
  }

  .section--light {
    padding-top: 84px !important;
  }

  .official-map {
    height: 440px;
    min-height: 440px;
  }

  .official-map .leaflet-control-attribution {
    max-width: calc(100vw - 70px);
    white-space: normal;
    line-height: 1.2;
  }

  .map-legend {
    left: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
  }

  .map-footer {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 14px 16px !important;
  }

  .directory-head > p {
    margin-top: 12px !important;
  }
}

@media (max-width: 430px) {
  .hero h1 {
    font-size: clamp(39px, 12.8vw, 55px) !important;
  }

  .hero-collage {
    min-height: 370px !important;
  }

  .hero-metrics {
    grid-template-columns: 1fr !important;
  }

  .hero-metrics article {
    grid-template-columns: auto 1fr !important;
    min-height: 90px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .hero-metrics article:last-child {
    border-bottom: 0 !important;
  }

  .hero-metrics strong {
    font-size: 36px !important;
  }

  .official-map {
    height: 410px;
    min-height: 410px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal .reveal-stagger > *,
  .reveal.is-visible .reveal-stagger > * {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}