/* ---------------------- Estilo de index.php (Front End) ---------------------
    - El estilo del header está en headerIndex.css.

-- */
  

/* Voy a darle a index otra tipografia diferente */
*{
    font-family: Vegur, 'PT Sans', Verdana, sans-serif;
}



/* ----------------- La info que sale en la sección 1: foto blanconegro running ------------------------- */
#div_s1_info{
    width: 350px;
    margin: 120px auto auto 50px;
}

#div_s1_info p:first-child{
    color: yellow;
}

#div_s1_info h1{
    color: white;
}

#div_s1_info p:last-child{
    color: white;
    font-weight: 550;
}


/* -------------------------- La sección 2: imagen libreta mirando parque ---------------------- */

#div_fondo_libreta{
    background-image: url(../img/fotos/libreta1250.jpg);
    width: 1250px;
    height: 820px;

    padding: 30px 20px 30px 250px;
}

#div_grid_servicios{            /*Lo aumentaremos un poco con el scroll*/
    transform: scale(0.8);
    width: 600px;
    height: 680px;           

    margin: 0px 100px auto 300px;

    /* border: 1px solid black; */

    display: grid;
    grid-template-areas: 
    "card_servicio card_servicio"
    "card_servicio card_servicio";
    grid-template-columns: repeat(2,1fr);

    text-align: center;

    gap: 30px;

}


/* ---------------------------- Cada card de servicios ---------------------------------
    Contiene: título, info, foto, botón -- */
.card_servicio{
    border: 1px solid grey;
    border-radius: 10px;

    background-image: url(../img/transp.png);
    filter: grayscale(10%);
}

.card_servicio:hover{
    transform: rotate(0.5deg) scale(1.05);
    border: 1px solid blue;
    transition: 1s;
    filter: none;

}

.card_servicio::after{
    transform: rotate(-0.5deg) scale(1.0);
    border: 1px solid blue;
    transition: 1s;

}


.titulo_servicio{
    height: 60px;


    background-color: rgb(207, 233, 255);
    z-index: 1000;
    border-radius: 10px 10px 0px 0px;

    align-content: center;

}

.titulo_servicio h2{
    margin: 0px auto;
    /* font: italic; */

}

.info_servicio{
    background-color: rgba(240, 248, 255, 0.79);
    min-height: 100px;
}
.info_servicio p{
    padding: 5px auto 5px;
    margin: 0px;
}

.info_servicio ul{
    padding-left: 0px;
    list-style-type: none;
}

/* .div_img_y_boton{
    height: 200px;
    align-content: end;
} */

.img250{
    width: 75%;
    border-radius: 10px;
    margin: 10px auto 0px;
    filter: grayscale(30%);

    
}

.card_servicio:hover .img250{
    display: block;
    margin: 5px auto 0px;
    transition: 3s;
    width: 100%;
    border-radius: 3px;
    filter: none;


}

#img_y_boton1{
    background-image: url(../img/fotos/hang.jpg);
    background-size: cover;
}


.div_boton_chulo{
    height: 32px;
    width: 120px;
    padding: 3px 36px;
    margin: 5px auto;

    color: #1099bf;
    border: 2px solid rgb(63, 2, 216);
    border-radius: 5px 0px 5px 0px;
    background-color: aliceblue;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 aliceblue;

    align-items: center;

    -webkit-transition: ease-out 0.4s;
    -moz-transition: ease-out 0.4s;
    transition: ease-out 0.4s;
    
}

.div_boton_chulo a{
    top: 0px;
    margin: 0px auto;
    display: inline-block;
    /* font-size: 14px;
    letter-spacing: 1px; */
    text-decoration: none;

} 


.div_boton_chulo:hover {
    box-shadow: inset 400px 0 0 0 #91d1ff;
    align-content: center;
   
  }

/* ---------------------- SECCIONES SERVICIOS: CALISTENIA, PILATES ETC ------------------ */

#letrero_seccion{
        height: 60px;
        margin: 0px;
     
        background-color: rgb(207, 247, 255);
        z-index: 1000;
    
        align-content: center;
}

#letrero_seccion h1{
    margin: 0px;
    
}



/* Será con un carousel */
#div_fondo_seccion3{
    background: aliceblue;
    width: 100%;
    height: 1150px;
    margin: 0px auto;

    padding: 10px 20px 10px 20px;
    background: linear-gradient(rgb(207, 247, 255), rgba(119, 151, 255, 0.5));
    border-radius: 0px 0px;

    overflow: hidden;

    
}

/* --------------------------------- FORMULARIO ----------------------------- */
#h1_form{
    margin-top: 100px;
    margin-bottom: 50px;
}

#div_form{
    padding: 5px;
    width: 80%;
    margin: 5px auto 50px;
    
    border: 1px solid blue;
    border-radius: 10px;
}

#div_form input[type="text"], #div_form label{
    margin: 5px 5px;
}

#div_submit{
    width: 200px;
    margin: 5px auto;
    text-align: center;
}

#div_form input[type="submit"]{
    /* margin: 5px auto; */
    background: linear-gradient(rgb(207, 247, 255), rgba(119, 151, 255, 0.5));
}


/* ---------------------------- MÁS ADELANTE ------------------------- */
#div_fondo_pilates{
    background-image: url(../img/fotos/hang.jpg);
    width: 1250px;
    height: 820px;

    padding: 60px 20px 50px 250px;
}