/* ==========================================================
   M2 CONSULTING — MOBILE SYSTEM V9
   Camada responsiva global. Aplicada depois dos estilos locais.
   Mantém desktop intacto e melhora touch/mobile em rotas públicas.
   ========================================================== */
:root{
  --m2-mobile-gutter:clamp(12px,4vw,20px);
  --m2-mobile-radius:20px;
  --m2-mobile-tap:44px;
}
html{max-width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:88px}
body{max-width:100%;overflow-x:hidden}
main{max-width:100%;overflow-x:clip}
img,svg,canvas{max-width:100%}
button,a,input,select,textarea{touch-action:manipulation}
input,select,textarea{max-width:100%}
table{max-width:100%}

@media(max-width:980px){
  .container,.cl-container,.ci-container,.policy-wrap{min-width:0}
  .m2-global-header{top:max(10px,env(safe-area-inset-top))}
  .m2-global-nav{max-height:calc(100dvh - 92px - env(safe-area-inset-top));overflow-y:auto;overscroll-behavior:contain}
  .m2-global-nav>a,.m2-global-toggle,.btn,.ci-btn,.cl-filter{min-height:var(--m2-mobile-tap)}
  section[id]{scroll-margin-top:86px}
  .split,.section-head,.content-wrap,.about-grid,.related-grid,.footer-grid,.blog-radar-head{min-width:0}
}

