:root {
  /* Colors */
  --black:       #000000;
  --black-2:     #0A0A0A;
  --black-3:     #111111;
  --dark:        #1A1A1A;
  --dark-2:      #222222;
  --dark-3:      #2A2A2A;
  --gray-tech:   #666666;
  --gray-light:  #A6A6A6;
  --white:       #F2F2F2;
  --white-pure:  #FFFFFF;
  --red:         #E53935;
  --red-dark:    #C62828;
  --red-glow:    rgba(229, 57, 53, 0.15);

  /* Typography */
  --font: 'Montserrat', sans-serif;

  /* Spacing */
  --section-pad: clamp(5rem, 9vw, 9rem);
  --container:   1280px;
  --gutter:      clamp(1.25rem, 4vw, 2.5rem);

  /* Transitions */
  --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    0.2s;
  --dur-med:     0.4s;
  --dur-slow:    0.7s;

  /* Header */
  --header-h:    72px;
}

    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    html{
      scroll-behavior:smooth;
    }

    body{
      background:#0B0B0B;
      color:#e8e8e8;
      font-family:'Inter', sans-serif;
      overflow-x:hidden;
    }

    a{
      text-decoration:none;
      color:inherit;
    }

    img{
      max-width:100%;
      display:block;
    }

    /* =========================
        CONTAINER
    ========================== */

    .container{
      width:100%;
      max-width:1280px;
      margin:0 auto;
      padding:0 40px;
    }

    /* =========================
        HEADER
    ========================== */

    header{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      z-index:1000;
      transition:.4s;
      background:transparent;
      padding-top:12px;
    }

    header.scrolled{
      background:rgba(11,11,11,.95);
      backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(255,255,255,.05);
      
    }



    .navbar{
      
      display:flex;
      align-items:center;
      align-content: center;
      justify-content:space-between;
    }

    .logo{
      display:flex;
      flex-direction:column;
      gap:2px;
    }

    .logo h1{
      font-family:'Montserrat', sans-serif;
      font-size:38px;
      font-weight:700;
      letter-spacing:1px;
    }

    .logo span{
      font-size:10px;
      letter-spacing:3px;
      color:#bdbdbd;
      text-transform:uppercase;
    }

    .logo .red{
      color:#E10600;
    }

    .menu{
      display:flex;
      gap:38px;
      align-items:center;
    }

    .menu a{
      position:relative;
      font-size:14px;
      font-weight:500;
      transition:.3s;
      text-transform: uppercase;
    }

    .menu a::after{
      content:'';
      position:absolute;
      left:0;
      bottom:-8px;
      width:0%;
      height:2px;
      background:#E10600;
      transition:.3s;
    }

    .menu a:hover{
      color:#E10600;
    }

    .menu a:hover::after{
      width:100%;
    }

    .btn-outline{
      border:1px solid #E10600;
      padding:14px 28px;
      transition:.4s;
    }

    .btn-outline:hover{
      background:#E10600;
      color:#fff !important;
    }

    /* =========================
        HERO
    ========================== */

    .hero{
      height:100vh;
      display:flex;
      align-items:center;
      position:relative;
      overflow:hidden;
    }

    .hero::before{
      content:'';
      position:absolute;
      inset:0;
      background:
      linear-gradient(
        90deg,
        rgba(11,11,11,0.98) 30%,
        rgba(11,11,11,0.75) 55%,
        rgba(11,11,11,0.4) 100%
      );
      z-index:1;
    }

    .hero-bg{
      position:absolute;
      inset:0;
      background:url('./hero-bg.avif') center/cover no-repeat; 
      transform:scale(1.05);
      animation:bgZoom 12s ease-in-out infinite alternate;
    }

    @keyframes bgZoom{
      from{
        transform:scale(1.05);
      }
      to{
        transform:scale(1.12);
      }
    }

    .hero-content{
      position:relative;
      z-index:2;
      width:100%;
      padding-bottom:20px;
    }

    .hero-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      align-items:center;
      gap:40px;
    }

    .hero-left{
      max-width:650px;
    }

    .hero-tag{
      color:#E10600;
      text-transform:uppercase;
      letter-spacing:4px;
      font-size:13px;
      margin-bottom:24px;
      font-weight:600;
    }

    .hero-title{
      font-family:'Montserrat', sans-serif;
      font-size:58px;
      line-height:1;
      margin-bottom:28px;
      
    }

    .hero-title .red{
      color:#E10600;
    }

    .red{
      color:#E10600;
    }

   

    .hero-buttons{
      display:flex;
      gap:18px;
      flex-wrap:wrap;
      margin-bottom:70px;
    }

    .btn-primary{
      background:#E10600;
      color:#fff;
      padding:18px 34px;
      font-weight:600;
      border:none;
      font-size:15px;
      cursor:pointer;
      transition:.4s;
    }

    .btn-primary:hover{
      transform:translateY(-4px);
      box-shadow:0 15px 40px rgba(225,6,0,.3);
    }

    .btn-secondary{
      border:1px solid rgba(255,255,255,.2);
      color:#fff;
      padding:18px 34px;
      font-weight:600;
      transition:.4s;
    }

    .btn-secondary:hover{
      background:#fff;
      color:#0B0B0B;
    }



    /* =========================
        REVEAL ANIMATION
    ========================== */

    .reveal{
      opacity:0;
      transform:translateY(60px);
      transition:1s ease;
    }

    .reveal.active{
      opacity:1;
      transform:translateY(0);
    }


