@media (max-width: 1100px) {
    .hero-grid {
      grid-template-columns: 1fr;
    }
  
    .hero-copy {
      max-width: 100%;
    }
  
    .hero h1 {
      max-width: 12ch;
    }
  
    .hero-visual {
      min-height: 640px;
    }
  
    .phone-frame {
      width: min(100%, 390px);
    }
  
    .floating-label.label-top {
      left: 18px;
    }
  
    .floating-label.label-middle {
      right: 20px;
    }
  }
  
  @media (max-width: 940px) {
    .menu-toggle {
      display: inline-flex;
    }
  
    .main-nav {
      position: absolute;
      top: calc(100% + 0.75rem);
      right: 1rem;
      width: min(280px, calc(100vw - 2rem));
      padding: 1rem;
      border-radius: 24px;
      border: 1px solid rgba(16, 16, 16, 0.08);
      background: rgba(255, 255, 255, 0.92);
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(18px);
      display: grid;
      gap: 0.4rem;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-8px);
      transition:
        opacity var(--transition),
        transform var(--transition);
    }
  
    .site-header.is-open .main-nav {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
  
    .main-nav a {
      min-height: 48px;
      padding: 0 0.65rem;
      border-radius: 16px;
    }
  
    .main-nav a:hover,
    .main-nav a:focus-visible {
      background: rgba(16, 16, 16, 0.05);
    }
  
    .main-nav a::after {
      display: none;
    }
  
    .hero {
      padding-top: 2rem;
    }
  
    .hero-strip {
      grid-template-columns: 1fr;
    }
  }
  
  @media (max-width: 640px) {
    :root {
      --header-height: 84px;
    }
  
    .container {
      width: min(calc(100% - 1.25rem), var(--container));
    }
  
    .brand img {
      width: 48px;
      height: 48px;
      border-radius: 15px;
    }
  
    .brand-copy strong {
      font-size: 1rem;
    }
  
    .hero h1 {
      max-width: 11ch;
      font-size: clamp(2.6rem, 12vw, 4.35rem);
    }
  
    .hero-text {
      max-width: 100%;
    }
  
    .store-actions {
      flex-direction: column;
    }
  
    .btn {
      width: 100%;
    }
  
    .hero-visual {
      min-height: 560px;
    }
  
    .visual-road {
      opacity: 0.95;
    }
  
    .road-one {
      width: 360px;
      height: 120px;
      top: 36px;
      right: -40px;
    }
  
    .road-two {
      width: 390px;
      height: 120px;
      bottom: 56px;
      left: -52px;
    }
  
    .phone-frame {
      width: min(100%, 340px);
      border-radius: 34px;
      padding: 12px;
    }
  
    .phone-screen {
      padding: 1.6rem 1rem 1rem;
      border-radius: 24px;
    }
  
    .screen-grid {
      grid-template-columns: 1fr;
    }
  
    .screen-card.wide {
      grid-column: auto;
    }
  
    .floating-label {
      font-size: 0.68rem;
      padding: 0.72rem 0.9rem;
    }
  
    .label-top {
      top: 78px;
      left: 4px;
    }
  
    .label-middle {
      top: auto;
      right: 4px;
      bottom: 150px;
    }
  
    .label-bottom {
      left: 16px;
      bottom: 44px;
    }
  }
  
  @media (max-width: 440px) {
    .hero {
      padding-bottom: 3.25rem;
    }
  
    .eyebrow {
      margin-bottom: 1rem;
    }
  
    .hero-text {
      margin-top: 1.1rem;
    }
  
    .mini-card {
      min-height: 132px;
      padding: 1rem;
    }
  
    .mini-card strong {
      font-size: 1.15rem;
    }
  
    .hero-visual {
      min-height: 500px;
    }
  }
  
  @media (max-width: 360px) {
    .container {
      width: min(calc(100% - 1rem), var(--container));
    }
  
    .brand-copy small {
      display: none;
    }
  
    .hero h1 {
      font-size: clamp(2.3rem, 11.8vw, 3.7rem);
    }
  
    .device-hint {
      font-size: 0.87rem;
    }
  
    .phone-frame {
      width: min(100%, 300px);
    }
  
    .route-track {
      min-height: 78px;
    }
  }
  
  @media (max-width: 320px) {
    .btn {
      padding-inline: 1rem;
      min-height: 52px;
    }
  
    .mini-card strong {
      font-size: 1.02rem;
    }
  
    .floating-label {
      font-size: 0.62rem;
      letter-spacing: 0.08em;
    }
  
    .phone-frame {
      width: min(100%, 286px);
    }
  }


  /* ─── BLOCO 2: PERFIS ─── */

