/* ============================================================
   AzonCity Landing · Mobile UX Refinements (iFood-inspired)
   Loaded after all other CSS so it wins specificity ties.
   ============================================================ */

/* Permanent divider between header and first hero (mobile only) */
@media (max-width: 760px) {
  .site-header { border-bottom: 1px solid var(--border) !important; }
}

/* ============================================================
   TABLET / iPad (761–1024px) — keep desktop 2-col layouts,
   just tighten gaps and scale mockups so they fit.
   ============================================================ */
@media (min-width: 761px) and (max-width: 1024px) {
  /* tighter column gaps for the 2-col sections */
  .pain-grid { gap: 32px !important; }
  .how-grid  { gap: 32px !important; }
  .cta-card  { gap: 28px !important; }
  .vit-grid  { gap: 32px !important; }
  .aud-desk-hero { gap: 32px !important; }

  /* scale the floating mockups down so they don't overflow their column */
  .pain-visual { min-height: 460px !important; }
  .pain-hero-img { max-width: 92% !important; max-height: 420px !important; }
  .how-phones { transform: scale(0.82); transform-origin: center; }
  .cta-hand-img { width: 122% !important; max-width: 460px !important; }

  /* CTA card heading a touch smaller to balance the 2-col */
  .cta-card-text h2 { font-size: clamp(26px, 4.4vw, 34px) !important; }
}

/* ─────────────────────────────────────────────────────────────
   COMO FUNCIONA — hide desktop section on mobile
   ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .how-desk { display: none !important; }
  #how-desk-inner { display: none !important; }
  section#como-funciona { padding: 0 !important; background: #0F172A !important; }
}
   ───────────────────────────────────────────────────────────── */
.hero.hero-v2 {
  background: #fff !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--divider);
  overflow: hidden;
}
.hero.hero-v2 .container.hero-track {
  max-width: none;
  padding: 0;
  margin: 0;
}
.hero.hero-v2 .banner.banner-img-mode {
  padding: 0 !important;
  margin: 0 !important;
}
.hero.hero-v2 .hero-controls {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  padding: 14px 0 18px;
  background: #fff;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   PASSO 1 — Hide any stray fixed bottom tab bar
   ───────────────────────────────────────────────────────────── */
/* Ensure phone-mockup's TabBar never escapes its container */
.how-ph-b, .phone-wrap { overflow: hidden !important; }

/* ─────────────────────────────────────────────────────────────
   PASSO 2 — A Solução: numbered list on mobile
   ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* Numbered list container */
  .feat-grid-v2 {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  .fc2 {
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    padding: 16px 14px !important;
    gap: 14px !important;
  }
  .fc2:last-child { border-bottom: none !important; }

  /* Replace icon head with number badge */
  .fc2-head {
    padding: 0 !important;
    background: transparent !important;
    border-bottom: none !important;
    display: none !important;
  }
  .fc2-icon { display: none !important; }
  .fc2-head::after {
    content: attr(data-num);
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand-surface);
    color: var(--brand);
    font: 700 15px/1 var(--font-display);
    flex-shrink: 0;
  }
  /* Pass data-num to the head child via parent */
  .fc2[data-num] .fc2-head::after { content: attr(data-num) !important; }
  /* Can't select parent from child, so use ::before on .fc2 instead */
  .fc2::before {
    content: attr(data-num);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand-surface);
    color: var(--brand);
    font: 700 15px/1 var(--font-display);
    flex-shrink: 0;
    align-self: flex-start;
  }
  .fc2-head { display: none !important; }
  .fc2-body { padding: 0 !important; gap: 4px !important; }
  .fc2-title { font-size: 15px !important; font-weight: 700 !important; }
  .fc2-desc { font-size: 13px !important; }
}

/* ─────────────────────────────────────────────────────────────
   PASSO 3 — Para Quem É: horizontal photo strip
   ───────────────────────────────────────────────────────────── */

