.body-index { 
    margin: 0;
    width: 100vw;
    background-color:var(--primary);
    
    height: fit-content;
}
.body-index::-webkit-scrollbar {
    display: none;
}

.menu-container {
    position: fixed;
    list-style-type: none;
    top: 0;
    padding-left: 10px;
    padding-right: 5px;
    z-index: 1;
    text-shadow: 1px 1px 2px #f235bc, 0 0 1em rgb(191, 36, 129), 0 0 0.2em rgb(164, 31, 191);
    cursor: pointer;
    font-size: 1.1rem;  
    color: var(--neutral); 
    font-family:"poppins-bold";
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95vw;
    height: 50px;

}
.menu-icon{
 list-style-type: none;
 cursor: pointer;

}
div.menu-icon:hover {
   
    color: var(--neutral);
    text-shadow: 1px 1px 2px rgb(53, 242, 229), 0 0 1em rgb(36, 191, 191), 0 0 0.2em rgb(31, 191, 114);
  
    }


    /* -------------------------------estilos tie */
.tienda-index{

    list-style-type: none;


}
.tienda-index ul li{
    list-style: none; 
    display:inline-block;

}
.tienda-index ul li a{
    
    list-style: none;
    text-decoration: none;
    color: var(--neutral);
list-style-type: none;
}
div.tienda-index ul li a:hover {
   
    color: var(--neutral);
    text-shadow: 1px 1px 2px rgb(53, 242, 229), 0 0 1em rgb(36, 191, 191), 0 0 0.2em rgb(31, 191, 114);
  
    }

    /* ------------------------root-menu */
    .root-menu{
        /* background-color: blueviolet; */
     width: fit-content;
        position: fixed;
        /* position: relative; */
        z-index: 1;
        padding-left: 80px;
       
        top: 25px;
        font-family: poppins-bold;
        color: var(--neutral);
        text-shadow: 1px 1px 2px rgb(242, 53, 188), 0 0 1em rgb(191, 36, 129), 0 0 0.2em rgb(164, 31, 191);
         text-align: left;
    }
    .root-menu ul li{
        display: inline-block;
        list-style-type: none;
    }
    .root-menu ul li a{
    text-decoration: none;
    color: var(--neutral);
    }
 
   
    .root-menu ul li a:hover{
        text-shadow: 1px 1px 2px rgb(53, 242, 229), 0 0 1em rgb(36, 191, 191), 0 0 0.2em rgb(31, 191, 114); 
}
/* ------------------------clases menu que aparece */
.menu.active {
    left: -30px;
    }
    .menu ul li{
        list-style: none;
      
    }

.menu {
font-family:"poppins-bold";
position: fixed;
top: 60px;
left: -400px;
height: 80%;
text-align: left;
transition: left 0.3s ease;
z-index: 1;

}

.menu ul {
height: 300px;
margin-top: 2.7rem;
list-style: none;
margin: 0;

}
.menu ul li  {
height: 50px;
}
.menu ul li a {
font-family:"poppins-bold";
font-size: 1.2rem;
color: white;
text-decoration: none;
text-shadow: 1px 1px 2px rgb(242, 53, 188), 0 0 1em rgb(191, 36, 129), 0 0 0.2em rgb(164, 31, 191);
}


div.menu ul li a:hover {

text-shadow: 1px 1px 2px rgb(53, 242, 229), 0 0 1em rgb(36, 191, 191), 0 0 0.2em rgb(31, 191, 114);

}


/* ------------------------clase del foooter */
footer{
  
    text-align: center;
    align-items: center;


  

    }
    .redes{
        list-style: none;
        text-decoration: none;
        display: flex;
        justify-content: center;
    }
    .icon-redes{
        width: 30px;
        height: 30px;
        padding: 10px;
    }
    .menu-footer ul li {
        list-style: none;
        text-decoration: none;
        font-family: "poppins";
        font-size: 1.2rem;
    
    }
    .menu-footer ul li a {
        color: var(--terciary-dark);
        text-decoration: none;
    }
    .menu-footer ul li a:hover {
        color: var(--secondary-darkplus);
     
        text-decoration: none;
    }
    .copy {
        list-style: none;
        text-decoration: none;
        padding-bottom: 20px;
        font-family: "poppins";
        font-size: 1.2rem;
        color: var(--terciary-dark);
    }

/* -----------------------imagenes fondo index */
.landscape-animation{
    display: none;
}    
.animation-mobile img{
    overflow: hidden;
position: absolute;
top: 0;
width: 100vw;
}

