/* =========================================
   BANNER PROYECTOS
========================================= */

.ac-proyectos-banner {
    position: relative;

    width: 100%;
    height: 330px;

    overflow: hidden;

    background: #ffffff;
}


/* =========================================
   IMAGEN DE FONDO
========================================= */

.ac-proyectos-banner-imagen {
    position: absolute;

    top: 0;
    right: 0;

    width: 75%;
    height: 100%;

    background-image: url("images/banner-proyectos.jpg");

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

    background-repeat: no-repeat;
}


/* =========================================
   DEGRADADO
========================================= */

.ac-proyectos-banner-degradado {
    position: absolute;

    inset: 0;

    z-index: 1;

    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 25%,
        rgba(255, 255, 255, 0.98) 35%,
        rgba(255, 255, 255, 0.85) 43%,
        rgba(255, 255, 255, 0.40) 55%,
        rgba(255, 255, 255, 0) 70%
    );
}


/* =========================================
   CONTENIDO
========================================= */

.ac-proyectos-banner-contenido {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1350px;

    height: 100%;

    margin: 0 auto;

    padding-left: 30px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* =========================================
   ETIQUETA PROYECTOS
========================================= */

.ac-proyectos-banner-label {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;
}


.ac-proyectos-banner-label span {

    width: 25px;
    height: 3px;

    background: #ff5a1f;

    display: block;
}


.ac-proyectos-banner-label p {

    margin: 0;

    color: #33404d;

    font-family: Arial, sans-serif;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 0.5px;
}


/* =========================================
   TÍTULO
========================================= */

.ac-proyectos-banner-contenido h1 {

    margin: 0;

    max-width: 520px;

    color: #263442;

    font-family: Arial, sans-serif;

    font-size: 38px;

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -1px;
}


/* Parte naranja */

.ac-proyectos-banner-contenido h1 strong {

    display: block;

    color: #f45b18;

    font-weight: 700;
}


/* =========================================
   DESCRIPCIÓN
========================================= */

.ac-proyectos-banner-descripcion {

    max-width: 470px;

    margin: 15px 0 0;

    color: #56616c;

    font-family: Arial, sans-serif;

    font-size: 15px;

    line-height: 1.5;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .ac-proyectos-banner {

        height: 320px;

    }

    .ac-proyectos-banner-imagen {

        width: 70%;

    }

    .ac-proyectos-banner-contenido {

        padding-left: 25px;

    }

    .ac-proyectos-banner-contenido h1 {

        font-size: 34px;

    }

}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 600px) {

    .ac-proyectos-banner {

        height: 400px;

    }

    .ac-proyectos-banner-imagen {

        width: 100%;

        background-position: center;

    }

    .ac-proyectos-banner-degradado {

        background: linear-gradient(
            90deg,
            rgba(255,255,255,0.98) 0%,
            rgba(255,255,255,0.90) 45%,
            rgba(255,255,255,0.35) 100%
        );

    }

    .ac-proyectos-banner-contenido {

        padding: 30px 25px;

        justify-content: center;

    }

    .ac-proyectos-banner-contenido h1 {

        font-size: 32px;

    }

    .ac-proyectos-banner-descripcion {

        font-size: 14px;

        max-width: 380px;

    }

}