/* Social proof strip — hidden on desktop, shown on mobile */
.aud-sp-strip {
  display: none;
  align-items: center;
  gap: 14px;
  background: #F8FAFF;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.aud-sp-avatars { display: flex; align-items: center; }
.aud-sp-count {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font: 700 10px/1 var(--font-sans);
  border: 2.5px solid #fff;
  margin-left: -10px; position: relative; z-index: 5; flex-shrink: 0;
}
.aud-sp-stars { font-size: 13px; color: #F59E0B; margin-bottom: 2px; }
.aud-sp-stars strong { color: var(--ink); font: 700 13px/1 var(--font-sans); }
.aud-sp-label { font: 400 12px/1.4 var(--font-sans); color: var(--ink-muted); }

@media (max-width: 760px) {
  /* Show social proof strip on mobile */
  .aud-sp-strip { display: flex !important; }

  /* Horizontal scrollable photo strip */
  .aud-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 10px !important;
    padding-bottom: 4px !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin: 0 -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .aud-grid::-webkit-scrollbar { display: none; }
  .aud-grid > * {
    flex: 0 0 42vw !important;
    scroll-snap-align: start !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    gap: 0 !important;
  }
  /* Large rectangular photo */
  .aud-grid > * img {
    width: 42vw !important;
    height: 48vw !important;
    max-height: 200px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
    object-position: top center !important;
    border: none !important;
    flex-shrink: 0 !important;
    margin-bottom: 8px !important;
  }
  /* Icon CTA card */
  .aud-grid > *:last-child {
    border: 2px solid var(--brand) !important;
    border-radius: 14px !important;
    background: var(--brand-surface) !important;
    padding: 16px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    height: 48vw !important;
    max-height: 200px !important;
  }
  .aud-grid > * h3 {
    font: 700 13px/1.3 var(--font-sans) !important;
    color: var(--ink) !important;
    padding: 0 2px !important;
  }
  /* Hide description */
  .aud-grid > * p { display: none !important; }
  /* Icon placeholder */
  .aud-grid > * span[style*="border-radius"] {
    width: 42vw !important;
    height: 48vw !important;
    max-height: 200px !important;
    border-radius: 14px !important;
    flex-shrink: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   PASSO 4 — Hero: white space fix
   ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* mob-hero-extra: remove excess padding, ensure proper spacing */
  .mob-hero-extra {
    padding-bottom: 8px !important;
    gap: 18px !important;
  }
  .mob-social-proof {
    margin-bottom: 8px !important;
  }
  /* Hero section: no excess bottom padding */
  #top { padding-bottom: 0 !important; }
}

/* ── Mobile hero extra block: hidden on desktop ── */
.mob-hero-extra { display: none; }
.hero-trust-desktop { display: flex; }

@media (max-width: 760px) {
  /* Show mobile block, hide desktop trust */
  .mob-hero-extra { display: flex; flex-direction: column; gap: 20px; width: 100%; margin-top: 20px; }
  .hero-trust-desktop { display: none !important; }

  /* Hero: single column, visual first on small screens */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .hero-grid > div:first-child { order: 2; padding-top: 0; }
  .hero-grid > div:last-child  { order: 1; min-height: 320px !important; margin-bottom: 20px; }

  /* Hero headline — large, full-width */
  #top .dual.lg {
    font-size: clamp(32px, 9vw, 44px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 14px !important;
  }
  #top .lead.lg {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin-bottom: 0 !important;
  }
  /* Hide desktop CTAs row inside hero on mobile */
  #top .cta-row,
  #top div[style*="gap: 12px"][style*="flexWrap"] { display: none !important; }
  /* Hide overline on mobile */
  #top .overline { display: none !important; }

  /* ── Benefits list ── */
  .mob-benefits {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 12px;
  }
  .mob-benefits li {
    display: flex; align-items: center; gap: 12px;
    font: 600 16px/1.3 var(--font-sans);
    color: var(--ink);
  }
  .mob-check-ic { flex-shrink: 0; line-height: 0; }

  /* ── Full-width CTA ── */
  .mob-cta-primary {
    display: flex; align-items: center; justify-content: center;
    width: 100%; padding: 18px;
    font: 800 16px/1 var(--font-sans);
    letter-spacing: 0.03em;
    color: #fff;
    background: linear-gradient(135deg, #FF6A00, #FF8C38);
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(255,106,0,0.38);
    transition: all 160ms var(--ease-out);
  }
  .mob-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255,106,0,0.5); }

  /* ── Trust row ── */
  .mob-trust-row {
    display: flex; flex-wrap: wrap; gap: 8px 16px;
    justify-content: center;
  }
  .mob-trust-row span {
    display: inline-flex; align-items: center; gap: 5px;
    font: 500 11.5px/1 var(--font-sans);
    color: var(--ink-muted);
  }

  /* ── Social proof card ── */
  .mob-social-proof {
    background: #F8FAFF;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .mob-sp-left {
    display: flex; align-items: flex-start; gap: 12px;
  }
  .mob-avatar-stack {
    display: flex; flex-direction: row;
  }
  .mob-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -8px;
    display: flex; align-items: center; justify-content: center;
    font: 700 12px/1 var(--font-sans);
    color: #fff;
    flex-shrink: 0;
  }
  .mob-avatar:first-child { margin-left: 0; }
  .mob-sp-stars {
    font-size: 13px; color: #F59E0B;
    line-height: 1; margin-bottom: 4px;
  }
  .mob-sp-text {
    font: 400 12.5px/1.45 var(--font-sans);
    color: var(--ink-muted);
  }
  .mob-sp-text strong { color: var(--ink); font-weight: 700; }
  .mob-sp-badges {
    display: flex; flex-wrap: wrap; gap: 6px 16px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  .mob-sp-badges span {
    display: inline-flex; align-items: center; gap: 5px;
    font: 500 11px/1 var(--font-sans);
    color: var(--ink-muted);
  }

  /* ── Section padding override ── */
  section { padding: 36px 0 !important; }
  .section-head { margin-bottom: 24px !important; }
}

/* ─────────────────────────────────────────────────────────────
   GENERIC — section tightening
   ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .section-head { margin: 0 auto 28px !important; gap: 12px !important; }
  .section-head .lead { font-size: 14.5px !important; line-height: 1.55 !important; }
  .dual { font-size: clamp(24px, 7vw, 30px) !important; line-height: 1.15 !important; }
  .dual.sm { font-size: clamp(22px, 6.5vw, 28px) !important; }
  .lead { font-size: 14.5px !important; line-height: 1.55 !important; }
  .overline { padding: 5px 11px !important; font-size: 10.5px !important; }
}

/* ─────────────────────────────────────────────────────────────
   HEADER — tighten on mobile
   ───────────────────────────────────────────────────────────── */
   ───────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .hero { padding: 12px 0 !important; }
  .hero-track { min-height: 0 !important; height: auto !important; }
  .banner { height: auto !important; min-height: 0 !important; }
  .banner.active { height: auto !important; min-height: 0 !important; }
  .banner-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 8px 0 0 !important;
    min-height: 0 !important;
  }
  /* visual first, then text */
  .banner-grid > .banner-text { order: 2; max-width: 100% !important; }
  .banner-grid > .banner-visual { order: 1; min-height: 160px !important; max-height: 180px !important; padding: 0 !important; }
  .banner-grid > .banner-visual > div { min-height: 160px !important; max-height: 180px !important; }

  /* shrink internal visual elements */
  .visual-agenda img,
  .visual-discount img { max-height: 170px !important; max-width: 78% !important; }
  .price-card { max-width: 200px !important; padding: 12px 16px !important; transform: rotate(-1deg) scale(0.78) !important; }
  .price-new-v2 .num { font-size: 36px !important; }
  .discount-coin { transform: scale(0.66); top: -8px !important; right: -4px !important; }
  .blob.blob-bg-1, .blob.blob-bg-2 { width: 96px !important; height: 96px !important; opacity: 0.6 !important; }

  /* hero headline + sub — tight */
  .banner-text { padding: 0 !important; }
  .banner-text .dual { font-size: clamp(22px, 6.8vw, 28px) !important; line-height: 1.1 !important; letter-spacing: -0.025em !important; margin: 0 0 8px !important; }
  .banner-text .lead { font-size: 13.5px !important; line-height: 1.5 !important; margin: 0 0 12px !important; }
  .overline-pill { font-size: 10px !important; padding: 4px 10px !important; margin-bottom: 8px !important; }

  /* CTAs stack full-width */
  .cta-row {
    flex-direction: column;
    width: 100%;
    gap: 8px !important;
  }
  .cta-row .btn {
    width: 100%;
    justify-content: center;
    padding: 12px 18px !important;
    font-size: 14px !important;
  }
  .hero-plans-link {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    font-size: 13px;
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* controls smaller and centered */
  .hero-controls { position: relative !important; bottom: auto !important; left: auto !important; transform: none !important; margin: 12px auto 0 !important; gap: 12px !important; }
  .hero-arrow { width: 30px !important; height: 30px !important; }

  /* trust strip */
  .trust-strip {
    margin-top: 14px !important;
    padding: 12px 16px 2px !important;
    gap: 8px 14px !important;
    font-size: 11.5px !important;
  }
  .trust-strip span { gap: 4px !important; }
}

