body{               
    margin:0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.titulo_seccion{            
    padding-top: 50px;
    text-align: center;
}
.parrafo_breve{
    width: 350px;
    margin:0 auto;
    text-decoration:underline;
    margin-top: 45px;
}
#imagen_cabezote{
    display: block;
    margin:20px auto;
}
.imagen_svg{
    width: 50px;
    height: 50px;
}
.descripcion_cabezote{
    margin-top:40px;
}    
#contenedor_iconos_cabezote{
    width: 350px;
    margin: 0 auto;
    text-align: center;
    margin-top: 30px;
}
.parrafo_seccion{
    width: 400px;
    margin: 0 auto;            
}  
#call_to_action_servicios{
    margin-top:-30px;
    text-align: center;
}
#formulario div{
    margin: 0 auto;            
}
#call_to_action_servicios button{
    background-color: greenyellow;
    width: 300px;
    height: 70px;
    color:indigo;  
    font-weight: bold;          
}
#lista_menu{
    text-align: center;
    padding-top: 11px;
}
#lista_menu li{
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}
#lista_menu a{
    text-decoration: none;
    color: midnightblue;
}
.boton_servicios{
    width: 200px;
    height: 50px;
    background-color: khaki;
    color:black;
    cursor: pointer;
    margin-top:30px;
}
.ocultar_flecha{
    display: none;
}
/* Media queries: https://codepen.io/xaca/pen/LYVryYx */
/*Celular*/
/* Portrait and Landscape */
@media only screen 
  and (min-width: 320px) 
  and (max-width: 480px)
  /*and (-webkit-min-device-pixel-ratio: 1)*/ {

    body{
        background: url(../img/wireframe_mobile_480.jpg);
        background-color:yellow;
        background-repeat: no-repeat;
    }    
    #menu{
        background-color: antiquewhite;
    }
    #cabezote{
        background-color:cornflowerblue;
        height: 777px; 
        margin-top: -20px;
    }
    #servicios{
        background-color:crimson;
        margin-top: -20px;
        padding-bottom: 20px;
    }
    #pata{
        background-color:hotpink;
        height: 386px; 
    }
    #controles_menu{
        background-color: burlywood;
        height: 60px;
        position: relative;
    }
    #controles_menu img{
        position: absolute;
        top: 10px;
        left: 10px;
    }
    #controles_menu button{
        width: 150px;
        height:60px;
        background-color: lemonchiffon;
        border: 1px solid whitesmoke;
        cursor: pointer;
        position: absolute;
        right: 0;
    }
    .ocultar{
        display: none;
    }
    #lista_menu li{
        list-style: none;  
        margin-left: -38px;
        height: 22px; 
        cursor: pointer; 
        display: block;    
    }
    #lista_menu li:nth-child(2){
        margin-top: -16px;
    }
    #lista_menu li:nth-child(2n){
        background: bisque;
    }
    #lista_menu{ 
        text-align: center;       
        height: 90px;
    }    
    #lista_menu li:first-child{
        display: none;
    }
    #imagen_cabezote{
        max-width: 90%;
    }
    #entradilla_cabezote{
        padding-left: 20px;
    }      
    .contenedor_servicio{
        text-align: center;
        width: 400px;
        margin:0 auto;
        margin-bottom: 70px;
    }
    .contenedor_servicio img{
        max-width: 50%;
    }
    .boton_servicios{
        width: 200px;
        height: 50px;
        background-color: khaki;
        color:black;
        cursor: pointer;
        margin-top:30px;
    }
    #formulario{
        background-color:mintcream;        
        margin-top: -20px;
        padding-bottom: 20px;
    }
    .item_pata{
        display: block;
        background-color: mediumslateblue;
        height: 65px;
        text-align: center;
        line-height: 68px;
    }
    #item1_pata{
        background-color: midnightblue;
    }
    #derechos_reservados_pata{
        display: none;
    }
}

