*{
    
    box-sizing: border-box;
    
    /* evitar esto width + paddings +
border y quede anchura total width, para eviatar problemas con el diseño responive */
}

* {
  scrollbar-width: 10px;
  scrollbar-color: #ffffff #ca286e;
}



html {
  scroll-behavior: smooth; /* Habilita el desplazamiento animado */
}


html, body {
    

  margin: 0;
  padding: 0;
  border: none;
    
    
        /* paralax */
     background-blend-mode:color-burn;
    background: url(../imgfondos/fondos6.jpg) ;
     box-shadow: inset -40px 100px 200px -50px #1e1e1e;
    background-color: #22aed1;
    
    /* paralax */
    
  
   
    
    /* paralax */
    background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
    /* paralax */
}


#nequi{

 width: 350px; 
}
#daviplata{
  margin-top: 25px;
  width: 350px; 
}
#breb{
 
 margin-top: 30px;
  margin-bottom: -20px;
   width: 110px; 
}
.formadepago{
 width: 100%;
 filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.5));
}


.mercancias{


 
 
  justify-self: center;  
 margin-bottom: -50px;



 width: 280px;
 
z-index: 1;
}

.insumoimg{
  filter: drop-shadow(4px 4px 2px rgb(255, 255, 255));
 width: 100%;
}

.insumoimg2{
  filter: drop-shadow(4px 4px 2px rgb(255, 255, 255));
 width: 100%;
}

.pago-contenedor{
  
    
 
    
    display: flex; /* Activa el diseño de columnas */
    gap: 20px; /* Espacio entre columnas */
}

.columna-pago{
  
    
    
    display: flex;
    flex-direction: column;
    align-items: center;  
    
    
    flex: 1; /* Hace que todas las columnas tengan el mismo ancho */
    
    padding: 15px;
    
    width: 100%;
}

.span-heading2 {
    border: solid 2px #464646;
    border-radius: 50px;
  column-span: none;
 
}


.recuadropago{
  justify-self: center;  

 width: 400px;
 
 margin-top: -70px;
 margin-bottom: -70px;
}
.imagenpago{
  width: 100%;
}



.recuadrotiempo{
  justify-self: center;  

 width: 280px;
 
 margin-top: -70px;
 margin-bottom: -40px;
}
.imagentiempo{
  width: 100%;
}

.recuadropregunta{
  justify-self: right;  
transform: scaleX(-1);
 width: 75px;
 
 margin-top: -20px;
 margin-bottom: -25px;
}
.imagenpregunta{
  width: 100%;
}



.imagen1{
    border-radius: 0;
   
}
.imagenC{
    border-radius: 20%;
    padding: 1%;
    top: -200px;
    box-shadow:10px 5px 10px 0 #3b3b3b;
}

 /* galery paquetes */
.cont-galery{
   width: 100%;
    height: 100%;
     
    
}

 /* separador */





div.separe0{
    
clip-path: polygon(90% 3%, 83% 51%, 93% 99%, 8% 99%, 3% 52%, 7% 2%);
    mask-image: linear-gradient(to right, black 40%, transparent 90%);
     /* paralax */
     background-blend-mode:overlay;
    background: url(../imgfondos/fondos1.jpg) ;
      box-shadow: 0 2px 15px 9px #292929;
    background-color: #e8c277;
    
    /* paralax */
    
    background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
        /* paralax */      
    
   
    color: #2a2a2a;
    text-shadow: 0 0 10px #fafafa;
    
    font-family:Verdana;
    font-size: 20px;
    line-height: 1.2;
    
    text-align:left;
   padding-top: 3%;
    padding-left: 20%;
      padding-bottom: 3%;
     
       
        
        
}
 /* separador */



 /* separador */
div.separe1{
      
clip-path: polygon(90% 3%, 98% 51%, 93% 99%, 1% 99%, 11% 51%, 4% 3%);
    mask-image: linear-gradient(to left, black 40%, transparent 90%);
  
    
      /* paralax */
     background-blend-mode:overlay;
    background: url(../imgfondos/fondos1.jpg) ;
     box-shadow: 0 2px 15px 9px rgba(0, 0, 0, 0.2);
    background-color: #51c4f0;
    
    /* paralax */
    
    background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
        /* paralax */  
    color: #2a2a2a;
      text-shadow: 0 0 10px #ffffff;

   font-family:Verdana;
    font-size: 20px;
    line-height: 1.2;
    
    text-align:right;
   padding-top: 3%;
    padding-right: 20%;
      padding-bottom: 3%;
}
 /* separador */


 /* separador */