/* even smaller screens */
@media (max-width: 480px) {
  .banner-grid > .banner-visual { min-height: 140px !important; max-height: 160px !important; }
  .banner-grid > .banner-visual > div { min-height: 140px !important; max-height: 160px !important; }
  .visual-agenda img, .visual-discount img { max-height: 150px !important; }
  .blob.blob-bg-1, .blob.blob-bg-2 { width: 80px !important; height: 80px !important; }
  .trust-strip { font-size: 11px !important; gap: 6px 12px !important; }
  .banner-text .dual { font-size: 23px !important; }
  .banner-text .lead { font-size: 13px !important; }
}

/* ─────────────────────────────────────────────────────────────
   PAIN section — single column + smaller visual
   ───────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .pain-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .pain-grid > div:last-child {
    height: 360px !important;
    margin: 0 auto;
    max-width: 360px;
  }
  .pain-grid li { gap: 12px !important; }
  .pain-grid li > span:first-child { width: 40px !important; height: 40px !important; font-size: 20px !important; }
  .pain-grid li > div > div { font-size: 15px !important; }
  .pain-grid li > div > p { font-size: 13.5px !important; }
}

/* ─────────────────────────────────────────────────────────────
   SOLUTION EM BREVE strip — responsive
   ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Wrap the header row so subtitle falls below the badge */
  #solucao .feat-coming-header { flex-wrap: wrap !important; gap: 8px !important; }
  /* Reduce strip padding on narrow screens */
  #solucao .feat-coming-strip { padding: 20px 16px 18px !important; }
  /* Single column for coming-soon cards on mobile */
  .coming-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* ─────────────────────────────────────────────────────────────
   SOLUTION — features grid → single column
   ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .feat-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .feat-grid > div {
    padding: 20px 18px !important;
  }
  .feat-grid h3 { font-size: 15.5px !important; }
  .feat-grid p { font-size: 13.5px !important; }
}

