/* =====================================================
   ProtectTI - RESPONSIVO (mobile/tablet/notebook/desktop)
   Objetivo: ajustar layout em todos os tamanhos sem alterar cores/identidade.
   ===================================================== */

/* ===== PREVINE SCROLL / ARRASTE HORIZONTAL EM QUALQUER DISPOSITIVO ===== */
/* Garante que html e body nunca ultrapassem a largura da tela              */
html,body{
  overflow-x:hidden;
  max-width:100%;
}

/* Dispositivos touch (smartphones/tablets): restringe gesto de pan só ao eixo Y  */
/* overscroll-behavior-x elimina o bounce/arraste lateral mesmo quando há overflow */
@media (pointer:coarse){
  html,body{
    touch-action:pan-y;
    overscroll-behavior-x:none;
  }
}

/* ===== Ajustes gerais ===== */
@media (max-width: 1100px){
  .solution-grid{grid-template-columns:repeat(2,1fr)}
  .footer-top-grid{grid-template-columns:1fr 1fr 1fr}
  .footer-brand{grid-column:1 / -1}
}

@media (max-width: 1024px){
  .hero-container{padding:72px 24px 60px; width:100%; max-width:100%;}
  .problem-grid{gap:24px}
  .servicos-grid{gap:24px}
  .tech-card-featured{padding:40px 36px}
}

@media (max-height:800px) and (min-width:901px){

  .hero{
    min-height:auto;
    padding-top:70px;
    padding-bottom:10px;
    justify-content:flex-start;
    padding-top:calc(64px + env(safe-area-inset-top));
  }

  .hero-container{
    padding-top:16px;
    width:100%;
    max-width:100%;
  }

  .hero-title{
    margin-bottom:12px;
  }

  .hero-description{
    margin-bottom:16px;
  }

}

/* Tablet / menu mobile + grids */
@media (max-width: 900px){
  /* Menu mobile (overlay) */
   .hero{
    min-height:auto;
    margin-top:0px;
    padding-top:env(safe-area-inset-top);
    justify-content:flex-start;
  }
  .hero-container{ padding: 28px 20px 36px; width:100%; max-width:100%;}
  .hero-badge     { margin-bottom: 18px; }
  .hero-title     { margin-bottom: 18px; }
  .hero-description { margin-bottom: 22px; }
  .nav-list{
    display:none;
    flex-direction:column;
    position:fixed;
    inset:0;
    height:100vh;
    background:var(--dark2);
    align-items:center;
    justify-content:center;
    gap:20px;
    z-index:999;
  }
  .nav-list.open{display:flex}
  .nav-link{font-size:calc(var(--fs-nav) + 4px);color:#fff !important}
  .hamburger{display:flex;z-index:1000}
  .btn-nav{display:none}

  /* Layouts em coluna */
  .problem-grid{grid-template-columns:1fr}
  .servicos-grid{grid-template-columns:repeat(2,1fr)}
  .contato-layout{grid-template-columns:1fr}

  /* Comparativo vira coluna */
  .comparativo-grid{grid-template-columns:1fr;gap:20px}
  .comparativo-divider{order:0;display:flex;justify-content:center;margin:-10px 0}
  .comparativo-vs{width:60px;height:60px;font-size:16px}
  .hamburger.open span{
    background:#fff !important;
  }
}

@media (max-width: 768px){
  .hero-bg-img{display:none}

  .timeline{padding-left:78px}
  .timeline::before{left:30px}
  .timeline-number{left:-70px}

  .tech-card-featured{padding:32px 24px}
  .tech-logo-wrap{position:relative;top:auto;right:auto;margin:0 auto 20px}
  .tech-info{text-align:center}
  .tech-highlights{grid-template-columns:1fr 1fr}

  .problem-section,.solution-section,.servicos,.como-funciona-section,.tecnologia-section,.cta-section,.contato{padding:60px 0}
  .section-header{margin-bottom:30px}
}

@media (max-width: 600px){
  .hero-container{padding:72px 16px 50px; width:100%; max-width:100%;}

  .servicos-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}

  .hero-cta{flex-direction:column;align-items:center}
  .cta-buttons{flex-direction:column;align-items:center}

  /* Hero stats: empilha */
  .hero-stats{grid-template-columns:1fr;gap:14px;padding:18px 20px}
  .stat{flex-direction:row;justify-content:center;gap:10px;align-items:center}

  .tech-card-featured{padding:28px 18px}
  .tech-logo-wrap{width:60px;height:60px;margin:0 auto 16px}
  .tech-award-icon{font-size:26px}
  .tech-highlights{grid-template-columns:1fr}

  .footer-top-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
  .footer-bottom-inner{flex-direction:column;text-align:center}

  .contato-form{padding:28px 18px}
  .solution-grid{grid-template-columns:1fr}

  .back-to-top{right:16px;bottom:84px}
  .whatsapp-float{right:16px;bottom:16px}

  .comparativo-col{padding:24px 18px}
  .social-links{justify-content:center}
  .social-block{text-align:center}
}

@media (max-width: 420px){
  .hero-badge{padding:6px 14px}
  .btn-large{padding:14px 22px}
  .problem-card{padding:30px 20px 24px}
  .comparativo-col{padding:22px 16px}
  .footer-top-grid{grid-template-columns:1fr}
}

/* Desktop grande */
@media (min-width: 1400px){
  .container{max-width:1280px}
  .hero-content{max-width:960px}
}

@media (max-width: 480px){
  :root{
    --fs-hero-title:46px;
    --fs-section-title:34px;
    --fs-block-title:26px;
    --fs-card-title:20px;

    --fs-lead:18px;
    --fs-text:16px;
  }
}

@supports (padding: max(0px)){
  .hero{
    padding-top:max(64px, env(safe-area-inset-top));
  }
}