div.separe2{
clip-path: polygon(90% 3%, 83% 51%, 93% 99%, 8% 99%, 3% 52%, 7% 2%);
    mask-image: linear-gradient(to right, black 40%, transparent 90%);
       
  
  
    
    /* paralax */
     background-blend-mode:soft-light;
    background: url(../imgfondos/fondos1.jpg) ;
     box-shadow: 0 2px 15px 9px rgba(0, 0, 0, 0.2);
    background-color: #52b89c;
    
    /* paralax */
    
    background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
        /* paralax */  
    
    
  
    color: #2a2a2a;
    text-shadow: 0 0 10px #ffffff;
    
       font-family:Verdana;
    font-size: 20px;
    line-height: 1.2;
    
    text-align:left;
   padding-top: 3%;
    padding-left: 20%;
      padding-bottom: 3%;
}
 /* separador */


 /* separador */
div.separe3{
 clip-path: polygon(90% 3%, 98% 51%, 93% 99%, 1% 99%, 11% 51%, 4% 3%);
 mask-image: linear-gradient(to left, black 40%, transparent 90%);
    
    /* paralax */
     background-blend-mode:soft-light;
    background: url(../imgfondos/fondos1.jpg) ;
      box-shadow: 0 2px 15px 9px rgba(0, 0, 0, 0.2);
    background-color: #878dc9;
    
    /* paralax */
    
    background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
        /* paralax */
    
    color: #2a2a2a;
    text-shadow: 0 0 10px #ffffff;
    
       font-family:Verdana;
    font-size: 20px;
    line-height: 0.5em;
    
    text-align:right;
   padding-top: 3%;
    padding-right: 20%;
      padding-bottom: 3%;
}
 /* separador */


 /* separador */
div.separe4{
       
clip-path: polygon(90% 3%, 83% 51%, 93% 99%, 8% 99%, 3% 52%, 7% 2%);
   mask-image: linear-gradient(to right, black 40%, transparent 90%);
  
    
     /* paralax */
     background-blend-mode:overlay;
    background: url(../imgfondos/fondos1.jpg) ;
 box-shadow: 0 2px 15px 9px rgba(0, 0, 0, 0.2);
    
    background-color: #bdb668;
   
    
    /* paralax */
    
    background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
        /* paralax */
    
    color: #2a2a2a;
    text-shadow: 0 0 10px #ffffff;
    
       font-family:Verdana;
    font-size: 20px;
    line-height: 1.2;
    
    text-align:left;
   
   padding-top: 3%;
    padding-left: 20%;
      padding-bottom: 3%;
    
}
 /* separador */

.titulo1 h1{
    position:relative;
top:-45px;
    font-size:23px;
    color: #2a2a2a;
text-shadow: 0 0 10px #9d9d9d;
  justify-self: center;
      line-height: 1.2;
}


div.titulo1 {

font-family:Verdana;
   
     
    line-height: 0.5em;
    text-align:center;

    
}

div.titulo1{

    /* paralax */
     background-blend-mode:luminosity;
    background: url(../imgfondos/fondos1.jpg) ;
     box-shadow: inset -40px 100px 200px -50px #2c2c2c;
    background-color: #d33c81;
    
    /* paralax */
    
  
    padding: 2%;
    
    /* paralax */
    background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
    /* paralax */

}





/* separador */
/* separador conten1----------------------------------------------- */
div.contenido1{
   clip-path: polygon(54% 100%, 7% 94%, 0% 53%, 8% 6%, 47% 0%, 92% 5%, 100% 46%, 95% 95%);
    display: flex;
    flex-direction: row;
     font-family:Verdana;
    line-height: 1.2em;

    justify-content: center;   /* Centra horizontalmente */
    align-items: center;
    height: 100%; /* Centra verticalmente */
 
    
       
    
     /* paralax */
     background-blend-mode:overlay;
    background: url(../imgfondos/fondos1.jpg) ;
     box-shadow: inset -40px 100px 200px -50px #e7d4b1;
    background-color: #d5a850;
    
    /* paralax */
    
    background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
        /* paralax */
    
    
    
    
    color: #2a2a2a;
    text-shadow: 0 0 5px #ffffff;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-top: 50px;
   
}

.texto-1{
  text-align: center;
  margin-right: 25px;
  

}



/* separador */
/* separador conten2----------------------------------------------- */
div.contenido2{
    clip-path: polygon(54% 100%, 7% 94%, 0% 53%, 8% 6%, 47% 0%, 92% 5%, 100% 46%, 95% 95%);
    display: flex;
    flex-direction:row;
     font-family:Verdana;
    line-height: 1.2em;

    justify-content:center;   /* Centra horizontalmente */
    align-items:center;
    
    height: 100%; /* Centra verticalmente */
 
    
    
   
    
    
    /* paralax */
     background-blend-mode:overlay;
    background: url(../imgfondos/fondos1.jpg) ;
     box-shadow: inset -40px 100px 200px -50px #c9c8c8;
    background-color: #51c4f0;
    
    /* paralax */
    
    background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
        /* paralax */
    
    
    color: #2a2a2a;
    text-shadow: 0 0 5px #ffffff;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-top: 50px;
   
}

