html{
    font-size: 65%; /** Reset para REMS - 62.5% = 10px de 16px **/
}

body{
    font-family: 'Rubik', sans-serif;
    font-size: 1.5rem;
    text-decoration: none;
}

/**Globales**/
.contenedor{
    max-width: 130rem;
    margin: 0 auto;
}
.contenedor-header{
    max-width: 90%;
    margin: 0 auto;
}
h1{
    font-size: 4rem;
    line-height: 3rem;
    color: #2a3875;
}
h1::after {
    content: '';
    display: block;
    height: 0.3rem;
    width: 8rem;
    background-color: #7ff0b9;
    margin: 8rem 0;
    border-radius: 10rem;
}
h2{
    font-size: 4rem;
    line-height: 2rem;
    color: #2a3875;
    text-align: center;
    text-transform: initial;  
}
h2::after {
    content: '';
    display: block;
    text-align: center;
    height: 0.3rem;
    width: 8rem;
    background-color: #818287;
    margin: 5rem auto;
    border-radius: 10rem;
}
h3{
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: .2rem;
    line-height: 2.5rem;
    color: #2a3875;
    margin: 3rem 0 2rem 0;
}
h4{
    font-size: 1.3rem;
    line-height: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.3rem;
    color: #5c87ff;
}
h5{
    font-size: 6rem;
    font-weight: 300;
    line-height: 7.5rem;
    letter-spacing: 0.3rem;
    text-transform: uppercase;
}
p {
    font-weight: 400;
    line-height: 2.5rem;
    /**color: #818287;**/
    color: #4d4d4d;
}
a{
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #4d4d4d;
}

img{
    max-width: 100%;
}
/**Utilidades**/
.white{
    color: #fff
}
.seccion{/**para crear un margin top bottom en las sections**/
    margin-top: 10rem;
    margin-bottom: 10rem;
}
.centrar-texto{
    text-align: center
}
.ancho50 {
    max-width: calc(55%);
}
.ancho33 {
    max-width: calc(30%);
}
.divisor-texto{
    background-color: #f5f5f5;
    text-align: center;
    padding: 12rem;
    margin-bottom: 10rem;
}
.divisor-texto p{
    font-size: 2.5rem;
    line-height: 3.5rem;
    font-weight: 700;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    color: #5c87ff;
}
.resaltado {
    font-weight: 300;
    font-size: 2rem;
    line-height: 3rem;
    color: #5c87ff;
    margin-bottom: 4rem;
}
.versalitas {
    text-transform: uppercase;
    font-size: 1.4rem;
    letter-spacing: 0.15rem;
}


/**botones**/
.boton {
    padding: 1.5rem 2rem 1.5rem 2rem;
    background-color: #5c87ff;
    box-shadow: 5px 10px 25px 0px rgba(19,89,182,0.25);
    border-radius: 100em;
    color: #fff;
    font-size: 1.2rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    display: inline-block; /**este no toma todo el espacio del ancho como si se dejara solo en block**/
    margin: 4rem 0 2rem 0;
}

