/* ==========================================================================
   hero.php
   ========================================================================== */


    .hero{
        margin: 20px 75px 0px 75px;
        padding-top: 10px !important;
        padding-bottom: 0px !important;
    }
    
    
    
    .container-hero{
     background: url(/wp-content/themes/zeus-2023/images-integraciones/hero-integraciones-2.webp) no-repeat center center;
    background-size: contain;
    height: 640px;
    /* width: 100%; */
    display: flex;
    /* justify-content: flex-start; */
    align-items: center;
    max-width: 1382px;
    margin: -20px auto;
    }
    
    .texto-container{
        display: flex;
        flex-direction: column;
        align-items: left;
        text-align: left;
        
        padding-left: 80px;
    }
    
     .texto-container h1{
        color: #FFF;
        font-family: Ubuntu;
        font-size: 50px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        width: 586px;
        margin-bottom: 25px;
     }
     
     .texto-container p{
         color: #FFF;
        font-family: Ubuntu;
        font-size: 22px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px; /* 136.364% */
        width: 602px;
         margin-bottom: 14px !important;
     }
     
      .texto-container a{
        display: flex;
        width: 236px;
        height: 45px;
        padding: 10px 16px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        border-radius: 7px;
        background: #FFF;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
        
        color: #6A00A7!important;
        font-family: Ubuntu;
        font-size: 22px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        cursor: pointer;
      }
      
       .texto-container a:hover{
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
         transform: translateY(-2px);
          color: #FFF;
       }
       
        @media screen and (max-width: 1080px) {
            .container-hero{
                height: 390px;
            }
            
            .texto-container h1{
                font-size: 43px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
                width: 520px;
            }
            
            .texto-container p {
                    font-size: 18px;
                font-style: normal;
                font-weight: 400;
                line-height: 19px;
            }

        }
      
      
      @media screen and (max-width: 1383px) {
          .texto-container{
                  padding-left: 20px;
          }
          
           .container-hero{
              
               justify-content: center;
           }
          
          .texto-container p{
              width: 50%;
          }
      }
      
      
      @media screen and (max-width: 1383px) {
           .container-hero{
               flex-direction: column;
               justify-content: center;
           }
      }
      
      @media screen and (max-width: 800px) {
          
          .hero{
              margin: -20px 7px;
              padding-top: 0px;
          }
          
          .container-hero{
             background: url(/wp-content/themes/zeus-2023/images-integraciones/hero-mobile-2.png) no-repeat center center;
             background-size: contain;
             height: 585px;
             width: 100%; 
             display: flex;
             justify-content: flex-start;
             padding-top: 30px;
             margin-top: 0px;

          }
          
          .texto-container{
              padding-left: 0px;
              
              display: flex;
              flex-direction: column;
              align-items: center;
              text-align: center;
              margin-top: 24px;
          }
          
          .texto-container h1{
              width: 315px;
              font-size: 28px;
              font-style: normal;
              font-weight: 700;
              line-height: normal;
              padding-left: 0px;
              margin-bottom: 0px;
          }
          
          .texto-container p {
              font-size: 18px;
              width: 317px;
              line-height: 20px; /* 125% */
          }
          
          
          .texto-container a{
              width: 164px;
              height: 28px;
              text-align: center;
       
              font-size: 18px;
              font-style: normal;
              font-weight: 700;
              line-height: normal;
              border-radius: 5px;
          }
      }
      
      @media screen and (min-width: 450px) and (max-width: 800px) {
             .container-hero {
                 margin-top: 45px;
             }

      }
      
      @media screen and (max-width: 756px) {
         
    
      }

/* ==========================================================================
   part-01-seccion.php
   ========================================================================== */


    .seccion-1-integraciones{
        padding-top: 60pximportant;
    }

    .seccion-1-integraciones-container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
  
        
       
    }
    
    .seccion-1-integraciones-container h2{
        color: #6A00A7;
        text-align: center;
        font-family: Ubuntu;
        font-size: 43px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        width: 744px;
        padding-bottom: 30px;
    }
    
     .seccion-1-integraciones-container p{
        color: #002955;
        text-align: justify;
        font-family: Ubuntu;
        font-size: 22px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px; /* 136.364% */
        width: 998px;
        padding-bottom: 15px;
     }
     
     
     /********************************************CHECKLIST CONTAINER*******************************************************/
     
   .seccion-1-checklist-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 100px;
    padding: 30px;
}

     .seccion-1-checklist {
      padding: 20px 0;
    }
    
    .seccion-1-checklist .checklist {
      list-style: none; /* quitamos los bullets */
      margin: 0;
      padding: 0;
      font-family: 'Ubuntu', sans-serif;
      font-size: 16px;
      color: #002955;
    }
    
    .seccion-1-checklist .checklist li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 19px;
    line-height: 1.4em;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
    
    .seccion-1-checklist .checklist li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 6px;
      width: 15px;
      height: 15px;
      background: url('/wp-content/themes/zeus-2023/images-integraciones/check.svg') no-repeat center center;
      background-size: contain;
    }
    
    .seccion-1-checklist-img img{
        width: 400px;
    }
    
    
    
      /********************************************FIN CHECKLIST CONTAINER*******************************************************/

    @media screen and (max-width: 1027px) {
        .seccion-1-integraciones-container p{
            width: 100%;
            padding: 0 20px;
        }
        
        .seccion-1-checklist-container{
            flex-direction: column;
        }
    }

    @media screen and (max-width: 765px) {
        
        .seccion-1-integraciones{
            padding-bottom: 20px;    
            padding-top: 25px;
        }
        
        
        .seccion-1-integraciones-container h2 {
            font-size: 26px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            width: 330px;
            padding-bottom: 17px;
        }
        
        .seccion-1-integraciones-container p{
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px; 
            width: 336px;
        }
        
        .seccion-1-checklist-container{
            gap: 0px;
        }
        
        .seccion-1-checklist-img img{
            width: 315px;
        }
        
        .seccion-1-checklist{
            padding: 15px 0px 0px 0px;
        }
        
        .seccion-1-checklist .checklist li {
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }
        
        .seccion-1-integraciones-container p{
            padding: 0px 0px;
        }
        
        
        
        .seccion-1-checklist .checklist li::before {
              left: 1px;
                top: 1px;
                width: 18px;
        }

        
        
    }

/* ==========================================================================
   part-02-seccion-ecosistema-blanco.php
   ========================================================================== */

/* Bloque 1 */


.texto-hubs{
    width: 129px;
}

.text-medios-pago{
    position: relative;
    top: -4px!important;
}

.fuerza-ventas-texto{
    position: relative;
    top: -3px!important;  
}

.oulis{
    position: relative;
    top: -6px;
}

.billapp-zeus-img{
    transform: scale(1.2);
}

.payway-mpago{
  transform: scale(1.1);
}

.e-sueldos{
   transform: scale(1.2); 
}

.mercado-libre{
     transform: scale(1.2)!important; 
}

.clic-data{
     transform: scale(1.1)!important; 
}

.doppler{
    transform: scale(1.1); 
}