@media (max-width: 940px) {
    .profiles-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .profile-card[data-index="3"] {
      grid-column: 1 / -1;
    }
  }
  
  @media (max-width: 640px) {
    .profiles-grid {
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }
    .profile-card[data-index="3"] { grid-column: auto; }
    .profile-card { min-height: auto; }
    .profiles-title { font-size: clamp(2.6rem, 12vw, 4.35rem); }
    .profile-num { font-size: clamp(3.5rem, 15vw, 5rem); }
    .route-node { width: 10px; height: 10px; }
  }
  
  @media (max-width: 440px) {
    .profiles { padding: 3.5rem 0; }
    .profile-card { padding: 1.5rem; }
    .profile-actions { flex-direction: column; gap: var(--space-3); }
    .profile-actions .btn { width: 100%; }
    .profiles-header { margin-bottom: 1.75rem; }
  }
  
  @media (max-width: 360px) {
    .profiles-title { font-size: clamp(2.3rem, 11.8vw, 3.7rem); }
    .profile-num { font-size: 3.1rem; }
    .speed-line { opacity: 0.75; }
  }
  
  @media (max-width: 320px) {
    .profiles { padding: 3rem 0; }
    .profile-card { padding: 1.2rem; }
    .profile-num { font-size: 2.9rem; }
    .profile-headline { font-size: 1.1rem; }
  }
  
  @media (hover: none) {
    .profile-card:hover { transform: none; box-shadow: none; }
  }


  /* ─── BLOCO 3: SÓCIO LOCAL ─── */

@media (max-width: 1080px) {
    .partner-grid {
      grid-template-columns: 1fr;
      gap: clamp(2.5rem, 4vw, 4rem);
    }
    .partner-copy { max-width: 100%; }
    .partner-radar { display: none; }
  }
  
  @media (max-width: 640px) {
    .partner-title { font-size: clamp(2.6rem, 12vw, 4.35rem); }
  
    .partner-form-wrap {
      padding: 1.5rem;
      border-radius: var(--radius-sm);
    }
  
    .form-row--2 {
      grid-template-columns: 1fr 80px;
      gap: var(--space-3);
    }
  }
  
  @media (max-width: 440px) {
    .partner { padding: 3.5rem 0; }
  
    .partner-title { font-size: clamp(2.35rem, 11.5vw, 3.5rem); }
  
    .form-row--2 {
      grid-template-columns: 1fr;
    }
  
    .partner-form-wrap { padding: 1.25rem; }
  
    .partner-benefits { gap: var(--space-5); }
  }
  
  @media (max-width: 360px) {
    .partner-title { font-size: clamp(2.1rem, 11vw, 3rem); }
  
    .form-field input,
    .form-field select { height: 48px; font-size: 0.9rem; }
  
    .btn-form { min-height: 50px; }
  }
  
  @media (max-width: 320px) {
    .partner { padding: 3rem 0; }
    .partner-form-wrap { padding: 1rem; }
    .partner-form { gap: var(--space-4); }
    .form-lead { font-size: 0.85rem; }
  }

  /* ─── BLOCO 4: COMO FUNCIONA ─── */

