/*------------INICIO------------*/
main .inicio {
    grid-area: 1/1/2/2;

    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: 30rem fit-content(40rem) repeat(4, fit-content(10rem));
    grid-column-gap: 0px;
    grid-row-gap: 5px;
}

/*------------HERO------------*/
main .inicio #hero {
    grid-area: 1/1/2/4;

    /*Imagen de fondo*/
    background-image: url("../imgs/heroimgs.jpg");
    background-size: cover;
    background-repeat: no-repeat;

    /*Borde*/
    border: 0.5rem solid var(--primary-color);
    border-radius: 2rem 0 0 2rem;
}

main .inicio #hero .hero_content {
    height: 100%;
    margin-left: 1rem;

    /*Display interior*/
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: space-evenly;
}

main .inicio #hero p,
a {
    /*Tamaño letra*/
    font-size: 130%;
}

main .inicio #hero a {
    text-decoration: underline;
}

/*------------ESLOGAN------------*/
main .inicio #eslogan {
    grid-area: 1/4/2/10;

    /*Display de contenidos (párrafo eslogan)*/
    display: flex;
    justify-content: flex-end;
    align-items: center;

    /*Imagen de fondo*/
    background-image: url("../imgs/eslogan.jpg");
    background-size: cover;
    background-repeat: no-repeat;

    /*Borde*/
    border: 0.5rem solid var(--primary-color);
    border-radius: 0 2rem 2rem 0;
}

main .inicio #eslogan h1 {
    color: var(--terciary-color);
    text-align: center;
    padding: 2rem;
}


/*------------CARRUSEL------------*/
main .inicio #carrusel {
    grid-area: 2/1/3/10;
    height: 40vh;

    /*Display de los elementos*/
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    /*Estilo*/
    padding: 3rem 1rem;
    font-family: 'DM Sans', sans-serif;
    background-color: var(--primary-color);

    /*Transición*/
    transition: .4s ease-in;
}

input[type=radio] {
    display: none;
}

.card {
    /*Posición de la imagen*/
    position: absolute;
    width: 60%;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;

    /*Transición*/
    transition: transform .4s ease;

    /*Cursor*/
    cursor: pointer;
}

.container {
    /*Tamaño*/
    width: 100%;
    max-width: 40rem;
    max-height: 70rem;
    height: 100%;

    /*Transformación*/
    transform-style: preserve-3d;

    /*Display para las cardss*/
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.cards {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
}

.cards img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

/*Animaciones*/
#item-1:checked~.cards #it-2,
#item-2:checked~.cards #it-3,
#item-3:checked~.cards #it-4,
#item-4:checked~.cards #it-5,
#item-5:checked~.cards #it-1 {
    transform: translatex(-100%) scale(.8);
    opacity: .6;
    z-index: 0;
}

#item-1:checked~.cards #it-3,
#item-2:checked~.cards #it-4,
#item-3:checked~.cards #it-5,
#item-4:checked~.cards #it-1,
#item-5:checked~.cards #it-2 {
    transform: translatex(-50%) scale(.8);
    opacity: .2;
    z-index: -1;
}


#item-1:checked~.cards #it-4,
#item-2:checked~.cards #it-5,
#item-3:checked~.cards #it-1,
#item-4:checked~.cards #it-2,
#item-5:checked~.cards #it-3 {
    transform: translatex(50%) scale(.8);
    opacity: .2;
    z-index: -1;
}

#item-1:checked~.cards #it-5,
#item-2:checked~.cards #it-1,
#item-3:checked~.cards #it-2,
#item-4:checked~.cards #it-3,
#item-5:checked~.cards #it-4 {
    transform: translatex(100%) scale(.8);
    opacity: .6;
    z-index: 0;
}

#item-1:checked~.cards #it-1,
#item-2:checked~.cards #it-2,
#item-3:checked~.cards #it-3,
#item-4:checked~.cards #it-4,
#item-5:checked~.cards #it-5 {
    transform: translatex(0) scale(1);
    opacity: 1;
    z-index: 1;
}


/*------------SÍGUENOS------------*/
main .inicio #siguenos {
    grid-area: 3/1/4/10;

    /*Display*/
    display: flex;
    flex-direction: column;

    /*Fondo y letra*/
    background-color: var(--primary-color);

}

/*Título*/
main .inicio #siguenos h1 {
    margin-left: 2rem;
}

/*Contenido*/
main .inicio #siguenos .content {
    height: 40rem;
    display: flex;
    justify-content: space-evenly;
    font-size: 150%;
}

/*Divisor imágenes*/
main .inicio #siguenos .content .imgs-siguenos {
    /*Tamaños*/
    width: 50%;
    height: 90%;
    margin: 1rem;
    margin-bottom: 3rem;

    /*Display*/
    display: flex;
}

/*Imágenes*/
main .inicio #siguenos .content .imgs-siguenos img {
    width: 30%;
    height: 100%;
}

/*Divisor texto y redes*/
main .inicio #siguenos .content .informacion {
    width: 40%;
    margin: 2rem;

    /*Display del interior*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

/*Iconos redes*/
main .inicio #siguenos .content .informacion .redes-sociales {
    width: 100%;
    font-size: 200%;

    /*Display del interior*/
    display: flex;
    justify-content: space-evenly;
}

/*------------OFERTAS------------*/
main .inicio #recibe-ofertas {
    grid-area: 4/1/5/10;
    padding: 3rem;
    padding-top: 0rem;

    /*Fondo*/
    background-color: var(--primary-color);

    /*Display*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*Formulario*/
main .inicio #recibe-ofertas form {
    width: 40%;

    /*Display*/
    display: flex;
    justify-content: center;
    align-items: center;
}

/*Input correo*/
main .inicio #recibe-ofertas form #correo {
    /*Tamaños*/
    width: 70%;
    height: 4rem;
    font-size: 150%;

    /*Borde*/
    border-radius: 3rem;
    border: none;

    /*Márgenes*/
    margin-right: 1rem;
    padding: 1.2rem;
}

/*Botón*/
main .inicio #recibe-ofertas form #subscribe {
    /*Tamaños*/
    width: 30%;
    height: 4rem;
    font-size: 150%;

    /*Borde*/
    border: none;
    border-radius: 1rem;

    /*Colores*/
    color: white;
    background-image: linear-gradient(to right, var(--fucsia), var(--dark-blue));
}

main .inicio #recibe-ofertas form #subscribe:hover {
    background-image: linear-gradient(to left, var(--fucsia), var(--dark-blue));

    /*Borde*/
    border-radius: 1rem;
    border: 1px solid var(--grey);
}


/*------------MEDIA QUERIES------------*/

@media (max-width: 1200px) {

    /*Carrusel*/
    main .inicio #carrusel {
        flex-direction: column;
    }

    /*Ofertas*/
    main .inicio #recibe-ofertas form {
        width: 100%;
    }
}


@media (max-width: 740px) {

    /*Imágenes carrusel*/
    #carrusel .cards {
        width: 50%;
    }
}

@media (max-width: 640px) {

    /*Hero*/
    .hero_content {
        font-size: 90%;
    }

    .hero_content--title {
        font-size: 150%;
    }

    /*Síguenos*/
    main .inicio #siguenos .content {
        flex-direction: column;
        font-size: 100%;
        align-items: center;
    }

    /*Botón ofertas*/
    main .inicio #recibe-ofertas form #subscribe {
        font-size: 90%;
    }
}