/*************Main*************/
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Detrás del contenido */
}

main {
    margin: 0;
    position: static;
}

/*Preentación*/

.Presentación {
    position: relative;
    width: 100%;
    height: 82dvh;
    background-image: url(../images/services_background.jpg);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.Presentación::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: linear-gradient(var(--black_dark), 40% , transparent);
}

h1 {
    font-size: 3rem;
    bottom: -1rem;
    left: 0;
}

/*Servicios*/
.Background_Pattern {
    /*background-image: url('../images/background.svg');*/ 
    background-size: cover;
    background-repeat: repeat;
    background-position: center;
    background-attachment: fixed;
}

.Grid_Container {
    height: fit-content;
    width: 80dvw;
    margin: 0 10dvw;
    display: grid;
    grid-template-rows: auto auto auto auto;
    grid-template-columns: auto;
    grid-template-areas:
    "Titulo"
    "Imagen"
    "Ideal"
    "Actividad"
    "Boton"
    ;
    align-items: center;
    justify-items: center;
    gap: 1rem;
}

.Grid_Container :nth-child(1) {
    grid-area: Titulo;
}
.Grid_Container :nth-child(2) {
    grid-area: Actividad;
    color: var(--principal_light);
    
    list-style-position: inside;
    list-style-type: disc;

    text-align: left;
    margin: 0;
    padding: 0;
}
.Grid_Container :nth-child(3) {
    grid-area: Ideal;
}
.Grid_Container :nth-child(4) {
    grid-area: Imagen;
    width: 100%;
    height: auto;
}
.Grid_Container :nth-child(5) {
    grid-area: Boton;
    justify-self: flex-start;
    margin: 0;
}

section:nth-last-child(1) {
    margin-bottom: 2rem;
}

/*Animaciones*/
.hidden {
    opacity: 0;
    transform: translate(0,-40%);
    transition: all var(--animation_time_mobile_menu);
}
.show {
    opacity: 1;
    transform: translate(0,0);
}

/*Otras pantallas*/
/*Laptop Antigua*/
@media screen and (min-width: 1024px) {

    .Grid_Container {
        grid-template-rows: auto auto auto auto;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
        "Titulo Titulo"
        "Imagen Ideal"
        "Imagen Actividad"
        "Imagen Boton"
        ;
        align-items: center;
        justify-items: left;
    }
    .Grid_Container :nth-child(1) {
        justify-self: center;
    }
    
}