/* =========================
   MOBILE PANTUX STUDIO
========================= */

@media(max-width:768px){

  body{
    overflow-x:hidden;
  }

  /* HEADER */

  .header{
    position:fixed;
    top:8px;
    left:8px;
    right:8px;
    width:auto;
    height:74px;
    padding:0 14px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-radius:0 0 22px 22px;
    background:rgba(3,7,18,.96);
    border:1px solid rgba(255,255,255,.05);
    backdrop-filter:blur(18px);

    z-index:9999;
    overflow:visible;
  }

  .header a:has(.logo){
    display:flex;
    align-items:center;
    flex-shrink:0;
  }

  .logo{
    height:62px;
    width:auto;
  }

  .nav,
  .header-btn{
    display:none !important;
  }

.mobile-menu-btn{
  display:none;
}

  .mobile-menu{
    position:fixed;

    top:92px;
    left:12px;
    right:12px;

    z-index:10000;

    display:none;
    flex-direction:column;
    gap:12px;

    padding:20px;

    border-radius:22px;

    background:rgba(3,7,18,.98);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
  }

  .mobile-menu.active{
    display:flex !important;
  }

  .mobile-menu a{
    color:white;
    text-decoration:none;

    font-size:16px;
    font-weight:700;

    padding:14px 16px;

    border-radius:14px;

    background:rgba(255,255,255,.035);
  }

  .mobile-menu a[href="processo.html"]{
    display:none;
  }

  .hero,
  .pricing-page,
  .portfolio-page,
  .about-modern,
  .page-hero{
    padding-top:108px !important;
  }

  /* HOME */

  .hero{
    min-height:auto;
    padding-left:20px;
    padding-right:20px;
    padding-bottom:50px;

    display:flex;
    flex-direction:column;
    gap:34px;
  }

  .badge{
    font-size:10px;
    padding:9px 14px;
    margin-bottom:24px;
  }

  .hero-left h1{
    font-size:42px;
    line-height:1.05;
    letter-spacing:-2px;
    margin-bottom:22px;
  }

  .hero-left p{
    font-size:16px;
    line-height:1.8;
    color:#cbd5e1;
    margin-bottom:30px;
  }

  .hero-buttons{
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  .primary-btn,
  .secondary-btn{
    width:100%;
    height:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:18px;

    font-size:15px;
    font-weight:600;
  }

  .hero-right{
    width:100%;
  }

  .product-window{
    width:100%;
    height:420px;
    border-radius:30px;
    overflow:hidden;
  }

  .window-top{
    height:50px;
  }

  .slides{
    height:calc(100% - 50px);
  }

  .slide{
    padding:22px;
  }

  .real-image{
    width:100%;
    height:200px;
    border-radius:20px;
    overflow:hidden;
    margin-bottom:22px;
  }

  .real-image img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .cards{
    width:calc(100% - 40px);
    margin:0 auto 70px;
    padding:24px;

    display:grid;
    grid-template-columns:1fr;
    gap:22px;

    border-radius:30px;
    background:linear-gradient(180deg, rgba(10,18,40,.95), rgba(4,8,24,.96));
    border:1px solid rgba(255,255,255,.05);
    box-shadow:0 0 40px rgba(37,99,255,.08);
  }

  .card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    padding-bottom:18px;
    border-bottom:1px solid rgba(255,255,255,.05);
  }

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

  .icon{
    width:68px;
    height:68px;
    border-radius:20px;
    margin-bottom:18px;
    font-size:28px;
  }

  .card h3{
    font-size:24px;
    line-height:1.2;
    margin-bottom:12px;
  }

  .card p{
    font-size:15px;
    line-height:1.8;
    color:#cbd5e1;
  }

  /* PORTFÓLIO */

  .portfolio-page{
    padding-left:20px;
    padding-right:20px;
    padding-bottom:70px;
  }

  .portfolio-hero{
    text-align:left;
    margin-bottom:42px;
  }

  .portfolio-hero span{
    display:block;
    color:#3b82f6;
    font-size:13px;
    letter-spacing:4px;
    margin-bottom:22px;
  }

  .portfolio-hero h1{
    font-size:40px;
    line-height:1.08;
    letter-spacing:-1px;
    margin:0 0 22px;
  }

  .portfolio-hero h1 strong{
    color:#2563ff;
  }

  .portfolio-hero p{
    font-size:17px;
    line-height:1.7;
    color:#cbd5e1;
  }

  .portfolio-grid-new{
    display:flex;
    flex-direction:column;
    gap:24px;
  }

  .project-card{
    display:flex;
    flex-direction:column;
    gap:20px;
    align-items:stretch;

    padding:22px;
    border-radius:30px;

    background:linear-gradient(135deg, rgba(12,24,58,.95), rgba(4,9,26,.96));
    border:1px solid rgba(255,255,255,.08);

    box-shadow:
      0 0 45px rgba(37,99,255,.08),
      inset 0 1px 0 rgba(255,255,255,.03);
  }

  .project-image{
    width:100%;
    height:220px;
    border-radius:22px;
    overflow:hidden;
    margin:0;
  }

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

  .project-info{
    padding:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .project-info span{
    color:#3b82f6;
    font-size:12px;
    letter-spacing:3px;
    font-weight:700;
    margin-bottom:12px;
  }

  .project-info h3{
    font-size:22px;
    line-height:1.22;
    margin:0 0 12px;
  }

  .project-info p{
    font-size:15px;
    line-height:1.65;
    color:#cbd5e1;
    margin-bottom:18px;
  }

  .project-button{
    width:max-content;
    padding:12px 18px;
    border-radius:14px;

    background:transparent;
    border:1px solid #2563ff;
    color:#3b82f6;

    font-size:15px;
    font-weight:700;
  }

  /* SERVIÇOS */

  .pricing-page{
    padding-left:20px;
    padding-right:20px;
    padding-bottom:70px;
  }

  .pricing-top{
    display:flex;
    flex-direction:column;
    gap:28px;
    margin-bottom:34px;
  }

  .pricing-top-text{
    text-align:left;
  }

  .pricing-top-text h1{
    font-size:40px;
    line-height:1.08;
    letter-spacing:-1px;
  }

  .pricing-top-text p{
    font-size:16px;
    line-height:1.7;
  }

  .pricing-tags{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .pricing-visual{
    display:none;
  }

  .pricing-cards-new{
    display:flex;
    flex-direction:column;
    gap:22px;
  }

  .plan-card{
    padding:28px 24px;
    border-radius:28px;
  }

  .plan-card h3{
    font-size:26px;
    line-height:1.2;
  }

  .plan-card p{
    font-size:15px;
    line-height:1.7;
  }

  .plan-price strong{
    font-size:38px;
  }

  .plan-card ul{
    gap:12px;
  }

  .plan-card li{
    font-size:14px;
    line-height:1.5;
  }

  .trust-strip{
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  /* SOBRE */

  .about-modern{
    width:calc(100% - 34px);
    padding-bottom:60px;
  }

  .about-hero-modern{
    text-align:center;
    margin-bottom:42px;
  }

  .about-hero-modern span{
    display:block;
    font-size:11px;
    letter-spacing:3px;
    color:#2563ff;
    margin-bottom:18px;
    font-weight:700;
  }

  .about-hero-modern h1{
    font-size:34px;
    line-height:1.08;
    letter-spacing:-1px;
    margin-bottom:22px;
  }

  .about-hero-modern h1 strong{
    color:#2563ff;
  }

  .about-hero-modern p{
    font-size:15px;
    line-height:1.75;
    color:#cbd5e1;
  }

  .about-cards-modern{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-bottom:28px;
  }

  .about-modern-card{
    position:relative;
    padding:28px 26px;
    border-radius:30px;

    background:
    linear-gradient(
      135deg,
      rgba(10,20,48,.95),
      rgba(4,8,22,.98)
    );

    border:1px solid rgba(59,130,246,.15);
    overflow:hidden;
  }

  .modern-icon{
    width:88px;
    height:88px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:26px;

    background:rgba(37,99,255,.12);

    font-size:42px;
    margin-bottom:24px;
  }

  .about-modern-card h3{
    font-size:22px;
    line-height:1.2;
    margin-bottom:12px;
  }

  .about-modern-card p{
    font-size:15px;
    line-height:1.75;
    color:#cbd5e1;
    max-width:100%;
  }

  .about-contact-box{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:26px;

    padding:28px;
    border-radius:30px;

    background:
    linear-gradient(
      135deg,
      rgba(10,20,48,.95),
      rgba(4,8,22,.98)
    );

    border:1px solid rgba(59,130,246,.16);
  }

  .contact-left{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }

  .contact-icon{
    width:88px;
    height:88px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:26px;

    background:rgba(37,99,255,.12);

    font-size:38px;
  }

  .contact-left h2{
    font-size:22px;
    line-height:1.2;
  }

  .contact-left p{
    font-size:15px;
    line-height:1.7;
    color:#cbd5e1;
  }

  .contact-right{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .contact-right a{
    width:100%;
    height:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:18px;

    background:#2563ff;

    color:white;
    text-decoration:none;

    font-size:15px;
    font-weight:600;
  }

  /* PROCESSO */

  .page-hero{
    padding-left:20px;
    padding-right:20px;
    padding-bottom:50px;
    min-height:auto;
  }

  .page-hero h1{
    font-size:40px;
    line-height:1.08;
  }

  .page-hero p{
    font-size:16px;
    line-height:1.8;
  }

  .page-section{
    padding:20px 20px 70px;
  }

  .process-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:22px;
  }

}

/* APENAS MOBILE */

@media(max-width:768px){

  .mobile-menu-btn{
    display:flex !important;

    align-items:center;
    justify-content:center;

    width:36px;
    height:36px;

    border:none;
    background:transparent;

    color:white;

    font-size:30px;

    cursor:pointer;
  }

}

@media(max-width:768px){

  .home-process{
    width:calc(100% - 40px);
    margin:70px auto;
  }

  .home-process .section-title{
    text-align:left;
    margin-bottom:28px;
  }

  .home-process-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }

  .home-process-card{
    min-height:auto;
    padding:26px;
    border-radius:24px;
  }

  .home-process-card .process-number{
    font-size:30px;
    margin-bottom:18px;
  }

  .home-process-card h3{
    font-size:22px;
  }

  .home-process-card p{
    font-size:15px;
  }

}

@media(max-width:768px){

  .home-process{
    width:calc(100% - 40px);
    margin:70px auto;
  }

  .home-process .section-title{
    text-align:left;
    margin-bottom:28px;
  }

  .home-process .section-title h2{
    font-size:34px;
  }

  .home-process-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .home-process-card{
    min-height:auto;
    padding:26px;
    border-radius:24px;
  }
}

/* CORREÇÃO PORTFÓLIO HOME MOBILE */

@media(max-width:768px){

  .portfolio-section{
    padding:60px 20px 70px;
  }

  .portfolio-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:22px !important;
  }

  .portfolio-card{
    width:100% !important;
    min-height:auto !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .portfolio-image{
    width:100% !important;
    height:220px !important;
    border-radius:26px 26px 0 0 !important;
  }

  .portfolio-image img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  .portfolio-info{
    padding:24px !important;
  }

  .portfolio-top{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:14px !important;
  }

  .portfolio-info h3{
    font-size:24px !important;
    line-height:1.15 !important;
  }

  .portfolio-info p{
    font-size:15px !important;
    line-height:1.7 !important;
  }

  .visit-site{
    font-size:12px !important;
    white-space:nowrap !important;
  }

@media(max-width:768px){

  .custom-project-cta{
    margin:36px auto;
    padding:0 16px;
  }

  .custom-project-content{
    padding:36px 20px;
    border-radius:24px;
  }

  .custom-project-content h2{
    font-size:2.2rem;
  }

  .custom-project-content p{
    font-size:.95rem;
  }

  .custom-project-divider{
    gap:12px;
    font-size:.95rem;
  }

  .custom-project-buttons{
    grid-template-columns:1fr;
    gap:14px;
  }

  .custom-project-buttons a{
    width:100%;
    min-height:74px;
  }

}

}

/* CTA PROJETO PERSONALIZADO - MOBILE */

@media(max-width:768px){

  .custom-project-cta{
    width:100%;
    margin:38px auto 28px;
    padding:0 14px;
  }

  .custom-project-content{
    padding:34px 20px 26px;
    border-radius:26px;
  }

  .custom-project-content::before,
  .custom-project-content::after{
    display:none;
  }

  .custom-project-badge{
    padding:9px 14px;
    font-size:12px;
    margin-bottom:28px;
  }

  .custom-project-content h2{
    font-size:34px;
    line-height:1.08;
    letter-spacing:-1px;
    max-width:300px;
    margin:0 auto 26px;
  }

  .custom-project-content p{
    font-size:15px;
    line-height:1.85;
    max-width:290px;
    margin:0 auto 34px;
  }

  .custom-project-divider{
    max-width:270px;
    gap:12px;
    margin:0 auto 30px;
    font-size:15px;
  }

  .custom-project-buttons{
    display:flex;
    flex-direction:column;
    gap:14px;
    width:100%;
    max-width:100%;
  }

  .custom-project-buttons a{
    width:100%;
    min-height:84px;
    padding:18px 20px;
    border-radius:18px;
    justify-content:flex-start;
    gap:16px;
    font-size:19px;
  }

  .custom-project-buttons a .contact-icon-svg{
    width:36px;
    height:36px;
  }

  .custom-project-buttons a div{
    min-width:0;
    align-items:flex-start;
  }

  .custom-project-buttons a small{
    font-size:14px;
    line-height:1.3;
    word-break:break-word;
  }

}