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

:root {
    --bg1: #f1f1f1;
    --bg2: #eeeae5;
    --bg3: #dadada;
    --btn-color: #1fbb1f;
    --btn-color-hover: #e48e0e;
    --btn-color-text: blue;

    --img-grid: url(../assets/Logo-Serpromec.jpg);
    --img-grid-bg: url(../assets/bg0-1920x1200.jpg);
    --url-image: url('../assets/Servicios.jpg');

    --box-shadow2: 7px -5px 15px -1px #000000;
    --text-shadow: 1px 1px 2px black;

    --bg-back: #f0eee9;
    --bg-front: #2853aa;
    --bg-grid: #ffefce;

}


* {
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 




@keyframes pulse-animation {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(2, 248, 14, 0.959);
    }
    
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px rgba(52, 152, 219, 0); /* Efecto onda */
    }
    
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
    }
}
@keyframes show-img-grid {
    to {
        clip-path: polygon(25% 25%, 100% 25%, 100% 75%, 25% 75%, 0% 50%);
    }
}




body {
    font-family: "Merriweather", serif;
}




/* SECTION HEADER */

.container-back__header{
    background: linear-gradient(90deg,#f0eee9 0%, #2853aa 100%);
    width: 100%;
    height: 100vh;
    display: flex;
    
}

.container-front__header{
    background: linear-gradient(90deg,#2853aa 0%, #f0eee9 100%);
    width: 100%;
    height: 80vh;
}

.grid__header{
    width: 90%;
    height: 90vh;
    max-width: 1200px;
    margin: 5vh auto;
    border-radius: 23px;
    box-shadow: 0 0 23px 8px #0000007a;

    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: repeat(8,1fr);

    grid-column: 1/-1;
    grid-row: 1/-1;
    background-image: var(--img-grid-bg);
    background-size: cover;
    background-position: center;

    overflow: hidden;
}

.grid__header::before{
    content: "";
    grid-column: 5/-1;
    grid-row: 2/-3;
    background-image: var(--img-grid);
    background-size: cover;
    background-position: center;

    clip-path: polygon(100% 0, 100% 0%, 100% 100%, 100% 100%, 100% 50%);
    animation: show-img-grid 2s forwards;
}

.grid__texts{
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items:center;
    gap: 30px;
    grid-column: 1/-9;
    grid-row: 2/-2;
}
.grid__title{
    font-family: "Spicy Rice", serif;
    font-size: 3.5rem;
    text-align: center;
    color: var(--btn-color-hover);
    -webkit-text-stroke: 1px #000000;
    text-shadow: 2px 3px 5px #ffffff;
}
.grid__cta{
    background: var(--btn-color);
    padding: 20px 60px;
    border-radius: 25px;

    text-decoration: none;
    color: var(--btn-color-text); 
}
.grid__cta:hover{
    transition: .2s ease all;
    background: var(--btn-color-hover);
    color: white;
    box-shadow: 2px 1px 23px 3px #ff0000fb;
}
.grid__paragraph{
    font-size: 1rem;
}




/* SECTION ABOUT */

.container-back__about{
    background: linear-gradient(90deg,#f0eee9 0%, #2853aa 100%);
    width: 100%;
    height: 100vh;
    display: flex; 
}

.grid__about{
    width: 90%;
    height: 90vh;
    max-width: 1200px;
    margin: 5vh auto;

    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: repeat(12,1fr);

    overflow: hidden;
}

.title__about{
    text-align: center;
    grid-column: 1/-1;
    grid-row: 1/-12;
    align-self: center;
    font-size: 2.5rem;
    color: #e48e0e;
    -webkit-text-stroke: 1px #000000;
    text-shadow: 2px 3px 5px #221a1a;
}

.container__about{
    grid-column: 1/-1;
    grid-row: 2/-1;

    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: repeat(11,1fr);
}
.about__texts{
    grid-column: 1/-7;
    grid-row: 1/-4;

    padding: 30px 20px;
    text-align: justify;
    font-size: 1rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
span{
    color: #e48e0e;
    font-size: 1.3rem;
    font-weight: bold;
}
.about__picture{
    grid-column: 8/-1;
    grid-row: 1/-4;
    margin: 20px;
    
}
.about__img{
    width: 100%;
    height: 100%;
    border-radius: 23px;
    box-shadow: 0 0 13px 6px #0000007a;
    
    
}
.container__cta{
    grid-column: 1/-1;
    grid-row: 10/-1;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.about__cta{
    width: 300px;
    height: 50px;
    background: var(--btn-color);
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--btn-color-text); 
}
.about__cta:hover{
    transition: .2s ease all;
    background: var(--btn-color-hover);
    color: white;
    box-shadow: 2px 1px 23px 3px #ff0000fb;
}




/* SECTION HORARIO */

.container-back__horario{
    background: linear-gradient(150deg,rgba(17, 81, 242, 0.712) 0%, rgba(35, 176, 56, 0.753) 50%, rgba(7, 7, 217, 0.74) 98%);
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.grid__horario{
    width: 60%;
    height: 60vh;
    margin-block: 30px;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    line-height: 2;
}
.title__horario{
    font-size: 2.5rem;
    color: #e48e0e;
    -webkit-text-stroke: 1px #000000;
    text-shadow: 2px 3px 5px #221a1a;
}
.horario__paragraph{
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 2px 2px 3px black;
}
.horario2{
    margin-top: 80px;
    background: #661b31;
    color: #ffffff;
    text-shadow: 2px 2px 3px black;
    font-size: 1.5rem;
    padding-inline: 20px;
    border-radius: 23px 0 23px 0;
    font-weight: 900;
    text-align: center;
}

.horario__cta{
    margin-top: 30px;
    width: 300px;
    height: 50px;
    background: var(--btn-color);
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--btn-color-text); 
}
.horario__cta:hover{
    transition: .2s ease all;
    background: var(--btn-color-hover);
    color: white;
    box-shadow: 2px 1px 23px 3px #ff0000fb;
}





/* SECTION CARDS */

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 0;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.card {
    width: 330px;
    box-shadow: var(--box-shadow2);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    background: var(--bg2);
}

.card:nth-of-type(2){
    --url-image: url('../assets/Productos.jpg');
}

.card:nth-of-type(3){
    --url-image: url('../assets/Mecanica.jpg');
}


.card::before {
    content: "";
    display: block;
    width: 100%;
    height: 200px;
    background-image: var(--url-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px 10px 0 0;
}

.card__container {
    padding: 30px 20px;
    background: var(--bg-cards);
    border-radius: 0 0 10px 10px;
    
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card__name {
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 10px;
    color: var(--btn-color-hover);
    text-shadow: var(--text-shadow);
}

.card__text{
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: flex-start;
    text-align: center;
}

.card__copy {
    font-weight: 200;
    margin-bottom: 30px;
}

.card__cta {
    background: var(--btn-color);
    color: var(--btn-color-text);
    text-decoration: none;
    text-align: center;
    display: block;
    padding: 15px 0;
    width: 200px;
    margin: 0 auto;
    border-radius: 25px;
}

.card__cta:hover {
    transition: .2s ease all;
    background: var(--btn-color-hover);
    color: white;
    box-shadow: 2px 1px 23px 3px #ff0000fb;
}





/* SECTION COPY */

.copy {
    background: linear-gradient(150deg,rgba(17, 81, 242, 0.712) 0%, rgba(35, 176, 56, 0.753) 50%, rgba(7, 7, 217, 0.74) 98%);
    text-align: center;
    font-size: 1.6rem;
}

.title--margin {
    color: #ffffff;
    margin: 0;
    text-shadow: 2px 2px 3px black;
}



/* SECTION GALLERY */

.gallery {
    width: 90%;
    max-width: 1200px;
    overflow: hidden;
    margin: 0 auto;
    padding: 60px 10px;
}

.title__gallery{
    font-size: 2.5rem;
    color: #e48e0e;
    -webkit-text-stroke: 1px #000000;
    text-shadow: 2px 3px 5px #221a1a;
    margin-bottom: 50px;
    text-align: center;
}

.gallery__container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.gallery__picture {
    width: 350px;
    height: 350px ;
    flex: 350px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 2px 3px 9px 1px #000000
}

.gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid black;
    border-radius: 10px;
    box-shadow: 1px 1px 3px 1px #888888;
}

.picture__container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0082fc98;
    padding: 60px 20px;
    color: #fff;
    border-radius: 10px;
    
    transform: scale(0);
    transform-origin: center;
    transition: transform .5s;
}

.gallery__picture:hover .picture__container {
    transform: scale(1);
}

.picture__text{
    margin-top: 60px;
}
.picture__title {
    font-size: 1.5rem;
    text-align: center;
    border-bottom: 2px solid greenyellow;
    padding-bottom: 8px;
    margin-bottom: 1em;
}

.picture__paragraph {
    line-height: 1.5;
}







/* SECTION LANGUAGUES */

.languages {
    background: var(--bg-back);
}

.languages__container {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.languages__picture {
    width: 10%;
    height: 120px;
}

.title__languages{
    font-size: 2.5rem;
    color: #e48e0e;
    -webkit-text-stroke: 1px #000000;
    text-shadow: 2px 3px 5px #221a1a;
    margin-bottom: 50px;
    text-align: center;
}













/* SECTION FOOTERS */


.bg__footer{
    background: var(--bg-front);
    width: 100%;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: row-reverse;
    padding-top: 30px;
    gap: 100px;
}


.container__ubicacion{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.ubicacion__title{
    color: var(--bg-grid);
    font-size: 2rem;
}
.ubicacion__title::after{
    content: "";
    display: block;
    border-bottom: 6px solid slateblue;
}
.ubicacion__info{
    color: var(--bg-grid);
}
.ubicacion__mapa{
    width: 600px;
    max-width: 600px;
    height: 200px;
    padding: 5px;
    border-radius: 20px;
    box-shadow: 3px 2px 13px 3px #000000da;
    background: var(--bg-back);
    margin-top: 10px;
}
.mapa{
    width: 100%;
    height: 100%;
    border-radius: 20px;
}


.container__contacto{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.contacto__title{
    color: var(--bg-grid);
    font-size: 2rem;
}
.contacto__title::after{
    content: "";
    display: block;
    border-bottom: 6px solid slateblue;
}
.container__instagram{
    display: flex;
    align-items: center;
    gap: 15px;
}
.contacto__instagram{
    text-decoration: none;
    color: var(--bg-grid);
}
.icon__instagram{
    width: 2rem;
    height: 2rem;
    border-radius: 25%;
}
.icon__instagram:hover{
    animation: pulse-animation 2s infinite;
}
.container__tiktok{
    display: flex;
    align-items: center;
    gap: 15px;
}
.contacto__tiktok{
    text-decoration: none;
    color: var(--bg-grid);
}
.icon__tiktok{
    width: 2rem;
    height: 2rem;
    border-radius: 25%;
}
.icon__tiktok:hover{
    animation: pulse-animation 2s infinite;
}
.container__whatsapp{
    display: flex;
    align-items: center;
    gap: 15px;
}
.contacto__whatsapp{
    text-decoration: none;
    color: var(--bg-grid);
}
.icon__whatsapp{
    width: 2rem;
    height: 2rem;
    border-radius: 25%;
}
.icon__whatsapp:hover{
    animation: pulse-animation 2s infinite;
}
.container__correo{
    display: flex;
    align-items: center;
    gap: 15px;
}
.contacto__correo{
    text-decoration: none;
    color: var(--bg-grid);
}
.icon__correo{
    width: 2rem;
    height: 2rem;
    border-radius: 25%;
}
.icon__correo:hover{
    animation: pulse-animation 2s infinite;
}
.text__whatsapp:hover,.text__correo:hover,.text__tiktok:hover,.text__instagram:hover{
    color: #00ff00;
}






/* SECTION FOOTER-TWO*/

.bg__footer-two{
    width: 100%;
    height: auto;
    background: linear-gradient(180deg,rgba(40, 83, 170, 1) 0%, rgba(240, 238, 233, 1) 90%);
}
.container__footer-two{
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.copy__footer-two{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    gap: 0;
    margin: 10px 10px;
}
.picture__logo{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    outline: 1px solid #0000008e;
    overflow: hidden;
}
.img__logo{
    width: 100%;
    height: 100%;
   
}
.copy__text{
    color: var(--bg-grid);
    font-size: 1rem;
    text-align: center;
    padding: 5px 10px;
}
.link__web{
    font-size: 0.8rem;
    color: #200208;
    margin-bottom: 10px;
    width: 45%;
    text-align: center;
}
.link__trr{
    text-decoration: none;
    color: #200208;
    font-size: 0.8rem;
}
.link__trr:hover{
    color: #6200ffce;
}










@media screen and ((min-width:280px) and (max-width:480px)) and (orientation: portrait) {
    .grid__header{
        width: 100%;
        border-radius: 0px;

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

        overflow: hidden;
    }
    .grid__header::before{
        content: "";
        grid-column: 1/-1;
        grid-row: 5/-1;

        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
        animation: show-img-grid-480P 2s forwards;
    }
    .grid__texts{
        grid-column: 1/-1;
        grid-row: 1/-5;
        justify-content: space-around;
    }
    .grid__title{
        font-size: 2.5rem;
    }
    .grid__cta{
        padding: 10px 30px;
    }
    .grid__paragraph{
        font-size: 0.8rem;
    }

    .title__about{
        font-size: 1.5rem;
    }
    .about__texts{
        grid-column: 1/-1;
        grid-row: 1/-4;
        font-size: 0.6rem;
    }
    span{
        font-size: 0.9rem;
    }
    .about__picture{
        display: none;
    }
    .about__cta{
        width: 200px;
    }



    .bg__footer{
        height: auto;
        flex-direction: column-reverse;
        align-items: center;
        gap: 50px;
        padding-bottom: 20px;
    }
    .container__contacto{
        padding: 0 10px;
    }
    .container__correo,.container__instagram,.container__whatsapp{
        gap: 10px;
    }
    .text__correo{
        font-size: 0.8rem;
    }


    .container__ubicacion{
        padding: 0 10px;
    }
    .ubicacion__info{
        text-align: center;
    }
    .ubicacion__mapa{
        width: 100%;
    }


    .grid__horario{
        width: 100%;
        height:auto;
        text-align: center;
        padding-inline: 10px;
    }
    .horario__paragraph{
        font-size: 1.2rem;
        font-weight: 600;
    }
    .horario2{
        padding-inline: 10px;
    }
    .horario__cta{
        width: 200px;
    }


    .languages__picture {
        width: 15%;
        height: 60px;
    }
    .title__languages{
        font-size: 1.6rem;
    }




    @keyframes show-img-grid-480P {
        to {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        }
    }
}

@media screen and ((min-width:481px) and (max-width:768px)) and (orientation: portrait) {
    .grid__header{
        width: 100%;
        border-radius: 0px;

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

        overflow: hidden;
    }
    .grid__header::before{
        content: "";
        grid-column: 1/-1;
        grid-row: 5/-1;

        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
        animation: show-img-grid-480P 2s forwards;
    }
    .grid__texts{
        grid-column: 2/-2;
        grid-row: 1/-5;
    }
    .grid__title{
        font-size: 3rem;
    }
    .grid__cta{
        padding: 10px 60px;
    }
    .grid__paragraph{
        font-size: 1rem;
    }

    .title__about{
        font-size: 2rem;
    }
    .about__texts{
        grid-column: 1/-1;
        grid-row: 1/-3;
        font-size: 1rem;
    }
    span{
        font-size: 1.1rem;
    }
    .about__picture{
        display: none;
    }


    .bg__footer{
        height: auto;
        flex-direction: column-reverse;
        align-items: center;
        gap: 50px;
        padding-bottom: 20px;
    }
    .container__contacto{
        padding: 0 10px;
    }
    .container__correo,.container__instagram,.container__whatsapp{
        gap: 10px;
    }
    .text__correo{
        font-size: 1rem;
    }


    .container__ubicacion{
        padding: 0 10px;
    }
    .ubicacion__info{
        text-align: center;
    }
    .ubicacion__mapa{
        width: 100%;
    }


    .grid__horario{
        width: 100%;
        height:auto;
        text-align: center;
        padding-inline: 10px;
    }
    .horario__paragraph{
        font-size: 1.2rem;
        font-weight: 600;
    }
    .horario2{
        padding-inline: 10px;
    }
    .horario__cta{
        width: 200px;
    }

    .languages__picture {
        width: 15%;
        height: 80px;
    }
    .title__languages{
        font-size: 2rem;
    }



    @keyframes show-img-grid-480P {
        to {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        }
    }
}

@media screen and ((min-width:769px) and (max-width:1199px)) and (orientation: portrait) {
    .grid__header{
        border-radius: 25px;

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

        overflow: hidden;
    }
    .grid__header::before{
        content: "";
        grid-column: 1/-1;
        grid-row: 5/-1;

        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
        animation: show-img-grid-480P 2s forwards;
    }
    .grid__texts{
        grid-column: 2/-2;
        grid-row: 1/-5;
    }

    .title__about{
        /* text-align: center;
        grid-column: 1/-1;
        grid-row: 1/-12;
        align-self: center; */
        font-size: 2rem;
        /* color: #e48e0e;
        -webkit-text-stroke: 1px #000000;
        text-shadow: 2px 3px 5px #221a1a; */
    }
    .about__texts{
        grid-column: 1/-1;
        grid-row: 1/-7;
        /* background: purple; */

        /* padding: 30px 20px;
        text-align: justify; */
        font-size: 0.9rem;
        /* line-height: 1.5;
        display: flex;
        flex-direction: column;
        gap: 20px; */
    }
    span{
        /* color: #e48e0e; */
        font-size: 1.1rem;
        /* font-weight: bold; */
    }
    .about__picture{
        /* display: none; */
        grid-column: 4/-4;
        grid-row: 5/-2;
        margin: 20px;
        
    }
    .container__cta{
        grid-column: 1/-1;
        grid-row: 11/-1;
        /* background: rgb(20, 90, 220); */
        /* display: flex;
        align-items: center;
        justify-content: center; */
        
    }
    


    .bg__footer{
        height: auto;
        flex-direction: row-reverse;
        align-items: start;
        gap: 50px;
        padding-bottom: 20px;
    }
    .container__contacto{
        padding: 0 10px;
    }
    .container__correo,.container__instagram,.container__whatsapp{
        gap: 10px;
    }
    .text__correo{
        font-size: 1rem;
    }


    .container__ubicacion{
        padding: 0 10px;
    }
    .ubicacion__info{
        text-align: center;
    }
    .ubicacion__mapa{
        width: 100%;
    }



    @keyframes show-img-grid-480P {
        to {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        }
    }
}





@media screen and ((min-height:250px) and (max-height:480px)) and (orientation: landscape) {
    .grid__header{
        width: 100%;
        border-radius: 0px;

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

        overflow: hidden;
    }
    .grid__header::before{
        content: "";
        grid-column: 1/-1;
        grid-row: 5/-1;

        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
        animation: show-img-grid-480L 2s forwards;
    }
    .grid__texts{
        grid-column: 1/-1;
        grid-row: 1/-5;
        justify-content: center;
        flex-direction: column;
    }
    .grid__title{
        font-size: 1.8rem;
    }
    .grid__cta{
        padding: 10px 30px;
    }
    .grid__paragraph{
        font-size: 0.7rem;
    }


    .container-back__about{
        height: auto;
    }
    .grid__about{
        width: 90%;
        height: 90%;
        overflow: hidden;
    }
    .title__about{
        font-size: 1.5rem;
    }
    .about__texts{
        grid-column: 1/-1;
        grid-row: 1/-4;
        font-size: 0.6rem;
    }
    span{
        font-size: 0.9rem;
    }
    .about__picture{
        display: none;  
    }
    .container__cta{
        grid-column: 1/-1;
        grid-row: 9/-2;  
    }
    .about__cta{
        width: 200px;
    }



    .bg__footer{
        height: auto;
        align-items: center;
        flex-direction: column-reverse;
        gap: 40px;
    }  
    .container__ubicacion{
        padding: 0 10px;
        padding-bottom: 20px;
    }
    .ubicacion__info{
        text-align: center;
    }
    .ubicacion__mapa{
        width: 100%;
    }


    .grid__horario{
        width: 100%;
        height:auto;
        text-align: center;
        padding-inline: 10px;
    }
    .horario__paragraph{
        font-size: 1.2rem;
        font-weight: 600;
    }
    .horario2{
        padding-inline: 10px;
    }
    .horario__cta{
        width: 200px;
    }



    @keyframes show-img-grid-480L {
        to {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        }
    }
}

@media screen and ((min-height:481px) and (max-height:767px)) and (orientation: landscape) {
    .grid__header{
        width: 100%;
        border-radius: 0px;

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

        overflow: hidden;
    }
    .grid__header::before{
        content: "";
        grid-column: 1/-1;
        grid-row: 5/-1;

        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
        animation: show-img-grid-480L 2s forwards;
    }
    .grid__texts{
        grid-column: 1/-1;
        grid-row: 1/-5;
        justify-content: center;
        flex-direction: column;
    }
    .grid__title{
        font-size: 2.5rem;
    }
    .grid__cta{
        padding: 10px 50px;
    }
    .grid__paragraph{
        font-size: 0.9rem;
    }


    .container-back__about{
        height: auto;
    }
    .grid__about{
        width: 90%;
        height: 90%;
        overflow: hidden;
    }
    .title__about{
        font-size: 2.5rem;
    }
    .about__texts{
        grid-column: 1/-1;
        grid-row: 1/-4;
        font-size: 1rem;
    }
    span{
        font-size: 1.1rem;
    }
    .about__picture{
        display: none;  
    }
    .container__cta{
        grid-column: 1/-1;
        grid-row: 10/-2;  
    }
    .about__cta{
        width: 300px;
    }


    .grid__horario{
        width: 100%;
        height:auto;
        text-align: center;
        padding-inline: 10px;
    }
    .horario__paragraph{
        font-size: 1.2rem;
        font-weight: 600;
    }
    .horario2{
        padding-inline: 10px;
    }
    .horario__cta{
        width: 200px;
    }


    @keyframes show-img-grid-480L {
        to {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        }
    }
}



@media screen and ((min-height:481px) and (max-height:600px) and (orientation: landscape)) {
    
    .bg__footer{
        height: auto;
        align-items: center;
        flex-direction: column-reverse;
        gap: 40px;
    }  
    .container__ubicacion{
        padding: 0 10px;
        padding-bottom: 20px;
    }
    .ubicacion__info{
        text-align: center;
    }
    .ubicacion__mapa{
        width: 100%;
    }
}
@media screen and ((min-height:601px) and (max-height:960px) and (orientation: landscape)) {

    .bg__footer{
        height: auto;
        align-items: start;
        justify-content: space-evenly;
        flex-direction: row-reverse;
        gap: 5px;
    }

    .container__ubicacion{
        padding: 0 10px;
        padding-bottom: 20px;
    }
    .ubicacion__info{
        text-align: center;
    }
    .ubicacion__mapa{
        width: 100%;
    }

    
}
@media screen and ((min-height:961px)and (orientation: landscape)) {

    .bg__footer{
        height: auto;
        align-items: start;
        justify-content: space-evenly;
        flex-direction: row-reverse;
        gap: 40px;
    }
    .container__ubicacion{
        padding: 0 10px;
        padding-bottom: 20px;
    }
    .ubicacion__mapa{
        width: 100%;
    }
}