@import url('/clean-v5.css?v=6');

/* Boez clean UI v6
   mobile definitivo: mesma linguagem visual clean do desktop, sem depender de JS. */

@media(max-width:767px){
  html,body{background:#fff!important;overflow-x:hidden!important}
  body{font-family:"DM Sans",Inter,"Helvetica Neue",Arial,sans-serif!important}
  .container{width:calc(100% - 28px)!important;max-width:calc(100% - 28px)!important;margin-inline:auto!important}

  /* header */
  .header{position:sticky!important;top:0!important;background:rgba(255,255,255,.96)!important;border-bottom:1px solid rgba(35,31,28,.07)!important;box-shadow:none!important;backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important}
  .nav{height:66px!important;gap:10px!important}
  .brand .logoImage{width:104px!important;height:39px!important}
  .navlinks{display:none!important}
  .actions{margin-left:auto!important;gap:8px!important}
  .actions>.btn,.navBtn{display:none!important}
  .langs{padding:3px!important;background:#fff!important;border:1px solid rgba(35,31,28,.09)!important}
  .langs button{padding:6px 7px!important;font-size:9px!important;font-weight:600!important}

  /* hero */
  .hero{display:block!important;min-height:0!important;padding:38px 0 72px!important;background:#fff!important}
  .hero .heroGrid{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:34px!important;width:100%!important}
  .heroCopy{width:100%!important;max-width:100%!important;padding:0!important;text-align:left!important}
  .hero .eyebrow{display:inline-flex!important;width:auto!important;max-width:100%!important;margin:0 0 20px!important;padding:8px 12px!important;border:1px solid rgba(35,31,28,.10)!important;border-radius:999px!important;background:#fff!important;color:#6f675f!important;box-shadow:0 4px 14px rgba(30,25,21,.025)!important;font-size:9px!important;font-weight:600!important;letter-spacing:.075em!important}
  .hero h1{max-width:100%!important;margin:0 0 20px!important;color:#251f1b!important;font-family:"DM Sans",Inter,sans-serif!important;font-size:clamp(37px,10.2vw,47px)!important;font-weight:600!important;line-height:1.05!important;letter-spacing:-.038em!important;text-align:left!important}
  .accent{color:#514840!important}
  .accent:after{display:none!important}
  .hero .lead{max-width:100%!important;margin:0 0 25px!important;color:#837b73!important;font-size:16px!important;font-weight:400!important;line-height:1.66!important;text-align:left!important}
  .heroBtns{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:9px!important;margin:0 0 17px!important}
  .heroBtns .btn,.heroBtns .magnetic,.heroBtns .secondary{display:flex!important;width:100%!important;min-height:52px!important;padding:13px 18px!important;border-radius:17px!important;font-size:15px!important;font-weight:600!important;text-decoration:none!important}
  .heroBtns .magnetic,.heroBtns .btn:first-child{border:1px solid #241d18!important;background:#241d18!important;color:#fff!important;box-shadow:none!important}
  .heroBtns .secondary{border:1px solid rgba(35,31,28,.13)!important;background:#fff!important;color:#302a26!important;box-shadow:none!important}
  .trustline{display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;gap:10px 15px!important;margin:0!important;color:#8e867f!important;font-size:10px!important;font-weight:500!important;line-height:1.4!important;white-space:normal!important}

  /* mockup atual preservado */
  .heroStage{display:flex!important;width:100%!important;max-width:430px!important;margin:4px auto 0!important;padding:0!important}
  .heroStage .floatingChip,.stageGlow{display:none!important}
  .heroStage .mock{display:block!important;width:100%!important;max-width:100%!important;margin:0!important;padding:6px!important;border:1px solid rgba(35,31,28,.09)!important;border-radius:25px!important;background:#fff!important;box-shadow:0 14px 40px rgba(30,25,21,.06)!important;transform:none!important}
  .heroStage .browserBar{display:none!important}
  .heroStage .screen.heroConversationScreen{display:block!important;width:100%!important;height:465px!important;min-height:465px!important;max-height:465px!important;padding:0!important;border:1px solid rgba(35,31,28,.06)!important;border-radius:20px!important;background:#fff!important}

  /* faixa some no celular para preservar respiro */
  .signalStrip{display:none!important}

  /* ritmo geral */
  section{padding-top:88px!important;padding-bottom:88px!important}
  .sectionHead{max-width:100%!important;margin-bottom:34px!important;text-align:left!important}
  .sectionHead h2,.stickyCopy h2,.addonCopy h2,.faqIntro h2,.visualNarrativeCopy h2,.compactIntro h2,.finalCtaBox h2,.finalInner h2{font-family:"DM Sans",Inter,sans-serif!important;font-size:clamp(31px,8.8vw,42px)!important;font-weight:600!important;line-height:1.1!important;letter-spacing:-.033em!important}
  .sectionHead p,.stickyCopy>p,.addonCopy>p,.faqIntro>p,.visualNarrativeCopy p{font-size:15px!important;line-height:1.68!important}

  /* telas e recursos */
  .featureShowcase{gap:14px!important}
  .featureStory,.featureStory.reverse{display:grid!important;grid-template-columns:minmax(0,1fr)!important;min-height:0!important;border:1px solid rgba(35,31,28,.09)!important;border-radius:22px!important;background:#fff!important;box-shadow:0 8px 28px rgba(30,25,21,.04)!important}
  .featureStory.reverse .featureVisual{order:0!important}
  .featureCopy{padding:27px 24px!important}
  .featureCopy h3{font-size:29px!important;font-weight:600!important;line-height:1.12!important}
  .featureVisual.realScreen{min-height:210px!important;margin:10px!important;border-radius:17px!important;background:#faf9f7!important}
  .productShell{border-radius:22px!important;box-shadow:0 8px 28px rgba(30,25,21,.04)!important}
  .productTabs{overflow-x:auto!important;gap:5px!important;padding:10px!important;scrollbar-width:none!important}
  .productTabs::-webkit-scrollbar{display:none!important}
  .productTabs button{min-width:125px!important;padding:10px 12px!important;font-size:11px!important}
  .productScreen{min-height:320px!important;padding:12px!important;background:#fbfaf8!important}

  /* problema e solução */
  .visualProblemSection,.visualSolutionSection{padding-top:92px!important;padding-bottom:92px!important;background:#fff!important;color:#251f1b!important}
  .visualNarrative{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:30px!important}
  .visualNarrativeCopy h2,.visualSolutionSection .visualNarrativeCopy h2{color:#251f1b!important}
  .visualSolutionSection .visualNarrativeCopy p{color:#837b73!important}
  .visualSolutionSection .kick{color:#6f675f!important}
  .narrativeArt,.visualSolutionSection .narrativeArt{width:100%!important;min-height:0!important;border:1px solid rgba(35,31,28,.09)!important;border-radius:22px!important;background:#fff!important;box-shadow:0 8px 28px rgba(30,25,21,.04)!important}
  .problemArt{aspect-ratio:1.55/1!important;min-height:248px!important}
  .problemPoint{max-width:39cqw!important}
  .solutionFlow{min-height:0!important;padding:24px 16px 24px 70px!important;gap:18px!important}
  .solutionFlow:before{left:41px!important}
  .solutionFlow:after{left:35px!important}
  .solutionStage,.solutionStage.one,.solutionStage.two,.solutionStage.three,.solutionStage.four{grid-template-columns:50px minmax(0,1fr)!important;column-gap:13px!important;min-height:64px!important;border-left:0!important}
  .solutionIcon{width:50px!important;height:50px!important;border-radius:16px!important}

  /* grids antigos neutralizados */
  .bento,.solutionRail,.steps,.quickSteps,.experienceGrid,.testimonialGrid,.pricing{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:13px!important}
  .bentoCard,.railCard,.step,.quickStep,.experienceCard,.testimonialCard,.plan,.plan.featured{width:100%!important;max-width:100%!important;margin:0!important;transform:none!important;border-radius:20px!important;box-shadow:0 8px 28px rgba(30,25,21,.04)!important}
  .plan.featured:hover,.plan:hover{transform:none!important}

  /* feedbacks */
  .testimonialSection{padding-top:92px!important;padding-bottom:92px!important;background:#fbfaf8!important}
  .testimonialGrid{gap:12px!important}
  .testimonialCard{min-height:0!important;padding:24px!important}

  /* FAQ */
  .boezFaq,.faqSection{padding-top:92px!important;padding-bottom:92px!important;background:#fbfaf8!important}
  .faqLayout{display:grid!important;grid-template-columns:1fr!important;gap:28px!important}
  .faqIntro{position:static!important}
  .faqItem,.faq details{border-radius:18px!important;box-shadow:none!important}

  /* CTA final */
  .finalCtaSection,.finalCta{padding-top:68px!important;padding-bottom:82px!important;background:#fff!important}
  .finalCtaBox,.finalInner{display:block!important;padding:31px 23px!important;border-radius:24px!important;background:#241d18!important;box-shadow:none!important;text-align:left!important}
  .finalCtaBox h2,.finalInner h2{color:#fff!important}
  .finalCtaBox p,.finalInner p{color:#cfc7c0!important}
  .finalCtaActions{display:flex!important;flex-direction:column!important;gap:9px!important;margin-top:24px!important}
  .finalCtaActions .btn,.finalInner .btn{width:100%!important}

  /* footer */
  footer{padding:42px 0 28px!important;background:#fbfaf8!important;border-top:1px solid rgba(35,31,28,.07)!important}
  .footerGrid{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:28px!important}
  footer .footerBrand .logoImage{background-image:url('/logo.svg')!important;filter:none!important;opacity:1!important}
  .footerLinks{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:14px!important;color:#514a44!important}
  .footerGrid,.copy,.footerBrand p,.footerBrand a{color:#756d66!important}
  .copy{margin-top:22px!important;padding-top:17px!important;border-top:1px solid rgba(35,31,28,.07)!important;text-align:left!important}

  /* CTA móvel discreto */
  .mobileCta{left:10px!important;right:10px!important;bottom:10px!important;width:auto!important;padding:7px!important;border:1px solid rgba(35,31,28,.08)!important;border-radius:18px!important;background:rgba(255,255,255,.94)!important;box-shadow:0 10px 30px rgba(30,25,21,.08)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}
  .mobileCta .btn{width:100%!important;min-height:48px!important;border:1px solid #241d18!important;border-radius:14px!important;background:#241d18!important;color:#fff!important;box-shadow:none!important}
}

@media(max-width:390px){
  .container{width:calc(100% - 24px)!important;max-width:calc(100% - 24px)!important}
  .hero{padding-top:32px!important}
  .hero h1{font-size:36px!important}
  .hero .lead{font-size:15px!important}
  .heroStage .screen.heroConversationScreen{height:435px!important;min-height:435px!important;max-height:435px!important}
  .problemArt{min-height:226px!important}
}