/* ==========================================================
   SESSÃO DORES/RISCOS — FIEL À REFERÊNCIA
========================================================== */

.dores{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#050505;
  border-top:1px solid rgba(255,255,255,.05);
}

.dores-bg{
  position:absolute;
  inset:0;
  background:
  linear-gradient(
    90deg,
    rgba(0,0,0,.76) 25%,
    rgba(0,0,0,.52) 55%,
    rgba(0,0,0,.3) 100%
  ),
  url('./riscos-bg.avif')
  right center / cover no-repeat;
  opacity:.38;
}

.dores .container{
  position:relative;
  z-index:2;
}

.dores .section-header{
  margin-bottom:3rem;
}

.dores .section-title{
  max-width:720px;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.1;
  text-transform:uppercase;
}

.dores-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}

.dor-card{
  position:relative;
  padding:1.4rem 1.3rem;
  background:transparent;
  transition:.3s;
}
.dor-card::after{
  content:'';
  position:absolute;
  top:10px;
  left:0;
  width:1px;
  height:80%;
  background:rgba(255,255,255,.14);
}
.dor-card:last-child{
  border-right:none;
}

.dor-card:hover{
  background:rgba(255,255,255,.02);
}

.dor-icon{
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid rgba(229,57,53,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--red);
  margin-bottom:1rem;
  font-size:.8rem;
  background:rgba(229,57,53,.05);
}

.dor-card h3{
  font-size:.82rem;
  font-weight:700;
  color:#f2f2f2;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:.8rem;
  line-height:1.3;
}

.dor-card p{
  font-size:.8rem;
  line-height:1.7;
  color:#9b9b9b;
  max-width:220px;
}

.dores-highlight{
  margin-top:2rem;
  width:fit-content;
  
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.45);
  padding:1rem 1.6rem;
  text-align:left;   /* <- esquerda */
  font-size:1.1rem;
  color:#d7d7d7;
  letter-spacing:.01em;
}

.dores-highlight .red{
  font-weight:700;
}


/* RESPONSIVO */

@media(max-width:1100px){

  .dores-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .dor-card:nth-child(2){
    border-right:none;
  }

}