#wrap-columna {
   
      position: absolute !important;
    top: 47.4% !important;
    left: 50.3% !important;
    width: 158px !important;
    height: 170px !important;
    transform: translate(-50%, -50%) scale(0.8) !important;
    z-index: 50 !important;
    perspective: 2500px !important;
    perspective-origin: 50% 50% !important;
}

.cilindro,
.cilindro .box-cilindro,
.cilindro .box-cilindro .lados {
    transform-origin: 50% 50% 0 !important;
}





   .cilindro {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateX(-10deg);
    transform-origin: 50% 50% 0;
     width: 100%;      /* NUEVO */
    height: 100%;  
}

.cilindro::before {
       content: "";
    position: absolute;
    top: 0px;
    bottom: -53px;
    left: 30px;
    right: 32px;
    background: #eceef0;
    border-radius: 40px;
    transform: translateZ(0);
    z-index: 0;
}

.cilindro .box-cilindro {
  height: 100%;
    width: 100%;
    transform-style: preserve-3d;
    /* importante: sin otras transforms acá */
    animation: girarY 18s linear infinite;
    transform-origin: 50% 50% 0;
    transition: none; /* para que la animación no pelee con transition */
}

@keyframes girarY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}



.cilindro .box-cilindro .lados {
    width: 32px !important;
    overflow: hidden; /* MUY IMPORTANTE para que no sobresalga */
}

.cilindro .box-cilindro .lados img {
    width: 89%;
}

/* Estiro solo las que tienen palabra (no las blancas) */
.cilindro .box-cilindro .lados:not(#solo-blanco) img {
    transform: scaleX(1.4);      /* probá 1.1, 1.2, 1.3... */
    transform-origin: center;
}

.cilindro .box-cilindro .lados {
    height: 208px!important;
}

.cilindro .tapa2 {
    transform: rotateX(-90deg) translate(0px, 0px) translateZ(9.9em)!important;
}

.cilindro .tapa {
    position: absolute;
    left: 20%;
    top: 0%;
    transform-style: preserve-3d;
    transform-origin: 50% 50% 0;
    z-index: 2;
}


   
   #solo-blanco{
       width: 27px!important;
   }
   
   #solo-blanco-multisucur{
       width: 20px !important;
       right: 45px;
   }

    #integrationImage {
        position: fixed;
        transform: translate(-50%, -75%)!important;
        max-width: 430px;
        margin-top: 50px;
    }
    
    


    
     @media (max-width: 768px) {
    #integrationImage {
    position: fixed;
    transform: translate(-50%, -50%);
    max-width: 430px;
    margin-top: 50px;
    margin-left: 200px;
}
     }
    
    
    
    

    .mb-5.text-rm.text-justify {
        text-align: left;
        margin-top: 40px;
        color: white;
        font-family: Ubuntu;
        font-size: 17.8px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
    }

    .text-500.text-xxl.mb-4.text-white {
        padding-top: 1px;
    }

    @media (max-width: 768px) {
        .mb-5.text-rm.text-justify {
            display: none;
        }

        .mb-5.text-rm.text-justify.mobile {
            display: block;
            text-align: left;
            margin-top: 30px;
        }

        .mb-5.text-rm.text-justify.mobile2 {
            display: block;
            margin-top: 40px;
            text-align: left;
            margin-bottom: -60px;
        }

        .text-500.text-xxl.mb-4.text-white {
            text-align: center;
            font-size: 32.4px;
            padding-top: 60px;
            padding-left: 10px;
            padding-right: 10px;
            padding-bottom: 0px;
        }

        .offset-md-2.col-md-8 {
            margin-bottom: -100px;
        }
    }

    @media (min-width: 769px) {
        .mb-5.text-rm.text-justify.mobile,
        .mb-5.text-rm.text-justify.mobile2 {
            display: none;
        }
    }







/* Estilos para dispositivos móviles */
@media only screen and (max-width: 767px) {
    .hero-section {
        /*
        position: relative;
        width: 100%;
        height: 300px; 
        background: url('https://zeuserp.tech/wp-content/themes/zeus-2023/images/fondointegracion.png') no-repeat center center;
        background-size: cover;
        opacity: 0.8; 
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: -1; 
       margin-bottom:-14px;
       */
       display: none;
        
      
    }
}
    .hero-content {
        text-align: center;
        color: #6A00A7;
        font-family: Ubuntu, sans-serif;
        position: relative; /* Asegura que el contenido esté encima del pseudo-elemento */
       background: #f2f2f24d;
    }


    /* Opcional: para asegurar que el texto se mantenga visible sobre la imagen de fondo */
 
    .hero-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
         background: rgba(255, 255, 255, 0.8); /* Color de fondo blanco con opacidad del 30% */
        z-index: -1; /* Coloca el pseudo-elemento detrás del contenido */
        

}


@media (max-width: 786px) {
    .text-purple.mb-5.text-xxl.text-600.portadasolomobile {
        font-size: 28px;
        padding-top: 200px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 0px;
    }

}


/* Estilos para dispositivos de escritorio */
@media only screen and (min-width: 768px) {
    .hero-section {
        display: none; /* Oculta la sección en dispositivos de escritorio */
    }
}

/* Bloque 2 */


#ecosistema{
    padding-top: 4rem!important;
}

.bg-gradient-1{
 background: white!important;   
}

.flip-item {
    width: 110px !important;
    height: 110px !important;
    margin-left: 15px !important;
    
    position: relative;         /* se mantiene */
    perspective: 1000px;
    -webkit-perspective: 1000px;
    cursor: pointer;
    touch-action: manipulation;
  

}


.flip-item-front img {
    width: 60% !important;
    max-width: 60px !important;
    max-height: 60px !important;
    margin-top:20px !important;
    
}


.flip-item-front p {
    /* font-size: var(--text-r); */
    font-size: 11px !important;
    font-weight: 600 !important;;
    line-height: 1.2 !important;;
    color: #FFF;
 
}

.atomo-texto-h2{
    color: #002955;
    text-align: center;
    font-family: Ubuntu;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    width: 645px;
    margin: 0 auto;
    padding-top: 100px;
    text-align: center!important;
}

