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

body{
    /* background: rgb(219, 223, 206); */
    background: white;

    /* inicio scroll */

     height: 80px; /* Permite hacer scroll */
      margin: 0;
      font-family: sans-serif;
      background-color: #f5f5f5; 
    }

    #miCaja {
      width: 600px;
      height: 90px;
      position: relative;
      margin: 80px auto;
      /* border-radius: 15px; */
      /* box-shadow: 0 4px 10px rgba(0,0,0,0.25); */
      overflow: hidden;
      cursor: pointer; /* Indica que se puede hacer clic */
      transition: transform 0.4s ease;  
    }
    #micaja img{
        width: 300px;
    }
     #micaja img2{
       margin: auto;    
    }

    #miCaja img {
      position: absolute;
      top: 0;
      left: 0;
      height: 80px;
      object-fit: cover;
      transition: opacity 1s ease;
      padding-top: 15px; 
    }

    #img1 {
      opacity: 1; 
    }

    #img2 {
      opacity: 0;
       margin-left: 100px;
     }

    /* Fundido al hacer scroll */
    #miCaja.cambiado #img1 {
      opacity: 0;
    }
    #miCaja.cambiado #img2 {
      opacity: 1; 
    }

    /* Efecto visual */
    #miCaja.cambiado {
      transform: scale(1.03);     
}
 /* final-scroll */

#contenedor{
    /* margin: auto; */
    /* width: 1000px;  */
   
}
#encabezado{
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: -webkit-linear-gradient(90deg, hsl(0, 7%, 97%), #f1cda1, #8a7158); background;
    height: 90px;
    position: sticky;
    top: 0; 
    z-index: 1000;   
}

#logo{
    /* background-image: url(../img-k/kora1A.png); */
    background-size: cover;
    width: 175px;
    height: 46px;
    margin: auto; 
    padding-top: 20px;   
}

#logo:hover{
    /* background-image: url(../img-k/kora1.png);  */
    width: 45px;
    height: 80px;  
}

#menu{
    margin-right: 20px;
    margin-top: 20px;
}

#opciones{
    display: flex;
    list-style: none;
    align-content: space-between;
}

#opciones a{
    text-decoration: none;
    padding: 20px;
    color: rgb(68, 67, 65);
    font-size: 18px;
}

#opciones li a:hover{
    background: rgb(235, 178, 125);
}

#frace{
    background: -webkit-linear-gradient(90deg, hsl(0, 7%, 97%), #f1cda1, #8a7158); background;
    color: rgb(68, 67, 65);
    text-align: center;
    font-size: 30px;
    padding: 25px; 
   
}