@media(max-width:768px){

  .dores{
    min-height:auto;
    padding:7rem 0;
  }

  .dores-grid{
    grid-template-columns:1fr;
  }

  .dor-card{
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .dor-card:last-child{
    border-bottom:none;
  }

  .dores-highlight{
    font-size:1rem;
    padding:1rem;
  }

}
/* ==========================================================
   SOLUÇÃO 
========================================================== */

.solucao{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#050505;
}

/* imagem única + overlay progressivo */

.solucao-bg{
  position:absolute;
  inset:0;
  background:
  linear-gradient(
    90deg,
    rgba(0,0,0,.96) 0%,
    rgba(0,0,0,.92) 22%,
    rgba(0,0,0,.78) 42%,
    rgba(0,0,0,.68) 65%,
    rgba(0,0,0,.38) 100%
  ),
  url('./servicos-bg.avif')
  right center / cover no-repeat;

  z-index:1;
}

/* conteúdo flutua */

.solucao .container{
  position:relative;
  z-index:2;
}

.solucao-grid{
  
  display:flex;
}

.solucao-content{
  max-width:520px;
  padding:2rem 0;
}

.solucao-title{
  font-size:clamp(2.8rem,4vw,4rem);
  line-height:1.05;
  font-weight:800;
  color:#fff;
  margin-bottom:1.5rem;
}

.solucao-text{
  font-size: 1.75rem;
  line-height:1.8;
  color:#fff;
  margin-bottom:2rem;
}
.solucao-tex{
  font-size: 1.45rem;
  line-height:1.5;
  color:#fff;
  margin:2rem 0;
}

.solucao-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}

.solucao-list li{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  color:#d8d8d8;
  font-size:.95rem;
  line-height:1.5;
}

.solucao-list i{
  color:var(--red);
  margin-top:3px;
  flex-shrink:0;
  font-size:.95rem;
}



.solucao-image{
  display:none;
}

/* RESPONSIVO */

@media(max-width:768px){

  .solucao{
    min-height:auto;
    padding:6rem 0;
  }

  .solucao-bg{
    background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.95),
      rgba(0,0,0,.78)
    ),
    url('https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?q=80&w=1800&auto=format&fit=crop')
    center center / cover no-repeat;
  }

  .solucao-title{
    font-size:2.4rem;
  }

}

/* ==========================================================
   PROCESSO 
========================================================== */

.processo{
  min-height:100vh;
  display:flex;
  align-items:center;
  background:#050505;
  border-top:1px solid rgba(255,255,255,.05);
}

.processo-grid{
  display:grid;
  grid-template-columns:320px 1fr;
  
  align-items:start;
}

.processo-intro{
  padding-right:2rem;
  border-right:1px solid rgba(255,255,255,.10);
}

.processo-title{
  font-size:clamp(2rem,3vw,3rem);
  line-height:1.1;
  font-weight:800;
  color:#fff;
}

.processo-steps{
  display:grid;
  grid-template-columns:
  1fr 35px
  1fr 35px
  1fr 35px
  1fr 35px
  1fr;
  align-items:start;
}

.step{
  position:relative;
  padding:0 1rem;
}

.step::after{
  content:'';
  position:absolute;
  right:0;
  top:0;
  width:1px;
  height:100%;
  background:rgba(255,255,255,.08);
}

.step:last-child::after{
  display:none;
}

.step-top{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-bottom:1rem;
}

.step-top i{
  color:var(--red);
  font-size:1rem;
}

.step-top span{
  color:var(--red);
  font-size:1.4rem;
  font-weight:700;
}

.step h3{
  color:#f1f1f1;
  text-transform:uppercase;
  font-size:.88rem;
  font-weight:700;
  margin-bottom:.9rem;
  letter-spacing:.04em;
}

.step p{
  color:#9c9c9c;
  font-size:.82rem;
  line-height:1.7;
  max-width:180px;
}

.step-arrow{
  display:flex;
  justify-content:center;
  padding-top:12px;
}

.step-arrow i{
  color:rgba(255,255,255,.35);
  font-size:.8rem;
}

/* RESPONSIVO */

@media(max-width:1100px){

  .processo-grid{
    grid-template-columns:1fr;
  }

  .processo-intro{
    border-right:none;
    padding-right:0;
    margin-bottom:2rem;
  }

  .processo-steps{
    grid-template-columns:1fr 1fr;
    gap:2rem;
  }

  .step-arrow{
    display:none;
  }

}