.atomo-btn{
    display: flex;
    width: 320px;
    height: 45px;
    padding: 10px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 7px;
    background: linear-gradient(92deg, #6A00A7 -1.99%, #00CDCD 103.04%);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
    margin: 0 auto;
    
    color: #FFF;
    text-align: center;
    font-family: Ubuntu;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    
    margin-top: 24px;
    cursor: pointer;
}

.atomo-btn:hover{
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    color: #FFF;
}
@media (max-width: 768px) {
.flip-item-front p {
    /* font-size: var(--text-r); */
    font-size: 20px !important;
    font-weight: 600 !important;;
    line-height: 1.2 !important;;
    color: #FFF !important;
}
}

/*acomodo general de los flip atomo*/

.atomo-v2 .flip-item:nth-child(1)

 {
    top: -10% !important;
    left: calc(50% - 70px)!important;
}

.atomo-v2 .flip-item:nth-child(2) {
    top: 7% !important;
    right: calc(22% - 91px) !important;
}

.atomo-v2 .flip-item:nth-child(3) {
    top: 28% !important;
    right: calc(10% - 95px) !important;
}


.atomo-v2 .flip-item:nth-child(4) {
    bottom: 30%;
    right: calc(5% - 70px);
}

.atomo-v2 .flip-item:nth-child(5)

 {
    bottom: 9% !important;
    right: calc(28% - 122px) !important;
}

.atomo-v2 .flip-item:nth-child(6) {
    bottom: -5% !important;
    left: calc(50% - 71px);
}

.atomo-v2 .flip-item:nth-child(7)

 {
    bottom: 9% !important;
    left: calc(16% - 70px) !important;
}


.atomo-v2 .flip-item:nth-child(8) {
    bottom: 29.7% !important;
    left: calc(2% - 70px) !important;
}


.atomo-v2 .flip-item:nth-child(9) {
    top: 28% !important;
    left: calc(3% - 70px) !important;
}

.atomo-v2 .flip-item:nth-child(10)

 {
    top: 7% !important;
    left: calc(17% - 70px) !important;
}




/* mobile acomodo general de los flip mobile*/
@media (max-width: 768px) {
    .atomo-v2 .flip-item:nth-child(1) {
        left: calc(43% - 70px) !important;
        width: 160px !important;
        height: 160px !important;
        top: -20% !important;
    }

.atomo-v2 .flip-item:nth-child(2) {
    top: -2% !important;
    right: calc(18% - 62px) !important;
    width: 160px !important;
    height: 160px !important;
}

.atomo-v2 .flip-item:nth-child(3)
{
    top: 17% !important;
    right: calc(8% - 70px) !important;
    width: 160px !important;
    height: 160px !important;
}

.atomo-v2 .flip-item:nth-child(4) {
    bottom: 10% !important;
    right: calc(10% - 70px);
    width: 160px !important;
    height: 160px !important;
}

.atomo-v2 .flip-item:nth-child(5) {
    bottom: -10% !important;
    right: calc(22% - 70px) !important;
    height: 160px !important;
    width: 160px !important;
}

.atomo-v2 .flip-item:nth-child(6) {
        bottom: -20% !important;
        left: calc(43% - 70px) !important;
        height: 160px !important;
        width: 160px !important;
        top: 71% !important;
    }
    
    
.atomo-v2 .flip-item:nth-child(7) 
{
    bottom: -10% !important;
    left: calc(13% - 70px) !important;
    height: 160px !important;
    width: 160px !important;
}


.atomo-v2 .flip-item:nth-child(8) {
    bottom: 10% !important;
    left: calc(4% - 70px) !important;
    height: 160px !important;
    width: 160px !important;
}

.atomo-v2 .flip-item:nth-child(9) {
    top: 18% !important;
    left: calc(4% - 70px) !important;
    height: 160px !important;
    width: 160px !important;
}

.atomo-v2 .flip-item:nth-child(10) {
    top: -3% !important;
    left: calc(13% - 70px) !important;
    width: 160px !important;
    height: 160px !important;
}

 
}

/* Rango: [1176px, 1300px) */
@media (min-width: 1176px) and (max-width: 1299.98px) {
    .atomo-v2 .flip-item:nth-child(1) {
        left: calc(47% - 70px) !important;
        width: 160px !important;
        height: 160px !important;
        top: -3% !important;
    }
    
    .atomo-v2 .flip-item:nth-child(2) {
    top: 12% !important;
    right: calc(18% - 62px) !important;
    width: 160px !important;
    height: 160px !important;
}

.atomo-v2 .flip-item:nth-child(3)
{
    top: 33% !important;
    right: calc(8% - 70px) !important;
    width: 160px !important;
    height: 160px !important;
}

.atomo-v2 .flip-item:nth-child(4) {
    bottom: 27% !important;
    right: calc(10% - 70px);
    width: 160px !important;
    height: 160px !important;
}

.atomo-v2 .flip-item:nth-child(5) {
    bottom: 5% !important;
    right: calc(22% - 70px) !important;
    height: 160px !important;
    width: 160px !important;
}

.atomo-v2 .flip-item:nth-child(6) {
        bottom: -20% !important;
        left: calc(47% - 70px) !important;
        height: 160px !important;
        width: 160px !important;
        top: 90% !important;
    }
    
    
.atomo-v2 .flip-item:nth-child(7) 
{
    bottom: 1% !important;
    left: calc(18% - 70px) !important;
    height: 160px !important;
    width: 160px !important;
}


.atomo-v2 .flip-item:nth-child(8) {
    bottom: 22% !important;
    left: calc(9% - 70px) !important;
    height: 160px !important;
    width: 160px !important;
}

.atomo-v2 .flip-item:nth-child(9) {
    top: 34% !important;
    left: calc(7% - 70px) !important;
    height: 160px !important;
    width: 160px !important;
}

    .atomo-v2 .flip-item:nth-child(10)
 {
        top: 11% !important;
        left: calc(17% - 70px) !important;
        width: 160px !important;
        height: 160px !important;
    }
    
    
    
}

/* Rango: [768px, 350px) */

@media (max-width: 767.98px) and (orientation: landscape){
    .atomo-v2 .flip-item:nth-child(1) {
        left: calc(45% - 70px) !important;
        width: 160px !important;
        height: 160px !important;
        top: -10% !important;
    }
    
    .atomo-v2 .flip-item:nth-child(2) {
    top: 3% !important;
    right: calc(18% - 62px) !important;
    width: 160px !important;
    height: 160px !important;
}

.atomo-v2 .flip-item:nth-child(3)
{
    top: 25% !important;
    right: calc(8% - 70px) !important;
    width: 160px !important;
    height: 160px !important;
}

.atomo-v2 .flip-item:nth-child(4) {
    bottom: 16% !important;
    right: calc(10% - 70px);
    width: 160px !important;
    height: 160px !important;
}

.atomo-v2 .flip-item:nth-child(5) {
    bottom: -2% !important;
    right: calc(22% - 70px) !important;
    height: 160px !important;
    width: 160px !important;
}

.atomo-v2 .flip-item:nth-child(6) {
        bottom: -20% !important;
        left: calc(44% - 70px) !important;
        height: 160px !important;
        width: 160px !important;
        top: 79% !important;
    }
    
    
.atomo-v2 .flip-item:nth-child(7) 
{
    bottom: -4% !important;
    left: calc(18% - 70px) !important;
    height: 160px !important;
    width: 160px !important;
}


.atomo-v2 .flip-item:nth-child(8) {
    bottom: 16% !important;
    left: calc(9% - 70px) !important;
    height: 160px !important;
    width: 160px !important;
}

.atomo-v2 .flip-item:nth-child(9) {
    top: 25% !important;
    left: calc(7% - 70px) !important;
    height: 160px !important;
    width: 160px !important;
}

    .atomo-v2 .flip-item:nth-child(10)
 {
        top: 4% !important;
        left: calc(17% - 70px) !important;
        width: 160px !important;
        height: 160px !important;
    }
    
    
    
}





.text-column p {
          
    text-align: left;
    margin-top: 40px;
    color: white;
    font-family: Ubuntu;
    font-size: 16.6px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
}

    .ecom img{
        width: 50px;
        
    }


#integrationImage {
        position: fixed;
        transform: translate(-50%, -50%);
        max-width: 300px;
        margin-top: 70px;
    }

    .mb-5.text-rm.text-justify {
        text-align: left;
        margin-top: 40px;
        color: white;
        font-family: Ubuntu;
        font-size: 17.8px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
    }

    .text-500.text-xxl.mb-4.text-white {
        padding-top: 1px;
    }