/* ─────────────────────────────────────────────────────────────
   HOW IT WORKS — show only center phone, tighten steps
   ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .how-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .how-phones { transform: scale(0.92); transform-origin: top center; }
  .how-ph-a, .how-ph-c { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   AUDIENCE — features grid → single column
   ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .aud-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* cards are <a> elements now, not <div> */
  .aud-grid > * {
    padding: 16px 16px !important;
    gap: 12px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   PRICING — horizontal scroll snap (iFood-style) — phones only
   (tablet 601–960px uses pricing-v2.css 1-col centered layout)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .pricing { padding: 44px 0 64px !important; }
  .pricing-wrap > .section-head { margin-bottom: 22px !important; padding: 0 18px; }

  /* scroll snap horizontal */
  .plans {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px !important;
    padding: 12px 18px 22px !important;
    margin: 0 -18px !important;
    width: auto !important;
    grid-template-columns: none !important;
  }
  .plans::-webkit-scrollbar { display: none; }
  .plans > .plan {
    flex: 0 0 86% !important;
    max-width: 86% !important;
    min-width: 0 !important;
    scroll-snap-align: center;
    transform: none !important;
    margin: 0 !important;
  }
  .plans > .plan.featured { transform: none !important; }

  /* scroll hint */
  .plans-scroll-hint {
    text-align: center;
    margin: 0 0 8px;
    font: 500 11px/1 var(--font-sans);
    color: var(--ink-subtle);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* plan card body */
  .plan { padding: 24px 20px 22px !important; }
  .plan-name { font-size: 22px !important; }
  .plan-amount { font-size: 40px !important; }
}

/* ─────────────────────────────────────────────────────────────
   VITRINE SHOWCASE — single column, smaller phone
   ───────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  #experimente .container > div { gap: 28px !important; }
  #experimente h2 { font-size: 26px !important; }
}

/* ─────────────────────────────────────────────────────────────
   GUARANTEE — tighten
   ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  section[style*="success-surface"] { padding: 56px 0 !important; }
  section[style*="success-surface"] > .container > div:first-child { width: 64px !important; height: 64px !important; margin-bottom: 14px !important; }
}

/* ─────────────────────────────────────────────────────────────
   FAQ — tighter card padding
   ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  #duvidas button[type="button"], #duvidas button:not([type]) { padding: 16px 16px !important; font-size: 14.5px !important; }
  #duvidas p { padding: 0 16px 16px !important; font-size: 13.5px !important; }
}

/* ─────────────────────────────────────────────────────────────
   CTA FINAL — tighten + smaller pill button
   ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  section[style*="action"][style*="96px"] { padding: 60px 0 !important; }
  section[style*="action"] h2 { font-size: clamp(24px, 7.5vw, 32px) !important; }
  section[style*="action"] a[href="#wpp"][style*="bigpill"],
  section[style*="action"] a[href="#wpp"] {
    padding: 15px 22px !important;
    font-size: 14px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  footer { padding-top: 40px !important; }
  .footer-grid { gap: 24px !important; }
}

/* ─────────────────────────────────────────────────────────────
   SOLUTION — 2-col grid on mobile (feat-grid-v2 already handles this
   via its own responsive CSS; just tighten the coming strip)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .feat-coming-strip { padding: 16px !important; }
  .scroll-hint { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   PARA QUEM É — 2-col compact photo grid on mobile
   ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .aud-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* Each card: column layout, centered, no description */
  .aud-grid > * {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 14px 10px !important;
    gap: 8px !important;
    justify-content: flex-start !important;
  }
  /* Hide description text — title + photo is enough on mobile */
  .aud-grid > * p { display: none !important; }
  /* Circular photos */
  .aud-grid > * img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }
  /* Icon placeholder (CTA card) */
  .aud-grid > * span[style*="border-radius"] {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
  }
  /* Title smaller */
  .aud-grid > * h3 { font-size: 13px !important; line-height: 1.3 !important; }
}

