/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
/* @media (min-width: 320px) {
   .titulo{
    position: absolute;
    top: 200px;
    left: 17%;
    z-index: 99;} 
    .frame{
    margin-top: 860px;
    }

} */

/* Dispositivos muy pequeños en modo retrato */
 @media (max-width: 430px) and (orientation: portrait) {
    .body-index {
        background-color: rgb(182, 255, 250);
     
    }
    .titulo{
        margin-top: 400px;
    }
} 
@media (min-width: 430px)and (max-width: 900px) and (orientation: portrait){
    /* .body-index {
        background-color: rgb(208, 104, 249);
    } */
    .titulo{
        margin-top: 400px;
    }
    .frame{
        margin-top: 940px;
    }
    .portada-responsive{
        overflow: hidden;
        width:100vw;
        
    }
}
/* Dispositivos muy pequeños en modo paisaje */
@media (max-width: 932px) and (orientation: landscape) {
    /* .body-index{
        background-color: rgb(230, 219, 219);
    } */


.landscape-animation img{
    height: 100vh;
    object-fit: cover;
}
.frame{
padding-top: 100px;
}
    .anima-img-mobile{
        display: none;
    }
    .landscape-animation{
        display: block;
        height: 100vh;
    }
    .landscape-animation img{
        overflow: hidden;
        position: absolute;
        top: 0;
        width: 100vw;
    } 
.ani-lan4{
object-fit: cover;
}            
.ani-lan1{
    animation: moveAndDisappear10 4s forwards;
}
@keyframes moveAndDisappear10 {
    0% {bottom:5px;
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        bottom:340px;
        transform: translateX(-1000px);
        opacity: 1;
        display: none;
    }  
}    
.ani-lan2{
    animation: moveAndDisappear20 4s forwards;
}
@keyframes moveAndDisappear20 {
    0% {bottom:5px;
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        bottom:340px;
        transform: translateX(-700px);
        opacity: 1;
        display: none;
    }
}
.ani-lan3{    
    animation: moveAndDisappear30 20s forwards;
}
@keyframes moveAndDisappear30 {
    0% {top:5px;
        transform: translateY(2000);
        opacity: 1;
    }
    100% {
        top:340px;
        transform: translateY(-1000px);
        opacity: 1;
        display: none;
    }}    

.ani-lan4{
    animation: moveAndDisappear40 4s forwards;
}
@keyframes moveAndDisappear40 {
    0% {bottom:5px;
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        bottom:340px;
        transform: translateX(800px);
        opacity: 1;
        display: none;
    }
}    
.ani-lan5{
    animation: moveAndDisappear50 4s forwards;
}
@keyframes moveAndDisappear50 {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-650px);
        opacity: 1;
        display: none;
    }  
}
.ani-lan6{
    animation: moveAndDisappear60 4s forwards;
}
@keyframes moveAndDisappear60 {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-900px);
        opacity: 1;
        display: none;
    }   
}    
.ani-lan7{
animation: moveAndDisappear70 4s forwards;
}
@keyframes moveAndDisappear70 {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(800px);
        opacity: 1;
        display: none;
    }
    }
.ani-lan8{
animation: moveAndDisappear80 2s forwards;
        }
    @keyframes moveAndDisappear80 {
        0% {bottom:5px;
                transform: translateX(0);
                opacity: 1;
            }
        100% {
                bottom:340px;
                transform: translateX(-900px);
                opacity: 1;
                display: none;
            }
}
    #imgoculta{

        width: 40%;
        animation-name: cuadradito2;
  animation-duration: 7s;
  animation-iteration-count: infinite;
    }

    @keyframes cuadradito2 {
        0%   { left:150px; top:-200px;}
        25%  { left:355px; top:-200px;}
        50%  { left:150px; top:-200px;}
        75%  { left:100px; top:-200px;}
        100% { left:150px; top:-200px;}
      }
    .fondo-oculto{
        display: none;
    }
    .fondo-apaisado-mobile{
        display: block;
        width: 100vw;
    }
    .titulo{
        margin-top: 200px;
        font-size: 2rem;
    }
    .frame {
        margin-top: 0;
    }

    .fotoyo{
        transform: scale(0.8);
        margin-top: 0;
    }
}
/* Móviles en modo retrato */

/* Móviles en modo paisaje */
/* @media (max-width: 600px) and (orientation: landscape) {
    body {
        background-color: lightgreen;
    } }*/



    /* ipad mini portrait */
@media (min-width: 600px) and (max-width: 900px) and (orientation: portrait) {
    /* .body-index {
        background-color: rgb(50, 224, 137);
    } */
    .menu-container{
        font-size: 1.7rem;
    }
    .frame{
 margin-top: 135%;
    }
   
    .titulo{
        font-size: 3rem;
       
    }

    #imgoculta{
        width: 80%;
    }
   
} 