#frace img{
    width: 175px;
    height: 50px; 
    }

 .cuadrar img{
        height: 350px;
        width: 200px;
        margin-right: 20px;
      
    }

    /* ---------------------------------------------------------------index------- */

    .cuadrar1 img{
      background-image: url(../img-k/imgk1.png);
      /* background-size: cover; */
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no repeat; 
    }

    .cuadrar1 img:hover{
      background-image: url(../img-k/imgk1A.png);
      background-repeat: no-repeat;
    }

    .cuadrar2 img{
      background-image: url(../img-k/imgk2.png);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
    }
    .cuadrar2 img:hover{
      background-image: url(../img-k/imgk2A.png);
       
    }
    .cuadrar3 img{
      background-image: url(../img-k/imgk3.png);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
    }
    .cuadrar3 img:hover{
      background-image: url(../img-k/imgk3A.png);
    }
    .cuadrar4 img{
      background-image: url(../img-k/imgk4.jpg);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
    }
    .cuadrar4 img:hover{
      background-image: url(../img-k/imgk4A.jpg);
    }
    
    .cuadrar5 img{
      background-image: url(../img-k/imgk5.png);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat ; 
    }
    .cuadrar5 img:hover{
      background-image: url(../img-k/imgk5A.png);
    }

     .cuadrar6 img{
      background-image: url(../img-k/imgk6.png);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat ; 
    }

    .cuadrar6 img:hover{
      background-image: url(../img-k/imgk6A.png);
     
    }
   
      

    /* blusas-----------------------------------------------------------------blusas------ */

    .cuadrar-b1 img{
      background-image: url(../img-k/imgkb1.png);
       height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat ;

    }
    .cuadrar-b1 img:hover{
      background-image: url(../img-k/imgkb1A.png);
      background-repeat: no-repeat;
    }
    .cuadrar-b2 img{
      background-image: url(../img-k/imgk-b2.PNG);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
    }
    .cuadrar-b2 img:hover{
      background-image: url(../img-k/imgk-b2A.jpg);
      }
       
        .cuadrar-b3 img{
      background-image: url(../img-k/imgkb3.png);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
    }
    .cuadrar-b4 img{
      background-image: url(../img-k/imgkb4.png);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
      }
      .cuadrar-b5 img{
      background-image: url(../img-k/imgkb5.png);
       height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
     
    }
    .cuadrar-b5A img:hover{
      background-image: url(../img-k/imgkb5A.png);
      
      }
       .cuadrar-b6 img{
      background-image: url(../img-k/imgkb6.PNG);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat ; 
    }
    .cuadrar6 img:hover{
      background-image: url(../img-k/);
      align-items: center;
    }

    /* Camisetas---------------------------------------------------------------camisetas------ */

    .cuadrar-c1 img{
      background-image: url(../img-k/imgk-c1.png);
       height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat ;

    }
    .cuadrar-c1 img:hover{
      background-image: url(../img-k/imgk-c1A.png);
      background-repeat: no-repeat;
    }
    .cuadrar-c2 img{
      background-image: url(../img-k/imgk-c2.png);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
    }
    .cuadrar-c2 img:hover{
      background-image: url(../img-k/imgk-c2A.jpg);
      }

       
     .cuadrar-c3 img{
      background-image: url(../img-k/imgk-c3.png);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
    }  
    .cuadrar-c3 img:hover{
      background-image: url(../img-k/imgk-c3A.png);
      }
       

    .cuadrar-c4 img{
      background-image: url(../img-k/imgk-c4.jpg);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
      }
      .cuadrar-c4 img:hover{
      background-image: url(../img-k/imgk-c4A.jpg);    
      background-repeat: no-repeat;
      }

      .cuadrar-c5 img{
      background-image: url(../img-k/imgk-c5.png);
       height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
     
    }
    .cuadrar-c5 img:hover{
      background-image: url(../img-k/imgk-c5A.png);
      
      }
       .cuadrar-c6 img{
      background-image: url(../img-k/imgk-c6.png);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat ; 
    }
    .cuadrar-c6 img:hover{
      background-image: url(../img-k/imgk-c6A.jpg);
      align-items: center;
    }

    /* -chaquetas-------------------------------------------------------chaquetas------------ */

     .cuadrar-ch1 img{
      background-image: url(../img-k/imgk-ch1.png);
       height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat ;

    }
     /* .cuadrar-ch1 img:hover{
      background-image: url(../img-k/);
      background-repeat: no-repeat; 
     } */

     .cuadrar-ch2 img{
      background-image: url(../img-k/imgk-ch2.png);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
    }
    /* .cuadrar2 img:hover{
      background-image: url(../img-k/imgk2A.png);
        */

        .cuadrar-ch3 img{
       background-image: url(../img-k/imgk-ch3.png);
       height: 350px;
       width: 300px;
       margin: auto;
       background-repeat: no-repeat;
    }

     .cuadrar-ch4 img{
      background-image: url(../img-k/imgk-ch4.png);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
      }

      .cuadrar-ch5 img{
      background-image: url(../img-k/imgk-ch5.png);
       height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
     
    }
     /* .cuadrar-b5A img:hover{
      background-image: url(../img-k/imgkb5A.png); 
      
     } */

       .cuadrar-ch6 img{
      background-image: url(../img-k/imgk-ch6.png);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat ; 
    }

    /* .cuadrar6 img:hover{
      background-image: url(../img-k/);
      align-items: center;
      }
   */

    /* pantalones-----------------------------------------------------------pantalones------ */

    .cuadrar-p1 img{
      background-image: url(../img-k/imgk-p1.jpg);
       height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat ;

    }
    /* .cuadrar-p1 img:hover{
      background-image: url(../img-k/imgk-c1A.png);
      background-repeat: no-repeat;
    } */

    .cuadrar-p2 img{
      background-image: url(../img-k/imgk-p2.png);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
    }
    .cuadrar-p2 img:hover{
      background-image: url(../img-k/imgk-p2A.png);
      }
 
     .cuadrar-p3 img{
      background-image: url(../img-k/imgk-p3.jpg);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
    }  
    .cuadrar-p3 img:hover{
      background-image: url(../img-k/imgk-p3A.jpg);
      }
       

    .cuadrar-p4 img{
      background-image: url(../img-k/imgk-p4.jpg);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
      }
      .cuadrar-p4 img:hover{
      background-image: url(../img-k/imgk-p4A.jpg);    
      background-repeat: no-repeat;
      }

      .cuadrar-p5 img{
      background-image: url(../img-k/imgk-p5.jpg);
       height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
     
    }
    .cuadrar-p5 img:hover{
      background-image: url(../img-k/img-p5A.jpg);
      
      }
       .cuadrar-p6 img{
      background-image: url(../img-k/imgk-p6.png);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat ; 
    }
    /* .cuadrar-p6 img:hover{
      background-image: url(../img-k/imgk-p6.png);
      align-items: center;
    } */

   
     /* --------------------------------------------------------set------------- */

    .cuadrar-s1 img{
      background-image: url(../img-k/imgk-s1.jpg);
       height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat ;

    }
    /* .cuadrar-s1 img:hover{
      background-image: url(../img-k/imgk-c1A.png);
      background-repeat: no-repeat; */
    /* } */

    .cuadrar-s2 img{
      background-image: url(../img-k/imgk-s2.jpg);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
    }
    /* .cuadrar-s2 img:hover{
      background-image: url(../img-k/imgk-c2A.jpg);
      } */

       
     .cuadrar-s3 img{
      background-image: url(../img-k/imgk-s3.jpg);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
    }  
    .cuadrar-s3 img:hover{
      background-image: url(../img-k/imgk-s3A.png);
      }
       

    .cuadrar-s4 img{
      background-image: url(../img-k/imgk-s4.png);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
      }

      /* .cuadrar-s4 img:hover{
      background-image: url(../img-k/imgk-c4A.jpg);    
      background-repeat: no-repeat;
      } */

      .cuadrar-s5 img{
      background-image: url(../img-k/imgk-s5.png);
       height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
     
    }
    .cuadrar-s5 img:hover{
      background-image: url(../img-k/imgk-s5A.png);
      
      }

       .cuadrar-s6 img{
      background-image: url(../img-k/imgk-s6.png);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat ; 
    }
    .cuadrar-s6 img:hover{
      background-image: url(../img-k/imgk-s6A.png);
      align-items: center;
    }
    
     /* --------------------------------------------------------varios------------- */

    .cuadrar-v1 img{
      background-image: url(../img-k/imgk-v1.png);
       height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat ;

    }
    .cuadrar-v1 img:hover{
      background-image: url(../img-k/imgk-v1A.png);
      background-repeat: no-repeat; */
   }

    .cuadrar-v2 img{
      background-image: url(../img-k/imgk-v2.png);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
    }
    .cuadrar-v2 img:hover{
      background-image: url(../img-k/imgk-v2A.png);
      }

       
     .cuadrar-v3 img{
      background-image: url(../img-k/imgk-v3.png);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
    }  
     .cuadrar-v3 img:hover{
      background-image: url(../img-k/imgk-v3A.webp);
      } 
       

    .cuadrar-v4 img{
      background-image: url(../img-k/imgk-v4.png);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
      }

      .cuadrar-v4 img:hover{
      background-image: url(../img-k/imgk-v4A.jpg);    
      background-repeat: no-repeat;
      }

      .cuadrar-v5 img{
      background-image: url(../img-k/imgk-v5.jpg);
       height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat;
     
    }
    .cuadrar-v5 img:hover{
      background-image: url(../img-k/imgk-v5A.jpg);
      
      }

       .cuadrar-v6 img{
      background-image: url(../img-k/imgk-v6.png);
      height: 350px;
      width: 300px;
      margin: auto;
      background-repeat: no-repeat ; 
    }
    .cuadrar-v6 img:hover{
      background-image: url(../img-k/imgk-v6A.jpg);
      align-items: center;
    }
    

    /* ------------------------------------------------------------------------- */
    .card{
        border-style: none;
        width: 300px;
        height: 350px;
    }