/* ─────────────────────────────────────────────────────────────
   SECTION PADDING — further tighten on mobile
   ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  section { padding: 36px 0 !important; }
  .section-head { margin-bottom: 24px !important; }
  .section-head h2 { font-size: clamp(22px, 7vw, 32px) !important; }
}
@media (max-width: 640px) {
  .coupon-toast {
    top: auto !important;
    bottom: 12px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    box-shadow: 0 -8px 30px rgba(17,24,39,0.18), 0 4px 12px rgba(17,24,39,0.06) !important;
  }
  .coupon-toast-title { font-size: 13px !important; }
  .coupon-toast-sub { font-size: 11.5px !important; }
}

/* ============================================================
   MOBILE REFINEMENT v2 · Sr. UI/UX consolidation pass
   Loaded last — authoritative. Goals: consistent lateral
   margins, vertical rhythm, card system, no h-scroll.
   ============================================================ */
@media (max-width: 760px) {
  /* —— 1. No accidental horizontal scroll —— */
  html, body { overflow-x: hidden !important; }

  /* —— 2. Consistent lateral gutters (22px) —— */
  .container { padding-left: 22px !important; padding-right: 22px !important; }

  /* —— 3. Vertical rhythm: one value instead of 36/44px tug-of-war —— */
  section { padding-top: 56px !important; padding-bottom: 56px !important; }
  section#como-funciona { padding: 0 !important; }

  /* —— 4. Section heads: tighter title→sub gap, even bottom margin —— */
  .section-head { margin-bottom: 28px !important; gap: 14px !important; }
  .section-head h2, .dual { text-wrap: balance; }

  /* —— 5. Unified card system: same radius, border, shadow —— */
  .feat-grid > div,
  .coming-grid > div,
  .plan,
  #duvidas > div,
  .mob-social-proof,
  .aud-sp-strip {
    border-radius: 18px !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 1px 3px rgba(16,24,40,0.04), 0 6px 16px rgba(16,24,40,0.05) !important;
  }
}

/* —— 6. PARA QUEM É — resolve flex-strip vs 2-col conflict.
   Force a clean 2-col grid (no cut-off cards). —— */
@media (max-width: 760px) {
  .aud-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    overflow: visible !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }
  .aud-grid > * {
    flex: none !important;
    width: auto !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 16px 12px !important;
    gap: 10px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(16,24,40,0.04) !important;
  }
  .aud-grid > *:last-child {
    border: 1.5px solid var(--brand) !important;
    background: var(--brand-surface) !important;
  }
  .aud-grid > * img {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: top center !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    max-height: none !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 8px rgba(16,24,40,0.12) !important;
  }
  .aud-grid > * span[style*="border-radius"] {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    max-height: none !important;
  }
  .aud-grid > * h3 { font-size: 13px !important; line-height: 1.3 !important; padding: 0 !important; }
  .aud-grid > * p { display: none !important; }
}

/* —— 7. Hero: balance headline wrap & calm mockup weight —— */
@media (max-width: 760px) {
  .mob-hero-full .dual, .mob-hero-extra .dual { text-wrap: balance !important; }
  .mob-cta-primary { height: 58px !important; padding: 0 22px !important; }
}

/* —— 8. Pricing: clearer scroll affordance, peek next card (phones) —— */
@media (max-width: 600px) {
  .plans > .plan { flex: 0 0 84% !important; max-width: 84% !important; }
  .plans-scroll-hint { display: block !important; }
}