@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;700&display=swap');
:root{
    --yellow: #ffd602;
    --red: #db1919;;
    --blue: #036cb6;
}
body{
    font-family: 'Lato', sans-serif;
    height: 100vh;
    margin: 0;
    /* overflow: hidden; */
}
.page{
    position: relative;
    height: 100vh;
    width: 100%;
}
.container{
    position: absolute;
    z-index: 1;

    display: grid;
    grid-template-columns: 55% 45%;
    grid-template-rows: 20% 50% 30%;
    grid-template-areas: "nav      aside"
                          "section aside"
                          "footer  aside";
                          
    height: 100%;
    width: 100%;
}

.navbar{
    grid: nav;
    display: flex;
}
.navbar__content{
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 0 0 80px;

    animation: 5s navbar 0.5s ease-in-out;
}
@keyframes navbar{
    0%{
        transform: translateY(-200px);
    }
    100%{
        transform: translateY(0px);

    }
}
.navbar__content img{
    width: 50px;

}
.navbar__content ul{
    display: flex;
    justify-content: space-evenly;
    list-style: none;
    padding: 0;
    width: 450px;
}
.navbar__content ul li a{
    color: var(--red);
    font-weight: 500;
    text-decoration: none;
} 
.main-content{
    grid-area: section ;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 80px;

    animation: 2s main-content 0.5s ease-in-out;
}

.main-content p:first-child{
    font-size: 36px;
    font-weight: 300;
    margin: 0 0  -14px 44px;
}
.main-content h1{
    font-size: 48px;
    font-weight: 700;
    margin: 0 0  28px 0px;
}
.main-content p:last-child{
    font-weight: 100;
    margin: 0;
    width: 60%;
}

@keyframes main-content{
    0%{
        transform: translateY(-600px);
    }
    100%{
        transform: translateY(0px);

    }
}
.side-content{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: center;
    grid-area: aside;
}
.side-content p{
    transform: rotate(-90deg);
    font-size: 36px;

    grid-row: 1 / 2;
    grid-column: 1 / 2;

    opacity: 0;

    animation-name: side-content-text;
    animation-duration: 0.5s;
    animation-delay: 2.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes side-content-text{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }

}
.side-content img{
    width: 100%;
    grid-column: 2 / 6;
    grid-row: 1 / 2;

    animation: 2s side-content-img 0.5s ease-in-out;

}
@keyframes side-content-img{
    0%{
        transform: translateX(600px);
    }
    100%{
        transform: translateX(0px);

    }
}
.side-content div{
    background: greenyellow;
    height: 100%;

    grid-column: 4 / 7;
    grid-row: 1 / 2;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.footer{
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;

    background: greenyellow;
    border-radius: 0 80px 0 0;
    transform: translateY(100%);

    animation-name: footer;
    animation-duration: 4s;
    animation-delay: 2.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;

    
}
@keyframes footer {
        0%{
        transform: translateY(100%);
    }
    100%{
        transform: translateY(0px);

    }
}
.footer div {
    background: var(--blue);
    width: 130px;
    height: 50%;
    border-radius: 20px 20px 0 0;
    display: flex;
    justify-content: center;

    box-shadow: 0 10px 6px 6px rgba(0, 0, 0, 0.19), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.footer div:hover img {
    cursor: pointer;
    transform: translateY(-20px) scale(1.1);
    transition: transform 0.3s ease-in-out;
}

.footer div img {
    width: 160px;
    position: absolute;
    bottom: 30px;
    transform: translateY(0px) scale(1);
    transition: transform 0.5s ease-in-out;
}

/* Loader circulos cargando al inicio  */
.loader{
    background: white;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 3;

    animation: loader 1s linear forwards;
}
@keyframes loader {
    0%{
        opacity: 1;
        visibility: visible;
    }
    95% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}
.loader div{
    background: greenyellow;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 10px;

    transform: scale(0);

    animation: scaling 2s ease-in-out infinite;
}
.loader div:nth-child(1){
    animation-delay: 0.2s;
}
.loader div:nth-child(2){
    animation-delay: 0.4s;
}
.loader div:nth-child(3){
    animation-delay: 0.6s;
}

@keyframes scaling {
    0%, 100%{
        transform: scale(0.2);
    }
    40%{
        transform: scale(1);
    }
    50%{
        transform: scale(1);
    }

}
/* Modal */
.hidden{
  display: none !important;  
}
.visible{
    display: grid !important;
}
.modal{
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.5);
 position: absolute;
 z-index: 4; 
 
 display: grid;
 place-items: center;
}
.modal__content{
    align-items: center;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    width: 50%;
    height: 50%;

    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    

}
  .modal__content--close {
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;

  }

.modal__content--slider{
    width: 300px;
    height: 200px;
    transform-style: preserve-3d;
    margin-bottom: 60px;

}
.modal__content--button{
    background: var(--red);
    border: none;
    color: white;
    cursor: pointer;
    font-size: 20px;
    padding: 20px;

    border-radius: 15px;
    width: 240px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.cards{
    position: relative;
    width: 100%x;
    height: 100%;
}
.card{
    background: greenyellow;
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;
    transition: transform 0.5s ease;
    cursor: pointer;

    display: grid;
    place-items: center;

    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
  .card img {
    width: 100%;
  }

#radio-1:checked ~ .cards #card-1,
#radio-2:checked ~ .cards #card-2,
#radio-3:checked ~ .cards #card-3{
    transform: translateX(0) scale(1);
    opacity: 1;
    z-index: 1;

}
#radio-1:checked ~ .cards #card-2,
#radio-2:checked ~ .cards #card-3,
#radio-3:checked ~ .cards #card-1{
    transform: translateX(40%) scale(0.8);
    opacity: 0.5;
    z-index: 0;  
}
#radio-1:checked ~ .cards #card-3,
#radio-2:checked ~ .cards #card-1,
#radio-3:checked ~ .cards #card-2{
    transform: translateX(-40%) scale(0.8);
    opacity: 0.5;
    z-index: 0;  
}
.card img{
    width: 100%;
}



/* -------------------------------- */