@media(max-width:760px){
  :where(.container,.cl-container,.ci-container){width:calc(100% - 24px)!important;max-width:none!important;margin-inline:auto!important}
  :where(.section-head,.cl-intro-head,.ci-section-head,.case-media-head){min-width:0}
  :where(h1,h2,h3,p,li,a,strong,span){overflow-wrap:break-word}
  :where(button,a[role="button"],.btn,.ci-btn,.m2-cookie-btn){-webkit-tap-highlight-color:transparent}
  :where(input,select,textarea){font-size:16px!important}

  /* Global header */
  .m2-global-bar{width:calc(100% - 16px)!important}
  .m2-global-nav{left:8px!important;right:8px!important}

  /* Home cinematic hero */
  .hero.hero-cinematic{min-height:100svh!important}
  .hero-cinematic-shell{min-height:100svh!important;padding:100px 16px 108px!important}
  .hero-cinematic-top{gap:18px!important}
  .hero-cinematic-copy p{font-size:clamp(18px,5.4vw,23px)!important;line-height:1.18!important;max-width:100%!important}
  .hero-cinematic-stat{width:min(190px,100%)!important;margin-top:22px!important}
  .hero-cinematic-main{padding-top:42px!important}
  .hero-cinematic-title{font-size:clamp(58px,18vw,82px)!important;line-height:.78!important;max-width:100%!important}
  .hero-cinematic-actions{width:100%!important;gap:14px!important;margin-top:24px!important}
  .hero-cinematic-primary{width:100%!important;min-width:0!important;min-height:56px!important;padding-left:22px!important}
  .hero-cinematic-secondary{min-height:44px!important;display:inline-flex!important;align-items:center!important}
  .hero-video-toggle{right:14px!important;bottom:84px!important}
  .hero-cinematic-pillars{padding-left:12px!important;padding-right:12px!important}

  /* Home / Retention common sections */
  .section-head{gap:14px!important}
  .section-head h2{max-width:100%!important}
  .problem-grid,.cap-grid,.method-grid,.metric-grid{min-width:0}
  .carousel-shell,.screen-carousel,.demo-shell{max-width:100%;overflow:hidden}
  .btn{min-height:48px;justify-content:center}

  /* CLIENTES — overview */
  .clients-page .cl-hero{padding:112px 0 48px!important;min-height:auto!important;border-radius:0 0 24px 24px!important}
  .clients-page .cl-hero-grid{gap:28px!important}
  .clients-page .cl-hero h1{font-size:clamp(44px,13vw,58px)!important;line-height:.88!important;margin:18px 0!important}
  .clients-page .cl-hero p{font-size:15px!important;line-height:1.6!important;max-width:100%!important}
  .clients-page .cl-hero-proof{grid-template-columns:1fr!important;gap:9px!important}
  .clients-page .cl-proof-row{padding:13px 0!important;grid-template-columns:82px 1fr!important;gap:12px!important}
  .clients-page .cl-proof-row strong{font-size:28px!important}
  .clients-page .cl-scroll{display:none!important}
  .clients-page .cl-intro{padding:58px 0 0!important}
  .clients-page .cl-intro-head{gap:18px!important}
  .clients-page .cl-intro h2{font-size:clamp(34px,10vw,43px)!important;line-height:.96!important}
  .clients-page .cl-intro-head>p{font-size:14px!important;line-height:1.65!important}
  .clients-page .cl-filters{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:7px!important;padding:4px 1px 12px!important;margin-inline:-1px!important;scrollbar-width:none!important;scroll-snap-type:x proximity!important}
  .clients-page .cl-filters::-webkit-scrollbar{display:none}
  .clients-page .cl-filter{flex:0 0 auto!important;scroll-snap-align:start!important;padding-inline:16px!important}
  .clients-page .cl-expand-meta{margin:10px 0 14px!important}
  .clients-page .cl-expand-meta small{display:block!important;font-size:8px!important}
  .clients-page .cl-expand-stage{margin:0 -12px!important;padding:0 0 62px!important}
  .clients-page .cl-expand-rail{display:flex!important;gap:12px!important;min-height:460px!important;padding:2px 12px 16px!important;scroll-snap-type:x mandatory!important;scroll-padding-inline:12px!important;overscroll-behavior-x:contain!important}
  .clients-page .cl-expand-card,
  .clients-page .cl-expand-card.is-active{flex:0 0 calc(100vw - 48px)!important;height:450px!important;border-radius:22px!important;scroll-snap-align:center!important;box-shadow:0 16px 42px rgba(15,15,18,.08)!important}
  .clients-page .cl-expand-collapsed{display:none!important}
  .clients-page .cl-expand-open,
  .clients-page .cl-expand-card.is-active .cl-expand-open{opacity:1!important;transform:none!important;pointer-events:auto!important;padding:20px!important;transition:none!important}
  .clients-page .cl-expand-top{font-size:7px!important;white-space:normal!important;line-height:1.3!important}
  .clients-page .cl-expand-visual{padding:20px 0 12px!important}
  .clients-page .cl-expand-visual strong{font-size:clamp(78px,26vw,105px)!important}
  .clients-page .cl-expand-copy h3{font-size:clamp(28px,9vw,36px)!important;line-height:.95!important}
  .clients-page .cl-expand-copy p{font-size:12px!important;line-height:1.52!important;margin-bottom:14px!important}
  .clients-page .cl-expand-copy .cl-tags{padding-right:48px!important;gap:5px!important}
  .clients-page .cl-expand-copy .cl-tags span{font-size:7px!important;padding:6px 8px!important}
  .clients-page .cl-expand-link{right:16px!important;bottom:16px!important;width:46px!important;height:46px!important}
  .clients-page .cl-expand-nav{display:none!important}

  /* CLIENTES — case */
  .clients-page .case-hero{padding:112px 0 48px!important;min-height:auto!important;border-radius:0 0 24px 24px!important}
  .clients-page .case-hero-grid{gap:22px!important}
  .clients-page .case-hero h1{font-size:clamp(44px,13vw,58px)!important;line-height:.88!important;margin:18px 0!important}
  .clients-page .case-hero p{font-size:15px!important;line-height:1.6!important}
  .clients-page .case-monogram{font-size:clamp(82px,27vw,118px)!important;text-align:left!important;margin-top:8px!important}
  .clients-page .case-body{padding:54px 0 72px!important}
  .clients-page .case-lead,.clients-page .case-work{gap:20px!important;padding-bottom:42px!important}
  .clients-page .case-work{padding-top:42px!important}
  .clients-page .case-lead h2,.clients-page .case-work h2,.clients-page .case-media h2{font-size:clamp(30px,9vw,38px)!important}
  .clients-page .case-lead p{font-size:16px!important;line-height:1.65!important}
  .clients-page .case-work-item{grid-template-columns:32px 1fr!important;gap:12px!important;font-size:14px!important;padding:15px 0!important}
  .clients-page .case-media{padding:42px 0!important}
  .clients-page .case-media-head{align-items:flex-start!important;flex-direction:column!important;gap:10px!important}
  .clients-page .case-media-head p{font-size:14px!important}
  .clients-page .case-highlight-strip{margin-top:24px!important}
  .clients-page .cl-highlight-rail{gap:11px!important;margin-inline:-12px!important;padding-inline:12px!important;scroll-snap-type:x mandatory!important}
  .clients-page .cl-story-highlight{flex-basis:86px!important;scroll-snap-align:start!important}
  .clients-page .cl-story-ring{width:80px!important;height:80px!important}
  .clients-page .cl-story-highlight>strong{font-size:9px!important}
  .clients-page .case-cta{margin-top:44px!important;padding:24px!important;border-radius:20px!important;gap:20px!important}
  .clients-page .case-cta h3{font-size:30px!important;line-height:1!important}
  .clients-page .case-cta a{width:100%!important;min-height:48px!important;display:flex!important;align-items:center!important;justify-content:center!important}

  /* Stories: mobile-native fullscreen */
  .clients-page .cl-story-modal{padding:0!important;align-items:stretch!important}
  .clients-page .cl-story-dialog{width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;min-height:100svh!important;aspect-ratio:auto!important;border-radius:0!important}
  .clients-page .cl-story-bars{top:calc(10px + env(safe-area-inset-top))!important}
  .clients-page .cl-story-head{top:calc(22px + env(safe-area-inset-top))!important}
  .clients-page .cl-story-stage{padding-bottom:env(safe-area-inset-bottom)!important}
  .clients-page .cl-story-close{min-width:44px!important;min-height:44px!important}

  /* BLOG / M2 School */
  .m2-morph-shell{height:215vh!important}
  .m2-morph-stage{min-height:560px!important}
  .m2-morph-intro{width:calc(100% - 28px)!important}
  .m2-morph-intro h1{font-size:clamp(40px,12vw,52px)!important;line-height:.94!important}
  .m2-morph-intro p{font-size:13px!important;line-height:1.55!important}
  .m2-morph-focus{width:calc(100% - 28px)!important}
  .m2-morph-focus h2{font-size:clamp(34px,10vw,46px)!important}
  .m2-morph-nav{left:12px!important;right:12px!important;width:auto!important;max-width:none!important;padding:7px!important;scroll-snap-type:x proximity!important}
  .m2-morph-nav button{min-height:40px!important;flex:0 0 auto!important}
  .m2-editorial{padding:54px 0 68px!important}
  .m2-editorial-head h2{font-size:clamp(36px,10vw,46px)!important}
  .m2-content-card,.m2-content-card.featured{border-radius:18px!important}
  .m2-content-card-media,.m2-content-card.featured .m2-content-card-media{height:190px!important}
  .blog-radar .m2-radar-event{grid-template-columns:48px minmax(0,1fr) auto!important;gap:10px!important;padding:14px 12px!important}
  .blog-radar .m2-radar-copy strong{font-size:13px!important;line-height:1.3!important}

  /* Competition */
  .ci-hero-grid{padding:46px 0!important}
  .ci-hero h1,.ci-detail-hero h1{font-size:clamp(40px,12vw,52px)!important;line-height:.94!important}
  .ci-hero-actions{gap:9px!important}
  .ci-hero-actions .ci-btn{width:100%!important;justify-content:center!important}
  .ci-radar{padding:16px!important}
  .ci-filter-row{margin-inline:-2px!important;scroll-snap-type:x proximity!important}
  .ci-chip{min-height:42px!important;scroll-snap-align:start!important}
  .ci-event-card{border-radius:18px!important;padding:18px!important}
  .ci-detail-body{padding:44px 0 64px!important}
  .ci-detail-summary>div,.ci-location-box,.ci-info-callout,.ci-aside-box{border-radius:16px!important}
  .ci-official-links a{min-height:52px!important}

  /* SEO / article pages */
  .article-hero,.blog-hero{padding-top:96px!important}
  .content-wrap{grid-template-columns:1fr!important;gap:28px!important}
  .sidebar{position:static!important;top:auto!important}
  .article{min-width:0!important}
  .article pre,.article code{max-width:100%;overflow-x:auto}
  .article table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .related-grid{grid-template-columns:1fr!important}
  .about-grid{grid-template-columns:1fr!important}

  /* Cookie policy */
  .policy-hero{padding:116px 12px 48px!important;border-radius:0 0 24px 24px!important}
  .policy-wrap{width:calc(100% - 24px)!important}
  .policy-hero h1{font-size:clamp(42px,12vw,54px)!important;line-height:.9!important}
  .policy-hero p{font-size:15px!important}
  .policy-content{padding:50px 0 76px!important}
  .policy-content h2{font-size:32px!important;margin-top:42px!important}
  .policy-row{padding:16px!important}
  .policy-callout{padding:22px!important;border-radius:18px!important}
  .policy-callout button{width:100%!important;min-height:48px!important}

  /* Consent UI safe-area */
  .m2-cookie-banner{bottom:max(10px,env(safe-area-inset-bottom))!important}
  .m2-cookie-modal{padding-bottom:max(10px,env(safe-area-inset-bottom))!important}
}