.priani{
width: 100px;  

animation: moveAndDisappear1 5s forwards;
}
@keyframes moveAndDisappear1 {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(400px);
        opacity: 1;
        display: none;
    }
}


.secani{
     
    
    animation: moveAndDisappear2 4s forwards;
    }
    @keyframes moveAndDisappear2 {
        0% {top:5px;
            transform: translateX(0);
            opacity: 1;
        }
        100% {
            top:340px;
            transform: translateX(100px);
            opacity: 1;
            display: none;
        }
    }

    .terani{
        
        animation: moveAndDisappear3 6s forwards;
        }
        @keyframes moveAndDisappear3 {
            0% {bottom:5px;
                transform: translateX(0);
                opacity: 1;
            }
            100% {
                bottom:340px;
                transform: translateX(-400px);
                opacity: 1;
                display: none;
            }
        } 
        
        .cincani{
        
            animation: moveAndDisappear5 3s forwards;
            }
            @keyframes moveAndDisappear5 {
                0% {bottom:5px;
                    transform: translateX(0);
                    opacity: 1;
                }
                100% {
                    bottom:340px;
                    transform: translateX(-500px);
                    opacity: 1;
                    display: none;
                }
            }

        .cuartani{
           
            animation: moveAndDisappear4 8s forwards;
            }
            @keyframes moveAndDisappear4 {
                0% {bottom:5px;
                    transform: translateX(0);
                    opacity: 1;
                }
                100% {
                    bottom:340px;
                    transform: translateX(-500px);
                    opacity: 1;
                    display: none;
                }
            }


.sisani{
 
    animation: moveAndDisappear6 4s forwards;
    }
    @keyframes moveAndDisappear6 {
        0% {
            transform: translateY(0);
            opacity: 1;
        }
        100% {
            transform: translateY(-350px);
            opacity: 1;
            display: none;
        }
    }    
.setani{

    animation: moveAndDisappear7 5s forwards;
    }
    @keyframes moveAndDisappear7 {
        0% {bottom:5px;
            transform: translateX(0);
            opacity: 1;
        }
        100% {
            bottom:340px;
            transform: translateX(500px);
            opacity: 1;
            display: none;
        }
    }


/* -------------------------------------clases de la section index */
.parallax{
    display: none;
}
.fondoderecha{
    display: none;
}
.fondoizq{
    display: none;
}
.titulo{
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    font-family: poppins-bold;
    color: var(--neutral);
    text-shadow: 1px 1px 2px #f235bc, 0 0 1em rgb(191, 36, 129), 0 0 0.2em rgb(164, 31, 191);
    text-align: center;
    margin-top: 550px;
z-index: 99;
}
/* @media (min-width: 420px){
    .titulo{
        margin-top: 780px; 
        background-color: blue;
    }
} */
.fondo-apaisado-mobile{
    display: none;
}
.fondo-apaisado-ipad{
    display: none;
}

#imgoculta{
    position:absolute;
    z-index: -1;
margin-top: 40%;
  width: 94vw;
  
  animation-name: cuadradito;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
@keyframes cuadradito {
    0%   { left:5px; top:-100px;}
    25%  { left:5px; top:0px;}
    50%  { left:15px; top:30px;}
    75%  { left:0px; top:5px;}
    100% { left:5px; top:-100px;}
  }
.frame{
   margin-top: 810px;
   font-family: poppins;
   text-align: center;
   color: var(--terciary-dark);
}
/* codigo sebastian */
/* .block{
    background-color: red;
    height:100px;
    width:100px;
    animation:anim 4s forwards;
  }
  
  @keyframes anim {
    from {translate:0 0 0;}
    to {translate:200vw 0 0;}
  }
  
  .my-div{
    border:1px solid blue;
    width:80vw;
    height:200px;
    margin:0 auto 0 auto;
    overflow:hidden;
} */
/* -------------------estilos para biografía */
.biofondo-color{
    background-color: var(--secondary);
    overflow: auto;
}
.divfotoybio{
    margin-top: 5%;
    height: 70%;
    display: grid;
    grid-template-columns: 70% ;
    justify-content: center;
}
.fotoyo{
 margin-top: 70px;
   width: 100%;
}
.biografia{ 
   height: 60%;
    font-size: 20px;
    color: var(--terciary-dark);

font-family: poppins;
}
/* ------------------------------estilos para expos */
div.card-expo-wrapper{
    margin-top: 15%;
    display: grid;
    grid-template-columns: 80% ;
   
    
  }
  .cardexpo{
   padding-left: 40px;
 font-family: poppins;
 color: var(--terciary-dark);
   font-size:30 px; 
  }


  /* -----------------------estilos tienda */
  .tienda-cards{
    display: grid;
    grid-template-columns: 1fr 1fr ;
    padding: 30px;
    padding-top: 70px;
    
}

