* {
    margin: 0;
    padding: 0;
}

.encabezado {
    height: 85px;
    display: flex;
    justify-content: space-between;
    background: yellow;
}

.Intermedio {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 550px;
}

.Logo {
    height: 150px;
    width: 140px;
    margin-top: 10px;
    margin-left: 10px;
    z-index: 2;
    transition: 0.5s ease-in-out;
    animation: Logotipo 5s ease-in-out infinite;
}

.NombreLogo {
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-self: center;
    margin-top: 4px;
    margin-left: 75px;
    width: 400px;
}

@keyframes Logotipo {
    0% {
        background-image: url('../src/1.png');
        transform: rotateY(200deg);
        filter: drop-shadow(5px 5px 5px black);
    }

    50% {
        content: url('../src/2.png');
        transform: scale(1.0);
        filter: drop-shadow(5px 5px 5px black);
    }

    100% {
        background-image: url('../src/1.png');
        transform: rotateY(200deg);
        filter: drop-shadow(5px 5px 5px black);
    }
}

.Titulo {
    align-items: center;
    justify-content: center;
    display: flex;
    margin-top: 50px;
}

.menu {
    display: flex;
    justify-content: center;
    align-self: center;
    margin-right: 10px;
}

.menu a {
    margin-right: 10px;
    font-size: 18px;
    text-decoration: none;
    color: #f90101;
    transition: 0.5s ease-in-out;
}

.menu a:hover {
    padding: 10px;
    background: #f6b2b2;
    border-radius: 20px;
}

.Intermedio img {
    height: 100%;
    width: 100%;
}

.carousel-inner {
    height: 100% auto;
    display: flex;
}

.carousel-inner img {
    display: flex;

}


main {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 60px 50px;
    flex-wrap: wrap;
}

.card-body {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    margin: 0px 30px;
}

.tarjetas {
    box-shadow: 2px 3px 5px black;
    border-radius: 20px;
}

@media (max-width:550px) {
    .encabezado {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .Logo {
        display: flex;
        width: 150px;
        height: 150px;
        margin-right: 20px;
    }

    .NombreLogo {
        display: flex;
        justify-content: space-between;
        align-self: center;
        margin-top: 4px;
        margin-right: 85px;
        width: 400px;
    }

    .Intermedio img {
        height: 300px;
        width: 100%;
    }

    .menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }

    .menu a {
        margin: 10px 0px;
        font-size: 20px;
    }

    main {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin-top: 0px;
        flex-wrap: wrap;
    }

    .card-body {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-wrap: wrap;
        margin: 0px 30px;
    }

    .tarjetas {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
        box-shadow: 2px 3px 5px black;
        border-radius: 20px;
    }

}

.img1 {
    grid-area: img1;
}

.img2 {
    grid-area: img2;
}

.img3 {
    grid-area: img3;
}

.img4 {
    grid-area: img4;
}

.img5 {
    grid-area: img5;
}

.img6 {
    grid-area: img6;
}


.Galeria {
    width: 100%;
    height: 100%;
    margin: 5px auto;
    display: grid;
    grid-template-areas:
        "img1 img1 img1 img1 img1 img1 img2 img2 img2 img4 img4 img4 img4 img4 img4 img5 img5 img5"
        "img1 img1 img1 img1 img1 img1 img2 img2 img2 img4 img4 img4 img4 img4 img4 img5 img5 img5"
        "img1 img1 img1 img1 img1 img1 img3 img3 img3 img4 img4 img4 img4 img4 img4 img6 img6 img6"
        "img1 img1 img1 img1 img1 img1 img3 img3 img3 img4 img4 img4 img4 img4 img4 img6 img6 img6";
    grid-template-columns: repeat(18, 4fr);
    grid-template-rows: repeat(0, 20px);
    z-index: 1;
    gap: 10px;
    padding: 0 10%;

}

.Galeria img {
    width: 100%;
    height: 100%;
    display: flex;
    border-radius: 2px;
    transition: 1s ease-in-out;
}

.Galeria img:hover {
    transform: scale(1.5);
    box-shadow: 2px 2px 2px black;
}