/*Ipad*/
/* Portrait and Landscape */
@media only screen 
  and (min-width: 480px) 
  and (max-width: 1024px) 
  /*and (-webkit-min-device-pixel-ratio: 1)*/ {

    body{
        background: url(../img/wireframe_tablet_768.jpg);
        /*background-color:red;*/
        background-repeat: no-repeat;
    }
    /*Este estilo se usa para ir modificando cada estilo a la vez */
    /*section, footer{
        display: none;
    }*/
    #menu{
        background-color:lightcyan;
        margin-top:-16px; 
        height: 73px;       
    }
    #controles_menu{
        display: none;
    }     
    #cabezote{
        background-color:deepskyblue;
        height: 804px; 
        margin-top: -20px;
    }
    #imagen_cabezote{
        max-width: 60%;        
    }
    #entradilla_cabezote{
        width: 400px;
        margin: 20px auto;
    } 
    #servicios{
        background-color:crimson;
        margin-top: -20px;
        text-align: center;
        padding-bottom: 20px;
    }
    .parrafo_tablet{
        width: 186px;
        margin: 0 auto;
        text-align: left;
    }
    .contenedor_servicio{
        text-align: center;
        width: 235px;
        margin:0 auto;
        margin-bottom: 70px;
        display: inline-block;
    }
    .contenedor_servicio img{
        max-width: 88%;
    }
    #call_to_action_servicios{
        margin-top: 0px;
    }
    #formulario{
        background-color: lightcyan;         
        margin-top: -20px;
        padding-bottom: 20px;
    }   
    #pata{
        text-align: center;
        background-color: gainsboro;
        height: 107px;
    }
    .item_pata{
        height: 65px;
        text-align: center;
        line-height: 68px;
        text-decoration: none;
    }
    #derechos_reservados_pata{
        margin-bottom: 20px;
    }
}

/*Escritorio*/
@media only screen and (min-width: 1024px) {
    body {
        background: url(../img/wireframe_desktop_1280.jpg) top center;
        background-color:lavender;
        background-repeat: no-repeat;
    }
    #controles_menu{
        display: none;
    }
    #menu{
        background: honeydew;
        margin-top: -16px;
        height: 70px;
    }
    #lista_menu li{
        margin-right: 10px;
    }
    #cabezote{
        background-color: powderblue;
        margin-top: -20px;
    }
    #entradilla_cabezote{
        text-align: center;
        width: 800px;
        margin:10px auto;
    }    
    #servicios{
        background: lightgoldenrodyellow;
        margin-top: -20px;
    }
    .contenedor_servicio{
        display: flex;
        width: 70%;
        margin: 70px auto;
    }
    .contenedor_servicio div{
        position: relative;
        width:60%;
    }
    .contenedor_servicio div h2{
        position: absolute;
        top:50%;
        left:20px;
        width: 400px;
    }
    .contenedor_servicio div p{
        position: absolute;
        top:65%;
        left:20px;
    }
    .contenedor_servicio div button{
        position: absolute;
        top:85%;
        left:20px;
    }
    .parrafo_breve{
        margin-bottom: 20px;
    }
    #call_to_action_servicios{
        padding-bottom: 30px;
    }    
    #pata{
        text-align: center;
        background-color: gainsboro;
        height: 107px;
    }
    #formulario{
        background: whitesmoke;
        margin-top: -20px;
        padding-bottom: 20px;
    }
    .item_pata{
        height: 65px;
        text-align: center;
        line-height: 68px;
        text-decoration: none;
    }
    #derechos_reservados_pata{
        margin-bottom: 20px;
    }
}

@media only screen and (min-width: 1280px){
    #principal_cabezote{
        width: 70%;
        display: flex;
        margin:0 auto;
    }   
    #imagen_cabezote{
        width: 60%;
        max-width: 720px;
        min-width: 360px;
        margin-right: 30px;        
    }
    #formulario{
        background: whitesmoke;
        margin-top: -20px;
        padding-bottom: 20px;
    }
    #descripcion_cabezote{
        margin-top: 310px;
        padding: 20px;
    }
}