.texto-2 {
    text-align: center;
    margin-left: 25px;

}




/* separador */
/* separador conten2----------------------------------------------- */
div.contenido3{
  clip-path: circle(120px);
    display: flex;
    flex-direction: row;
     font-family:Verdana;
    line-height: 1.2em;

    justify-content: center;   /* Centra horizontalmente */
    align-items: center;
    height: 100%; /* Centra verticalmente */
 
   
    
      /* paralax */
     background-blend-mode:soft-light;
    background: url(../imgfondos/fondos1.jpg) ;
     box-shadow: inset -40px 100px 200px -50px #398b74;
    background-color: #52b89c;
    
    /* paralax */
    
    background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
        /* paralax */
    
    color: #2a2a2a;
     text-shadow: 0 0 5px #ffffff;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-top: 50px;
   
}

.texto-3 {
   text-align: center;
    margin-right: 25px;
}




/* separador */
/* separador conten2----------------------------------------------- */
div.contenido4{
    clip-path: polygon(54% 100%, 7% 94%, 0% 53%, 8% 6%, 47% 0%, 92% 5%, 100% 46%, 95% 95%);
    display: flex;
    flex-direction: row;
     font-family:Verdana;
    line-height: 1.2em;

    justify-content: center;   /* Centra horizontalmente */
    align-items: center;
    height: 100%; /* Centra verticalmente */
 
   
    
    
     /* paralax */
     background-blend-mode:soft-light;
    background: url(../imgfondos/fondos1.jpg) ;
     box-shadow: inset -40px 100px 200px -50px #c9c7c7;
    background-color: #878dc9;
    
    /* paralax */
    
    background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
        /* paralax */
    
    
    
    color: #2a2a2a;
    text-shadow: 0 0 5px #ffffff;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-top: 50px
   
}

.texto-4 {
   text-align: center;
    margin-left: 25px;
}



/* separador */
/* separador conten2----------------------------------------------- */
div.contenido5{
    clip-path: polygon(54% 100%, 7% 94%, 0% 53%, 8% 6%, 47% 0%, 92% 5%, 100% 46%, 95% 95%);
    display: flex;
    flex-direction: row;
     font-family:Verdana;
    line-height: 1.2em;

    justify-content: center;   /* Centra horizontalmente */
    align-items: center;
    height: 100%; /* Centra verticalmente */
 
    
    
    /* paralax */
     background-blend-mode:overlay;
    background: url(../imgfondos/fondos1.jpg) ;
     box-shadow: inset -40px 100px 200px -50px #e0dcdc;
    background-color: #bdb668;
    
    /* paralax */
    
    background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
        /* paralax */
    
    
    
    color: #2a2a2a;
    text-shadow: 0 0 5px #ffffff;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-top: 50px;
   
}

.texto-5 {
   text-align: center;
    margin-right: 25px;
}




/* separador................................................................. configuarcion responsive */


/* Mobile */
@media (max-width: 700px) {
 
 .insumoimg2{
 
 width: 70%;
}
 
 #daviplata{
 
  width: 280px; 
}
 
 
 #nequi{

 width: 280px; 
}
 
 .pago-contenedor{
  
   display: flex;
      gap: 20px;
    flex-direction: column;
 }
 
 .recuadropago{
  

 width: 320px;
}
 
    
    div.contenido1 {
         display: flex;
    flex-direction:column;
        
    }
    
    .texto-1{
  text-align: center;
    margin-right: 0;
 
}
    
    
    
      div.contenido2 {
         display: flex;
    flex-direction:column;
        
    }
    
    .texto-2 {
    text-align: center;
    margin-left:0;

}
    
        div.contenido3 {
         display: flex;
    flex-direction:column;
        
    }
    
       .texto-3 {
    text-align: center;
    margin-right:0;

}
    
    div.contenido4 {
         display: flex;
    flex-direction:column;
        
    }
    
       .texto-4 {
    text-align: center;
    margin-left:0;

}
    
    
            div.contenido5 {
         display: flex;
    flex-direction:column;
        
    }
    
       .texto-5 {
    text-align: center;
    margin-right:0;
         margin-top: -50px;

}
 


 }

/* Small Tablets */
@media (min-width: 701px)and (max-width: 1199px) {
 
  .pago-contenedor{
  
   display: flex;
      gap: 20px;
    flex-direction: column;
 }
 
    .texto-5 {
  
     
     margin-top: -50px;
     

}
 
  }


/* Escritorio  */
@media (min-width: 1199px) {
 


 
    .texto-1 {
    text-align: center;
    width: 40em;
}
    
  
    .texto-2 {
    text-align: center;
    width: 40em;
}

    .texto-3 {
    text-align: center;
    width: 40em;

}
    
        .texto-4 {
    text-align: center;
    width: 40em;

}

 
    .texto-5 {
    text-align: center;
    width: 40em;
     
     margin-top: 120px;
     margin-left: -150px;

}

     }