/*HOJA DE ESTILOS SP PROGRESSIVE*/

/*GENERALES*/
* {
    margin: 0;
}

html,
body {
    overflow-x: hidden;
}


p {
    font-family: 'Open Sans';
}

h1 {
    font-family: 'Roboto Condensed';
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
}

h2 {
    font-family: 'Roboto Condensed';
    font-style: italic;
    text-transform: uppercase;
    font-size: 25px;
    color: #00793A;
}

h3 {
    font-family: 'Roboto Condensed';
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px;
}

h4 {
    font-family: 'Roboto Condensed';
    font-size: medium;
    font-style: italic;
}

/*_________SEPARADORES______________*/
.separador {
    border: none;
    border-top: 3px solid white;
    /* Puedes cambiar el color */
    width: 100%;
    /* Controla el ancho */
    max-width: 900px;
    /* Límite máximo para pantallas grandes */
    margin: 2rem auto;
    /* Centrado con espacio arriba/abajo */
    opacity: 0.8;
}

.separador-vertical {
    width: 4px;
    height: 300px;
    background-color: white;
}

.separador-horizontal {
    height: 4px;
    width: 80%;
    background-color: white;

}

/*BARRA DE NAVEGACION*/
.fondo-nav {
    background-color: #008e1fba;
    margin: 0;
    border-bottom: solid black;
}

.nav-link {
    padding: 20px 36px !important;
    color: black;
}

nav {
    font-family: 'Roboto Condensed';
    font-weight: 600;
    text-transform: uppercase;
    font-size: small;
    color: white;
}

.nav-logo {
    width: 60px;
}

.nav-link:hover,
.active .nav-link {
    color: white;
    font-weight: bolder;
}

.navbar-toggler {
    color: #31A8D7;
}

.navbar-toggler-icon {
    color: aqua;
}

button {
    color: aqua;
}


/*HEADER*/
header {
    background-image: url(../imagenes/bg-header.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}



.logo {

    width: 400px;
    display: inline-block;
    /* Necesario para transformaciones */
    animation: rotacion 1s linear;
    /* La animación dura 3 segundos y es infinita */
}

/*QUIENES SOMOS------------------------------------------------------------*/

.quienes {
    color: white;
    background-image: url(../imagenes/bg-quienes.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.columna-img img {
    width: 450px;
}

.columna-img p {
    padding: 10px 40px;
}

.info-servicios p {
    padding: 0 20px;
}

.logo-info {
    width: 210px;

    padding-bottom: 90px;
}

.lista-servi li {
    color: #0E2766;
    font-family: 'Arimo';
}

/*-------------------------CONSULTORIA ADMINISTRATIVA-----------------------------------*/
.consultoria {
    color: white;
    background-image: url(../imagenes/bg-consultoria.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 180px;
}

/*-------------------------PLANEACION ESTRATEGICA-----------------------------------*/
.planeacion {
    color: white;
    background-image: url(../imagenes/bg-planeacion.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 180px;
}

/*-------------------------GESTION DEL CAMBIO-----------------------------------*/
.gestion {
    color: white;
    background-image:linear-gradient( #00793A, #7CBB63) ;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    padding-top: 80px;
    padding-bottom: 180px;
}

/*-------------------------contacto-----------------------------------*/
.contacto {
    color: white;
    background-image:url(../imagenes/bg-contacto.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    padding-top: 80px;
    padding-bottom: 80px;
}

.columna-img{ padding: 0;}

/*FOOTER----------------------------------------------------------------------------------------*/

footer {
    color: white;
background-color:#00793A;
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    font-style: italic;
    padding-bottom: 10px;
}

footer p {
    font-size: 10px;
    padding-top: 5px;
}

footer img {
    width: 50px;
    padding-top: 20px;
    padding-bottom: 5px;
}