@media (max-width: 768px) {
        .mb-5.text-rm.text-justify {
            display: none;
        }

        .mb-5.text-rm.text-justify.mobile {
            display: block;
            text-align: left;
            margin-top: 30px;
        }

        .mb-5.text-rm.text-justify.mobile2 {
            display: block;
            margin-top: 40px;
            text-align: left;
            margin-bottom: -60px;
        }

        .text-500.text-xxl.mb-4.text-white {
            text-align: center;
            font-size: 32.4px;
            padding-top: 60px;
            padding-left: 10px;
            padding-right: 10px;
            padding-bottom: 0px;
        }

        .offset-md-2.col-md-8 {
            margin-bottom: -100px;
        }
        
        
.atomo-v2 .flip-item:nth-child(6)

 {
    bottom: -17% !important;
    left: calc(50% - 70px);
}
        
    }

@media (min-width: 769px) {
        .mb-5.text-rm.text-justify.mobile,
        .mb-5.text-rm.text-justify.mobile2 {
            display: none;
        }
    }
/* Estilos para dispositivos móviles */
@media only screen and (max-width: 767px) {
    .hero-section {
        position: relative;
        width: 100%;
        height: 330px; /* Ajusta la altura según sea necesario */
        background: url('https://zeuserp.tech/wp-content/themes/zeus-2023/images/fondointegracion.png') no-repeat center center;
        background-size: cover;
        opacity: 1; /* Opacidad del 20% */
        display: flex;
        justify-content: center;
        align-items: center;
     

      
    }
}
    .hero-content {
        text-align: center;
        color: #6A00A7;
        font-family: Ubuntu, sans-serif;
        position: relative; /* Asegura que el contenido esté encima del pseudo-elemento */
       background: #f2f2f24d;
    }

    .hero-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8); /* Color de fondo blanco con opacidad del 30% */
        z-index: -1; /* Coloca el pseudo-elemento detrás del contenido */
        

}
/*Estilos para mobile*/

@media (max-width: 786px) {
    .text-purple.mb-5.text-xxl.text-600.portadasolomobile {
        font-size: 28px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 0px;
    }





    .text-column {
        flex: 1;
        min-width: 300px;
        margin-top: 0px !important;
    }

    .text-column h2{
        
        font-size: 27px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        padding: 10px 0 10px 0;
    }

    .text-column h2{
        font-size: 24px!important;
    }

    .text-column, .atomo-column {
        width: 100%;
        padding: 15px;
    }
    
    .title_onboarding{
        font-size: 24px!important;
    }
    
   




}


/* Estilos para dispositivos de escritorio */
@media only screen and (min-width: 768px) {
    .hero-section {
        display: none; /* Oculta la sección en dispositivos de escritorio */
    }
}

  /* Nuevos estilos para el layout de dos columnas */
    .two-column-layout {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 40px;
        justify-content: center;
    }

    .text-column {
        flex: 1;
        min-width: 300px;
        margin-top: -130px;
    }

    .atomo-column {
           flex: 0;
    min-width: 638px;
    }

@media (max-width: 1254px){
      .two-column-layout {
        padding-top: 200px;
         
     }
}

@media (max-width: 1300px){
     .two-column-layout {
        padding-top: 150px;
         
     }
}
    
@media (max-width: 1300px){
  .two-column-layout {
    flex-direction: column;
    gap: 20px;
    
}
    
}



@media (max-width: 768px) {
    
    .payway-mpago{
            transform: scale(1);
    }
    
    .billapp-zeus-img {
     transform: scale(0.9);
    }
    
    .doppler {
      transform: scale(0.9);
     }
     
     .store-hub-img{
          transform: scale(0.8);
     }
     
     .clic-data {
       transform: scale(0.9) !important;
    }
    
    .bitrix {
        transform: scale(0.8); 
    }
    
    .e-sueldos {
      transform: scale(0.9);
    }
        
     .oulis {
        max-width: 128px;
    }
    
    .mercado-libre {
    transform: scale(0.8) !important;
    }
    
    #ecosistema{
      padding-bottom: 0rem!important;
    }
    
    .bi{
        position: relative;
        top: 90px;
    }
        
      
.text-column, .atomo-column {
    width: 100%;
    padding: 5px;
}

.text-column h2{
    color: #FFF;
    font-family: Ubuntu;
    font-size: 30.5px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 0px 0px 0px !important;
}

.text-column p {
    /* color: #FFF; */
    font-family: Ubuntu;
    font-size: 17px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
  
   
    
}

.two-column-layout{
       padding-top: 0px;
} 


}
/* Ajustes para el texto como en la imagen de referencia */
.text-column h2 {
    color: #FFF;
    font-family: Ubuntu;
    font-size: 37.5px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}


.boton_solicita {
        border-radius: 5px;
background: #FFF;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);width: 258px;
height: 51px;
flex-shrink: 0;
color: #6A00A7;
font-family: Ubuntu;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 25px; /* 125% */
border: none;
transition: all 0.3s ease; 
margin-top:50px ;
    }
    
    .boton_solicita:hover  {
    color: white;
    background: #8E24AA;
}
    

.mobile2{
    padding: 10px 0px 0px 0px!important;
}
/*Fin Estilo de bontón*/


/*Quitar tapa de cilindro en mobile*/