@media(max-width:768px){

  .processo{
    min-height:auto;
    padding:6rem 0;
  }

  .processo-steps{
    grid-template-columns:1fr;
  }

  .step{
    padding:0 0 1.8rem;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .step::after{
    display:none;
  }

}

/* ==========================================================
   CASES — FIEL AO PRINT
========================================================== */

.cases{
  min-height:100vh;
  display:flex;
  align-items:center;
  background:#050505;
  border-top:1px solid rgba(255,255,255,.05);
}

.cases-grid{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:3rem;
  align-items:start;
}

.cases-intro{
  padding-top:.4rem;
}

.cases-title{
  font-size:clamp(2rem,3vw,3rem);
  line-height:1.05;
  font-weight:800;
  color:#fff;
  margin-bottom:1rem;
}

.cases-text{
  color:#b3b3b3;
  line-height:1.7;
  font-size:.95rem;
  margin-bottom:2rem;
  max-width:240px;
}

.cases-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:1rem 1.6rem;
  border:1px solid rgba(255,255,255,.14);
  color:#f1f1f1;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.05em;
  transition:.3s;
}

.cases-btn:hover{
  border-color:rgba(229,57,53,.45);
}

.cases-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
}

.case-item{
  transition:.3s;
}

.case-item:hover{
  transform:translateY(-3px);
}

.case-image{
  overflow:hidden;
  margin-bottom:.9rem;
  background:#111;
}

.case-image img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
}

.case-content h3{
  color:#f1f1f1;
  font-size:.78rem;
  font-weight:700;
  margin-bottom:.45rem;
  text-transform:uppercase;
}

.case-content p{
  color:#c9c9c9;
  font-size:.82rem;
  margin-bottom:.35rem;
}

.case-content span{
  color:#868686;
  font-size:.75rem;
  line-height:1.6;
}

