/* ========================================= */
/* TEAM COSTERA - LANDING V1                 */
/* ========================================= */

:root{

    --azul:#143B73;
    --naranja:#E88024;
    --texto:#5A6673;
    --fondo:#FFFFFF;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html,
body{

    width:100%;
    height:100%;

}

body{

    font-family:'Montserrat',sans-serif;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fafc 100%
    );

    color:var(--azul);

    display:flex;
    flex-direction:column;

    overflow-x:hidden;

}

/********************************************/
/* HERO                                     */
/********************************************/

.hero{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:40px 20px;

}

/********************************************/
/* CONTENT                                  */
/********************************************/

.content{

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

    text-align:center;

}

.logo{

    display:block;

    width:min(420px,80vw);

    height:auto;

    margin:0 auto 40px;

}

h1{

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(2.2rem,4vw,3rem);

    font-weight:600;

    color:var(--azul);

    margin-bottom:22px;

}

.separator{

    width:90px;

    height:3px;

    border-radius:50px;

    background:var(--naranja);

    margin:0 auto 30px;

}

p{

    width:100%;

    max-width:620px;

    margin:0 auto;

    color:var(--texto);

    font-size:1.08rem;

    line-height:1.8;

}

.coming{

    margin-top:38px;

    font-weight:600;

    color:var(--azul);

}


/********************************************/
/* FOOTER                                   */
/********************************************/

footer{

    background:var(--azul);

    color:white;

    text-align:center;

    padding:20px 20px;

    font-size:.85rem;

    letter-spacing:.08em;

}

/********************************************/
/* PORTÁTILES BAJOS                         */
/********************************************/

@media (max-height:700px){

    .hero{

        padding-top:30px;

    }

    .logo{

        width:300px;

        margin-bottom:25px;

    }

    h1{

        font-size:2.1rem;

        margin-bottom:15px;

    }

    .separator{

        margin-bottom:18px;

    }

    p{

        font-size:.98rem;

        line-height:1.6;

    }

    .coming{

        margin-top:22px;

    }

    .waves svg{

        height:120px;

    }

}

/********************************************/
/* MÓVILES                                  */
/********************************************/

@media (max-width:768px){

    .hero{

        padding-top:40px;

    }

    .logo{

        width:260px;

    }

    h1{

        font-size:2rem;

    }

    p{

        font-size:.95rem;

        line-height:1.6;

    }

    .waves svg{

        height:110px;

    }

}