* {
   box-sizing: border-box
 }

 body {
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
   background: #0c0714;
   color: #fff;
   line-height: 1.6
 }

 header {
   background: #120a1f;
   padding: 25px 30px;
   border-bottom: 1px solid #2d1b45
 }

 nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   max-width: 1400px;
   margin: auto
 }

 .logo {
   font-size: 28px;
   font-weight: bold;
   color: #b57cff
 }

 nav a {
   color: #fff;
   margin-left: 30px;
   text-decoration: none;
   font-weight: bold;
   opacity: .9
 }

 nav a:hover {
   opacity: 1
 }

 .hero {
   padding: 140px 20px;
   text-align: center;
   background: linear-gradient(120deg, #1a0f2d, #06030c)
 }

 .hero h1 {
   font-size: 64px;
   margin-bottom: 10px;
   color: #c79cff
 }

 .hero h2 {
   font-size: 30px;
   font-weight: normal;
   color: #9a6bff
 }

 .hero p {
   max-width: 800px;
   margin: auto;
   margin-top: 25px;
   font-size: 18px
 }

 .btn {
   margin-top: 40px;
   padding: 18px 36px;
   background: #25D366;
   border: none;
   border-radius: 10px;
   font-size: 18px;
   color: #fff;
   font-weight: bold;
   cursor: pointer
 }

 .section {
   padding: 100px 20px;
   max-width: 1400px;
   margin: auto
 }

 .section h2 {
   text-align: center;
   font-size: 40px;
   margin-bottom: 70px;
   color: #c79cff
 }

 .products {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 35px
 }

 .product {
   background: #140c22;
   border-radius: 14px;
   overflow: hidden;
   border: 1px solid #2d1b45;
   transition: .3s
 }

 .product:hover {
   transform: translateY(-12px)
 }

 .product img {
   width: 100%;
   height: 260px;
   object-fit: cover
 }

 .product h3 {
   padding: 20px;
   margin: 0
 }

 .product p {
   padding: 0 20px 25px;
   opacity: .85
 }

 .blog {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 35px
 }

 .post {
   background: #140c22;
   padding: 30px;
   border-radius: 14px;
   border: 1px solid #2d1b45;
   transition: .3s
 }

 .post:hover {
   transform: translateY(-8px)
 }

 .post h3 {
   margin-top: 0;
   color: #c79cff
 }

 .map {
   margin-top: 50px;
   border-radius: 14px;
   overflow: hidden
 }

 .about {
   max-width: 900px;
   margin: auto;
   font-size: 18px;
   text-align: center
 }

 footer {
   margin-top: 100px;
   background: #120a1f;
   padding: 60px 20px;
   text-align: center
 }

 /* BOTÃO FIXO */
 .whats-fixo {
   position: fixed;
   bottom: 20px;
   right: 20px;
   background: #25D366;
   color: #fff;
   padding: 14px 18px;
   border-radius: 50px;
   font-weight: bold;
   text-decoration: none;
   z-index: 999;
 }

 .ifood-fixo {
   position: fixed;
   bottom: 80px;
   right: 20px;
   background: #EA1D2C;
   color: #fff;
   padding: 14px 18px;
   border-radius: 50px;
   font-weight: bold;
   text-decoration: none;
   z-index: 999;
 }

 .botoes {
   display: flex;
   justify-content: center;
   gap: 15px;
   flex-wrap: wrap;
   margin-top: 40px;
 }

 .ifood {
   background: #EA1D2C;
 }

 .menu-btn {
   display: none;
   font-size: 34px;
   cursor: pointer;
   color: white;
 }

 .menu {
   display: flex;
 }


 .assinatura {
   margin-top: 25px;
   font-size: 14px;
   opacity: 0.8;
 }

.assinatura{

    margin-top:30px;

    font-size:15px;

    color:#bbb;

    line-height:1.8;

}

 .assinatura a:hover {
   text-decoration: none;
 }


.online-box{
    margin-top:30px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    font-size:17px;
    font-weight:bold;
    color:#fff;
}

.bolinha{
    width:12px;
    height:12px;
    background:#25D366;
    border-radius:50%;
    animation:pulsar 1.5s infinite;
}

@keyframes pulsar{

    0%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(37,211,102,.7);
    }

    70%{
        transform:scale(1.1);
        box-shadow:0 0 0 12px rgba(37,211,102,0);
    }

    100%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }

}

.pull-section{
    background:linear-gradient(135deg,#4b0082,#6f2cff);
    color:#fff;
    padding:70px 20px;
    text-align:center;
}

.pull-container{
    max-width:900px;
    margin:auto;
}

.pull-section h2{
    font-size:2rem;
    margin-bottom:20px;
}

.pull-section p{
    font-size:1.1rem;
    line-height:1.8;
    margin-bottom:18px;
    opacity:.95;
}

.pull-btn{
    display:inline-block;
    margin-top:20px;
    background:#fff;
    color:#5b21b6;
    padding:16px 34px;
    border-radius:50px;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.pull-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(0,0,0,.25);
}

footer{
    background:#111;
    color:#bbb;
    text-align:center;
    padding:30px 20px;
}

footer a{
    color:#9b6cff;
    text-decoration:none;
    font-weight:600;
}

footer a:hover{
    color:#fff;
}

.footer-credit{
    margin-top:10px;
    font-size:.95rem;
}




 /* RESPONSIVO MOBILE */
 @media (max-width:768px) {

   header {
     padding: 20px;
   }


   nav {
     position: relative;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
   }


   .logo {
     font-size: 22px;
   }


   .menu-btn {
     display: block;
     font-size: 32px;
     cursor: pointer;
   }


   .menu {

     display: none;
     position: absolute;
     top: 50px;
     left: 0;

     width: 100%;

     background: #120a1f;

     flex-direction: column;

     padding: 20px;

     border-radius: 12px;

     z-index: 999;

   }


   .menu.ativo {
     display: flex;
   }


   .menu a {

     margin: 12px 0;

     text-align: center;

   }



   .hero {
     padding: 70px 20px;
   }


   .hero h1 {
     font-size: 34px;
     line-height: 1.2;
   }


   .hero h2 {
     font-size: 20px;
   }


   .hero p {
     font-size: 16px;
   }



   .botoes {

     flex-direction: column;

     align-items: center;

   }


   .btn {

     width: 100%;

     max-width: 320px;

   }



   .section {

     padding: 60px 20px;

   }


   .section h2 {

     font-size: 28px;

   }


   .products,
   .blog {

     grid-template-columns: 1fr;

   }


   .product img {

     height: 220px;

   }


   .map iframe {

     width: 100%;

     height: 300px;

   }


 }