@media (max-width: 940px) {
    .steps-list::before { left: 14%; right: 14%; }
  }
  
  @media (max-width: 640px) {
    .howto-title { font-size: clamp(2.6rem, 12vw, 4.35rem); }
  
    .steps-list {
      grid-template-columns: 1fr;
      gap: var(--space-8);
      padding-left: var(--space-10);
    }
  
    /* Linha vertical */
    .steps-list::before {
      top: 0;
      bottom: 0;
      left: 2rem;
      right: auto;
      width: 2px;
      height: auto;
      background: repeating-linear-gradient(
        180deg,
        rgba(255,255,255,0.16) 0 18px,
        transparent 18px 38px
      );
      background-size: 2px 38px;
      animation: dashSlideV 1.6s linear infinite;
    }
  
    @keyframes dashSlideV {
      0%   { background-position: 0 0; }
      100% { background-position: 0 38px; }
    }
  
    .step-num { font-size: 3.5rem; }
  
    .step-body p { max-width: 100%; }
  
    .howto-tabs { width: 100%; }
    .tab-btn { flex: 1; text-align: center; padding-inline: 0.75rem; }
  
    .howto-cta { flex-direction: column; }
    .howto-cta .btn,
    .howto-cta .btn-ghost-light { width: 100%; }
  }
  
  @media (max-width: 440px) {
    .howto { padding: 3.5rem 0; }
    .howto-header { margin-bottom: 1.75rem; }
    .howto-tabs { margin-bottom: 2rem; }
    .step-num { font-size: 3rem; }
    .steps-list { padding-left: var(--space-8); }
    .steps-list::before { left: 1.6rem; }
  }
  
  @media (max-width: 360px) {
    .howto-title { font-size: clamp(2.3rem, 11.8vw, 3.7rem); }
    .step-num { font-size: 2.7rem; }
    .tab-btn { font-size: 0.88rem; padding: 0.65rem 0.75rem; }
  }
  
  @media (max-width: 320px) {
    .howto { padding: 3rem 0; }
    .steps-list { padding-left: var(--space-6); gap: var(--space-6); }
    .steps-list::before { left: 1.2rem; }
    .step-num { font-size: 2.4rem; }
    .step-body h3 { font-size: 1.1rem; }
  }
  
  @media (hover: none) {
    .tab-btn:not(.tab-btn--active):hover { background: transparent; color: rgba(255,255,255,0.45); }
    .btn-ghost-light:hover { transform: none; }
  }


  /* ─── RODAPÉ ─── */

@media (max-width: 1080px) {
    .footer-grid {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
    .footer-brand { max-width: 100%; }
    .footer-tagline { max-width: 52ch; }
  }
  
  @media (max-width: 760px) {
    .footer-nav {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-6);
    }
    .footer-nav-col:last-child {
      grid-column: 1 / -1;
    }
  }
  
  @media (max-width: 640px) {
    .footer-bottom-row {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-5);
    }
    .footer-badges { width: 100%; }
    .store-badge { flex: 1; justify-content: center; }
  }
  
  @media (max-width: 440px) {
    .footer-nav {
      grid-template-columns: 1fr;
      gap: var(--space-5);
    }
    .footer-nav-col:last-child { grid-column: auto; }
    .footer-nav-col a { min-height: 40px; }
    .brand--footer img { width: 46px; height: 46px; }
  }
  
  @media (max-width: 360px) {
    .footer-tagline { font-size: 0.88rem; }
    .footer-nav-title { font-size: 0.72rem; }
    .footer-nav-col a { font-size: 0.9rem; }
    .store-badge { height: 38px; font-size: 0.72rem; }
  }
  
  @media (max-width: 320px) {
    .footer-badges { flex-direction: column; }
    .store-badge { width: 100%; }
    .brand--footer .brand-copy strong { font-size: 0.95rem; }
  }
  
  @media (hover: none) {
    .footer-nav-col a:hover { color: rgba(255,255,255,0.55); }
    .store-badge:hover { transform: none; }
  }

  /* ── Links legais ── */
@media (max-width: 640px) {
  .footer-legal { gap: 0.4rem; }
  .footer-legal-links a { font-size: 0.75rem; }
}
@media (max-width: 320px) {
  .footer-legal-links { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .legal-dot { display: none; }
}


/* ─── MODAL PLAY STORE ─── */

@media (max-width: 640px) {
  .ps-modal {
    border-radius: 28px;
    padding: 1.75rem 1.5rem;
  }
  .ps-modal-title {
    font-size: clamp(1.6rem, 8vw, 2.1rem);
  }
}

@media (max-width: 440px) {
  .ps-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .ps-modal {
    width: 100%;
    border-radius: 28px 28px 0 0;
    padding: 2rem 1.5rem 2.25rem;
    transform: translateY(100%);
  }
  .ps-modal-overlay.is-open .ps-modal {
    transform: translateY(0);
  }
  .ps-modal-actions {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .ps-modal-btn {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: auto;
    padding: 1.15rem 1.25rem;
    gap: 1rem;
  }
  .ps-btn-desc { max-width: 18ch; }
}

@media (max-width: 360px) {
  .ps-modal { padding: 1.75rem 1.25rem 2rem; }
  .ps-modal-title { font-size: 1.55rem; }
  .ps-btn-label { font-size: 1rem; }
}

@media (max-width: 320px) {
  .ps-modal { padding: 1.5rem 1rem 1.75rem; }
  .ps-modal-eyebrow { font-size: 0.7rem; }
  .ps-modal-sub { font-size: 0.82rem; }
}