@import url('variables.css');
@import url('header.css');
@import url('footer.css');
@import url('home.css');
@import url('estudio.css');


@import url('areas.css');
@import url('contacto.css');
@import url('responsive.css');

/*==================================
RESET
===================================*/

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--font-family);
    background:var(--color-white);
    color:var(--color-text);
    overflow-x:hidden;
    padding-top:90px;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

.container{
    width:90%;
    max-width:1280px;
    margin:auto;
}

/*==================================
HERO BASE
Todas las páginas internas usan esta estructura.
Cada CSS (equipo, estudio, contacto, etc.)
solo define la imagen de fondo.
===================================*/

.page-hero{

    position:relative;
    min-height:520px;

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

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

}

.page-hero .container{

    position:relative;
    z-index:2;
    width:100%;
    max-width:850px;
    text-align:center;

}

.page-hero .section-tag{

    color:#7fa8e5;
    font-weight:600;
    letter-spacing:4px;
    text-transform:uppercase;

}

.page-hero h1{

    color:#fff;
    font-size:58px;
    line-height:1.15;
    margin:20px 0;

}

.page-hero p{

    color:rgba(255,255,255,.9);
    font-size:20px;
    line-height:1.8;

}