:root{
    --red: ;
    --tipo-titulos : 'Playfair Display SC', serif;
    --tipo-principal :'Inter', sans-serif;
}

*{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    vertical-align: baseline;
    list-style:none;
    background-color: rgb(228, 226, 226);
    color: rgb(0, 0, 0);
}

/* 
.circulos{
   position: fixed; 
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: lightblue;
   z-index: 1;
}
.circulos .circulo{

} */

.header{
    width: 100%;
    min-height: 5em;
  /*  background-color: lightblue;*/

    padding: 1em 2em;

    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;

}

.header .h1{
    font-size: 3rem;
}

.header .h1 .a{}

.header .nav{}

.header  ul{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}

.header .li{
    margin: 0 1em;
}

.header .li .a{
    text-decoration: none;
}

.main{
 /*   background-color: lightgrey;*/
    margin:0 0 1em ;
    text-align: center;
}

.seccion{
    width: 100%;
    min-height: 80vh;
   /* background-color: lightblue;*/
    margin: 1em 0;
    padding: 2em;

    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
}

.seccion .info {
    font-size: 1.2em;
}



.seccion .ul{
   /* background-color: red;*/
    display: flex;
    margin: 4em;
    flex-flow: row wrap;
    justify-content:center;
    align-items: center;
}
.seccion .ul .li{
    margin: 2em 1em;
  /*  background-color: aliceblue;*/
}

.seccion .ul .a{
    border: 2px solid rgba(0, 0, 0, 2);
    padding: 1.5em 2em 1.5em;
   text-transform: uppercase;
   font-weight: 600;
}
.seccion .ul .a:hover{
    background-color: rgb(0, 0, 0);
    transition: .7s;
    color: white;
 
}

.seccion .h2{
    font-family: var(--tipo-titulos);
    font-size: 5em;
    font-weight: 800;
}
.seccion .h3{
    font-family: var(--tipo-titulos);
    font-size: 4em;
    /* font-style: italic;*/
}

.seccion .p{}
.seccion .grid{
    width: 90%;
  /*  background-color: firebrick;*/
    margin: 1em 0;

    display: grid;
    grid-template-columns: repeat( auto-fit , minmax(10rem, 1fr));
    gap:1em;
}
.seccion .article{
    width: 100%;
   /* background-color: aqua;*/
    min-height: 20vh;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    position: relative;

}
.seccion .a{}
.seccion .figure{
    width: 100%;
  /*  background-color: azure;*/
}
.seccion .img{
    width: 100%;

 /*   background-color: lime;*/

}
.seccion .h4{
    width: 100%;
    height: 100%;
    background-color: black;
    position: absolute;
    bottom: 0;
    left: 0;
    backdrop-filter: blur(1rem);
    
    color: white;
    font-size: 1.5em;
    font-style: var(--tipo-principal);

    display: flex;
    flex-flow: row wrap ;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all 0.5s ease;
}

.seccion .h4:hover{
    opacity: 0.8;
}

.works .h2 {
    margin: 0 0 1em
}

.about{}
.about .h2{
    margin: 0 0 1em;
}
.about .p{
    max-width: 50rem;
 /*   background-color: bisque;*/
 font-size: 1.5em;
    margin: 0 0 2rem;
    text-align: left;
}
.about .rrss{
    width: 100%;
 /*   background-color: limegreen;*/

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}
.about .li{
 /* background-color: orange;  */
  margin: 0 1em;
}
.about .a{}
.about .svg{
    width: 3em;
    height: 3em;
    margin-top: 1.7em;
   /* background-color: red;*/
}

.footer {
   /* background-color: salmon;*/
    padding: 2em 0;
    text-align: center;
}