@media (max-width: 768px) {
    
    .cilindro::before{
        content: "";
        position: absolute;
        top: 0px;
        bottom: 9px;
        left: 38px;
        right: 40px;
        background: #eceef0;
        border-radius: 40px;
        transform: translateZ(0);
        z-index: 0;
    }
    
    
    .cilindro .box-cilindro .lados img{
        height: 105%;
        width: 100%;
        position: relative;
        top: -5px !important;
    }
    
    #solo-blanco-multisucur{
        width: 32px;
        right: 40px;
    }
    
    .cilindro{
        position: relative;
        left: 80px;
        top: 119px;
    
    }
  .tapa1 img,
  .tapa2 img { display: none !important; }
  
      img {
        max-width: 356px;
        height: auto;
    }
    
    .atomo-v2{
        width: 375px;
    }
    
    .atomo-v2 .flip-item:nth-child(1){
        left: calc(24% - 6px) !important;
        width: 160px !important;
        height: 160px !important;
        top: -24% !important;
    }
    
    .atomo-v2 .flip-item:nth-child(2) {
        top: -6% !important;
        right: calc(18% - 73px) !important;
        width: 160px !important;
        height: 160px !important;
    }
    
        .atomo-v2 .flip-item:nth-child(3){
        top: 16% !important;
        right: calc(8% - 77px) !important;
        width: 160px !important;
        height: 160px !important;
    }
    
    .atomo-v2 .flip-item:nth-child(4){
        bottom: 17% !important;
        right: calc(10% - 87px);
        width: 160px !important;
        height: 160px !important;
    }
    
    .atomo-v2 .flip-item:nth-child(5){
        bottom: -5% !important;
        right: calc(22% - 86px) !important;
        height: 160px !important;
        width: 160px !important;
    }
    
    .atomo-v2 .flip-item:nth-child(6) {
        bottom: -20% !important;
        left: calc(43% - 81px) !important;
        height: 160px !important;
        width: 160px !important;
        top: 74% !important;
    }
    
    .atomo-v2 .flip-item:nth-child(7) {
        bottom: -4% !important;
        left: calc(13% - 92px) !important;
        height: 160px !important;
        width: 160px !important;
    }
    
    .atomo-v2 .flip-item:nth-child(8) {
        bottom: 17% !important;
        left: calc(4% - 96px) !important;
        height: 160px !important;
        width: 160px !important;
    }
    
    .atomo-v2 .flip-item:nth-child(9) {
        top: 16% !important;
        left: calc(4% - 97px) !important;
        height: 160px !important;
        width: 160px !important;
    }
    
    .atomo-v2 .flip-item:nth-child(10) {
        top: -6% !important;
        left: calc(13% - 88px) !important;
        width: 160px !important;
        height: 160px !important;
    }
    
    .atomo-texto-h2{
        width: 100%;
        font-size: 16px;
    }
    
    
    /* ATOMO MOBILE */
    .atomo-column{
        width: 368px!important;
        min-width: 300px;
    }
    
    .atomo-texto-h2{
        padding-top: 50px;
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        width: 330px;
    }
    
       .atomo-btn {
        width: 225px;
        height: 50px;
        font-size: 18px;
    }
    
    .mercado-libre{
        max-width: 153px;
    }
    
    .payway-mpago{
        max-width: 120px;
    }
    
    .oulis{
        max-width: 140px;
    }
    
    .e-sueldos{
        max-width: 140px;
    }
    
    .bitrix{
        max-width: 250px;
    }
    
    .doppler{
        max-width: 140px;
    }
    
    
}

@media (max-width: 400px) {
    
      
    .cilindro{
        position: relative;
        left: 89px;
        top: 116px;
    
    }
    
    .social-icons a img{
        width: 33px;
    }
    
    img {
        
        width: 345px;
        max-width: 345px;
    }
    
    .atomo-v2 {
        width: 357px;
    }
    
    .atomo-v2 .flip-item:nth-child(1) {
       left: calc(24% - 2px) !important;
        width: 150px !important;
        height: 150px !important;
        top: -22% !important;
    }
    
    .atomo-v2 .flip-item:nth-child(2) {
        top: -8% !important;
        right: calc(18% - 76px) !important;
        width: 160px !important;
        height: 160px !important;
    }
    
    
    .atomo-v2 .flip-item:nth-child(3) {
        top: 14% !important;
        right: calc(8% - 78px) !important;
        width: 160px !important;
        height: 160px !important;
    }
    
    
    .atomo-v2 .flip-item:nth-child(4) {
        bottom: 16% !important;
        right: calc(10% - 86px);
        width: 160px !important;
        height: 160px !important;
    }
    
    .atomo-v2 .flip-item:nth-child(5) {
        bottom: -5% !important;
        right: calc(22% - 89px) !important;
        height: 160px !important;
        width: 160px !important;
    }
    
    .atomo-v2 .flip-item:nth-child(6) {
        bottom: -20% !important;
        left: calc(43% - 76px) !important;
        height: 160px !important;
        width: 160px !important;
        top: 71% !important;
    }
    
    .atomo-v2 .flip-item:nth-child(7) {
        bottom: -5% !important;
        left: calc(13% - 89px) !important;
        height: 160px !important;
        width: 160px !important;
    }
    
    .atomo-v2 .flip-item:nth-child(8) {
        bottom: 16% !important;
        left: calc(4% - 95px) !important;
        height: 160px !important;
        width: 160px !important;
    }
    
    .atomo-v2 .flip-item:nth-child(9) {
        top: 15% !important;
        left: calc(4% - 95px) !important;
        height: 160px !important;
        width: 160px !important;
    }
    
    
    .atomo-v2 .flip-item:nth-child(10) {
        top: -7% !important;
        left: calc(13% - 84px) !important;
        width: 160px !important;
        height: 160px !important;
    }
    
    #wrap-columna {
        top: calc(50% - 112px) !important;
        left: calc(51% - 95px) !important;
    }
    
    #integrationImage {
        position: fixed;
        transform: translate(-50%, -115%);
        max-width: 555px;
        margin-top: 70px;
        width: 300px;
    }
    
    .flip-item-back img{
        width: 130px;
    }
    
      .atomo-column{
        width: 300px!important;
        min-width: 300px;
    }
    
    .two-column-layout{
       align-items: flex-start;
    }
}




/* Base 3D */
.flip-item{
  perspective: 1000px;
  -webkit-perspective: 1000px;
  cursor: pointer;
  touch-action: manipulation; /* mejor respuesta táctil */
}
.flip-item-inner{
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform .6s ease;

  
}

.flip-item-inner::before{
    transform: rotate(-90deg);
content: "";
    position: absolute;
    width: 100%;
    height: 102%;
    top: -6%;
    left: 2%;
    border-radius: 50%;
    background: radial-gradient(
    107.49% 107.49% at -8.04% 17.3%,
    #FFF 3%,
    #FCFCFC 6%,
    #00CDCD 67%,
    #019D9D 96%
  );
    z-index: 0;
    pointer-events: none;
}



.flip-item-front,
.flip-item-back{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: linear-gradient(115deg, #6A00A7 11.81%, #00CDCD 92.25%);
  border-radius: 50%;     /* para que acompañe el círculo */
  border: none !important;
  z-index: 1;   
 
}

.flip-item-back {
  transform: rotateY(180deg);
}



/* Cara posterior */
.flip-item-back{ transform: rotateY(180deg); }

/* Desktop: flip por hover */
@media (hover:hover) and (pointer:fine){
  .flip-item:hover .flip-item-inner{ transform: rotateY(180deg); }
}

/* Mobile/Touch: flip por clase */
.flip-item.is-flipped .flip-item-inner{ transform: rotateY(180deg); }
/*Atomo mobile*/
@media screen and (max-width: 768px) {
    #wrap-columna {
        width: 166px !important;
        height: 225px !important;
        /* margin: 1px auto; */
        z-index: 50 !important;
        position: absolute !important;
        top: calc(50% - 118px) !important;
        left: calc(51% - 94px) !important;
        transform: scale(0.4) !important;
    }
}

/* ==========================================================================
   part-04-seccion.php
   ========================================================================== */


.base{
        gap: 43px!important;
    padding-top: 46px!important;
    height: 223px!important;
}

.valthor{
    height: 223px!important;
    margin-top: 0px!important;
}

.valthor img{
    position: relative !important;
    top: 10px !important;
   
    max-width: 281px !important;
    width: 281px !important;
}

.valthor-text{
    top: 11px!important;
}

.pedidos{
    height: 229px!important;
}

.pedidos img{
   position: relative!important;
   top: 13px!important;
}

.pedidos-txt{
    position: relative!important;
    top: -82px!important;
}

.rappi{
    height: 229px!important;
}

.rappi-txt{
    position: relative!important;
    top: -53px !important;
}

