/* Mobile UX 2026 — inspirado em padrões de Linear/Vercel/Intercom.
   Somente <= 760px. Desktop permanece sob o style.css principal. */

@media (max-width:760px){
  :root{
    --mobile-gutter:16px;
    --mobile-radius:18px;
  }

  html{scroll-padding-top:72px}
  body{overflow-x:hidden}

  .container{width:calc(100% - 32px)!important;max-width:none!important}

  /* Header compacto */
  .nav-wrap{height:64px!important}
  .site-header{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  .brand img{width:38px!important;height:38px!important}
  .brand b{font-size:14px!important}
  .brand small{font-size:7px!important}
  .menu-toggle{
    width:44px!important;height:44px!important;border-radius:13px!important;
    touch-action:manipulation
  }
  .nav-links{
    position:fixed!important;
    top:72px!important;left:12px!important;right:12px!important;
    max-height:calc(100dvh - 88px);
    overflow:auto;
    border-radius:18px!important;
    padding:8px!important;
    z-index:120!important
  }
  .nav-links>a{
    min-height:50px!important;
    padding:13px 14px!important;
    font-size:14px!important
  }

  /* Ritmo geral: menos altura e uma ideia por vez */
  .section-light,.section-soft,.solutions-section,.process-section,
  .why-section,.faq-section,.lead-section,.segments-showcase,
  .reach-section,.diagnosis-section,.location-section{
    scroll-margin-top:70px
  }

  /* Hero mobile-first */
  .help-hero{
    padding:34px 0 30px!important;
    min-height:auto!important
  }
  .help-hero-layout{
    display:flex!important;
    flex-direction:column!important;
    gap:26px!important
  }
  .help-hero-copy{max-width:none!important}
  .help-hero-copy .eyebrow{
    font-size:9px!important;
    padding:6px 9px!important;
    letter-spacing:.09em!important
  }
  .help-hero-copy h1{
    font-size:clamp(34px,10.2vw,43px)!important;
    line-height:1!important;
    letter-spacing:-.052em!important;
    margin:13px 0 15px!important
  }
  .help-hero-copy>p{
    font-size:15px!important;
    line-height:1.58!important;
    max-width:37ch!important
  }
  .hero-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    margin-top:20px!important
  }
  .hero-actions .btn{
    min-height:52px!important;
    width:100%!important;
    justify-content:center!important;
    border-radius:14px!important;
    font-size:13.5px!important
  }
  .hero-proof{
    display:flex!important;
    gap:7px!important;
    overflow-x:auto!important;
    scrollbar-width:none;
    margin-top:15px!important;
    padding-bottom:2px
  }
  .hero-proof::-webkit-scrollbar{display:none}
  .hero-proof span{
    flex:0 0 auto!important;
    min-height:40px!important;
    display:flex!important;
    align-items:center!important;
    border-radius:999px!important;
    padding:8px 11px!important;
    font-size:10px!important;
    white-space:nowrap!important
  }

  /* O visual continua, mas deixa o texto ser protagonista */
  .hero-network{
    order:2;
    width:min(78vw,300px)!important;
    margin:0 auto!important;
  }
  .network-core{
    width:96px!important;height:96px!important;
    border-radius:25px!important
  }
  .network-core img{width:78px!important;height:78px!important}
  .network-pulse{inset:-9px!important;border-radius:31px!important}
  .network-node{
    padding:7px 8px!important;
    font-size:8px!important;
    border-radius:9px!important
  }
  .network-node svg{width:12px!important;height:12px!important}
  .hero-manifesto{display:none!important}

  /* Quem somos: bloco editorial curto */
  .intro-grid{
    padding:48px 0!important;
    gap:15px!important
  }
  .intro-grid h2{
    font-size:clamp(28px,8.2vw,34px)!important;
    line-height:1.08!important
  }
  .intro-text{
    font-size:14px!important;
    line-height:1.65!important
  }

  /* Soluções: carrossel horizontal com snap */
  .solutions-section{padding:50px 0 54px!important}
  .solutions-section .split-heading{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-bottom:18px!important
  }
  .solutions-section .split-heading h2{
    font-size:clamp(29px,8vw,35px)!important;
    line-height:1.06!important
  }
  .solutions-section .split-heading>p{
    font-size:13px!important;
    line-height:1.55!important;
    margin:0!important
  }
  .solutions-section .split-heading::after{
    content:"Deslize para explorar  →";
    display:block;
    margin-top:3px;
    color:#5e7189;
    font-size:10px;
    font-weight:800;
    letter-spacing:.03em
  }
  .solutions-grid{
    display:flex!important;
    gap:12px!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:1px;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
    padding:2px 0 12px!important;
    margin-right:calc(50% - 50vw)!important;
    padding-right:16px!important
  }
  .solutions-grid::-webkit-scrollbar{display:none}
  .solution-card{
    flex:0 0 min(82vw,330px)!important;
    scroll-snap-align:start!important;
    min-height:292px!important;
    padding:20px!important;
    border-radius:20px!important;
    box-shadow:0 12px 30px rgba(15,35,60,.07)!important
  }
  .solution-card:hover{transform:none!important}
  .solution-card .icon-box{
    width:46px!important;height:46px!important;
    margin:18px 0 26px!important
  }
  .solution-card h3{font-size:19px!important}
  .solution-card p{
    font-size:13px!important;
    line-height:1.58!important;
    margin-bottom:18px!important
  }
  .service-more{
    min-height:48px!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:7px!important;
    padding:9px 0!important;
    font-size:12px!important;
    touch-action:manipulation
  }

  /* Como trabalhamos: timeline vertical em vez de quatro cards soltos */
  .process-section{padding:54px 0!important}
  .process-heading h2{
    font-size:clamp(29px,8vw,35px)!important;
    line-height:1.07!important
  }
  .process-heading p{font-size:13px!important;line-height:1.55!important}
  .process-track{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:4px!important;
    margin-top:28px!important;
    padding-left:0!important
  }
  .process-track::before{
    left:22px!important;right:auto!important;
    top:25px!important;bottom:25px!important;
    width:1px!important;height:auto!important;
    background:linear-gradient(180deg,rgba(91,151,255,.55),rgba(255,151,59,.42))!important
  }
  .process-step{
    min-height:0!important;
    padding:15px 12px 18px 62px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important
  }
  .process-step>svg{
    position:absolute!important;
    left:0!important;top:10px!important;
    width:44px!important;height:44px!important;
    margin:0!important;
    border-radius:14px!important;
    z-index:2!important
  }
  .process-step>span{
    position:static!important;
    display:block!important;
    margin-bottom:5px!important;
    font-size:9px!important
  }
  .process-step h3{font-size:17px!important;margin:0 0 5px!important}
  .process-step p{font-size:12.5px!important;line-height:1.55!important}

  /* Diferenciais: compacto, sem excesso de card */
  .why-section{padding:50px 0!important}
  .why-grid{gap:8px!important}
  .why-grid>article{
    padding:14px!important;
    grid-template-columns:42px 1fr!important;
    gap:12px!important;
    border-radius:16px!important
  }
  .why-grid>article>span{width:42px!important;height:42px!important;border-radius:13px!important}
  .why-grid h3{font-size:15px!important}
  .why-grid p{font-size:11.5px!important;line-height:1.5!important}

  /* Segmentos: faixas editoriais compactas */
  .segments-showcase{padding:52px 0!important}
  .segments-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-bottom:18px!important
  }
  .segments-head h2{
    font-size:clamp(29px,8vw,35px)!important;
    line-height:1.07!important
  }
  .segments-head>p{font-size:12.5px!important;line-height:1.55!important}
  .segment-row{
    grid-template-columns:28px 42px minmax(0,1fr)!important;
    gap:10px!important;
    padding:15px 0!important
  }
  .segment-index{font-size:9px!important}
  .segment-symbol{width:42px!important;height:42px!important;border-radius:13px!important}
  .segment-main{display:block!important}
  .segment-main h3{font-size:17px!important;margin-bottom:4px!important}
  .segment-main p{font-size:11.5px!important;line-height:1.48!important}
  .segment-arrow{display:none!important}

  /* Presença: Jardim → Brasil em uma única linha */
  .reach-section{padding:54px 0!important}
  .reach-heading h2{
    font-size:clamp(31px,8.5vw,38px)!important;
    line-height:1.02!important
  }
  .reach-heading p{font-size:13px!important;line-height:1.55!important}
  .reach-route{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr)!important;
    gap:8px!important;
    align-items:center!important;
    margin:28px 0 24px!important
  }
  .reach-place{
    min-height:112px!important;
    padding:14px 12px!important;
    border-radius:16px!important;
    text-align:left!important
  }
  .reach-origin{
    border-left:2px solid #4f8fff!important;
    border-right:0!important
  }
  .reach-destination{
    border-left:2px solid #ff9638!important;
    border-right:0!important
  }
  .reach-label{font-size:8px!important;margin-bottom:7px!important}
  .reach-place strong{font-size:21px!important}
  .reach-place small{font-size:9px!important;line-height:1.35!important}
  .reach-connection{
    width:48px!important;height:48px!important;
    margin:0!important
  }
  .reach-connection::before{
    left:0!important;right:0!important;top:50%!important;bottom:auto!important;
    width:auto!important;height:1px!important;
    background:linear-gradient(90deg,#347de9,#ff9b43)!important
  }
  .reach-connection::after{
    right:0!important;left:auto!important;
    top:calc(50% - 4px)!important;bottom:auto!important
  }
  .route-signal{width:36px!important;height:36px!important}
  .reach-footer{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    scrollbar-width:none;
    gap:6px!important;
    padding-top:15px!important
  }
  .reach-footer::-webkit-scrollbar{display:none}
  .reach-footer>div{flex:0 0 auto!important;font-size:9px!important}
  .reach-footer p{display:none!important}

  /* Diagnóstico: foco em uma pergunta por vez */
  .diagnosis-section{padding:52px 0!important}
  .diagnosis-layout{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important
  }
  .diagnosis-copy h2{
    font-size:clamp(29px,8vw,35px)!important;
    line-height:1.07!important
  }
  .diagnosis-copy>p{font-size:13px!important;line-height:1.55!important}
  .diagnosis-trust{gap:6px!important;flex-wrap:wrap!important}
  .diagnosis-tool{
    min-height:430px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    padding:18px!important;
    border-radius:20px!important
  }
  .diagnosis-step h3,.diagnosis-result h3{
    font-size:21px!important;
    line-height:1.12!important;
    margin:18px 0 15px!important
  }
  .diagnosis-options{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important
  }
  .diagnosis-options button{
    min-height:58px!important;
    padding:12px 13px!important;
    border-radius:14px!important;
    touch-action:manipulation
  }
  .diagnosis-options button span{font-size:11.5px!important}
  .diagnosis-footer{margin-top:auto!important;padding-top:12px!important}

  /* FAQ: targets grandes e leitura rápida */
  .faq-section{padding:52px 0!important}
  .faq-layout{display:grid!important;grid-template-columns:1fr!important;gap:20px!important}
  .faq-heading{position:static!important}
  .faq-heading h2{font-size:clamp(29px,8vw,35px)!important}
  .faq-item{border-radius:15px!important}
  .faq-item button{
    min-height:58px!important;
    padding:14px!important;
    font-size:13px!important;
    line-height:1.35!important
  }
  .faq-answer>p{
    font-size:12px!important;
    line-height:1.58!important;
    padding:0 38px 15px 14px!important
  }

  /* Formulário: uma coluna e campos confortáveis */
  .lead-section{padding:52px 0!important}
  .lead-grid{display:grid!important;grid-template-columns:1fr!important;gap:20px!important}
  .lead-copy h2{font-size:clamp(29px,8vw,35px)!important;line-height:1.07!important}
  .lead-copy>p{font-size:13px!important;line-height:1.55!important}
  .lead-form{
    padding:16px!important;
    border-radius:18px!important
  }
  .form-row{grid-template-columns:1fr!important}
  .lead-form input,.lead-form select,.lead-form textarea{
    min-height:50px!important;
    font-size:16px!important;
    border-radius:12px!important
  }
  .lead-form textarea{min-height:118px!important}
  .lead-form .btn{min-height:52px!important;width:100%!important;justify-content:center!important}

  /* CTA final: simples e direto */
  .contact-final{padding:56px 0 34px!important}
  .contact-final h2{
    font-size:clamp(35px,10vw,43px)!important;
    line-height:.98!important
  }
  .contact-final-inner>p{font-size:13px!important;line-height:1.55!important}
  .contact-final-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important
  }
  .contact-primary,.contact-secondary{
    width:100%!important;
    min-height:52px!important;
    justify-content:center!important;
    border-radius:14px!important
  }
  .contact-strip{margin-top:30px!important}
  .contact-strip>a{
    min-height:62px!important;
    padding:13px 0!important
  }

  .location-section{padding:42px 0 56px!important}
  .location-head h2{font-size:28px!important}
  .location-map{height:240px!important;border-radius:16px!important}

  /* WhatsApp flutuante não pode competir com CTA/conteúdo */
  .whatsapp-float{
    right:12px!important;
    bottom:calc(12px + env(safe-area-inset-bottom,0px))!important
  }
  .whatsapp-bubble{width:52px!important;height:52px!important}
  .whatsapp-bubble svg{width:22px!important;height:22px!important}
  .whatsapp-teaser{
    width:min(212px,calc(100vw - 82px))!important;
    min-height:70px!important
  }

  /* Touch targets */
  .btn,.service-more,.menu-toggle,.faq-item button,
  .diagnosis-options button,.contact-strip>a{
    touch-action:manipulation
  }
}

