/* MEDIAQUERIES CLOCK EVENTS PARA PANTALLAS MÁS PEQUEÑAS */

/* punto ruptura pantallas de 920px o más pequeñas */
@media screen and (max-width:920px){

    /* reglas generales */
    html{
        font-size: 0.9em;
    }

    /* menu dentro de cabecera */

    .menu{
        display: flex; /* solución para que el div que tiene .menu dentro, se ajuste a la altura total de .menu */
        position: fixed;
        left: 0;
        top:0;
        width: 100%;
    }

     .menu > .flex{
        /* border:5px solid red; */
        flex-basis: 100%; /* obligo a esta caja a que se quede con 100% porque por defecto al ser hijo de un flex ocupa solo el ancho que necesita por el su contenido. */
     }
 

    .menu ul.flex{
        display: none;
    }

    .menu.visible ul.flex{
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100dvh;
        padding: 2em;
        display: block;
        background: #000;
        text-align: center;
    }

    .menu.visible ul.flex a{
        font-size: 1.4rem;
    }


    #btn-responsive{
        display: block;
    }
    
 
    /* cabecera principal */
    .hero{
        min-height: auto;
        padding-top: 90px;
    }

    .hero img {
        width: 450px;
        margin-top: 30px;
    }

    /* zona servicios */
    .iconosServicios li img {
        width: 60px;
    }

    .iconosServicios p {
        letter-spacing: 2px;
        font-size: 0.75rem;
    }

    .servicios-lista.flex{
        row-gap: 1.5em;
    }

    .servicios-lista.flex > .col.titulo{
        flex-basis: 100%;
    }

    .servicios-lista.flex > .col{
        flex-basis: 47%;
    }

    /* zona soluciones */

    .soluciones .flex > .col:last-child{
        display: none;
    }

    .soluciones .flex > .col {
        flex-basis: 75%;
    }

    /* zona nuestros valores */
    .valores-lista.flex > .col {
        flex-basis: 48%;
    }

    .valores img {
        width: 50px;
    }

    /* footer principal */
    .footer-principal {
        padding: 2em 0;
    }

    .footer-principal img {
        margin-bottom: 20px;
    }
    
}