/* Portfólio real: estilos limitados à seção de cases. */
#cases button{font-family:inherit;cursor:pointer;}
#cases .cases-btn{background:transparent;text-align:center;}
#cases .case-open{display:block;width:100%;border:0;background:none;color:inherit;text-align:left;text-decoration:none;}
#cases .case-image{display:block;}
#cases .case-open[href*="hs"] .case-image img{object-position:center top;}
#cases button:focus-visible,#cases a:focus-visible{outline:3px solid var(--red);outline-offset:5px;}
#cases .case-content span{color:#a6a6a6;}
.cases-page{padding-top:9rem;min-height:calc(100vh - 320px);}
.cases-page-head{max-width:760px;margin-bottom:1rem;}
.cases-page .section-tag{margin-bottom:1rem;}
.cases-page .cases-title{margin-bottom:1rem;}
.cases-page .cases-text{max-width:620px;}
#cases .cases-portfolio{margin-top:3rem;padding-top:2rem;border-top:1px solid #333;}
#cases .cases-portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;}
#cases .case-portfolio-card{min-width:0;padding:0 0 1.1rem;border:1px solid #333;background:#111;color:#f1f1f1;text-align:left;font-family:inherit;text-decoration:none;transition:border-color .25s ease,transform .25s ease;}
#cases .case-portfolio-card:hover{border-color:var(--red);transform:translateY(-3px);}
#cases .case-portfolio-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;margin-bottom:1rem;}
#cases .case-portfolio-card strong,#cases .case-portfolio-card span{display:block;margin:.5rem 1rem;}
#cases .case-portfolio-card .case-number{color:var(--red);font-size:.72rem;font-weight:700;letter-spacing:.08em;}
#cases .case-portfolio-card strong{font-size:.95rem;}
#cases .case-portfolio-card span{font-size:.8rem;line-height:1.6;color:#c9c9c9;}
#cases .case-portfolio-card .case-view{color:#f1f1f1;text-decoration:underline;text-underline-offset:4px;}
.case-detail{padding-top:9rem;background:#0a0a0a;color:#f1f1f1;}
.case-back{display:inline-block;margin-bottom:2rem;color:#c9c9c9;font-size:.82rem;text-decoration:none;}
.case-back:hover{color:#fff;}
.case-detail-head{max-width:780px;margin-bottom:2rem;}
.case-detail-head .section-tag{margin-bottom:1rem;}
.case-detail-head .cases-title{margin-bottom:1rem;}
.case-detail-cover{margin:0 0 2rem;background:#050505;}
.case-detail-cover img{display:block;width:100%;height:auto;max-height:70vh;object-fit:cover;}
.case-detail-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2rem;margin-bottom:2.5rem;padding:1.5rem 0;border-top:1px solid #333;border-bottom:1px solid #333;}
.case-detail-summary p{max-width:660px;color:#c9c9c9;font-size:.95rem;line-height:1.8;}
.case-detail-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;}
.case-detail-photo{background:#111;border:1px solid #333;}
.case-detail-photo.is-featured{grid-column:1/-1;}
.case-detail-photo img{display:block;width:100%;height:auto;object-fit:cover;}
.case-detail-photo figcaption{padding:.9rem 1rem;color:#a6a6a6;font-size:.78rem;line-height:1.6;}
@media(max-width:768px){
  #cases .cases-portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;}
  .case-detail-summary{grid-template-columns:1fr;gap:1.2rem;}
  .case-detail-gallery{grid-template-columns:1fr;}
}
@media(max-width:480px){
  #cases .cases-portfolio-grid{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  #cases .reveal,#cases.reveal{opacity:1;transform:none;transition:none;}
  #cases .case-item,#cases .cases-btn{transition:none;}
}

/* RESPONSIVO */

@media(max-width:1100px){

  .cases-grid{
    grid-template-columns:1fr;
  }

  .cases-list{
    grid-template-columns:repeat(2,1fr);
  }

}

@media(max-width:768px){

  .cases{
    min-height:auto;
    padding:6rem 0;
  }

  .cases-list{
    grid-template-columns:1fr;
  }

}

/* ==========================================================
   CTA FINAL
========================================================== */

.cta-final{
  background:#050505;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:4rem 0;
}

.cta-grid{
  display:grid;
  grid-template-columns: 1fr 1.5fr ;
  min-width: 0;
  gap:3rem;
}

.cta-left{
  padding-right:2rem;
  border-right:1px solid rgba(255,255,255,.08);
  max-width: 400px;
}

.cta-left h2{
  color:#fff;
  font-size:clamp(2rem,3vw,3rem);
  line-height:1.1;
  margin-bottom:1rem;
  font-weight:800;
}

.cta-left p{
  color:#b0b0b0;
  line-height:1.7;
  max-width:420px;
}

.cta-middle{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.cta-item{
  display:flex;
  align-items:center;
  gap:.9rem;
  color:#d4d4d4;
  font-size:.92rem;
}

.cta-item i{
  color:var(--red);
  width:18px;
}

.cta-right{
  display:flex;
  flex-direction:column;
  gap:.8rem;
}

.cta-primary{
  background:var(--red);
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.8rem;
  padding:1.2rem;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.05em;
  transition:.3s;
}

.cta-primary:hover{
  background:#cf2e2b;
}

.cta-secondary{
  border:1px solid rgba(255,255,255,.12);
  color:#f1f1f1;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.8rem;
  padding:1rem;
  font-size:.82rem;
  transition:.3s;
}

.cta-secondary:hover{
  border-color:rgba(255,255,255,.25);
}

/* ==========================================================
   FOOTER
========================================================== */

.footer{
  background:#050505;
  padding:1.4rem 0;
}

.footer-grid{
  display:grid;
  grid-template-columns:220px 1fr auto;
  align-items:center;
  gap:2rem;
}

.footer-logo h3{
  color:#fff;
  font-size:2rem;
  line-height:1;
}

.footer-logo span{
  color:#8c8c8c;
  font-size:.62rem;
  letter-spacing:.18em;
}

.footer-menu{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}

.footer-menu a{
  position:relative;
  color:#9a9a9a;
  font-size:.72rem;
  letter-spacing:.05em;
  padding:0 .95rem;
  transition:.3s;
}
.footer-menu a::after{
  content:'';
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:10px;
  background:rgba(255,255,255,.16);
}
.footer-menu a:last-child::after{
  display:none;
}

.footer-menu a:hover{
  color:var(--red);
}

.footer-contact{
  display:flex;
  gap:1.4rem;
  flex-wrap:wrap;
}

.footer-contact span{
  display:flex;
  align-items:center;
  gap:.5rem;
  color:#9d9d9d;
  font-size:.78rem;
}

/* RESPONSIVO */

@media(max-width:1100px){

  .cta-grid{
    display:block;
    grid-template-columns:1fr;
  }

  .cta-left{
    border-right:none;
    padding-right:0;
  }

  .footer-grid{
    grid-template-columns:1fr;
    text-align:center;
  }

  .footer-menu,
  .footer-contact{
    justify-content:center;
  }

}

/* ============================================================
   SECTION PRIMITIVES
   ============================================================ */
.section {
  padding: var(--section-pad) 0;
  position: relative;
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.1rem;
}


.section-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--white);
}
.section-title em {
  font-style: normal;
  color: var(--gray-light);
}

.section-header { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-header.center { text-align: center; }
.section-header.center .section-tag { justify-content: center; }
.section-header.center .section-tag::before { display: none; }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

    /* =========================
        RESPONSIVO
    ========================== */

    @media(max-width:1100px){

      .hero-grid{
        grid-template-columns:1fr;
      }
      
      .hero-title{
        font-size:58px;
      }

      .stats{
        grid-template-columns:repeat(4, 1fr);
      }

      .menu{
        display:none;
      }

    }

    @media(max-width:768px){

      .container{
        padding:0 24px;
      }

      .hero{
        padding-bottom:80px;
      }
      .hero-left{
        padding-top: 60px;
      }
      .hero-title{
        font-size:44px;
      }

      .hero-description{
        font-size:17px;
      }

      .hero-buttons{
        flex-direction:column;
      }

      .btn-primary,
      .btn-secondary{
        width:100%;
        text-align:center;
      }

      .stats{
        grid-template-columns:repeat(4, 1fr);
      }

      .logo h1{
        font-size:34px;
      }

    }



/* ===== PROFESSIONAL RESPONSIVE REFACTOR ===== */

section{
  min-height:100svh;
  display:flex;
  align-items:center;
}

.section{
  min-height:100svh;
  display:flex;
  align-items:center;
}

#header{
  height:var(--header-h);
}

.hero,
.diferenciais{
  padding-top:calc(var(--header-h) + 2rem);
}

.menu-toggle{
  display:none;
  background:none;
  border:none;
  width:42px;
  height:42px;
  cursor:pointer;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  z-index:1002;
}

.menu-toggle span{
  width:28px;
  height:2px;
  background:#fff;
  transition:.3s;
}

.menu-toggle.active span:nth-child(1){
  transform:translateY(8px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2){
  opacity:0;
}
.menu-toggle.active span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg);
}

.separator{
  margin-left:0;
}

.reveal{
  opacity:0;
  transition:all .9s var(--ease-out);
}

.reveal-up{
  transform:translateY(50px);
}
.reveal-left{
  transform:translateX(-50px);
}
.reveal-right{
  transform:translateX(50px);
}

.reveal.active{
  opacity:1;
  transform:translate(0,0);
}

@media(max-width:1100px){

  .navbar{
    height:var(--header-h);
  }

  .menu-toggle{
    display:flex;
  }

  .menu{
    position:fixed;
    top:var(--header-h);
    right:-100%;
    width:min(420px,100%);
    height:calc(100svh - var(--header-h));
    background:rgba(11,11,11,.98);
    backdrop-filter:blur(12px);
    display:flex !important;
    flex-direction:column;
    justify-content:flex-start;
    padding:2rem;
    gap:1.8rem;
    transition:.4s var(--ease-out);
    border-left:1px solid rgba(255,255,255,.06);
    z-index:1001;
  }

  .menu.active{
    right:0;
  }

  .hero{
    align-items:center;
  }

  .hero-content{
    padding-top:calc(var(--header-h) + 2rem);
  }

  .hero-grid{
    grid-template-columns:1fr;
  }

  .diferenciais__grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:768px){

  section,
  .section{
    min-height:auto;
  }

  .hero-title{
    font-size:clamp(2.2rem,10vw,3.2rem);
    margin-bottom:1rem;
  }

  .hero-description{
    font-size:1rem;
  }

  .stats{
    grid-template-columns:repeat(2, 1fr);
    gap:1rem;
  }

  .diferenciais__grid{
    grid-template-columns:1fr;
  }

  .container{
    padding:0 20px;
  }
}

/* ==========================================================
   HERO H1 (mesmo visual, semântica correta)
========================================================== */

.hero-heading{
  display:block;
  font-weight:inherit;
}

.hero-title{
  display:block;
}

/* ==========================================================
   SOBRE
========================================================== */

.sobre{
  background:#0B0B0B;
  border-top:1px solid rgba(255,255,255,.05);
}

.sobre-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(2.5rem,5vw,4rem);
  align-items:start;
  margin-bottom:clamp(3rem,6vw,5rem);
  background:url('./sobre-bg.avif') center/cover no-repeat;
}
.sobre-grid::before{
      content:'';
      position:absolute;
      inset:0;
      background:
      linear-gradient(
        90deg,
        rgba(11,11,11,0.98) 30%,
        rgba(11,11,11,0.55) 75%,
        rgba(11,11,11,0.2) 100%
      );
      
    }

.sobre-title{
  margin-bottom:1.6rem;
}

.sobre-p{
  color:#b3b3b3;
  font-size:.98rem;
  line-height:1.85;
  margin-bottom:1.2rem;
  max-width:560px;
}

.sobre-p:last-child{
  margin-bottom:0;
  
}

.sobre-stats{
  display:flex;
  flex-direction:column;
  gap:3rem;
  align-self: center;
  
}

.stat-card{
  display:flex;
  align-items:center;
  gap:1.1rem;
  padding:1.5rem 1.6rem;
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.08);
  transition:transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), background var(--dur-med) var(--ease);
}

.stat-card:hover{
  transform:translateY(-4px);
  border-color:rgba(229,57,53,.35);
  background:rgba(229,57,53,.05);
}

.stat-icon{
  flex-shrink:0;
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(229,57,53,.08);
  border:1px solid rgba(229,57,53,.35);
  color:var(--red);
  font-size:1.15rem;
}

.stat-info{
  display:flex;
  flex-direction:column;
  gap:.15rem;
}

.stat-info strong{
  font-family:var(--font);
  font-size:1.5rem;
  font-weight:800;
  color:#fff;
  line-height:1;
}

.stat-info span{
  color:#9b9b9b;
  font-size:.82rem;
  line-height:1.4;
}

.mvv-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4rem;
}