@media (max-width:380px){
  .help-hero-copy h1{font-size:34px!important}
  .hero-network{width:min(76vw,270px)!important}
  .network-node span{display:none!important}
  .network-node{
    width:32px!important;height:32px!important;
    display:grid!important;place-items:center!important;padding:0!important
  }
  .solution-card{flex-basis:86vw!important}
  .reach-route{grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr)!important}
  .reach-connection{width:36px!important}
  .reach-place{padding:12px 10px!important}
  .reach-place strong{font-size:19px!important}
}


/* Ajustes finos — Diagnóstico e FAQ mobile */
@media (max-width:760px){
  /* "Voltar" só existe a partir da segunda etapa */
  .diagnosis-back[hidden]{
    display:none!important;
  }

  .diagnosis-step-meta{
    min-height:28px;
    margin:14px 0 22px!important;
  }

  .diagnosis-back{
    min-height:40px;
    padding:6px 2px 6px 10px!important;
    border-radius:10px;
  }

  /* FAQ mais limpo e sem resposta vazando quando fechado */
  .faq-section{
    padding:50px 0 54px!important;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
  }

  .faq-layout{
    gap:18px!important;
  }

  .faq-heading{
    margin-bottom:2px!important;
  }

  .faq-heading .eyebrow{
    margin-bottom:10px!important;
  }

  .faq-heading h2{
    max-width:12ch;
    margin:0 0 10px!important;
    font-size:clamp(31px,9vw,38px)!important;
    line-height:1.02!important;
    letter-spacing:-.045em!important;
  }

  .faq-heading>p{
    max-width:32ch;
    margin:0!important;
    font-size:13px!important;
    line-height:1.55!important;
    color:#6b7789!important;
  }

  .faq-list{
    gap:8px!important;
  }

  .faq-item{
    border:1px solid #e1e7ef!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:none!important;
    overflow:hidden!important;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease!important;
  }

  .faq-item button{
    min-height:66px!important;
    padding:14px 14px 14px 16px!important;
    gap:12px!important;
    font-size:13px!important;
    line-height:1.38!important;
    font-weight:800!important;
    color:#172033!important;
  }

  .faq-item button span{
    flex:1;
    min-width:0;
  }

  .faq-item button svg{
    width:34px!important;
    height:34px!important;
    padding:8px!important;
    border-radius:10px!important;
    color:#5b7ca8!important;
    background:#f3f7fc!important;
    border:1px solid #e6edf6!important;
    flex:0 0 34px!important;
    transition:transform .2s ease,background .2s ease,color .2s ease!important;
  }

  .faq-answer{
    display:grid!important;
    grid-template-rows:0fr!important;
    overflow:hidden!important;
    transition:grid-template-rows .26s ease!important;
  }

  .faq-answer>p{
    min-height:0!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0 16px!important;
    font-size:12px!important;
    line-height:1.6!important;
    color:#667589!important;
    opacity:0!important;
    transform:translateY(-4px);
    transition:opacity .18s ease,transform .18s ease,padding .24s ease!important;
  }

  .faq-item.open{
    border-color:#bfd2eb!important;
    background:#fbfdff!important;
    box-shadow:0 10px 26px rgba(39,83,139,.07)!important;
  }

  .faq-item.open button{
    color:#0f4f9d!important;
  }

  .faq-item.open button svg{
    color:#2f6fbd!important;
    background:#edf5ff!important;
    border-color:#d9e9fb!important;
  }

  .faq-item.open .faq-answer{
    grid-template-rows:1fr!important;
  }

  .faq-item.open .faq-answer>p{
    padding:0 16px 16px!important;
    opacity:1!important;
    transform:none!important;
  }
}