* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --azul:rgb(0, 103, 168);
    --gris: rgb(164, 164, 164);
    --blanco: #ffffff;
    --negro: #000000;
  }

.ancho{
    max-width: 1200px;
    margin: auto;
   /* border: 1px red solid;*/
}

body{
    font-family: 'Zilla Slab', serif;
    font-size: 16px;
    line-height: 24px;


}

.barra{
    padding: 10px 30px;
    background-color: var(--azul);
}
header{
    background-color: var(--blanco);
    border-top: 15px;
    padding-bottom: 15px;
    
}
.caja_header{
    display: flex;
    flex-direction: row;
    justify-content:flex-start;
    align-items:center;
}

.caja_movil figure{
max-width: 150px;

}
.caja_movil figure img{
    max-width: 100%;

}


.contenedor_menu{

        width: 100%;
}
.caja_menu{
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.caja_menu li{
    text-decoration: none;
    padding: 5px;
}
.caja_menu li a{
    text-decoration: none;
    padding: 25px 18px;
    color: black;
    font-size: 14px;
}

.caja_menu  li a:hover{
    color: var(--blanco);
    background-color: var(--azul);
  }

  /*parte de formularo buscar*/

.cajabuscar{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 10px;
}
.aretex{
    max-width: 200px;
    padding: 8px 15px;
}
.button{
    padding: 8px 15px;
    background-color: var(--azul);
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    color: var(--blanco);

}

.espacio{
    margin: 15px;
}
.barra_pequeña{
    padding: 4px;
    background-color: var(--azul);
    border-radius: 5px;
    max-width: 50%;
    margin: auto;
}


/*empezar con caja iconos*/
.bolsa_iconos{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    min-width: 150px;
    min-height: 150px;
    border: 1px solid var(--azul);
    border-radius: 3px;
    text-decoration: none;
    flex-wrap: wrap;
    color: var(--azul);
}

.bolsa_iconos:hover{
    color: var(--blanco);
    background-color: var(--azul);
}

.bolsa_iconos a{
color: var(--azul);
}
/*
.caja_iconos{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center; 
    border: 1px solid red;
    flex-wrap: nowrap;
}

.paquete_iconos{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center; 
    flex-wrap: nowrap;
    margin-top: 15px;
}
*/


/*display grid*/
.caja_grid{
    margin: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-gap: 15px 65px;
}

footer{
    background-color: var(--azul);
}
.caja_footer{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;   
}
.terminos_condiciones{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;   
}

.terminos_condiciones a{
    text-decoration: none;
    color: var(--blanco);
    font-size: 15px;
}




  @media screen and (max-width:450px){
    .caja_menu li a{
        text-decoration: none;
        padding: 22px 12px;
        font-size: 14px;
        
    }

    .bolsa_iconos{
        min-width: 150px;
        min-height: 150px;
        margin-top: 15px;
    }

    .caja_grid{
        grid-gap: 15px 35px;
    }

    .paquete_iconos{
        flex-wrap: wrap;
        margin-top: 0px;
    }
  }