/* Tabletas en modo paisaje */
@media (min-width: 953px) and (max-width: 1170px) and (orientation: landscape) {
    /* .body-index{
        background-color: rgb(40, 40, 29);
    } */
    .menu-container{
        font-size: 1.7rem;
    }
    .frame{
        padding-top: 15%;
    }
    /* .anima-img-mobile{
      
    } */
  

    #imgoculta{
       margin-left: 20%;
       margin-bottom: 30%;
        width: 50%;
        animation-iteration-count: infinite;
    }
    @keyframes cuadradito {
        0%   { left:300px; top:-400px;}
        25%  { left:150px; top:-400px;}
        50%  { left:15px; top:-430px;}
        75%  { left:-150px; top:-305px;}
        100% { left:300px; top:-400px;}
      }
    .titulo{
    font-size: 3rem;
    }
    
    /* .fondo-oculto{
        display: none;
    } */
    /* .fondo-apaisado-ipad{
        display: block;
        width: 100vw;
    } */
           
    p{
        font-size: 1.5rem;
    }
    h2{
        font-size: 2.5rem;
    }

}
/* Tabletas en modo paisaje */
@media (min-width: 1170px) and (max-width: 1270px) and (orientation: landscape) {
    /* .body-index{
        background-color: rgb(23, 103, 224);
    } */
    .menu-container{
        font-size: 1.7rem;
    }
    #imgoculta{
       
        width: 58%;
        animation-iteration-count: infinite;
    }
    @keyframes cuadradito {
        0%   { left:5px; top:-450px;}
        25%  { left:222px; top:-450px;}
        50%  { left:500px; top: -330px;}
        75%  { left:200px; top:-250px;}
        100% { left:5px; top:-400px;}
      }
    .titulo{
    font-size: 3rem;
    }
    
    /* .fondo-oculto{
        display: none;
    } */
    /* .fondo-apaisado-ipad{
        display: block;
        width: 100vw;
    } */
           
    p{
        font-size: 1.5rem;
    }
    h2{
        font-size: 2.5rem;
    }

}

/* @media only screen and (min-width: 1366px)  and (orientation: landscape) {
    
    .parallax img{
        height: 100%;
        width: 100vw;
    }
    
  } */
@media (min-width: 1024px) and (max-width: 1367px) and (orientation: portrait) {
    /* .body-index{
        background-color: rgb(216, 216, 186);
    } */
    .menu-container{
        font-size: 1.7rem;
    }
    #imgoculta{
       
        width: 75%;
    }
    .titulo{
    font-size: 3rem;
    }
    .parallax{
        display: none;
    }
    .animation-mobile{
        display: block;
    }
    /* .fondo-oculto{
        display: none;
    } */
    /* .fondo-apaisado-ipad{
        display: block;
        width: 100vw;
    } */
    .frame{
        margin-top: 150%;
    }
    .parallax img{
        height: 100%;
    }
    p{
        font-size: 1.5rem;
    }
    h2{
        font-size: 2.5rem;
    }

}

/* pantalla grande paralax */
/* @media (min-width: 1367px) and (max-width: 2248px) {  */
@media (min-width: 1272px) and (max-width: 2248px) {
    /* .body-index{
       text-align: center;
    } */
    /* .tituloculto{
        display: none;
    } */
    /* .body-index{
        background-color: rgb(19, 124, 115);
    } */
    .landscape-animation{
        display: none;
    }
    .animation-mobile{
        display: none;
    }
    .titulo{
        font-size: 4rem;
        top: 50%;
    }
    
    .parallax{
        display: block !important;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    } 
    .parallax img{
        position: absolute;
   
        max-width: 100%;
        transition: transform 0.1s ease-out;
    }
 

   .hilos{
        align-items: end;
        height: 100vh;
        width: 100%;
       
    } 
    #imgpara1{
        transition: transform 0.1s ease-out;  
        
    }
    #flecha{
        z-index: 1;
        top: -100px;
        visibility: hidden; /* Inicialmente no se muestra */
        animation: blink 10s ease-in-out forwards;
        animation-delay: 3s;
      }
      @keyframes blink {
        0% {
            opacity: 0;
            visibility: visible; /* Mostrar la imagen al inicio de la animación */
        }
        20% {
            opacity: 0;
        }
        25%, 35% {
            opacity: 1;
        }
        40%, 50% {
            opacity: 0;
        }
        55%, 65% {
            opacity: 1;
        }
        70%, 80% {
            opacity: 0;
        }
        85%, 95% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
      }
    
    .fondo-oculto{
        display: none;
    }
    .fondo-apaisado-ipad{
        display: none;
    }
    #imgoculta{
        display: none;
    }
    .menu-container{
        font-size: 1.4rem;
        margin-left: 35px;
  
    }
    /* .manifesto-wrapper{
        align-items: center;
     justify-content: center;
    } */
  
    .frame{
      margin-left: 20%;
      margin-right: 20%;
        margin-top: 500px;
    }
    /* .escultura-libre parramani{
        position: relative;
        display: flex;
        justify-content: center; 
    } */
    .peanatitulo{
        font-size: 4rem;
    }
    p{
        font-size: 1.5rem;
       
    }
    h2{
        font-size: 2.5rem;
    }

    /* ------------estilos biografia y root */
    .root-menu{
        padding-left: 30%;
        font-size: 1.2rem;
    }
    .menu.active {
        left: 0px;
        }
    .fotoyo{

        width: 50%;
    }
