@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Michroma&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');


body{
    overflow-x: hidden;
    background-color: #dadddf;

}


/*HEADER*/
header{
    background-color: black;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: auto;
    height:3rem ;
  
}

header nav ul li{
    display: inline-block;
    padding: 0.5rem;
    list-style: none;
    font-family: 'Michroma';
  
}

header a{
color: rgb(247, 246, 242);
}

header img{
height: 2rem;
width: auto;
margin-right: 0.4rem;
}
/*FIN HEADER*/

/*SLIDER*/

.slide{
margin: 0;
width: auto;
height: 570px;
overflow: hidden;  
}

.slide ul{
display: flex;
padding:0px;
margin: 0px;
width: 400%;
height: 570px;
animation: slide 20s infinite cubic-bezier(0.55, 0.48, 0.37, 0.92)
}

.slide img {
width: 100vw;  
height: 600px;      
}

@keyframes slide {
    0% {margin-left: 0;}
      20% {margin-left: 0;}

       25% {margin-left: -100%;}
      45% {margin-left:-100%;}

         50% {margin-left: -200%;}
      70% {margin-left:-200%;}

         75% {margin-left: -300%;}
      95% {margin-left:-300%;}
}

/*FIN SLIDER*/
.cplanes{
    background-color:#5370d2;
    color: rgb(24, 21, 21);    
    text-align: center;
    width: auto;
    height: 5rem;
    margin:0%;  
    padding: 0.4rem;

    font-family: 'Merriweather';
}



/*CONTENEDOR PLANES*/


/*CONTENEDOR GENERAL*/
.container {
height: auto;
width: auto;
display: grid;
place-content:flex-start;
grid-template-columns: 1fr 1fr 1fr; 
background-color: #dadddf;
}
/*FIN CONTENEDOR GENERAL*/


/*CAJA1, CAJA2, CAJA 3*/
.c1{
    background-color: #0c1015;
}

.c2{
    background-color: #383936;
}

.c3{
    background-color:#0c1015;
}

.c1, .c2, .c3{
text-align: left;
margin:1rem;
padding: 1rem;
height: 7rem;
border-radius: 1rem;
}

.c1h2, .c2h2, .c3h2{
text-align: center;
color: white;
font-family: 'Merriweather';
font-size: clamp(0.9rem, 1.5rem, 1.8rem);

}

.linkpla{
color: white;
display: block;
text-align: center;
font-family:'Open Sans';
}
/*FIN CAJA1, CAJA 2, CAJA3*/


.container2{
display: grid;
grid-template-columns: 75% 25%;
}
/*CAJA4, CAJA5,*/
.c4{
    background-color: #dadddf;
}

.c5{
    background-color: #383936;
    border-top-left-radius: 1rem;
}

.c4, .c5{
margin:0;
padding: 1rem;
height:10rem,;
text-align: center;
font-family:'Open Sans';
}

.c4h2, .c5h2{
text-align: center;
color: rgb(28, 26, 26);
font-family: 'Merriweather';
}

.linkpla{
color: white;
display: block;
text-align: center;
}
.c5 img{
width: 2rem;
height: 2rem;
}

.c5 a{
    display: inline-block;
    text-decoration: none;
    color: #dadddf;
}

.c6 img{
  height: 13rem;  
  width: 13rem;
  border-radius: 50%;
  
}


/*FOOTER*/
footer{
     background-color:black;
    color: white;
    text-align: center;
    align-content: center;
    width: auto;
    height: 3rem;
    margin: 0;
     position: relative;
     bottom: 0;
      font-family: 'Michroma';
        font-size:12px ;
}


/*FIN FOOTER*/


@media(max-width:400px){

    body{
        background-color: rgb(255, 255, 255);
    }

    header{
    background-color: rgb(20, 19, 19);
    display: flex;
    justify-content: flex-end;
    align-items: left;
    width:auto;
    height:3rem ;
    font-size: 0.97rem;
}

 header nav ul li{
  display: inline-block;
    list-style: none;
    font-family: 'Michroma';
}


.slide{
width: 100vw;
height:auto;
overflow: hidden;  
}

.slide ul{
display: flex;
padding:0px;
margin: 0px;
width: 400%;
height: 22rem;
animation: slide 20s infinite cubic-bezier(0.55, 0.48, 0.37, 0.92)
}

.slide img {
width: 100vw;  
height: 22rem;      
}

.cplanes{
    background-color:#686d73;
    color: rgb(24, 21, 21);
    text-align: center;
    width: auto;
    height: 7rem;
    margin:0%;  
    padding-top:1px;  
    padding-left: 0px;
    font-family: 'Merriweather';
}

.container {
height: auto;
width: auto;
display: grid;
place-content:flex-start;
grid-template-columns: 1fr; 
background-color: #dadddf;
}
/*FIN CONTENEDOR GENERAL*/


/*CAJA1, CAJA2, CAJA 3*/
.c1{
    background-color: #0c1015;
}

.c2{
    background-color: #383936;
}

.c3{
    background-color:#0c1015;
}

.c1, .c2, .c3{
text-align: left;
margin:1rem;
padding: 1rem;
height: 9rem;
border-radius: 1rem;
}

.c1h2, .c2h2, .c3h2{
text-align: center;
color: white;
font-family: 'Merriweather';
font-size: clamp(0.9rem, 1.5rem, 1.8rem);
}


.linkpla{
color: white;
display: block;
text-align: center;
font-family:'Open Sans';
}

.container2{
display: grid;
grid-template-columns: 1fr;
}
/*CAJA4, CAJA5,*/
.c4{
    background-color: #dadddf;
    order: 2;
}

.c5{
    background-color: #383936;
    margin: 0;
    width: auto;
    height: auto;
    border-radius: 0;
}

.c4 {
margin:0;
width: auto;
padding: 1rem;
height:25em;
text-align: center;
font-family:'Open Sans';
}


.c6 img{
  height: 10rem;  
  width: 10rem;
  border-radius: 50%;
}

footer{
     background-color:black;
    color: white;
    text-align: center;
    align-content: center;
    width: auto;
    height: 2.8rem;
    margin: 0;
     position: relative;
     bottom: 0;
      font-family: 'Michroma';
        font-size:12px ;
}


}