body{margin:0;background:#FFFFFF;color:#1A2A44;font-family:'DM Sans',system-ui,sans-serif;line-height:1.6}
a{color:#2F6BFF}
a:hover{color:#1F4FCC}
h1,h2,h3{font-family:'Bricolage Grotesque','DM Sans',system-ui,sans-serif;letter-spacing:-0.025em;text-wrap:balance}
.navbtn:hover{color:#2F6BFF!important}
.btn-blue:hover{background:#1F4FCC!important}
.btn-white:hover{background:#EAF0FF!important}
.btn-line:hover{background:rgba(255,255,255,0.12)!important}
.shot:hover{border-color:#6F9BFF!important}
.pcard:hover{border-color:#2F6BFF!important}
.wa:hover{background:#1EB955!important;transform:scale(1.05)}
.visit:hover{background:#1F4FCC!important}
button:focus-visible,a:focus-visible{outline:3px solid #2F6BFF;outline-offset:2px}
html{-webkit-text-size-adjust:100%}
#app{min-height:100vh}
@media (max-width:640px){
  .wa{padding:0!important;width:56px;justify-content:center}
  .wa span{display:none}
}

/* ===== Celular: organização em sequência (só afeta o site da Jundtech, não os modelos) ===== */
@media (max-width:640px){
  #app > div > header{padding:10px 16px 0!important}
  #app > div > header > div{gap:8px 12px!important;align-items:center!important}
  #app > div > header nav{display:contents!important}
  #app > div > header > div > button:first-child{order:1;flex:1 1 auto;min-width:0}
  #app > div > header .btn-blue{order:2;padding:10px 16px!important;font-size:14px!important;min-height:44px}
  #app > div > header .navbtn{order:3;flex:1 1 30%;text-align:center;padding:10px 0 8px!important;font-size:15px!important;border-bottom-width:3px!important}
  #app > div > header > div::after{content:"";order:3;flex:0 0 0}
  #app > div > header .navbtn[aria-current="false"]{border-bottom-color:#E1E8F5!important}

  /* seções de página: respiro menor e botões em sequência, largura total */
  #app > div > section{padding-left:20px!important;padding-right:20px!important}
  #app > div > section .btn-white,
  #app > div > section .btn-line,
  #app > div > section .btn-blue{width:100%;box-sizing:border-box;text-align:center;display:block}
  #app > div > section div:has(> .btn-white),
  #app > div > section div:has(> .btn-line){width:100%;flex-direction:column}

  /* mockups da home lado a lado */
  #app > div > section div:has(> .shot){display:grid!important;grid-template-columns:1fr 1fr;gap:12px!important;max-width:none!important}
  .shot{padding:8px!important;border-radius:12px!important}
  .shot span{font-size:13px!important}

  /* cards de projetos e etapas em uma coluna */
  #app > div > section div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  #app > div > section ol{grid-template-columns:1fr!important}
}