.top-strip { display: none !important; }

/* Fix: FAQ photo growing when answer expands on coverage pages.
   Force fixed aspect ratio and remove flex: 1 stretching. */
.arap-faq-wrap { align-items: start !important; }
.arap-faq-left { height: auto !important; }
.arap-faq-photo {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: 520px !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  margin-top: 20px !important;
  min-height: 0 !important;
}

/* Standardize hero V2 banner size across all coverage pages */
.arap-hero-v2 {
  min-height: 560px !important;
  padding: 56px 0 0 !important;
}
.arap-hero-v2-wrap {
  min-height: 540px !important;
}
.arap-hero-v2-right {
  min-height: 540px !important;
}
@media (max-width: 900px) {
  .arap-hero-v2 { min-height: 0 !important; padding: 40px 0 !important; }
  .arap-hero-v2-wrap { min-height: 0 !important; }
  .arap-hero-v2-right { min-height: 280px !important; }
}

/* Hero bullets: keep grid symmetric with 5 items */
@media (max-width: 900px) {
  .arap-hero-v2-bullets-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .arap-hero-v2-bullets-grid .arap-hero-v2-bullet:nth-child(5) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    text-align: center;
  }
}
@media (min-width: 901px) {
  /* Desktop: 5 cols evenly */
  .arap-hero-v2-bullets-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* Canal de Ética — fix mobile overflow */
@media (max-width: 720px) {
  .etica { padding: 56px 0 !important; }
  .etica .wrap {
    padding: 0 20px !important;
    overflow-x: hidden;
  }
  .etica-grid,
  .etica-inner,
  .etica .wrap > div {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    width: 100% !important;
  }
  .etica h2, .etica .etica-title {
    font-size: clamp(28px, 7vw, 36px) !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .etica p, .etica .etica-sub {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    word-wrap: break-word;
  }
  .etica .btn,
  .etica .btn-primary {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 16px !important;
    font-size: 13px !important;
    white-space: normal !important;
    text-align: center;
    line-height: 1.3;
  }
  .qr, .etica-qr {
    max-width: 280px !important;
    margin: 0 auto;
  }
}

/* Subtle white halo behind hero text for readability over bg images */
.arap-hero-v2-title,
.arap-hero-v2-eyebrow,
.arap-hero-v2-sub,
.arap-hero-v2-price-row,
.arap-hero-v2-bullet strong,
.arap-hero-v2-bullet span {
  text-shadow:
    0 0 12px rgba(255,255,255,.85),
    0 0 24px rgba(255,255,255,.6) !important;
}
/* Disable shadow on gradient-clipped text — it conflicts with the orange clip */
.arap-hero-v2-title .arap-hero-v2-hl,
.arap-hero-v2-hl {
  text-shadow: none !important;
}
.arap-hero-v2-value,
.arap-hero-v2-currency,
.arap-hero-v2-month {
  text-shadow: 0 0 18px rgba(255,255,255,.8), 0 0 32px rgba(255,255,255,.55) !important;
}

/* Secondary CTA: solid white → navy on hover (was transparent) */
.arap-hero-v2-cta-secondary {
  background: #ffffff !important;
  color: #03257E !important;
  border: 2px solid #03257E !important;
  box-shadow: 0 10px 24px -10px rgba(3,37,126,.28);
}
.arap-hero-v2-cta-secondary:hover {
  background: #03257E !important;
  color: #ffffff !important;
  box-shadow: 0 14px 30px -10px rgba(3,37,126,.45);
}
/* ============================================================
   AGE FIBRA — Mobile-first hardening
   Loaded LAST on every page to override desktop-first defaults
   where they break on small screens.
   ============================================================ */

/* ---------- 1. Base typography & containers ---------- */
@media (max-width: 768px) {
  html { font-size: 15px; }
  .wrap, .section .wrap, .page-hero .wrap { padding-left: 20px; padding-right: 20px; }
  .section { padding: 56px 0 !important; }
  .page-hero { padding: 56px 0 40px !important; }

  h1, .h1 { font-size: clamp(28px, 8vw, 40px) !important; line-height: 1.1 !important; }
  h2, .h2 { font-size: clamp(24px, 6.5vw, 34px) !important; line-height: 1.15 !important; }
  h3 { font-size: clamp(20px, 5vw, 28px) !important; line-height: 1.2 !important; }

  /* Tame oversized clamps still hitting 56–76px on mobile */
  .hero-nu-title, .arap-hero-v2-title, .planos-hero-title,
  .emp-hero-title, .contato-hero-title, .sobre-page-hero h1,
  .blog-idx-title, .blog-post-title, .contr-title, .inst-title,
  .priv-title, .trab-title, .faq-page-title { font-size: clamp(28px, 7.5vw, 40px) !important; }
}

/* ---------- 2. Header / top strip / nav ---------- */
@media (max-width: 1024px) {
  .top-strip { display: none; }
  .header .container,
  .header .wrap { padding: 12px 20px; }
  .header .menu { display: none; }
  .header-mobile-toggle { display: inline-flex !important; }
}
@media (max-width: 768px) {
  .header { position: sticky; top: 0; z-index: 50; }
  .logo-mark .square { width: 44px; height: 44px; padding: 6px 10px; min-width: 44px; }
  .logo-mark .square img { height: 22px; }
  .header-inner { gap: 8px; height: 64px; }
  .header-cta { gap: 6px; }
  .header-cta .header-customer { display: none; }
  .header-cta .btn-primary { padding: 0 14px; height: 36px; font-size: 12px; }
  .footer .logo-mark .square { width: 56px; height: 56px; padding: 10px 14px; }
  .footer .logo-mark .square img { height: 28px; }
}

/* ---------- 3. Hero buttons & CEP search ---------- */
@media (max-width: 600px) {
  .hero-nu-actions,
  .arap-hero-v2-cta-row,
  .planos-hero-cta,
  .emp-hero-cta,
  .priv-actions,
  .contato-hero-actions { flex-direction: column; align-items: stretch !important; gap: 10px !important; }

  .hero-nu-action-primary, .hero-nu-action-secondary,
  .arap-hero-v2-cta-primary, .arap-hero-v2-cta-secondary,
  .planos-hero-cta, .emp-hero-cta,
  .contato-hero-cta, .blog-idx-cta-btn,
  .priv-cta-btn, .trab-submit { width: 100%; justify-content: center; }

  /* CEP modal */
  .cep-modal { padding: 24px 18px 18px; }
  .cep-modal h2 { font-size: 22px !important; }
}

/* ---------- 4. Grids → single column at small widths ---------- */
@media (max-width: 720px) {
  .plans-grid,
  .channels-grid,
  .blog-grid,
  .clube-collage,
  .contato-grid,
  .footer-grid,
  .planos-cards,
  .planos-bl-grid,
  .planos-clube-cards,
  .planos-parceiros-grid,
  .emp-comp-grid,
  .emp-condo-grid,
  .emp-mkt-grid,
  .inst-pillars-grid,
  .inst-docs-grid,
  .inst-stats,
  .trab-perks-grid,
  .trab-info-wrap,
  .ri-docs,
  .ri-pillars,
  .blog-idx-grid,
  .faq-mini,
  .steps-row,
  .lojas-grid,
  .mv-grid,
  .inst-mv-grid,
  .about-pillars,
  .vantagens-grid,
  .vant-mosaic { grid-template-columns: 1fr !important; gap: 16px !important; }
}

@media (max-width: 720px) {
  .arap-hero-v2-wrap,
  .arap-1gb-wrap,
  .planos-bc-inner,
  .planos-familia-inner,
  .planos-parceiros-inner,
  .planos-ra-card,
  .rialma-strip,
  .inst-rialma-card,
  .ri-rialma-section .rialma-strip,
  .refer-form-wrap,
  .hours-block,
  .blog-post-wrap,
  .faq-page-wrap,
  .emp-help-inner,
  .emp-tabs-wrap,
  .history-grid,
  .indique-hero-grid,
  .sobre-hero-grid,
  .blog-idx-featured,
  .contr-help-card,
  .blog-idx-cta,
  .sobre-cta-banner { grid-template-columns: 1fr !important; gap: 24px !important; padding: 28px 22px !important; }
}

/* ---------- 5. About / hero with side image ---------- */
@media (max-width: 768px) {
  .about { grid-template-columns: 1fr !important; }
  .about-video, .about-overlay { position: relative !important; height: 220px !important; width: 100% !important; inset: auto !important; }
  .about-content { padding: 32px 20px !important; grid-column: auto !important; max-width: none !important; }
  .about-title { font-size: clamp(28px, 7vw, 40px) !important; }

  .sobre-page-hero-bg,
  .indique-hero-bg,
  .contato-page-hero-bg { opacity: .35; }
}

/* ---------- 6. Plans carousel ---------- */
@media (max-width: 720px) {
  .plans-carousel-wrap { padding: 0 !important; }
  .plans-carousel { height: auto !important; min-height: 520px; }
  .plan-hero { padding: 28px !important; }
  .plan-hero-speed { font-size: clamp(64px, 18vw, 88px) !important; }
  .plan-hero-title { font-size: clamp(22px, 5vw, 28px) !important; }
  .carousel-arrow {
    width: 44px !important; height: 44px !important;
    top: auto !important; bottom: -64px !important;
  }
  .carousel-arrow.prev { left: 24px !important; right: auto !important; }
  .carousel-arrow.next { right: 24px !important; left: auto !important; }
  .plans-carousel-wrap { padding-bottom: 80px !important; }
}

/* ---------- 7. Tabs (planos / empresa) become scrollable pills ---------- */
@media (max-width: 720px) {
  .plans-tabs, .emp-tabs, .vant-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
    border-radius: 999px;
  }
  .plans-tabs::-webkit-scrollbar,
  .emp-tabs::-webkit-scrollbar,
  .vant-tabs::-webkit-scrollbar { display: none; }
  .plans-tab, .emp-tab, .vant-tab { flex: none !important; white-space: nowrap !important; }
}

/* ---------- 8. Channel cards stay legible ---------- */
@media (max-width: 720px) {
  .channel { padding: 22px 18px !important; }
  .channel-icon { width: 48px !important; height: 48px !important; border-radius: 14px !important; }
  .channel-icon img, .channel-icon svg { width: 24px !important; height: 24px !important; }
}

/* ---------- 9. Footer ---------- */
@media (max-width: 720px) {
  .footer { padding: 56px 0 32px !important; }
  .footer .social { flex-wrap: wrap; }
  .footer .legal {
    flex-direction: column;
    text-align: left;
    gap: 16px;
  }
  .footer .legal > div { text-align: left !important; }
}

/* ---------- 10. Sticky asides become normal flow ---------- */
@media (max-width: 980px) {
  .blog-post-aside,
  .faq-page-aside,
  .history-side { position: relative !important; top: auto !important; }
}

/* ---------- 11. WA float — already mobile, just thumb-friendly ---------- */
@media (max-width: 600px) {
  .wa-float { right: 16px !important; bottom: 16px !important; width: 56px !important; height: 56px !important; }
}

/* ---------- 12. Modals max-height ---------- */
@media (max-width: 600px) {
  .modal {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto;
  }
}

/* ---------- 13. Hero / page hero — kill huge side art on mobile ---------- */
@media (max-width: 768px) {
  .arap-hero-v2 { min-height: auto !important; padding: 48px 0 !important; }
  .arap-hero-v2-right { display: none !important; }
  .planos-hero-bg { background-position: top center !important; }
  .planos-hero-inner {
    padding: 64px 20px !important;
    padding-left: 20px !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  .planos-hero-title { text-align: center !important; max-width: 22ch !important; margin-left: auto !important; margin-right: auto !important; }
  .planos-hero-eyebrow, .planos-hero-sub, .planos-hero-rule { margin-left: auto !important; margin-right: auto !important; }
  .planos-hero-rule { width: 80px !important; }
  .planos-hero-price-box, .planos-hero-actions { justify-content: center !important; }
  .planos-hero-actions { flex-direction: column !important; align-items: stretch !important; width: 100% !important; }
  .planos-familia-bg img,
  .planos-familia-bg-tint { width: 100% !important; }
  .planos-familia-bg::after { background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, var(--navy, #03257E) 75%) !important; }
  .planos-familia-stat { left: 16px !important; bottom: 16px !important; padding: 14px 18px !important; }
  .planos-familia-stat-num { font-size: 32px !important; }
  .planos-familia-chip { display: none !important; }
}

/* ---------- 14. Big number/stat strips ---------- */
@media (max-width: 720px) {
  .planos-bl-stats, .trab-stats, .inst-stats {
    flex-direction: column !important;
    width: 100%;
    border-radius: 22px !important;
    padding: 18px !important;
    gap: 14px !important;
  }
  .planos-bl-stat-sep, .trab-stat-sep, .inst-stat { border-left: none !important; }
  .planos-bl-stat-sep, .trab-stat-sep { width: 60% !important; height: 1px !important; background: rgba(3,37,126,.10) !important; }
}

/* ---------- 15. SEO content sections ---------- */
@media (max-width: 720px) {
  .arap-seo-card { padding: 28px 22px !important; max-width: none !important; }
  .arap-seo-content,
  .blog-post-content,
  .priv-content { font-size: 15px !important; }
  .arap-seo-card h2,
  .blog-post-content h2,
  .priv-content h2 { font-size: clamp(20px, 5.4vw, 26px) !important; }
}

/* ---------- 16. Eyebrow pills shrink slightly ---------- */
@media (max-width: 600px) {
  [class*="-eyebrow"] {
    font-size: 11px !important;
    padding: 7px 14px !important;
  }
}

/* ---------- 17. CTA banners stack ---------- */
@media (max-width: 720px) {
  .emp-ctas-buttons,
  .contr-help-actions,
  .sobre-cta-actions { flex-direction: column; align-items: stretch !important; width: 100%; }
  .emp-ctas-buttons > *,
  .contr-help-actions > *,
  .sobre-cta-actions > * { width: 100%; justify-content: center; }
}

/* ---------- 18. Form fields full width ---------- */
@media (max-width: 600px) {
  .refer-form .row2,
  .trab-form-row2 { grid-template-columns: 1fr !important; }
  .cep-form-row { flex-direction: column !important; align-items: stretch !important; }
  .cep-form-row > * { width: 100% !important; }
}

/* ---------- 19. Map iframe ---------- */
@media (max-width: 600px) {
  .contato-map-frame iframe { height: 340px !important; }
  .contato-map-head { padding: 28px 20px 20px !important; }
}

/* ---------- 20. Coverage chips wrap ---------- */
@media (max-width: 600px) {
  .coverage-chips { gap: 6px !important; }
  .coverage-chip { font-size: 12px !important; padding: 6px 12px !important; }
}