.tiendafondo-color{
    background-color: var(--primary);
}
/* img {
    height: 400px;
    width: 300px;
} */
.img-card-tienda{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cardproducto{
    /* overflow: hidden; */
    /* width: 300px;
    height: 400px; */
    /* background-color: aqua; */
    position: relative;
 
}

.nombre-card-tienda{
    text-shadow: 1px 1px 2px rgb(48, 121, 121), 0 0 1em rgb(241, 17, 152), 0 0 0.2em rgb(16, 19, 19);
    font-size: 18px; /* Cambiado a 168px */
    bottom: 10px;
 padding-left: 20px;
color: var(--neutral);  
width: auto;
position: absolute;
    font-family: "poppins-bold";
    z-index: 99;
}

.cardproducto:hover {
    transform: scale(1.09); /* Efecto de aumento al pasar el ratón */
z-index: 99;
}
.copy-tienda{
    text-align: center;
}
 /* --------------------------------------------estilo catalogos */
 .body-catalogos{
    margin: 0;
    width: 100vw;
    background-color:var(--primary-light);
 
    height: fit-content;
 }
 section.card-container-catalogos div{
    display: grid;
    grid-template-columns: 1fr ;
    margin-top: 70px;
    
 }
 #img1{
   object-fit: cover; 
 }
 h2.card-name-catEncaje{
    color: aliceblue;
    position: absolute;
    top: 570px;
    left: 250px;
   font-family: poppins-bold;
    text-shadow: 1px 1px 2px rgb(48, 121, 121), 0 0 1em rgb(214, 32, 141), 0 0 0.2em rgb(9, 247, 247);
 
 }
 h2.card-name-catHilo{
    color: aliceblue;
    position: absolute;
    top: 1270px;
    left: 250px;
    text-shadow: 1px 1px 2px rgb(48, 121, 121), 0 0 1em rgb(214, 32, 141), 0 0 0.2em rgb(9, 247, 247);
    font-family: poppins-bold;
 }
 h2.card-name-catPandemia{
    color: aliceblue;
    position: absolute;
    top: 1970px;
    left: 250px;
    text-shadow: 1px 1px 2px rgb(48, 121, 121), 0 0 1em rgb(214, 32, 141), 0 0 0.2em rgb(9, 247, 247);
    font-family: poppins-bold;
 }
 h2.card-name-cataPost-pandemia{
    color: aliceblue;
    position: absolute;
    top: 2670px;
    left: 250px;
    text-shadow: 1px 1px 2px rgb(48, 121, 121), 0 0 1em rgb(214, 32, 141), 0 0 0.2em rgb(9, 247, 247);
    font-family: poppins-bold;
 }

 /* ---------------------------------------estilo contacto */
 .botoncon{
    justify-items: center;
    margin-left: 60px;
    border-radius: 40px;
    width: 250px;
    font-family: "poppins-bold";
    font-size: 1.3em;
    color: rgb(22, 104, 83);
    background-color: rgb(239, 180, 250);
    box-shadow: 10px 10px 10px rgba(180, 30, 140, 0.775);
    padding: 10px 20px;
    margin-bottom: 30px;
    border: none;
    transition-duration: .5s;
    transition-timing-function: steps(20);
}

.botoncon:hover {
    background-color:var(--primary-light);
    transform:scale(1.15);
    box-shadow: 15px 15px 15px rgba(14, 177, 232, 0.746);
    color: var(--dark-plus);
}