.paoki {
    margin-top: 14px;
    color: #002955;
    text-align: center;
    font-family: Ubuntu;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
}
.imagclover{
    
    width: 218px !important;
}
    .seccion-4-integraciones-container{
        background: linear-gradient(85deg, #6A00A7 11.32%, #00CDCD 92.14%)!important;
        
    }
    
    .seccion-4-integraciones-container h2{
        color: #FFF;
        text-align: center;
        font-family: Ubuntu;
        font-size: 43px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        
        width: 746px;
        margin: 0 auto;
    }
    
     .seccion-4-integraciones-container .parrafo-principal{
            color: #FFF;
            text-align: justify;
            font-family: Ubuntu;
            font-size: 22px;
            font-style: normal;
            font-weight: 400;
            line-height: 30px; /* 136.364% */
            
            width: 998px;
            margin: 0 auto;
            padding-top: 55px;
            padding-bottom: 30px;
     }
     
     
    .integraciones-flex {
  display: flex;
  justify-content: center; /* centra todo */
  gap: 45px;               /* controla la separación */
  padding: 40px;
  border-radius: 12px;
  flex-wrap: wrap;         /* opcional, para que en pantallas chicas salten una abajo de otra */
}

.integraciones-flex .columna {
  flex: 1;
  display: flex;
  flex-direction: column;
 
  align-items: flex-start;
  color: #fff;
  min-width: 300px; /* asegura que no se achiquen demasiado */
  max-width: 600px; /* evita que se estiren mucho */
}

.integraciones-flex .columna h3{
        color: #fff;
    font-family: Ubuntu, sans-serif;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 30px;
}

.integraciones-flex .card-partners {
  background: #F7F7F7;
  color: #002955;
  padding: 26px;
  border-radius: 22px!important;
  box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
  width: 595px;       /* ocupa todo el ancho disponible de la columna */
  height: 281px;    
  justify-content: center;/* deja que crezca según el contenido */
  align-items: center;
  
  display: flex;
    /* reading-flow: flex-visual; */
  flex-direction: column;
  gap: 20px;
 
}

.integraciones-flex .card-partners img{
    width: 260px;
}

.parrafo-card {
    color: #002955;
    text-align: justify;
    font-family: Ubuntu;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 136.364% */
}



.seccion-5-hubs {
  
  padding: 35px 10px 8px 10px;
}

.hubs-container {
  max-width: 1243px;
  margin: 0 auto;
}

.hubs-container h3 {
  color: #fff;
  font-family: Ubuntu, sans-serif;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 30px;
}

/* Grid de 4 columnas (2 en mobile) */
.hubs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 56px;
}

.hub-card {
    background: #F7F7F7;
    border-radius: 22px;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s 
ease;
    flex-direction: column;
    width: 595px;
    height: 281px;
    gap: 12px;
}

.hub-card.clover {
    background: #F7F7F7;
    border-radius: 22px;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
    flex-direction: column;
    width: 595px;
    height: 360px;
    gap: 12px;
}


.hub-card:hover {
  transform: translateY(-5px);
}

.hub-card img {
  max-width: 260px;
  height: auto;
}

.medios-de-pago , .pay-way{
    height: 315px;
}

.medios-de-pago img{
    position: relative;
    top: -10px;
    max-width: 218px;
}


.medios-de-pago p{
 position: relative;
 top: -10px;
}

.card-woocommerce{
    padding-top: 2px;
}

.text-card-woocommerce{
    width: 500px;
}

.shopify-card img{
    position: relative;
    top: -20px;
    max-width: 200px;
}

.text-shopify-card{
    width: 551px;
}

.prestashop-card img{
    position: relative;
    top: -24px;
}

.text-prestashop-card{
        position: relative;
    top: -18px;
}

.esueldo-card, .bitrix-card{
    height: 314px!important;
}

.text-bitrix-card{
    position: relative;
    top: -15px;
}

.bitrix-card img{
   
    position: relative;
    top: -16px;
}

.logistica{
    height: 314px;
}

.digi img{
    position: relative;
    top: -14px;
}

.digi p{
    position: relative;
    top: -10px;
}

.storehub p{
    position: relative;
    top: 4px;
}

.clickdata{
    height: 314px!important;
    justify-content: flex-start!important;
    gap: 25px!important;
}
.clickdata img{
   width: 210px!important; 
}

.clover-img{
  width: 200px!important;    
}

.vtex img{
    width: 144px;
}

  
   .eshop-card img{
       max-width: 180px;
   }
   
   .card-doppler img{
       max-width: 200px;
   }

/* Responsive */
@media (max-width: 1266px) {
    
    .seccion-4-integraciones-container h2{
        width: 100%;
        padding: 0px 20px;
    }
    
  .seccion-4-integraciones-container .parrafo-principal{
      width: 100%;
      padding: 20px;
  }
    
  .hubs-grid {
    grid-template-columns: repeat(1, 1fr);
    /*justify-items: center*/
  }
  
  .integraciones-flex{
      flex-direction: column;
      align-items: center;

  }
  
  .hubs-container{
    max-width: 592px;

  }
  
  .hidden-prox{
      display: none;
  }
  
  .base{
        gap: 33px!important;
    padding-top: 46px!important;
    height: 193px!important;
}

.valthor{
    height: 193px!important;
    margin-top: 10px!important;
    gap: 0px!important;
}

.valthor img{
    position: relative !important;
    top: -5px !important;
   
    max-width: 281px !important;
    width: 281px !important;
}

.valthor-text{
    top: 11px!important;
}
}

