@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    overflow-x: none;
}

:root {
    --principal: #0021ff; /* color corporativo (primario) */
    --secundario: #1791c8; /* color corporativo (secundario) */

    --fondo: #f4f6f8;       /* fondo claro, neutro, profesional */
    --fondo-secundario: #e1e4e8; /* para bloques o secciones alternas */

    --texto: #2e2e2e;       /* gris oscuro, buena legibilidad */
    --texto-secundario: #5c5c5c; /* para descripciones o elementos secundarios */

    --text-li: #1791cb;
    --text-li-hover: #162530;
    --text-back-li: rgba(188, 212, 229, 0.8);

    --sombra: 20px 20px 15px rgba(0, 0, 0, .5);

    --exito: #4caf50;       /* para mensajes de éxito (verde sobrio) */
    --error: #f44336;       /* para errores */
    --advertencia: #ff9800; /* para advertencias */
}


.container{
    max-width: 1300px;
    margin: 0 auto;
    /*ajusta el contenido para poder dejar espacio entre los extremos de la pantalla*/
}

body {
    background-color: var(--fondo);
    font-family: "Bebas Neue", sans-serif;
    overflow-x: hidden;
}

/*seccion del banner o video principal que aparece en la bienvenida*/
.banner {
    position: relative;
    width: 100%;
    height: 90vh; 
    overflow: hidden;
}

.banner video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-mobile {
    display: none;
}


/*inicia seccion de bienvenida*/
.inicio {
    padding: 50px 0;
}

.welcome{
    display: flex;
    align-items: center;
    padding: 0 30px;
}

.welcome-content{
    text-align: justify;
    flex-basis: 50%; /*toma la mitad de la pantalla*/
    padding-right: 35px;
}

.welcome-content p {
    font-size: 1.5rem;
    color: var(--secundario);
    padding: 0 50px;
    margin-bottom: 20px;
}

.button {
    display: flex;
    justify-content: center;
    align-items: center;
}


.btn-conocenos {
    background-color: var(--secundario);
    padding: 10px 20px;
    width: 10rem;
    margin: 0 10px;
    border-radius: 25px;
    color: var(--texto-secundario);
}

.btn-conocenos:hover{
    background-color: var(--text-back-li);
    color: var(--text-li);
    border: 2px solid #fff;
}

hr {
    border: 2px solid var(--secundario);
    width: 80%;
    margin-bottom: 30px;
}

.about-image {
    flex-basis: 50%;
    text-align: center;
}

