/* Alinhamento compartilhado entre a navegação, o hero e os blocos responsivos. */
.nav-content-shell { min-width: 0; }
.nav-content-shell > nav { min-width: 0; }
.hero-content-shell { min-width: 0; }
.hero-status { min-width: 0; max-width: 100%; }

/* O indicador flutuante nunca força largura além da viewport. */
.page-progress-status { min-width: 0; }
.page-progress-copy { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-progress-status strong { flex: 0 0 auto; }

/* O mapa deixa de exigir duas colunas antes que ambas tenham espaço real. */
@media (max-width: 900px) {
  .partner-map-layout { grid-template-columns: minmax(0, 1fr); }
  .partner-map-stage { width: 100%; min-width: 0; }
}

/* No telefone, o contexto do mapa permanece visível e se organiza antes da arte. */
@media (max-width: 760px) {
  .partner-map-section {
    padding: clamp(42px, 12vw, 64px) clamp(18px, 5vw, 28px) clamp(48px, 13vw, 72px);
  }

  .partner-map-shell { width: min(100%, 640px); }

  .partner-map-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 8vw, 42px);
  }

  .partner-map-copy {
    display: block;
    max-width: 560px;
  }

  .partner-map-copy h2 {
    max-width: 11ch;
    font-size: clamp(2.45rem, 12vw, 4.1rem);
    line-height: .92;
  }

  .partner-map-copy p {
    max-width: 39rem;
    margin-top: 18px;
    font-size: clamp(.95rem, 4vw, 1.05rem);
    line-height: 1.55;
  }

  .partner-map-copy-rule { margin: 20px 0 11px; }

  .partner-map-stage {
    margin: 0;
    aspect-ratio: 1672 / 941;
  }
}

/* Em 320 px, marca e CTA continuam no mesmo limite sem cortar a página. */
@media (max-width: 360px) {
  /* Compensa a largura reservada pela barra de rolagem sem deslocar o hero. */
  header { padding-right: 1px !important; }
  .nav-content-shell { gap: 8px; }
  .nav-content-shell > nav { flex: 1 1 auto; justify-content: flex-end; }
  .nav-content-shell > nav > a {
    width: 140px !important;
    min-width: 0 !important;
    padding-inline: 6px !important;
    font-size: .58rem !important;
    line-height: 1 !important;
    text-align: center;
    white-space: normal;
  }
}

/* Larguras livres muito abaixo de um telefone padrão. */
@media (max-width: 280px) {
  /* Em visualizadores livres, todo o conteúdo mantém o limite real da viewport. */
  #root > section,
  #root > footer,
  .offer-shell,
  #como > div:not([aria-hidden]),
  .form-grid { min-width: 0; }

  .offer-shell,
  #como > div:not([aria-hidden]),
  .form-grid { width: 100% !important; }

  #oferta header > *,
  #como header > *,
  #cadastro header > *,
  .form-grid > * { min-width: 0; max-width: 100% !important; }

  #oferta h2,
  #como h2,
  #cadastro h2 { overflow-wrap: anywhere; }

  .process-steps { grid-template-columns: minmax(0, 1fr) !important; }
  .process-steps > * { min-width: 0; padding: 18px !important; }
  .process-steps h3,
  .process-steps p { overflow-wrap: anywhere; }

  .form-grid > div:first-child > div { flex-direction: column; align-items: flex-start !important; }
  .store-option-grid [role="radio"] { padding: 12px !important; }
  .store-option-grid [role="radio"] > span:first-child,
  .store-option-grid [role="radio"] > span:first-child > span:first-child { min-width: 0 !important; }
  .store-option-grid [role="radio"] > span:first-child > span:first-child { overflow-wrap: anywhere; }
  .simple-form button { padding-inline: 10px !important; white-space: normal !important; text-align: center; }

  header { padding: 10px 12px !important; }
  .nav-content-shell { gap: 6px; }
  .nav-brand-logo { width: 100px !important; height: 46px !important; }
  .nav-brand-logo img { width: 108px !important; }
  .nav-content-shell > nav { flex: 1 1 0; }
  .nav-content-shell > nav > a {
    width: 72px !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding-inline: 4px !important;
    font-size: .46rem !important;
    line-height: 1.05 !important;
    text-align: center;
    white-space: normal !important;
  }

  #top { padding-inline: 12px !important; }
  .hero-status { gap: 8px !important; padding: 8px 10px !important; }
  .hero-status-scope,
  .hero-status-separator,
  .hero-status-badge { display: none !important; }
  .hero-status-name { font-size: .6rem !important; letter-spacing: .1em !important; }
  #top h1 { font-size: clamp(2.65rem, 22vw, 3.4rem) !important; overflow-wrap: anywhere; }
  #top p { font-size: .92rem !important; overflow-wrap: anywhere; }

  .page-progress-status { left: 8px !important; right: 8px !important; bottom: 8px !important; gap: 8px; padding: 8px 9px 8px 10px; }
  .page-progress-copy { font-size: .54rem; }
  .page-progress-status strong { font-size: 1.1rem; }
}