/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


:root{

    --background:#f7f7f5;
    --text:#18213b;
    --gray:#a4a4a4;

}


body{

    background:var(--background);
    color:var(--text);
    font-family:"Inter", sans-serif;

}



/* CONTENEDOR */

.container{

    width:100%;
    height:100vh;
    padding:7vh 8vw;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

}



/* HERO */


.hero{

    position:relative;
    flex:1;

}



.mail{

    position:absolute;
    top:0;
    right:0;

}


.mail svg{

    width:45px;
    height:45px;
    fill:none;
    stroke:var(--text);
    stroke-width:2;

}



.headline{

    padding-top:20px;

}



h1{

    font-family:"Cormorant Garamond", serif;

    font-size:clamp(45px,4.5vw,72px);

    font-weight:500;

    line-height:1.40;

    letter-spacing:-1px;

}



h1 em{

    font-style:italic;
    font-weight:400;

}



.headline p{

    margin-top:45px;

    font-size:18px;

    font-weight:300;

    line-height: 1.50;

    color:var(--gray);

}



/* SERVICIOS */


.services{

    display:flex;

    gap:12vw;

    margin-top:90px;

}



.services a{

    color:#222;

    text-decoration:none;

    font-size:15px;

    font-weight:300;

    transition:.3s;

}



.services a:hover{

    opacity:.5;

}



/* FOOTER */


footer{

    display:flex;
    align-items:flex-end;

}



.linkedin svg{

    width:40px;
    height:40px;

}



.linkedin rect{

    fill:#999;

}


.linkedin path,
.linkedin circle{

    fill:white;

}



/* RESPONSIVE */


@media(max-width:768px){


.container{

    padding:40px 30px;

}



.mail svg{

    width:35px;

}



h1{

    font-size:44px;

}



.headline p{

    font-size:16px;

}



.headline p br{

    display:none;

}



.services{

    flex-direction:column;

    gap:25px;

    margin-top:70px;

}



.services a{

    font-size:17px;

}



}