.about-image img {
    
    width: 500px;
    height: auto;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 20px 20px 15px rgba(8, 166, 229, 0.5); 
}
h1{
    color: var(--texto);
    font-size: 4rem;
    line-height: 80px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

p {
    font-size: 1.5rem;
    color: var(--secundario);
    padding: 0 100px;
    margin-bottom: 20px;
}

/*termina seccion de bienvenida*/


/*seccion de valores*/
.valores-content span {
    font-size: 2rem;
    color: var(--principal);
}

.valores-content hr {
    border: 2px solid var(--secundario);
    width: 80%;
    margin-bottom: 30px;
    margin-left: 40px;
}

.valores-content {
    text-align: center;
    background-color: var(--fondo-secundario);
    box-shadow: var(--sombra);
    padding: 10px 20px;
    margin: 40px 0 60px 0;
    border-radius: 30px 0 30px 0;
}

.valores-content p strong {
    font-size: 1.2em;
    font-weight: bold;
    color: #2a4d9b; /* Azul oscuro que da sensación de profesionalismo */
    display: inline-block;
    margin-bottom: 0.2em;
}

/*termina seccion de valores*/

/*INICIA SECCION DE VISION Y MISION*/    

.vista {
    padding: 50px 0;
}

.vision{
    display: flex;
    align-items: center;
    padding: 0 30px;
    flex-direction: row-reverse;
}

.vision-content {
    text-align: justify;
    flex-basis: 50%;
    padding-left: 35px;
}

.vision-content p {
    font-size: 1.5rem;
    color: var(--secundario);
    padding: 0 50px;
    margin-bottom: 20px;
}

/*TERMINA SECCION DE VISION Y MISION*/



/*seccion de certificaciones*/

.certificaciones-content span {
    font-size: 2rem;
    color: var(--principal);
}

.certificaciones-content hr {
    border: 2px solid var(--secundario);
    width: 80%;
    margin-bottom: 30px;
    margin-left: 40px;
}

.certificaciones-content{
    text-align: center;
    background-color: var(--fondo-secundario);
    box-shadow: var(--sombra);
    padding: 10px 20px;
    margin: 40px 0 70px 0;
    border-radius: 0 30px 0 30px;
}

/*termina seccion de certificaciones*/


/*INICIA SECCION DE WORKSPACE*/


.work img {
    max-width: 80%;
    height: auto;
    object-fit: cover;
    border-radius: 25px 0 25px 0 ;
    display: block;
    margin: 0 auto;
    box-shadow: 20px 20px 15px rgba(8, 166, 229, 0.5); 
}

.img-work {
    padding: 50px 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.img-work img {
    transition: filter 0.3s ease;
}

.img-work:hover img {
    filter: blur(5px);
}

.img-work img:hover {
    filter: none;
}
/*TERMINA SECCION DE WORKSPACE*/


/*INICA SESION DE FLAYERS*/

.siguenos {
    margin-bottom: 30px ;
}
.flayers img {
    max-width: 90%;
    height: auto;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

.flayers {
    padding: 50px 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
    border-radius: 40px;
    background-color: var(--fondo-secundario);
    box-shadow: 20px 20px 15px rgba(8, 166, 229, 0.5); 
}

.flayers img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.flayers img:hover {
    transform: scale(1.06);
    box-shadow: 15px 10px 15px rgba(5, 116, 160, 0.786);
}


/*TERMINA SECCION DE FLAYERS*/


/*seccion de clientes*/
.clientes img {
    max-width: 80%;
    height: auto;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

.clientes {
    margin-top: 50px;
}

.clientes-content {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 20px;
    border-radius: 40px;
}

/*termina seccion de clientes*/



/*animaciones*/

@keyframes appear {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

.inicio,
.valor,
.vista,
.certificacion,
.work,
.siguenos,
.clientes {
    animation: appear 5s linear;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
}

.anim-text {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.visible {
    opacity: 1;
    transform: translateY(0);
}

/* RESPONSIVE */
@media (max-width: 880px) {

    .banner {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-height: 100vh;
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .banner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    }
    
    .video-desktop {
        display: none;
    }

    .video-mobile {
        display: block;
    }

    .inicio .welcome,
    .vista .vision, .valor .valores,
    .certificacion .certificiones,
    .work .examples,
    .siguenos .social,
    .clientes .cliente{
        display: flex;
        flex-direction: column;
        text-align:start;
        margin: 1.5rem;
        padding: 15px 0px;
    }

    h1 {
        font-size: 2rem;
    }

    p {
        font-size: 1rem;
    }

    .welcome-content p {
        font-size: 1rem;
    }
    .vision-content p {
        font-size: 1rem;
    }

    .welcome-content,
    .valores-content,
    .vision-content,
    .certificaciones-content,
    .examples-content,
    .social,
    .clientes {
        padding: 10px 0;
    }

    .about-image img,
    .image-welcome img {
        max-width: 90%;
    }

    .btn-conocenos {
        display: inline-block;
        margin-bottom: 2rem;
    }

    .img-work {
    padding: 10px 5px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    }

    .flayers {
    padding: 25px 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    border-radius: 20px;
    background-color: var(--fondo-secundario);
    box-shadow: 20px 20px 15px rgba(8, 166, 229, 0.5); 
    }
}