.mvv-card{
  padding:2rem 1.8rem;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  transition:transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}

.mvv-card:hover{
  transform:translateY(-4px);
  border-color:rgba(229,57,53,.3);
}

.mvv-icon{
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(229,57,53,.08);
  border:1px solid rgba(229,57,53,.4);
  color:var(--red);
  font-size:.95rem;
  margin-bottom:1.2rem;
}

.mvv-card h3{
  color:#fff;
  font-size:1rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:.8rem;
}

.mvv-card p{
  color:#9b9b9b;
  font-size:.88rem;
  line-height:1.7;
}

@media(max-width:1100px){
  .sobre-grid{
    grid-template-columns:1fr;
  }
  .mvv-grid{
    grid-template-columns:1fr;
  }
}

/* ==========================================================
   POR QUE A OBRA
========================================================== */

.porque{
  position:relative;
  background:#050505;
  border-top:1px solid rgba(255,255,255,.05);
  overflow:hidden;
}

.porque-bg{
  position:absolute;
  inset:0;
  background:
  radial-gradient(circle at 15% 20%, rgba(229,57,53,.08), transparent 55%),
  radial-gradient(circle at 85% 80%, rgba(229,57,53,.06), transparent 55%);
  pointer-events:none;
}

.porque-container{
  position:relative;
  z-index:2;
  max-width:840px;
}