form.formulario{ 
      display: flex;
      justify-content: center;
      flex-direction: column;
      /* width: 200px;
      height:450px ;    */
      /* font-size: 18px; */
      font-family: "poppins";
      color: var(--neutral);
      
  }
  
  
  /* .formulario:hover{
      background-color: #f3f3f31b;
      
  } */
  
  input{
      background-color: rgba(213, 213, 235, 0.377);
      color: var(--terciary-dark);
      font-size: 10px;
      border: none;
      height: 60px;
      padding: 10px;
  }
  
  

  ::placeholder{
  
      color: #00000000; /* Cambia el color del texto del marcador de posición aquí */
  
      background-color: transparent; /* Hace que el fondo del marcador de posición sea transparente */
  }
  
  /* h2 		 { 
      text-align:center; 
      margin-bottom:50px; 
    } */
    h2 small { 
      font-weight:40px; 
      color:#f5efef; 
      display:block; 
    }
  
    /* form starting stylings ------------------------------- */
    .group{ 
      position:relative; 
      margin-bottom:20px; 
    }
    input{
    margin-left: 25px;
      font-size:25px;
      padding:10px 10px 10px 5px;
      /* display:block; */
      /* width:300px; */
      border:none;
   
      /* border-bottom:3px solid #01e915; */
      background-color: transparent;
    }
    input:focus 		{ outline:none; }
    
    /* LABEL ======================================= */
    label 				 {
      color:none; 
      font-size:20px;
      font-weight:normal;
      position:absolute;
      pointer-events:none;
      left:10px;
      top:10px;
      transition:0.2s ease all; 
      -moz-transition:0.2s ease all; 
      -webkit-transition:0.2s ease all;
      text-shadow: 1px 1px 2px rgb(242, 243, 243), 0 0 1em rgb(231, 14, 145), 0 0 0.2em rgb(242, 6, 226);
   
    }
    
    /* active state */
    input:focus ~ label, input:valid ~ label 		{
      top:-10px;
      /* left: 50px; */
      font-size:25px;
      /* color:#eff0f5; */
    }
    
    /* BOTTOM BARS ================================= */
    .bar 	{ position:relative; 
      display:block;
       width:100vw;
       
      }
    .bar:before, .bar:after 	{
      content:'';
      height:4px; 
      /* width:800px; */
      bottom:0px; 
      position:absolute;
      background:#a71798; 
      transition:0.2s ease all; 
      -moz-transition:0.2s ease all; 
      -webkit-transition:0.2s ease all;
    }
    .bar:before {
      /* left:50%; */
      width: 300px;
      margin-left: 30px;
    }
    .bar:after {
      /* right:50%;  */
      /* width: 700px; */
      background-color: #f5faf9;
      
    }
    
    /* active state */
    input:focus ~ .bar:before, input:focus ~ .bar:after {
      width:50%;
    }
    
    /* HIGHLIGHTER ================================== */
    .highlight {
      position:absolute;
      height:60%; 
      width:100px; 
      top:25%; 
      left:0;
      pointer-events:none;
      opacity:0.5;
    }
    
    /* active state */
    input:focus ~ .highlight {
      -webkit-animation:inputHighlighter 0.3s ease;
      -moz-animation:inputHighlighter 0.3s ease;
      animation:inputHighlighter 0.3s ease;
    }
    
    /* ANIMATIONS ================ */
    @-webkit-keyframes inputHighlighter {
        from { background:#47b8a9; }
      to 	{ width:0; background:transparent; }
    }
    @-moz-keyframes inputHighlighter {
        from { background:#45c0b0; }
      to 	{ width:0; background:transparent; }
    }
    @keyframes inputHighlighter {
        from { background:#47b8a9; }
      to 	{ width:0; background:transparent; }
    }
  
  
  /* Estilo para los campos de entrada */
  input[type="text"]::-webkit-input-placeholder {
   
      opacity: 0; /* Oculta el marcador de posición */
  }
  input[type="text"]:-moz-placeholder {
      opacity: 0; /* Oculta el marcador de posición */
  }
  input[type="text"]::-moz-placeholder {
      opacity: 0; /* Oculta el marcador de posición */
  }
  input[type="text"]:-ms-input-placeholder {
      opacity: 0; /* Oculta el marcador de posición */
  }
  
  /* Estilo para los pseudo-elementos que simularán el marcador de posición */
  input[type="text"]::before {
      content: attr(placeholder); /* Utiliza el contenido del atributo placeholder */
      color: #d22727; /* Color del texto del marcador de posición */
      position: absolute;
      top: 0;
      left: 0;
      padding: 10px;
      pointer-events: none; /* Evita que el pseudo-elemento sea interactivo */
  }
  
  .datos-contacto{
    color: var(--terciary-dark);
    font-size: 20px;
    font-family: poppins;
  }
  .textcontact{
    color: var(--terciary-dark);
    font-size: 23px;
    font-family: poppins;
   
  }
  .container-contacto{
    padding-top: 70px;
    padding-left: 10px;

  }
  /* .redes-contacto{
    display: flex;
   
    list-style: none;
    gap: 20px;
    margin-right:10%;
    
  } */
  


/* ---------------------------------------------estilo catálogos */

.div-cat-imgwebp{
    display: grid;
    grid-template-columns: 90%;
    align-items: center;
    justify-content: center;
}
.div-cat-imgwebp img{
    width: 90vw;
   
}