@media (max-width: 765px) {
    
    .integraciones-flex .card-partners img {

            width: 185px;
    }
    
     .seccion-4-integraciones-container{
        border: 0 solid #002955;
 
        background: url("https://zeuserp.tech/wp-content/themes/zeus-2023/images-integraciones/Fondo3.png")!important;
        background-repeat: no-repeat!important;
        background-size: cover!important;
        padding-top: 4rem;
     }
    
      .seccion-4-integraciones-container h2{
          font-size: 26px;
          width: 380px;
      }
      
      .seccion-4-integraciones-container .parrafo-principal{
        font-size: 18px;
        line-height: 20px; /* 125% */
        
      }
    
    .hubs-container{
        width: 351px;
    }
    
    .hub-card.clover {
        width: 349px;
        height: 259px;
        padding-bottom: 20px;
    }
    .hub-card{
        width: 349px;
        height: 275px;
        padding-bottom: 20px;
    }
    
    .integraciones-flex .card-partners{
        width: 349px;
        height: 211px;
        flex-direction: column;
        display: flex;
        align-items: center;
        gap: 28px;
     }
     
     .hubs-container h3{
         font-size: 22px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin-bottom: 10px;
     }
     
     .integraciones-flex .columna h3{
        margin-bottom: 10px; 
           font-size: 22px;
     }
    
     .hubs-grid {
        justify-items: center;
     }
     
     .integraciones-flex{
         align-items: center;
         align-content: center;
         padding: 25px 10px 8px 10px;
         gap: 45px;
     }
     
     .parrafo-card{
         font-size: 18px;
         font-style: normal;
         font-weight: 400;
         line-height: 20px; /* 125% */
         width: 320px;
     }
     .hub-card img{
         max-width: 94px;
     }
     
     .easy-card img{
         width: 170px;
     }
     .ml-card{
         height: 228px;
     }
     .ml-card img{
         width: 170px;
     }
     
     .balcony-card{
         height: 219px;
     }
     
     .balcony-card img{
         width: 170px;
     }
     
     .card-woocommerce img{
         width: 150px;
     }
     
     
     
     .card-doppler img{
         width: 170px;
     }
     
     .clickdata img{
         width: 174px;
     }
     
     .storehub{
         height: 240px;
     }
     
     .card-tienda img{
         max-width: 178px;
         position: relative;
         top: 0px;
     }
     
     .prestashop-card img{
        max-width: 194px;
        padding-top: 32px;
     }
     
     .esueldo-card img{
         width: 190px!important;
     }
     
  

     
     .logistica img{
         max-width: 167px;
     }
     
     .card-superpopis img{
         max-width: 180px;
     }
     
     .clickdata img{
         max-width: 170px;
     }
     
     .shopify-card img{
     position: relative;
     top: -9px;
     max-width: 165px;
    }
     
    .medios-de-pago , .pay-way{
    height: 237px!important;
    }
    
    .pay-way img{
        max-width: 175px;
    }
    
    .card-partners{
        width: 348px!important;
        height: 227px!important;
    }
    
        
    .esueldo-card, .bitrix-card{
        height: 252px!important;
    }
    
    .bitrix-card img{
        top: -8px;
    }
    
    .digi, .storehub{
        height: 250px!important;
    }
    
    .card-doppler, .card-superpopis{
        height: 225px!important;
    }
    
    .vtex img{
    width: 130px;
}
        
        
   .magento-card img{
       max-width: 180px;
   }
   
   .medios-de-pago img{
       max-width: 150px;
   }
   
   .pedidos img {
        position: relative !important;
        top: 6px !important;
   }
   
   .pedidos-txt {
      position: relative !important;
      top: -58px !important;
   }
   
   .rappi-txt {
      position: relative !important;
      top: -35px !important;
   }
   
   .rappi-img{
       position: relative !important;
      top: 10px !important;
   }
   
   .prox-text{
       width: 264px !important;
   }
    
  
    
     
     
}

@media (max-width: 576px) {
  .hubs-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================
   TARJETA PRÓXIMAMENTE (AOKI + GROW2ON)
   ========================================== */

/* Contenedor Flex para alinear las dos imágenes side-by-side */
.aoki-grow-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 40px; /* Separación entre ambos logos */
}

/* Ajuste de tamaños para desktop */
.aoki-logo-img {
    max-width: 160px !important; 
    height: auto;
    margin: 0 !important;
    top: 0 !important; /* Resetea cualquier 'top' heredado de card-partners img */
}

.grow-logo-img {
    max-width: 200px !important; /* Grow2On suele ser más ancho horizontalmente */
    height: auto;
    margin: 0 !important;
    top: 0 !important;
}

/* === RESPONSIVE PARA MÓVILES === */
@media (max-width: 765px) {
    .aoki-grow-flex {
        gap: 20px; /* Reducimos el espacio en móvil para que entren bien */
    }
    .aoki-logo-img {
        max-width: 120px !important; /* Se achican para entrar en la tarjeta de 349px */
    }
    .grow-logo-img {
        max-width: 150px !important; 
    }
}
 
 .magento-card {
    margin-top: 72px;
    height: 314px;

}

.pay-way {
    height: 356px;
    margin-top: 4px;
}


@media (max-width: 765px) {
.magento-card {
    margin-top: 0px;
    height: auto;
}


    .grow2on img {
        max-width: 164px;
    }

 .hub-card img {
        max-width: 170px;
    }
}

/* ==========================================================================
   part-05-seccion.php
   ========================================================================== */

  :root{
    --zeus-a:#6A00A7;   /* violeta */
    --zeus-b:#00CDCD;   /* cian */
    --text:#2b2b2b;
    --bg:#ffffff;
  }

  .hero{
    font-family: "Ubuntu", system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow: clip;
  }

  .hero__inner{
    max-width: 1260px;
    margin: 0 auto;
    /* padding fluido para que en mobile no quede apretado ni excedido */
    padding: clamp(24px, 5vw, 60px) clamp(16px, 4vw, 24px) clamp(32px, 6vw, 80px);
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(16px, 4vw, 32px);
    align-items: center;
    min-height: 280px;
  }

  .hero__title{
    color: #6A00A7;
    text-align: center;
    font-weight: 700;
    line-height: 1.18;
    /* escala entre mobile y desktop (43px máx aprox) */
    font-size: 43px;
    /* sin ancho fijo para evitar overflow en mobile */
    max-width: 36ch;
    margin: 0 auto;
    width: 663px;
    
  }

  .hero__actions{
    margin-top: clamp(16px, 3.8vw, 40px);
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
  }

  .btn_conoce{
     display: flex;
    width: 320px;
    height: 45px;
    padding: 10px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 7px;
    background: linear-gradient(92deg, #6A00A7 -1.99%, #00CDCD 103.04%);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
    margin: 0 auto;
    color: #FFF;
    text-align: center;
    font-family: Ubuntu;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 24px;
    cursor: pointer;
}
  .btn_conoce:hover{ transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.2); color: white; }
  .btn_conoce:active{ transform: translateY(0); opacity: .9; }
  .btn_conoce:focus-visible{ outline: 3px solid rgba(0,205,205,.55); outline-offset: 2px; }

  .hero__visual{
    position: relative;
    min-height: 200px;
    display: flex;
    justify-content: center;
  }

  .hero__image{
    position: relative;
    z-index: 2;
    width: min(440px, 92%);
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.2));
  }
  
 
  
 @media (max-width: 765px) {
     
     .hero__title{
         font-size:26px;
        max-width: 363px;
        text-align: center; 
         
     }
     
     .hero__inner{
         display: flex;
         flex-direction: column-reverse;
         justify-content: center;
         align-items: center;
         gap: 35px!important;
         padding-top: 38px;
         padding-bottom: 62px;
     }
     
     .hero__actions{
         margin: 0px;
     }
     
     .btn_conoce{
         font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        width: 200px;
        height: 28px;
   
        margin-top: 18px;
     }
     
     .seccion-6{
         gap: 0px!important;
     }
     
     
     
        
 }


  /* Responsive */
  @media (max-width: 1245px){
    .hero__inner{
      grid-template-columns: 1fr;
      gap: 20px;
      text-align: center;
    }
    /* La imagen pasa arriba en mobile */
    .hero__visual{ order: -1; }
  }

/* ==========================================================================
   part-06-seccion.php
   ========================================================================== */