#banner{
    background: (49, 27, 7);
    margin-top: 20px;
    margin-bottom: 20px;
    height: 700px;
    background-repeat: no-repeat; 

}

#banner img{
    height: 700px;
    width: 1400px;
    background-size: cover;
    text-align: center;
}
/* ----------------------------------------------------------------banner---- */
.card-body {
    text-align: center;
   
  }
  /* ---------------------------------------------------------banner2--- */

#banner2{
    background-image: url(../img-k/banner2.png);
    background-size: cover;
    width: 1300px;
    height: 700px;
    margin-top: 20px;
     background-repeat: no-repeat;    
}

#banner-blusas{
  background-image: url(../img-k/banner\ blusa.png);
  background-size: cover;
  width: 1300px;
  height: 700px;
  margin-top: 20px;
  background-repeat: no-repeat;
}
/* -----------------------------------------------------------------------banner-blusas--- */

#banner-camisetas{


}
/* ------------------------------------------------------------------------banner-chaquetas--- */

#banner-chtas{
    background-image: url(../img-k/banner\ chtas.png);
    background-size: cover;
    width: 1300px;
    height: 700px;
    margin-top: 20px;
     background-repeat: no-repeat;  
     
     }


#franja{
   background: -webkit-linear-gradient(90deg, hsl(0, 7%, 97%), #f1cda1, #8a7158); background; 
   height: 100px;
    margin-top: 15px;
    width: 1400px;
}

#franja img{
    width: 45px;
    height: 80px; 
    margin: auto;
    display: flex;
    padding-top: 15px;
   
}
 /* #letrahistoria {
    font-size: 25px;
    text-align: center;
    padding: 10px;
    background: rgb(246, 247, 244);
    color: rgb(68, 67, 65);
    } */

 #pie{
    text-align: center;
    background: -webkit-linear-gradient(90deg, hsl(0, 7%, 97%), #f1cda1, #8a7158); background;
    height: 100px;
    width: 1400px;
    margin-top: 15px;
    margin-top: 20px;

    } 
    .abajo{
      text-align: center;
      margin: auto;  
      padding-top: 15px;
    }
    #pieizq{
     text-align: center;
    
    }
  
  /* Modal cuadro red sociales */
    .modal-dialog {
      max-width: 250px;
      position: fixed;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      margin: 0; /* eliminar márgenes del centrado default */
    }

    /* Opcional: ajustar la animación de fade */
    .modal.fade .modal-dialog {
      transition: transform 0.3s ease-out;
      transform: translate(100%, -50%);
    }

    .modal.show .modal-dialog {
      transform: translate(0, -50%);
    }