/* INMO CAPTA PRO — MOBILE FIRST OVERRIDES
   Desktop permanece intacto. Esta camada prioriza conversão e legibilidade em celular. */

@media (max-width: 820px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  body { padding-bottom:82px; }
  *, *::before, *::after { box-sizing:border-box; }
  img, svg, video { max-width:100%; }

  .container {
    width:100% !important;
    max-width:none !important;
    padding-left:16px !important;
    padding-right:16px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .topbar {
    padding:7px 12px !important;
    font-size:10px !important;
    line-height:1.35 !important;
    letter-spacing:.035em !important;
    white-space:normal !important;
  }

  .nav { min-height:58px !important; }
  .nav-inner { min-height:58px !important; justify-content:center !important; }
  .brand { font-size:17px !important; }
  .brand img { width:29px !important; height:29px !important; }
  .nav-pill { display:none !important; }

  /* HERO: tudo em coluna, sem cortes, mockup específico 4:5 */
  .hero.tangible-hero {
    padding:26px 0 34px !important;
    min-height:0 !important;
  }
  .hero-content {
    width:100% !important;
    max-width:none !important;
    margin:0 auto !important;
    text-align:center !important;
  }
  .hero-tags {
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:7px !important;
    margin-bottom:13px !important;
  }
  .hero-tags span {
    font-size:9px !important;
    padding:7px 9px !important;
  }
  .hero h1 {
    max-width:100% !important;
    margin:0 auto 13px !important;
    font-size:clamp(29px, 8.3vw, 38px) !important;
    line-height:1.02 !important;
    letter-spacing:-.035em !important;
  }
  .hero .lead {
    max-width:560px !important;
    margin:0 auto 15px !important;
    font-size:16px !important;
    line-height:1.48 !important;
  }

  .visual-formats {
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
    margin:16px 0 12px !important;
    align-items:start !important;
  }
  .format-app {
    min-width:0 !important;
    width:100% !important;
    gap:3px !important;
  }
  .format-app img { width:42px !important; height:42px !important; }
  .format-app b { font-size:13px !important; }
  .format-app small { font-size:8px !important; }

  .hero-workbench.device-kit {
    width:100% !important;
    max-width:520px !important;
    margin:12px auto 10px !important;
    border-radius:14px !important;
    overflow:hidden !important;
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:0 18px 44px rgba(0,0,0,.30) !important;
    background:#0b1f33 !important;
  }
  .hero-workbench.device-kit picture,
  .hero-workbench.device-kit picture img {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    aspect-ratio:auto !important;
    margin:0 !important;
  }
  .hero-note {
    max-width:520px !important;
    margin:12px auto 16px !important;
    padding:0 4px !important;
    font-size:14px !important;
    line-height:1.45 !important;
  }
  .hero .btn.btn-xl {
    display:flex !important;
    width:100% !important;
    min-height:56px !important;
    padding:14px 16px !important;
    margin:0 auto !important;
    border-radius:14px !important;
    font-size:15px !important;
    line-height:1.25 !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .hero .micro {
    max-width:520px !important;
    margin:12px auto 0 !important;
    font-size:11px !important;
    line-height:1.4 !important;
  }

  /* Seções com respiro curto e leitura vertical */
  .section { padding:44px 0 !important; }
  .section-intro { margin-bottom:24px !important; }
  .section-intro h2, .section h2, .final-cta h2 {
    font-size:clamp(26px, 7vw, 34px) !important;
    line-height:1.08 !important;
    letter-spacing:-.025em !important;
  }
  .section-intro .lead, .section .lead, .final-cta .lead {
    font-size:15px !important;
    line-height:1.5 !important;
  }
  .eyebrow, .resource-number { font-size:10px !important; }

  .resource-row,
  .resource-row.word-row,
  .offer-body,
  .offer-body-rich,
  .aud-grid {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:22px !important;
    width:100% !important;
  }
  .resource-row { padding:26px 0 !important; }
  .resource-copy { width:100% !important; }
  .resource-copy h3 { font-size:24px !important; line-height:1.1 !important; }
  .resource-copy p { font-size:15px !important; }
  .field-tags { gap:7px !important; }
  .field-tags span { font-size:11px !important; }

  .crm-demo-view,
  .document-viewer,
  .original-crm,
  .canva-real-showcase {
    width:100% !important;
    max-width:100% !important;
  }
  .document-viewer [role=tabpanel] { max-height:340px !important; }

  /* Canva: cards grandes em swipe horizontal, sem miniaturas minúsculas */
  .real-canva-grid {
    display:flex !important;
    width:calc(100% + 16px) !important;
    max-width:none !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory !important;
    gap:12px !important;
    margin-right:-16px !important;
    padding:2px 16px 12px 0 !important;
    scrollbar-width:none !important;
  }
  .real-canva-grid::-webkit-scrollbar { display:none !important; }
  .real-canva-grid figure {
    flex:0 0 83% !important;
    scroll-snap-align:start !important;
    border-radius:14px !important;
  }
  .canva-proof-bar {
    display:block !important;
    width:100% !important;
    padding:14px !important;
    margin-top:14px !important;
  }
  .journey-cta, .journey-cta .bridge-btn {
    width:100% !important;
    max-width:none !important;
  }
  .journey-cta .bridge-btn {
    min-height:54px !important;
    padding:14px !important;
    border-radius:14px !important;
    font-size:14px !important;
  }

  /* Público e bônus em 1 coluna para valor/tangibilidade */
  .aud-card { width:100% !important; padding:20px !important; }
  .bonus-grid {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .bonus {
    display:grid !important;
    grid-template-columns:118px minmax(0,1fr) !important;
    column-gap:14px !important;
    align-items:center !important;
    width:100% !important;
    padding:14px !important;
    text-align:left !important;
  }
  .bonus-preview {
    grid-row:1 / span 5 !important;
    width:118px !important;
    max-width:118px !important;
    margin:0 !important;
    aspect-ratio:3/4 !important;
  }
  .bonus .tag { align-self:end !important; justify-self:start !important; }
  .bonus h3 { margin:4px 0 5px !important; font-size:17px !important; }
  .bonus p { margin:0 !important; font-size:13px !important; line-height:1.42 !important; }
  .bonus-price { margin-top:8px !important; padding-top:8px !important; }
  .bonus-price strong { font-size:20px !important; }
  .bonus-value-summary {
    display:grid !important;
    width:100% !important;
    gap:4px !important;
    padding:14px !important;
    margin:14px 0 20px !important;
  }

  /* Oferta: mockup 4:5 inteiro + compra em tela cheia */
  .offer-box { width:100% !important; border-radius:16px !important; overflow:hidden !important; }
  .offer-head { padding:18px 15px !important; }
  .offer-body-rich { padding:14px !important; }
  .offer-mockup.device-kit {
    width:100% !important;
    max-width:520px !important;
    margin:0 auto 8px !important;
    border-radius:12px !important;
    overflow:hidden !important;
    background:#0b1f33 !important;
  }
  .offer-mockup.device-kit picture,
  .offer-mockup.device-kit picture img {
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    display:block !important;
    object-fit:contain !important;
  }
  .offer-list {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    width:100% !important;
    margin:0 0 18px !important;
  }
  .offer-list > div { font-size:14px !important; padding:10px 12px !important; }
  .price-row { width:100% !important; }
  .current-price { font-size:54px !important; line-height:.95 !important; }
  #buy-final {
    display:flex !important;
    width:100% !important;
    min-height:60px !important;
    padding:14px 12px !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    font-size:15px !important;
    line-height:1.2 !important;
    border-radius:14px !important;
  }
  .purchase-trust-mini { grid-template-columns:1fr !important; gap:8px !important; }
  .trust-mini { width:100% !important; }

  .faq-wrap { width:100% !important; }
  .faq-q { font-size:15px !important; }
  .faq-a { font-size:14px !important; }
  .final-cta { padding:44px 0 110px !important; }
  .final-cta .btn { width:100% !important; }

  /* CTA fixo pensado para polegar e safe-area */
  .mobile-buy {
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    bottom:max(10px, env(safe-area-inset-bottom)) !important;
    width:auto !important;
    min-height:58px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:14px 16px !important;
    border-radius:16px !important;
    font-size:15px !important;
    font-weight:900 !important;
    line-height:1.15 !important;
    box-shadow:0 12px 32px rgba(0,0,0,.28) !important;
    z-index:9999 !important;
  }
}

@media (max-width: 390px) {
  .container { padding-left:13px !important; padding-right:13px !important; }
  .hero h1 { font-size:29px !important; }
  .hero .lead { font-size:15px !important; }
  .format-app img { width:38px !important; height:38px !important; }
  .format-app b { font-size:12px !important; }
  .bonus { grid-template-columns:104px minmax(0,1fr) !important; column-gap:11px !important; }
  .bonus-preview { width:104px !important; max-width:104px !important; }
  .mobile-buy { left:10px !important; right:10px !important; font-size:14px !important; }
}


/* PONTO 10 — mesma imagem do desktop no celular, sem troca e sem corte */
@media (max-width: 820px) {
  .hero-workbench.device-kit, .offer-mockup.device-kit {
    width:100% !important;
    max-width:100% !important;
    margin:14px auto 10px !important;
    border-radius:12px !important;
    overflow:hidden !important;
  }
  .hero-workbench.device-kit img, .offer-mockup.device-kit img {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    object-fit:contain !important;
    object-position:center center !important;
    margin:0 !important;
  }
}
@media (max-width: 640px) {
  .hero-workbench.device-kit, .offer-mockup.device-kit {
    width:100% !important;
    max-width:100% !important;
    margin:12px auto 10px !important;
    border-radius:10px !important;
    box-shadow:0 16px 34px rgba(0,0,0,.22) !important;
  }
  .hero-workbench.device-kit img, .offer-mockup.device-kit img {
    width:100% !important;
    height:auto !important;
  }
}