.boton-principal{
    cursor: pointer;
    padding: 1.5vh 3vh;

    border-radius: 0.2vh;
    border: none;
    background-color: var(--color-principal);
}

.boton-principal .flecha-boton-principal{
    display: inline-block;

    transition: 0.3s ease;
}

.boton-principal:hover .flecha-boton-principal{
    transform: translateX(1vh);
}

.principal{
    width: 100%;
    height: 100vh;

    background-color: var(--color-fondo);

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

.contenido-principal{
    width: 80%;
    display: flex;
    flex-direction: column;
    gap: 4vh;
}

.parte-arriba{
    width: 100%;
    display: flex;
    flex-direction: column;

    gap: 1vh;
}

.parte-arriba h2{
    max-width: 50%;
}

.parte-abajo{
    width: 100%;

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

    gap: 20vh;
}

.parte-abajo img{
    border: 1px solid var(--color-gris-propio);

    border-radius: 0.5vh;
    width: 35%;
}

.texto-vision{
    display: flex;
    flex-direction: column;

    gap: 2vh;
}

.enfoque{
    width: 100%;
    height: 50vh;

    background-color: var(--color-fondo);

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

.contenido-enfoque{
    width: 80%;
    display: flex;
    flex-direction: column;

    gap: 2vh;
}

.caja-cartas{
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.carta{
    width: 25%;
    height: 22vh;

    display: flex;
    flex-direction: column;

    gap: 2vh;

    padding: 2vh 4vh;

    border-radius: 0.5vh;
    border: 1px solid var(--color-gris-propio);

    background-color: var(--color-oscuro);
}

.carta img{
    width: 5vh;

    filter: invert(1);
}

.carta-importante{
    padding: 4vh 4vh;
    border: 1px solid var(--color-principal);
    
    background-color: var(--color-principal-difuminado);
}

.objetivo-final{
    width: 100%;
    height: 50vh;

    background-color: var(--color-fondo);

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

.contenido-objetivo-final{
    width: 80%;
    height: 75%;

    border: 1px solid var(--color-gris-apagado);
    border-radius: 0.5vh;

    padding: 2.5vh 0;

    background-image: url(/static/img/fondo\ objetivos\ sobre\ nosotros.PNG);
    background-position: center;
    background-size: cover;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.contenido-objetivo-final h2{
    text-align: center;
    max-width: 40%;
}

.contenido-objetivo-final h2 span{
    color: var(--color-principal);
}

.contenido-objetivo-final p{
    text-align: center;
    max-width: 40%;
}

/* ============================================= */
/* RESPONSIVE - TABLET Y MÓVIL                    */
/* ============================================= */
 
/* Tablet */
@media (max-width: 1024px){
    .principal{
        height: auto;
        padding: 10vh 0 6vh 0;
    }
 
    .contenido-principal{
        width: 88%;
        gap: 3vh;
    }
 
    .parte-arriba h2{
        max-width: 80%;
    }
 
    .parte-abajo{
        flex-direction: column;
        gap: 3vh;
    }
 
    .parte-abajo img{
        width: 60%;
    }
 
    .enfoque{
        height: auto;
        padding: 6vh 0;
    }
 
    .contenido-enfoque{
        width: 88%;
    }
 
    .caja-cartas{
        flex-wrap: wrap;
        gap: 2vh;
    }
 
    .carta{
        max-width: 60%;
        height: auto;
        min-height: 20vh;
    }
 
    .objetivo-final{
        height: auto;
        padding: 6vh 0;
    }
 
    .contenido-objetivo-final{
        width: 88%;
        height: auto;
        padding: 5vh 3vh;
    }
 
    .contenido-objetivo-final h2,
    .contenido-objetivo-final p{
        max-width: 70%;
    }
}
 
/* Móvil */
@media (max-width: 600px){
    .parte-arriba h2{
        max-width: 100%;
    }
 
    .parte-abajo img{
        width: 90%;
    }
 
    .caja-cartas{
        flex-direction: column;
    }
 
    .carta{
        width: 100%;
    }
 
    .contenido-objetivo-final h2,
    .contenido-objetivo-final p{
        max-width: 90%;
    }
}