/* ---------------------------------------------expos */


 
  div.card-expo-wrapper{
    font-size: 20px;
    display:grid;
       grid-template-columns: 30% 30% 30%;
    gap: 30px; /* Espacio entre las tarjetas */
    margin-top:5%;
}
    
   
    /* ---------------------------------catalogos */
    .card-container-catalogos{
        padding: auto;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        margin-top: 140px;
        width: 100%;
        justify-content: center;
        align-items: center;
        margin-bottom: 100px;
    }
    #img1{
    display:block;
    width: 100%;

    }
   
    .card-container-catalgos div h2{
       display: none;
    }
    .card-name-catEncaje{
        display: none;
    }
    .card-name-catHilo{
        display: none;
    }
    .card-name-catPandemia{
        display: none;
    }
    .card-name-cataPost-pandemia{
        display: none;
    }
    .div-cat-imgwebp{
        display: grid;
        grid-template-columns: 75%;
        align-items: center;
        justify-content: right;
    }
    .div-cat-imgwebp img{
        width: 80%;
        align-items: center;
    }

    /* ------------------------------------contacto */
     .textcontact {
        width:100%;  
         text-align: center;
         line-height: 110%;
         color:var(--terciary-dark);
         font-family: "poppins";
         font-size: 2.5em;
     } 
      .datos-contacto {
     text-align: center;
       
    } 
    .botoncon{
        
        margin-left: 43%;
}

 /* estilos tienda----------------------------------- */

  .tienda-cards{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr ;
    
    padding: 30px;
    padding-top: 90px;}

/* -----------------------------------------------------estilos coyol */
.fotos-medio-coyol{
    display: grid;
  grid-template-columns: 46.2% 1fr;
  
  }
  .coyol2{
    display: none;
  }
/* video-coyol{
    height: 1000px;
    width: 100vw;
} */

.fotos-final-coyol{
display: grid;
grid-template-columns: 48.5% 26.4% 1fr;
/* background-color: aquamarine; */
}
/* ------------------------estilos elat */
    .body-elat{
        background-color: var(--accent);
        overflow-x: hidden;
      }
 
      .primerdiv-elat {
        display: grid;
        grid-template-columns: 75% 25%;
        width: 100vw;
        object-fit: cover;
    }
      .primerdiv-elat img{
        height: 100%;
      }
      .elat1{
       width: 100%;
        object-fit: cover;
       
      }
      
      .video-elat{
        height: 50vh;
      }
      .ficha-elat{
        width: 100%;
        height: 400px;
        display: flex;
        justify-content: center; /* Centrado horizontal */
        align-items: center; /* Centrado vertical */
        font-size: 25px;
        font-family: var(--courier-prime);
        color: var(--terciary-dark);
      
      }
.texto-elat{
    height: 400px;
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    font-size: 30px;
    font-family: var(--courier-prime);
    color: var(--terciary-dark);
}
      
.fotos-final-elat{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.detallemarias{
    display: none;
}
/* --------------------------------ninfa */
.segundodiv-ninfa{
    width: 100%;
}
.primerdiv-ninfa{
    width: 100%;
}
  /* .nin2{

  } */
  .divmedioninfa{
    display: grid;
    grid-template-columns: 1fr 44% 1fr;
  }
  .divmedioninfa img{
    height: 100%;
  }
  
  
  .finaldiv-ninfa{
    display: grid;
    grid-template-columns: 39% 1fr 39%;
  }
  .finaldiv-ninfa img{
    height: 100%;
  }
  .tercerdiv-tlatzo{
    height: 100vh;
  }
  .tercerdiv-tlatzo{
   
    display: grid;
    grid-template-columns: 58.8% 1fr;
  }

     /* ---------------------------------saludo */
.primerdiv-saludo{
    display: grid;
    grid-template-columns: 75% 25%;
}

.primerdiv-saludo img{
    object-fit: cover;
    }
.segundodiv-saludo{
    display: grid;
    grid-template-columns: 32.3% 34.2% 1fr;
      }

.segundodiv-saludo img{
object-fit: contain;
  width: 595px;
  height:931px;
    
      }
      
.saludo2{
    display: none;
}
    /* ----------------------------------xtabay */
    .primerdiv-xtabay{
        display: grid;
        grid-template-columns:1fr ;
      height: 50%;
        
    }
    .roja-palma{
     display: none;  
    }
    .roja-general{
        
        height: 100%;
    }


}