/* header */
.site-header {
    background-color: #2a3875;
    padding-top: 0.65rem;
    height: 8.5rem;
}
.site-header.inicio{/** Inicio es el nombre del home porque cambia en otras paginas**/
    background-image: url(../img/header-home.jpg) ;
    background-position: bottom center;
    background-size: cover;
    height: 100vh;/**view x hight**/
    min-height: 40rem;
    padding: 0;
} 
.contenido-header{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.contenido-header h5{
    color: #fff;
    padding-bottom: 6rem;
    max-width: 70rem;
    margin-bottom: 0;
    /**text-shadow: 0px 0px 10px rgb(71, 71, 71, 1);**/
    }
.contenido-header h4{
    font-size: 2rem;
    font-weight: 500;
    margin: 20rem 0 0 0;
    color: #7ff0b9;
    }
.piefoto {
    font-weight: 300;
    font-size: 0.8rem;
    color: #818387;
    letter-spacing: 0.05rem;
    text-align: right;
    margin-top: 3rem;
}
.fondo-barra {
    background-color: rgba(37, 49, 107, 0.9);
    height: 8.5rem;
    padding-top: 0.65rem;
}
.barra{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 3rem 1rem 2rem;
    /**background-color: rgba(60, 73, 129, .7);**/
}
/**Navegacion**/
.menuppal a {
    color: #fff /**5c87ff**/;
    font-weight: 300;
    text-decoration: none;
    font-size: 1.2rem;
    letter-spacing: 0.3rem;
    margin-right: 2rem;
    text-transform: uppercase;
}
.menuppal a:hover{
    color: #7ff0b9;
}
.menuppal a:last-of-type{
    margin-right: 0px;
}

/**servicios**/
.serviciosbox1{
    padding: 0 10rem;
    display: flex;
    justify-content: space-between;
    margin: 14rem 0 12rem 0;
}
.serviciosbox2{
    padding: 0 20rem;
    display: flex;
    justify-content: space-around;
    margin: 10rem 0 14rem 0;
}
.servicios{
    flex-basis: calc(30% - 6rem);
    text-align: center;
}
.servicios2{
    flex-basis: calc(30% - 0rem);
    text-align: center;
}
.iconos-size{
    width: calc(35%);
    margin-bottom: 2rem;
}

/**Nosotros**/
.nosotrosbigbox.inicio{
    /**background-color: #344078;**/
    background: radial-gradient(circle at top right,#335bda 0%, #1e2a75 100%);
    padding: 14rem;
    margin-bottom: 10rem;
    text-align: center;
}

.nosotrosbigbox p{
    padding: 0 10rem;
    color: #fff;
    font-weight: 300;
    letter-spacing: 0.05rem;
}
.nosotros a:hover{
    background-color: #7ff0b9;
}

/**Clietnes**/
.clientesbigbox{
    background-color: #f2f3f3;
    padding: 6rem 0 18rem 0;
    margin-top: 6rem;
}
.clientesbox{
    padding: 0 6rem;
    display: flex;
    justify-content: space-between;
}
.clientes{
    flex-basis: calc(33.3% - 2rem);
    background-color: #fff;
    box-shadow: 0.2rem 0.6rem 0.9rem 0 #d9dadb;
    border: 0.1rem solid #d9dadb;
}
.clientes p {
    line-height: 2rem;
}
.info-clientes{
    padding: 1.5rem 3rem;
    margin-bottom: 4rem;
}
.clientes h3{
    text-transform: none;
    font-size: 2.1rem;
    letter-spacing: 0.1rem;
    line-height: 2.5rem;
    color: #2a3875;
    margin: 0;
}
.iconos-clientes {
    width: calc(9%);
    margin: 2rem 0;
}
/**BLOG**/
.blogbigbox {
    display: flex;
    justify-content: space-between;
    margin-top: 20rem;
    margin-bottom: 20rem;
}
.blogbigbox h3 {
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 3rem;
    color: #8d93ff;
    margin-top: 1.5rem;
}
.blogbigbox h4 {
    font-weight: 500;
    font-size: 2rem;
    line-height: 3rem;
    letter-spacing: 0.2rem;
    color: #8d93ff;
    margin: 1rem auto;

}
.blogbigbox .anteriores {
    flex-basis: calc(65% - 2em);
}
.notas-anteriores {
    display: flex;
    justify-content: space-around;
    padding-bottom: 2rem;
}
.notas-anteriores p {
    font-size: 1.5rem;
}
.notas-anteriores a {
    color: #949afd;
    font-size: 1.4rem;
    letter-spacing: 0.1rem;
    text-decoration: none;
    display: flex;
    justify-content: flex-end;
    margin-top: 3rem;
}
.nota {
    flex-basis: calc(45% - 5rem);
    margin-bottom: 3rem;
} 
nota:first-child {
    padding-top: 0.5rem;
}
.fecha {
    font-weight: 300;
    font-size: 1.3rem;
    letter-spacing: 0.3rem;
    text-transform: uppercase;
}
.nota-reciente {
    flex-basis: calc(35% - 2.5rem);
    background-image: linear-gradient(125deg,#335bda 0%,#8d93ff 70%);
    box-shadow: 0.2rem 0.6rem 0.9rem 0 #d9dadb;
    border-radius: 0.7rem;
}
.nota-destacada {
    max-width: calc(70%-2rem);
    font-weight: 400;
    font-size: 2.2rem;
    line-height: 3.5rem;
    /**letter-spacing: 0.2rem;
    text-transform: uppercase;**/
    padding: 3rem 2rem;
    color: #fff;
}
.nota-destacada p {
    padding: 0 4rem;
    font-size: 1.5rem;
    letter-spacing: 0.3rem;
    color: #2a3875;
}
/**Footer**/
.footerbigbox {
    background-image: url(../img/AmayaC-Footer.jpg);
    background-position: center center;
    background-size: cover;
    margin: 0;
}
.footerbigbox h3 {
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    color: #5c87ff;
}
.footerbigbox h3::after {
    content: '';
    text-align: left;
    display: block;
    height: 0.28rem;
    width: 6rem;
    background-color: #5c87ff;
    margin: 1.5rem 0;
    border-radius: 10rem;
}
.footerbigbox p {
    font-weight: 300;
    font-size: 1.3rem;
    line-height: 3rem;
    letter-spacing: 0.1rem;
    color: #9a9c9f;
    margin: 0;
}
.footerbigbox a {
    font-weight: 300;
    font-size: 1.3rem;
    line-height: 3rem;
    letter-spacing: 0.1rem;
    color: #9a9c9f;
    text-decoration: none;
}
.footerbigbox a:hover {
    color: #7ff0b9;
}
.footerbox {
    /** display:flex;
    justify-content: space-between; **/
    display: grid;
    grid-template-columns: 55% 20% 20%;
    grid-column-gap: 4rem;
    padding: 5rem 10rem;
}
.logo-footer{
    flex-basis: 32%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.redes img{
    width: 5%;
    margin-right: 1rem;
}
.menu-footer {
    flex-basis: 32%;
}
.menu-footer ul {
    list-style: none;
    padding: 0rem;
    text-decoration: none;
}
.contacto {
    flex-basis: 32%;
}
.copyright {
    background-color: #1a1a1a;
    padding: 1.5rem 3rem;
    height: 3rem;
    margin: 0;
}
.copyright p {
    font-size: 1.2rem;
    color: #4d4d4d;
    /**margin-top: 0.5rem;**/
    margin: 0;
}

/** INTERNAS **/

/** nosotros **/
.nosotrosbox {
    display: flex;
    justify-content: space-between;
    margin-top: 20rem;
    margin-bottom: 30rem;
}
.col-izq-sangrada{
    flex-basis: calc(55% - 2rem);
    padding-top: 25rem;
}
.col-der-texto {
    flex-basis: calc(45% - 2rem);
    margin-left: 8rem;
    padding-right: 12rem;
}
.col-der-texto h3 {
    margin-top: 8rem;
}
.col-der-texto a {
    color: #949afd;
    font-size: 1.4rem;
    letter-spacing: 0.1rem;
    text-decoration: none;
    margin-top: 3rem;
}
.col-der-texto a::after {
    content: '';
    display: block;
    height: 0.15rem;
    width: 4rem;
    background-color: #7ff0b9;
    margin: 2rem 0 4rem 0;
    border-radius: 10rem;
}

/** servicios INTERNAS **/
.serv-header{
    background-image: url(../img/servicios.jpg) ;
    background-position: center center;
    background-size: cover;
    height: 95vh;/**view x hight**/
    min-height: 20rem;
    padding: 0;
} 
.serv-titulo {
    width: calc(40%);
    margin-left: 36%;
    margin-top: 5rem;
    margin-bottom: 8rem;
} 
.serv-box {
    display: grid;
    grid-template-columns: 36% 60%;
    background-color: #f5f5f5;
    padding: 12rem 0 8rem 0;
}
.serv-box h3{
    font-size: 4rem;
    line-height: 5rem;
    letter-spacing: .4rem;
    margin-top: 0;
    margin-bottom: 6rem;
}
.serv-ico {
    text-align: center;
    padding-top: 1rem;
}
.serv-texto {
    margin-bottom: 8rem;
    max-width: 65%;
}
.serv-texto p {
    line-height: 3rem;
}
.serv-texto ul {
    margin-top: 3rem;
}
.serv-texto li{
    list-style: linear-gradient(225deg,#5c87ff 0%,#344078 100%);
    font-weight: 400;
    line-height: 2.5rem;
    margin-bottom: 0.7rem;
    color: #4d4d4d;
    padding-left: 1rem;
}
.menu-serv {
    display: grid;
    grid-template-columns: 36% 20% 20%;
}
.tit-menu-serv {
    text-align: right;
    padding-right: 8rem;
}
.menu-serv h4 {
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0.2rem;
    color: #2a3875;
    line-height: 2rem;
    margin-top: 0;    
}
.menu-serv ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu-serv li {
    font-weight: 300;
    font-size: 1.3rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.menu-serv a{
    text-decoration: none;
    color: #818387;
}
.menu-serv a:hover {
    color: #5c87ff;
    font-weight: 400;
}
.link-on {
    color: #5c87ff;
    font-weight: 500;
}
/** Clientes Internas **/
.clientesbox-int{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-column-gap: 6rem;
    grid-row-gap: 12rem;
    margin-top: 15rem;
}
.clientes-int {
    background-color: #fff;
    box-shadow: 0.2rem 0.6rem 0.9rem 0 #d9dadb;
    border: 0.1rem solid #d9dadb;
}
.clientes-int:hover {
    /** -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);**/
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
    background-color: #ececed;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.iconos-clientes-int {
    width: calc(5%);
    margin: 1rem 0 0 0;
}
.info-clientes-int {
    padding: 1.5rem 3rem;
    margin-bottom: 1rem;
}
.info-clientes-int h3 {
    margin: 1rem 0;
}
.info-clientes-int p {
    margin: .5rem 0;
}
.img-clientes-int {
    height: 50rem;
    max-width: 100%;
}

.proyectos-titulo {
    display: grid;
    grid-template-columns: 30% 30%;
    grid-column-gap: 3rem;
    /** width: calc(20%-3rem); **/
    margin-top: 5rem;
    margin-bottom: 8rem;
} 
.proyectos-titulo h1 {
    letter-spacing: 0.2rem;
}
.ficha-proyecto {
    padding-top: 4.5rem;
}
.ficha-proyecto p {
    font-weight: 300;
    font-size: 1.4rem;
    line-height: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    color: #818287;
}
.proyectos-box {
    display: grid;
    grid-template-columns: 55% 40%;
    grid-column-gap: 6rem;
    margin: 8rem 0;
}
.proyectos-box p {
    margin-top: 0;
    margin-bottom: 2rem;
}
.proyecto-fotos {
    display: grid;
    grid-template-rows: 3fr;
    grid-row-gap: 3rem;
    margin-bottom: 12rem;
}
.fotos-proy {
    max-height: 80%;
}

/**BLOG**/

.blog-box {
    display: grid;
    grid-template-columns: 30% 70%;
    /**background-color: #f5f5f5;**/
    padding: 1rem 0 8rem 0;
}
.col-izq-nosangrada{
    flex-basis: calc(35% - 2rem);
    padding-top: 27rem;
    margin-left: 11%;
}
.blog-box h3{
    font-size: 4rem;
    line-height: 5rem;
    letter-spacing: .2rem;
    margin-top: 0;
    margin-bottom: 6rem;
}
.blog-ficha {
    text-align: left;
    padding: 3rem 0 8rem 12rem;
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    color: #818287;
    background-color: #fff;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.blog-texto-fondo {
    margin-bottom: 3rem;
    background-color: #f5f5f5;
}
.blog-texto {
    max-width: 65%;
    padding: 9rem 0 6rem 9rem;
}
.blog-texto ul {
    margin-top: 3rem;
}
.blog-texto li{
    list-style: linear-gradient(225deg,#5c87ff 0%,#344078 100%);
    font-weight: 400;
    line-height: 2.5rem;
    margin-bottom: 0.7rem;
    color: #4d4d4d;
    padding-left: 1rem;
}