/* ==========================================================
   PLUSGRAFIX
   www.plusgrafix.com
   ========================================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    background:#232323;
    color:#F2F2F2;

    font-family:"Roboto",Helvetica,Arial,sans-serif;
    font-weight:300;

    min-height:100vh;

}


/* ==========================================================
   ESTRUCTURA
   ========================================================== */

.page{

    width:100%;
    min-height:100vh;

    display:flex;
    justify-content:flex-start;
    align-items:center;

    padding:70px 60px;

}

.hero{

    width:100%;
    max-width:980px;

}


/* ==========================================================
   LOGO
   ========================================================== */

.brand{

    font-family:"Roboto Condensed",sans-serif;
    font-weight:300;

    font-size:34px;
    letter-spacing:.08em;

    color:#8ECBFF;

    margin-bottom:70px;

}


/* ==========================================================
   TITULAR
   ========================================================== */

h1{

    font-family:"Roboto",Helvetica,Arial,sans-serif;
    font-weight:300;

    font-size:clamp(48px,8vw,108px);

    line-height:.95;

    letter-spacing:-0.05em;

    min-height:120px;

    margin:0;
    padding:0;

}

.cursor{

    animation:blink .8s infinite;

}

@keyframes blink{

    50%{

        opacity:0;

    }

}


/* ==========================================================
   INTRODUCCIÓN
   ========================================================== */

.intro{

    margin-top:8px;

    max-width:720px;

    font-size:24px;
    line-height:1.45;

    color:#D0D0D0;

}


/* ==========================================================
   SERVICIOS
   ========================================================== */

.services{

    margin-top:70px;

    max-width:760px;

}

.services article{

    margin-bottom:55px;

}

.services article:last-child{

    margin-bottom:0;

}

.services h2{

    font-family:"Roboto Condensed",sans-serif;

    font-size:34px;
    font-weight:300;

    color:#8ECBFF;

    margin-bottom:14px;

    letter-spacing:.02em;

}

.services p{

    font-size:22px;
    line-height:1.65;

    color:#D2D2D2;

    max-width:720px;

}


/* ==========================================================
   CONTACTO
   ========================================================== */

.contact{

    margin-top:80px;

    font-size:22px;

    line-height:1.7;

    color:#D5D5D5;

}

.contact p{

    margin-bottom:18px;

}

.contact strong{

    color:#FFFFFF;

    font-weight:400;

}

.contact a{

    color:#8ECBFF;

    text-decoration:none;

    transition:.25s;

}

.contact a:hover{

    opacity:.75;

}


/* ==========================================================
   LINKS
   ========================================================== */

a{

    color:#8ECBFF;

    text-decoration:none;

}

a:hover{

    opacity:.75;

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:900px){

.page{

    padding:45px 28px;

    align-items:flex-start;

}

.brand{

    margin-bottom:45px;

    font-size:28px;

}

h1{

    font-size:clamp(42px,12vw,72px);

    min-height:170px;

}

.intro{

    font-size:21px;

}

.services{

    margin-top:50px;

}

.services article{

    margin-bottom:42px;

}

.services h2{

    font-size:28px;

}

.services p{

    font-size:19px;

}

.contact{

    margin-top:60px;

    font-size:19px;

}

}