/* ===== SECCIÓN FAQ (layout general) ===== */
.seccion-6 { background:#F1F1F1; padding:64px 0; }
.faq-inner { display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center;}
@media (max-width: 992px){ .faq-inner { grid-template-columns:1fr; } }

/* ===== Título desk===== */
.faq-title {
  color: #002955;
  text-align: center;
  font-family: 'Ubuntu', sans-serif;
  font-size: 43px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  width: 690px;
  margin: 0 auto 24px auto; /* centrado horizontal */
}

@media (min-width: 992px) {
  .faq-title {
    color: #002955;
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
    font-size: 43px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    width: 690px;
    margin: 0 auto 90px auto; /* 48px de separación hacia abajo */
  }
}



@media (max-width:576px){ .faq-title{ font-size:26px; width: 315px;
} }

/* ===== Acordeón “card” blanca con chevrón ===== */
.faq-accordion .accordion-item{ border:none; background:transparent; margin-bottom:12px; }
.faq-accordion .accordion-button {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    padding: 14px 16px;
    color: #6A00A7;
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #6A00A7;
    font-family: Ubuntu;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-left: 45px;
}
.faq-accordion .accordion-button:focus{ border:none; box-shadow:0 0 0 .2rem rgba(106,0,167,.08); }
.faq-accordion .accordion-button:not(.collapsed){ color:#6A00A7 !important; box-shadow:0 2px 18px rgba(0,0,0,.08); }
.faq-accordion .accordion-button::after {
  content: "";
  background-image: url("https://zeuserp.tech/wp-content/themes/zeus-2023/images/newdownfaq.svg") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 10px;
  width: 18px;
  height: 10px;
  transition: transform 0.25s ease;
  transform: none;
}

.faq-accordion .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
}

.faq-accordion .accordion-button:not(.collapsed)::after{ transform:rotate(180deg); }
.faq-accordion .accordion-body {
    background: #fff;
    margin-top: -12px;
    border-radius: 0px 0px 20px 20px;
    padding: 14px 45px;
    color: #002955;
    text-align: justify;
    font-family: Ubuntu;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}





/* Ocultos por defecto (Ver más) */
.extra-question{ display:none; }

/* Botón “Ver más”  */
.faq-cta{ display:flex; justify-content:center; margin-top:45px; }


@media (min-width: 992px) {
  .btn.btn-faq {
    display: flex;
    width: 236px;
    height: 45px;
    padding: 10px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;

    border-radius: 15px;
    background: linear-gradient(270deg, #00CDCD -107.23%, #6A00A7 99.93%);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);

    color: #FFF;
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .btn.btn-faq:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    color: white;
  }
}




/* ===== Derecha: degradado y robot ===== */
.faq-right{ display:grid; justify-items:center; gap:14px; }

.faq-robot{ width:86%; height:auto; object-fit:contain; }

/* iconos ZEON / AYUDA */
.faq-badges{ display:grid; grid-auto-flow:column; gap:16px; margin-left: -20px;}
.chip{ display:grid; justify-items:center; text-decoration:none; }
/* ===== Chips ZEON / AYUDA con íconos personalizados ===== */
.chip {
  display: grid;
  justify-items: center;
  text-decoration: none;
}

.chip-icon

 {
    display: grid;
    place-items: center;
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
}

.chip-label {
 color: #002955;
text-align: center;
font-family: Ubuntu;
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: 126.4%; /* 27.808px */
}

/* Ícono ZEON */
.chip-zeon .chip-icon {
  background-image: url('https://zeuserp.tech/wp-content/themes/zeus-2023/images/icono-zeon.svg');
}

/* Ícono AYUDA */
.chip-ayuda .chip-icon {
  background-image: url('https://zeuserp.tech/wp-content/themes/zeus-2023/images/icono-ayuda.svg');
}

/* ===== Hover de los íconos ===== */
.chip:hover .chip-icon {
  transform: translateY(-2px);
 

}

/********Estilos Mobile*****************/
/* ===== Mobile layout como la captura ===== */
@media (max-width: 768px) {
  .seccion-6 { padding: 32px 0; }
.accordion

 {
    margin-top: -40px;
}
  /* 1 col, espacios más compactos */
  .faq-inner {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
  
  }

  /* Título centrado, ancho fijo */
      .faq-title {
        width: 100%;
        font-size: 26px;
        margin: 0 auto 84px;
        text-align: center;
        width: 315px;

    }

  /* Cards de acordeón compactas */
  .faq-accordion .accordion-button {
    font-size: 16px;
    padding: 12px 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    
  } 
  .faq-accordion .accordion-body {
    padding: 12px 21px;
    font-size: 16px;
    line-height: 1.45;
    margin-top: -8px;
    border-radius: 0 0 12px 12px;
    width: 100%;
  }

  /* Botón “Ver más” centrado */
  .faq-cta { justify-content: center; margin-top: 20px; }
  .btn.btn-faq {
    width: 180px;
    height: 46px;
    font-size: 18px;
    padding: 10px 16px;
    border-radius: 12px;
  }
  
  
   .btn.btn-faq:hover {
     transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    color: white;
  }

  /* Tarjeta con degradado detrás del robot */
  .faq-right { gap: 18px; justify-items: center; }
  
  .faq-robot { width: 100%; height: auto; object-fit: contain; margin-left: 2px;}

  /* Chips centrados y grandes como en la captura */
  .faq-badges {
    display: grid;
    grid-auto-flow: column;
    gap: 24px;
    justify-content: center;
    margin-left: 10px;
  }
  .chip { transition: transform .25s ease, box-shadow .25s ease; }
  .chip-icon {
    width: 100px;
    height: 100px;
    border-radius: 20px;
   
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    
  }
  .chip-label {
    margin-top: 8px;
    font-size: 18px;
    font-weight: 700;
    color: #002955;
    text-align: center;
  }

  /* Hover parecido al botón (siempre que el dispositivo tenga hover) */
  @media (hover: hover) {
    .chip:hover { transform: translateY(-2px); }
  }
}

/* ===== Íconos de chips (se mantienen en todos los breakpoints) ===== */
.chip-zeon .chip-icon {
  background-image: url('https://zeuserp.tech/wp-content/themes/zeus-2023/images/faq-zeon.png');
}
.chip-ayuda .chip-icon {
  background-image: url('https://zeuserp.tech/wp-content/themes/zeus-2023/images/faq-ayuda.png');
}

/* ===== Flecha del acordeón ===== */
.faq-accordion .accordion-button::after {
  content: "";
  background-image: url("https://zeuserp.tech/wp-content/themes/zeus-2023/images/newdownfaq.svg") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 10px;
  width: 18px; height: 10px;
  transition: transform .25s ease;
}
.faq-accordion .accordion-button:not(.collapsed)::after { transform: rotate(180deg); }

/**************************/
/* ===== SECCIÓN FAQ (layout general) ===== */
.seccion-6 {
  background: #F1F1F1;
  padding: 64px 0;
}

/* Reordenamos columnas: izquierda robot, derecha acordeón */
.faq-inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr; /* izquierda más angosta */
  gap: 40px;
  align-items: center;
 
}

/* Reasignamos posiciones */
.faq-right {
  order: 1; /* izquierda */
  display: grid;
  justify-items: center;
  gap: 14px;
}

.faq-left {
  order: 2; /* derecha */
}

/* ===== Mobile: vuelve a 1 columna ===== */
@media (max-width: 992px) {
  .faq-inner {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
  
  }

  /* Mobile vuelve al orden original */
  .faq-left {
    order: 1;
  }

  .faq-right {
    order: 2;
  }

  .faq-robot {
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-right: 20px;
  }

  .faq-badges {
    display: grid;
    grid-auto-flow: column;
    gap: 24px;
    justify-content: center;
  }
}