@import url('https://fonts.googleapis.com/css2?family=Aldrich&family=Bebas+Neue&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,500;1,600;1,700;1,800;1,900&family=Oswald:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,700&family=Dosis:wght@200..800&display=swap');
/* font-family: 'Aldrich', sans-serif;
    font-family: 'Bebas Neue', sans-serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Oswald', sans-serif; 
  font-family: 'Chakra Petch', sans-serif; 
    // <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 200 to 800

{
  font-family: "Dosis", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
} */

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Chakra Petch', sans-serif;
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: black;
}

.slider input {
    visibility: hidden;
    display: none;
}

.buttons {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    bottom: 50px;
    gap: 10px;

}

.buttons label {
    width: 20px;
    height: 20px;
    background-color: white;
    opacity: 0.5;
    cursor: pointer;
    z-index: 1;
    transition: 300ms ease-in-out;
    border-radius: 5px;
}

.buttons label:hover {
    scale: 1.2;
    opacity: 1;
}

.slider input:nth-child(1):checked~.buttons label:nth-child(1),
.slider input:nth-child(2):checked~.buttons label:nth-child(2),
.slider input:nth-child(3):checked~.buttons label:nth-child(3) {
    opacity: 1;
    scale: 1.2;
    width: 40px;
}

.content {
    position: relative;
    width: 300%;
    display: flex;
    transition: 400ms ease-in-out;
    left: 0;
}

.firstslide,
.secondslide,
.thirdslide {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.firstslide {
    background-color: rgb(16, 16, 16);
    background-image: url('images/kt600-03.jpg');
    background-size: cover;
    /* Ajusta el tamaño de la imagen al contenedor */
    background-position: center;
    /* Centra la imagen en el contenedor */
}

.secondslide {
    background-color: rgb(255, 179, 0);
}

.thirdslide {
    background-color: rgb(0, 244, 163);
}

.slider {
    overflow: hidden;
}

.slider input:nth-child(1):checked~.content {
    left: 0;
}

.slider input:nth-child(2):checked~.content {
    left: -100vw;
}

.slider input:nth-child(3):checked~.content {
    left: -200vw;
}

.box1 {
    width: 98%;
    height: 85%;
    /* background: rgba(80, 166, 227, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(15.5px);
    -webkit-backdrop-filter: blur(15.5px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
     */
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    /* Añade una sombra */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.box2 {
    width: 98%;
    height: 10%;
    /* background-color: rgb(4, 138, 138); */
    border-radius: 15px;
    background: rgba(80, 166, 227, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(15.5px);
    -webkit-backdrop-filter: blur(15.5px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    opacity: 0.3;

}

.inf1 {
    /* background: rgba(80, 166, 227, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(15.5px);
    -webkit-backdrop-filter: blur(15.5px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18); */
    width: 23%;
    height: 90%;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.logo {
    width: 100px;
}

.dato1 {
    margin-top: 300px;
}

.dato1 h1 {
    color: aliceblue;
    margin-top: 30px;
    font-weight: 800;

}

.dato2 h2 span.brand-label {
    color: rgb(253, 220, 8);
    font-weight: 60;
    margin-left: 70px;
    margin-top: 15px;
}

.dato2 h2 span.brand-name {
    color: rgb(255, 255, 255);  
    font-weight: 60;
    margin-left: 70px;
    margin-top: 15px;
}
.box-container{
    display: flex;
    align-items: center;
    justify-content: center;
}
.label h2{
    color: rgb(253, 220, 8);
    font-weight: 60;
    margin-left: 70px;
    margin-top: 15px;
}
.caracteristics h2{
    color: rgb(255, 255, 255);  
    font-weight: 60;
    margin-left: 70px;
    margin-top: 15px;
}

.inf2 {
    /* background: rgba(80, 166, 227, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(15.5px);
    -webkit-backdrop-filter: blur(15.5px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18); */
    width: 18%;
    height: 90%;
    border-radius: 10px;

}

.modelo3D {
    /* background: rgba(80, 166, 227, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(15.5px);
    -webkit-backdrop-filter: blur(15.5px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    opacity: 0.3; */
    width: 65%;
    height: 95%;
    border-radius: 10px;

}

.PRODUCTO3D {
    margin-top: 30px;
    margin-left: 0px;
    mix-blend-mode: multiply;
    z-index: 500;
}

.viewer {
    height: 800px;
    width: 1480px;
    padding: 0;
    margin-left: -90px;
}
.Hotspot{
    background: rgba(80, 166, 227, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(15.5px);
    -webkit-backdrop-filter: blur(15.5px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);    
}
.HotspotAnnotation{
    color: aliceblue;
    padding: 15px;
    font-size: 15px;
}