@media (max-width:550px) {
    .Intermedio img {
        height: 300px;
        width: 100%;
    }

    .img1 {
        grid-area: img1;
    }

    .img2 {
        grid-area: img2;
    }

    .img3 {
        grid-area: img3;
    }

    .img4 {
        grid-area: img4;
    }

    .img5 {
        grid-area: img5;
    }

    .img6 {
        grid-area: img6;
    }

    .Galeria {
        width: 100%;
        height: 100%;
        justify-content: center;
        margin-top: -200px;
        margin-bottom: 210px;
        display: grid;
        grid-template-areas:
            "img1 img1 img1 img1 img1 img1"
            "img1 img1 img1 img1 img1 img1"
            "img1 img1 img1 img1 img1 img1"
            "img1 img1 img1 img1 img1 img1"
            "img4 img4 img4 img4 img4 img4"
            "img4 img4 img4 img4 img4 img4"
            "img4 img4 img4 img4 img4 img4"
            "img4 img4 img4 img4 img4 img4"
            "img2 img2 img2 img5 img5 img5"
            "img2 img2 img2 img5 img5 img5"
            "img3 img3 img3 img6 img6 img6"
            "img3 img3 img3 img6 img6 img6";
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(1, 20px);
        gap: 70px;
        padding: 0 10%;

    }

    .Galeria img {
        width: 100%;
        height: 100%;
        display: flex;
        border-radius: 2px;
        transition: 1s ease-in-out;
    }

    .Galeria img:hover {
        transform: scale(1.1);
        box-shadow: 2px 2px 2px black;
    }
}


.contacto {
    width: 1000px;
    padding: 40px;
    background: yellow;
    text-align: center;
    border-radius: 20px;
}

.contacto h1 {
    color: red;
    margin-bottom: 20px;
}

.contacto iframe {
    border-radius: 20px;
}

.mapa {
    width: 100%;
    height: 300px;
    display: flex;
    border-radius: 5%;
    margin-bottom: 20px;
}

form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 100%;
    margin: auto;
}

input,
textarea {
    padding: 10px;
    border: 1px solid orange;
    border-radius: 5px;
}

button {
    padding: 10px;
    background-color: orange;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background-color: red;
}

@media (max-width:550px) {
    .Intermedio img {
        height: 300px;
        width: 100%;
    }

    .contacto {
        width: 450px;
        padding: 30px;
        background: yellow;
        text-align: center;
        border-radius: 20px;
        margin-top: -200px;
    }

    .contacto h1 {
        color: red;
        margin-bottom: 20px;
    }

    .contacto iframe {
        border-radius: 10px;
        height: 300px;
        width: 300px;
    }

    form {
        display: flex;
        flex-direction: column;
        gap: 15px;
        max-width: 100%;
        margin: auto;
    }

    input,
    textarea {
        padding: 10px;
        border: 1px solid orange;
        border-radius: 5px;
    }

    button {
        padding: 10px;
        background-color: orange;
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 5px;
    }

    button:hover {
        background-color: red;
    }
}

.footer {
    position: relative;
    display: flex;
    width: 100%;
    background: yellow;
    min-height: 100px;
    padding: 20px 50px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.LogoFooter {
    filter: drop-shadow(4px 4px 4px black);
    width: 100px;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;

}

.LogoFooter:hover {
    transition: 5s;
    transform: rotateY(360deg);
}

.Redes {
    display: flex;

}

.Instagram {
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 10px 5px;
    flex-wrap: wrap;
    margin: 0 10px;
}

.Instagram:hover {
    transition: 0.5s;
    transform: translateY(-10px);
}

.textofooter {
    display: flex;
    text-align: center;
    margin-left: 10px;
}

.Cosas {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.Formas-de-Pago-y-Envio {
    text-align: center;
}

.Formas-de-Pago-y-Envio h2 {
    font-size: 20px;
    margin-bottom: 20px;
}

.Img-Pago-Envio {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.Img-Pago-Envio img {
    width: 30px;
    height: auto;
}