@media(max-width:430px){
  :where(.container,.cl-container,.ci-container){width:calc(100% - 20px)!important}
  .m2-global-bar{width:calc(100% - 12px)!important;padding-left:13px!important;padding-right:7px!important}
  .hero-cinematic-shell{padding-left:12px!important;padding-right:12px!important}
  .hero-cinematic-title{font-size:clamp(54px,17.5vw,74px)!important}
  .hero-cinematic-copy p{font-size:18px!important}

  .clients-page .cl-hero h1,.clients-page .case-hero h1{font-size:clamp(40px,12.4vw,50px)!important}
  .clients-page .cl-expand-card,.clients-page .cl-expand-card.is-active{flex-basis:calc(100vw - 32px)!important;height:438px!important}
  .clients-page .cl-expand-stage{margin-inline:-10px!important}
  .clients-page .cl-expand-rail{padding-inline:10px!important;scroll-padding-inline:10px!important}
  .clients-page .cl-expand-open{padding:18px!important}
  .clients-page .cl-expand-visual strong{font-size:82px!important}
  .clients-page .cl-expand-copy h3{font-size:30px!important}
  .clients-page .case-monogram{font-size:88px!important}
  .clients-page .cl-story-highlight{flex-basis:80px!important}
  .clients-page .cl-story-ring{width:74px!important;height:74px!important}

  .m2-morph-shell{height:195vh!important}
  .m2-morph-intro h1{font-size:40px!important}
  .m2-morph-card{width:55px!important;height:78px!important;margin:-39px 0 0 -27.5px!important}

  .ci-event-card h3{font-size:22px!important}
  .ci-radar-grid strong{font-size:31px!important}

  .m2-cookie-banner{left:8px!important;right:8px!important;padding:16px!important;border-radius:18px!important}
  .m2-cookie-banner__actions{grid-template-columns:1fr!important}
  .m2-cookie-banner__actions .m2-cookie-btn--primary{grid-column:auto!important;grid-row:auto!important}
  .m2-cookie-btn{width:100%!important;min-height:44px!important}
}

@media(hover:none) and (pointer:coarse){
  .cl-expand-card:hover,.cl-story-highlight:hover .cl-story-ring,.ci-official-links a:hover,.m2-global-nav .m2-global-cta:hover{transform:none!important}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}