.porque-quote{
  font-family:var(--font);
  font-size:clamp(1.3rem,2.4vw,1.4rem);
  font-weight:600;
  line-height:1.5;
  color:#f2f2f2;
  border-left:3px solid var(--red);
  padding-left:1.6rem;
  margin:1.5rem 0 2.5rem;
}

.porque-title{
  margin-bottom:1.8rem;
}

.porque-subtitle{
  font-family:var(--font);
  font-size:clamp(1.4rem,2.6vw,2rem);
  font-weight:700;
  line-height:1.35;
  color:#fff;
  margin-bottom:1.6rem;
}

.porque-text{
  color:#b3b3b3;
  font-size:1rem;
  line-height:1.85;
  max-width:640px;
  margin-bottom:2.4rem;
}

.porque-btn{
  display:inline-flex;
}

/* ==========================================================
   SERVIÇOS — GRID 2 COLUNAS
========================================================== */

.solucao-list--grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.9rem 2.2rem;
}

@media(max-width:768px){
  .solucao-list--grid{
    grid-template-columns:1fr;
  }
}

/* ==========================================================
   FOOTER — CREA
========================================================== */

.footer-crea{
  display:flex;
  margin-top:1.5rem;
  align-items:center;
  justify-content:center;
  color:#6f6f6f;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ==========================================================
   BOTÕES FLUTUANTES (WHATSAPP / INSTAGRAM)
========================================================== */

.floating-buttons{
  position:fixed;
  right:max(20px, env(safe-area-inset-right));
  bottom:max(20px, env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:1500;
}

.float-btn{
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  color:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.float-btn:hover,
.float-btn:focus-visible{
  transform:scale(1.08);
  box-shadow:0 10px 28px rgba(0,0,0,.45);
}

.float-btn:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}

.float-whatsapp{
  background:#25D366;
}

.float-instagram{
  background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

@media(max-width:768px){
  .floating-buttons{
    gap:10px;
  }
  .float-btn{
    width:50px;
    height:50px;
    font-size:1.3rem;
  }
}

/* ==========================================================
   DEPOIMENTOS (CARROSSEL)
========================================================== */

.cta-grid{
  grid-template-columns:1fr 1.5fr;
}

.depoimentos{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  padding:2rem;
}

.depoimentos-tag{
  margin-bottom:1.4rem;
}

.depoimentos-track{
  overflow:hidden;
  position:relative;
}

.depoimentos-slides{
  list-style:none;
  display:flex;
  transition:transform var(--dur-slow) var(--ease-out);
}

.depoimento-slide{
  flex:0 0 100%;
  min-width:100%;
  padding-right:.4rem;
}

.depoimento-texto{
  color:#e4e4e4;
  font-size:1rem;
  line-height:1.75;
  min-height:110px;
  margin-bottom:1rem;
}

.depoimento-estrelas{
  color:var(--red);
  font-size:.85rem;
  letter-spacing:.15em;
  margin-bottom:.6rem;
}

.depoimento-autor{
  color:#9b9b9b;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.03em;
}

.depoimentos-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:1.6rem;
}

.depoimento-arrow{
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:transparent;
  color:#f1f1f1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.depoimento-arrow:hover,
.depoimento-arrow:focus-visible{
  border-color:var(--red);
  color:var(--red);
}

.depoimentos-dots{
  display:flex;
  gap:.5rem;
}

.depoimento-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.2);
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  padding:0;
}

.depoimento-dot.active{
  background:var(--red);
  transform:scale(1.25);
}

@media(max-width:1100px){
  .cta-grid{
    grid-template-columns:1fr;
  }
  .depoimentos{
    margin-top:2rem;
  }
}

/* ==========================================================
   ACESSIBILIDADE — MOTION REDUZIDO
========================================================== */

@media (prefers-reduced-motion: reduce){
  .reveal,
  .reveal-up,
  .reveal-left,
  .reveal-right,
  .stat-card,
  .mvv-card,
  .case-item,
  .float-btn,
  .depoimentos-slides{
    transition:none !important;
    animation:none !important;
  }
  .hero-bg{
    animation:none !important;
  }
}