/* =========================================================
   NOSOTROS
   ========================================================= */


/* =========================================================
   SECCIÓN PRINCIPAL
   ========================================================= */

.seccion-nosotros {
    position: relative;

    width: 100%;

    min-height: calc(100vh - 95px);

    margin: 0;
    padding: 0;

    overflow: hidden;

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


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

.nosotros-imagen {
    position: absolute;

    top: 0;
    right: 0;

    width: 75%;
    height: 100%;

    z-index: 1;
}


/* ---------------------------------------------------------
   IMAGEN
   --------------------------------------------------------- */

.nosotros-imagen img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: right center;
}


/* ---------------------------------------------------------
   DEGRADADO LATERAL
   --------------------------------------------------------- */

.nosotros-imagen::before {
    content: "";

    position: absolute;

    z-index: 2;

    top: 0;
    left: 0;

    width: 45%;
    height: 100%;

    background: linear-gradient(
        to right,

        var(--color-fondo) 0%,

        rgba(2, 4, 8, 0.90) 25%,

        rgba(2, 4, 8, 0.45) 65%,

        transparent 100%
    );

    pointer-events: none;
}


/* ---------------------------------------------------------
   DEGRADADO SUPERIOR E INFERIOR
   --------------------------------------------------------- */
/* =========================================================
   DEGRADADO SUPERIOR + INFERIOR PARA PC
   ========================================================= */

.nosotros-imagen::after {
    content: "";

    position: absolute;

    z-index: 2;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    background:

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

        linear-gradient(
            to bottom,

            var(--color-fondo) 0%,

            rgba(2, 4, 8, 0.95) 3%,

            rgba(2, 4, 8, 0.80) 8%,

            rgba(2, 4, 8, 0.45) 16%,

            rgba(2, 4, 8, 0.15) 25%,

            transparent 38%
        ),

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

        linear-gradient(
            to top,

            var(--color-fondo) 0%,

            rgba(2, 4, 8, 0.95) 3%,

            rgba(2, 4, 8, 0.80) 8%,

            rgba(2, 4, 8, 0.45) 16%,

            rgba(2, 4, 8, 0.15) 25%,

            transparent 38%
        );
}


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

.nosotros-contenido {
    position: relative;

    z-index: 3;

    width: 55%;

    min-height: calc(100vh - 95px);

    padding:
        60px
        30px
        60px
        7%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    text-align: left;
}


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

.nosotros-contenido h1 {
    margin: 0;

    color: var(--color-blanco);

    font-family: var(--fuente-principal);

    font-size: clamp(3rem, 5.5vw, 5.5rem);

    font-weight: 800;

    line-height: 1;

    letter-spacing: 2px;

    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.15),
        0 0 25px rgba(97, 163, 240, 0.12);
}


/* =========================================================
   DESTELLO DEBAJO DEL TÍTULO
   ========================================================= */

.nosotros-destello {
    width: 75%;

    max-width: 420px;

    height: 9px;

    margin:
        20px
        0
        30px;

    border-radius: 50%;

    background: radial-gradient(
        ellipse at center,

        rgba(255, 255, 255, 0.85) 0%,

        rgba(255, 255, 255, 0.65) 4%,

        rgba(97, 163, 240, 0.45) 20%,

        rgba(47, 92, 235, 0.20) 45%,

        transparent 75%
    );

    box-shadow:
        0 0 12px rgba(97, 163, 240, 0.18),
        0 0 25px rgba(47, 92, 235, 0.10);
}


/* =========================================================
   TEXTO
   ========================================================= */

.nosotros-texto {
    width: 100%;

    max-width: 700px;
}


.nosotros-texto p {
    margin:
        0
        0
        18px;

    color: rgba(255, 255, 255, 0.88);

    font-family: var(--fuente-principal);

    font-size: 1rem;

    line-height: 1.7;

    text-align: left;
}


/* =========================================================
   DESTELLO FINAL
   ========================================================= */

.nosotros-destello-final {
    width: 55%;

    max-width: 300px;

    height: 5px;

    margin:
        10px
        0
        18px;

    border-radius: 50%;

    background: radial-gradient(
        ellipse at center,

        rgba(255, 255, 255, 0.75) 0%,

        rgba(97, 163, 240, 0.40) 25%,

        rgba(47, 92, 235, 0.15) 50%,

        transparent 75%
    );
}


/* =========================================================
   FRASE FINAL
   ========================================================= */

.nosotros-contenido h5 {
    margin: 0;

    color: var(--color-cielo);

    font-family: var(--fuente-principal);

    font-size: clamp(
        1rem,
        1.5vw,
        1.35rem
    );

    font-weight: 600;

    letter-spacing: 2px;

    text-shadow:
        0 0 10px rgba(97, 163, 240, 0.35);
}


/* =========================================================
   GALERÍA
   ========================================================= */

.nosotros-galeria {
    position: relative;

    width: 100%;

    padding:
        70px
        6%
        100px;

    background: var(--color-fondo);

    overflow: hidden;
}


/* =========================================================
   CONTENEDOR GALERÍA
   ========================================================= */

.nosotros-galeria-contenedor {
    width: 100%;

    max-width: 1400px;

    margin: 0 auto;
}


/* =========================================================
   FILAS
   ========================================================= */

.nosotros-fila {
    position: relative;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 40px;

    align-items: start;

    margin-bottom: 75px;
}


/* =========================================================
   DESTELLOS DE LA FILA

   IMPORTANTE:
   position absolute evita que ocupe una columna.
   ========================================================= */

.nosotros-linea {
    position: absolute;

    left: 0;
    right: 0;

    top: 38%;

    width: 100%;
    height: 12px;

    z-index: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,

            rgba(255, 255, 255, 0.95) 0%,

            rgba(255, 255, 255, 0.75) 8%,

            rgba(97, 163, 240, 0.65) 22%,

            rgba(47, 92, 235, 0.35) 42%,

            transparent 70%
        );

    background-size: 38px 12px;

    background-repeat: repeat-x;

    filter: blur(1px);

    opacity: 0.9;
}


/* =========================================================
   LÍNEA CENTRAL MUY SUTIL
   ========================================================= */

.nosotros-linea::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    height: 2px;

    transform: translateY(-50%);

    background:
        repeating-linear-gradient(
            to right,

            transparent 0,
            transparent 7px,

            rgba(255, 255, 255, 0.85) 8px,

            rgba(97, 163, 240, 0.65) 11px,

            transparent 15px,

            transparent 28px
        );

    filter: blur(1px);
}


/* =========================================================
   ELEMENTO DE IMAGEN
   ========================================================= */

.nosotros-imagen-item {
    position: relative;

    z-index: 2;

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    text-align: center;
}


/* =========================================================
   IMAGEN
   ========================================================= */

.nosotros-imagen-item img {
    display: block;

    width: 100%;

    max-width: 240px;

    height: auto;

    object-fit: contain;

    transition:
        transform 0.35s ease,
        filter 0.35s ease;

    filter:
        drop-shadow(
            0 0 5px rgba(255, 255, 255, 0.35)
        )
        drop-shadow(
            0 0 12px rgba(97, 163, 240, 0.35)
        )
        drop-shadow(
            0 0 25px rgba(47, 92, 235, 0.25)
        );
}


/* =========================================================
   TÍTULO DE LA IMAGEN + REFLEJO
   ========================================================= */

.nosotros-imagen-item h3 {
    width: 100%;

    margin:
        18px
        0
        0;

    color: var(--color-blanco);

    font-family: var(--fuente-principal);

    font-size: 0.95rem;

    font-weight: 600;

    letter-spacing: 1px;

    line-height: 1.3;

    text-align: center;

    text-shadow:
        0 0 8px rgba(97, 163, 240, 0.25);

    /* REFLEJO */
    -webkit-box-reflect:
        below 3px
        linear-gradient(
            transparent 0%,

            rgba(97, 163, 240, 0.16) 35%,

            rgba(47, 92, 235, 0.08) 55%,

            transparent 80%
        );
}


/* =========================================================
   EFECTO HOVER
   ========================================================= */

.nosotros-imagen-item:hover img {
    transform: scale(1.06);

    filter:
        drop-shadow(
            0 0 7px rgba(255, 255, 255, 0.55)
        )
        drop-shadow(
            0 0 16px rgba(97, 163, 240, 0.55)
        )
        drop-shadow(
            0 0 30px rgba(47, 92, 235, 0.40)
        );
}


.nosotros-imagen-item:hover h3 {
    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.30),
        0 0 15px rgba(97, 163, 240, 0.45);
}

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

@media (max-width: 1024px) {

    /* =====================================================
       SECCIÓN NOSOTROS
       ===================================================== */

    .seccion-nosotros {
        min-height: auto;

        height: auto;

        padding: 0;

        display: flex;

        align-items: center;
    }


    /* =====================================================
       IMAGEN
       ===================================================== */

    .nosotros-imagen {
        width: 70%;

        height: 620px;
    }


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

    .nosotros-contenido {
        width: 58%;

        min-height: 620px;

        padding:
            45px
            25px
            45px
            6%;
    }


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

    .nosotros-contenido h1 {
        font-size: clamp(
            2.8rem,
            6vw,
            4.5rem
        );
    }


    /* =====================================================
       TEXTO
       ===================================================== */

    .nosotros-texto p {
        font-size: 0.95rem;

        line-height: 1.6;
    }


    /* =====================================================
       GALERÍA
       ===================================================== */

    .nosotros-galeria {
        padding:
            45px
            5%
            70px;
    }


    .nosotros-fila {
        gap: 25px;

        margin-bottom: 55px;
    }


    .nosotros-imagen-item img {
        max-width: 190px;
    }


    .nosotros-imagen-item h3 {
        font-size: 0.85rem;
    }


    .nosotros-linea {
        top: 37%;
    }
}



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

@media (max-width: 767px) {

    /* =====================================================
       SECCIÓN NOSOTROS
       ===================================================== */

    .seccion-nosotros {
        min-height: calc(100vh - 75px);

        display: flex;

        align-items: center;
    }


    /* -----------------------------------------------------
       IMAGEN DE FONDO
       ----------------------------------------------------- */

    .nosotros-imagen {
        position: absolute;

        top: 0;
        left: 0;
        right: 0;

        width: 100%;
        height: 100%;

        z-index: 1;
    }


    .nosotros-imagen img {
        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: center;
    }


    /* -----------------------------------------------------
       DEGRADADO MÓVIL
       ----------------------------------------------------- */

    .nosotros-imagen::before {
        width: 100%;

        background:
            linear-gradient(
                to right,

                rgba(2, 4, 8, 0.65) 0%,

                transparent 25%,

                transparent 75%,

                rgba(2, 4, 8, 0.65) 100%
            );
    }


    .nosotros-imagen::after {
        background:

            linear-gradient(
                to bottom,

                rgba(2, 4, 8, 0.40) 0%,

                rgba(2, 4, 8, 0.65) 45%,

                var(--color-fondo) 100%
            ),

            linear-gradient(
                to right,

                rgba(2, 4, 8, 0.65) 0%,

                transparent 25%,

                transparent 75%,

                rgba(2, 4, 8, 0.65) 100%
            );
    }


    /* -----------------------------------------------------
       CONTENIDO
       ----------------------------------------------------- */

    .nosotros-contenido {
        width: 100%;

        min-height: calc(100vh - 75px);

        padding:
            60px
            25px
            50px;

        justify-content: center;

        align-items: center;

        text-align: center;
    }


    /* -----------------------------------------------------
       TÍTULO
       ----------------------------------------------------- */

    .nosotros-contenido h1 {
        font-size: clamp(
            2.5rem,
            12vw,
            4rem
        );

        letter-spacing: 1px;

        text-align: center;
    }


    /* -----------------------------------------------------
       DESTELLO
       ----------------------------------------------------- */

    .nosotros-destello {
        width: 75%;

        max-width: 320px;

        height: 8px;

        margin:
            18px
            auto
            28px;
    }


    /* -----------------------------------------------------
       TEXTO
       ----------------------------------------------------- */

    .nosotros-texto {
        width: 100%;

        max-width: 650px;
    }


    .nosotros-texto p {
        margin-bottom: 16px;

        font-size: 0.9rem;

        line-height: 1.55;

        text-align: center;
    }


    /* -----------------------------------------------------
       DESTELLO FINAL
       ----------------------------------------------------- */

    .nosotros-destello-final {
        width: 60%;

        margin:
            8px
            auto
            15px;
    }


    /* -----------------------------------------------------
       FRASE FINAL
       ----------------------------------------------------- */

    .nosotros-contenido h5 {
        font-size: 0.9rem;

        line-height: 1.4;

        letter-spacing: 1.5px;

        text-align: center;
    }


    /* =====================================================
       GALERÍA
       ===================================================== */

    .nosotros-galeria {
        padding:
            45px
            8%
            60px;
    }


    /* -----------------------------------------------------
       DOS COLUMNAS
       ----------------------------------------------------- */

    .nosotros-fila {
        grid-template-columns: repeat(2, 1fr);

        gap:
            35px
            20px;

        margin-bottom: 60px;
    }


    /* -----------------------------------------------------
       IMÁGENES
       ----------------------------------------------------- */

    .nosotros-imagen-item img {
        max-width: 150px;
    }


    /* -----------------------------------------------------
       TÍTULOS + REFLEJO
       ----------------------------------------------------- */

    .nosotros-imagen-item h3 {
        margin-top: 5px;

        font-size: 0.8rem;

        -webkit-box-reflect:
            below 2px
            linear-gradient(
                transparent 0%,

                rgba(97, 163, 240, 0.12) 35%,

                transparent 75%
            );
    }


    /* -----------------------------------------------------
       DESTELLOS
       ----------------------------------------------------- */

    .nosotros-linea {
        top: 35%;
    }
}


/* =========================================================
   CELULARES PEQUEÑOS
   ========================================================= */

@media (max-width: 480px) {

    /* -----------------------------------------------------
       CONTENIDO NOSOTROS
       ----------------------------------------------------- */

    .nosotros-contenido {
        padding:
            45px
            20px
            40px;
    }


    .nosotros-contenido h1 {
        font-size: 2.5rem;
    }


    .nosotros-texto p {
        font-size: 0.84rem;

        line-height: 1.5;
    }


    .nosotros-destello {
        margin:
            15px
            auto
            22px;
    }


    .nosotros-contenido h5 {
        font-size: 0.8rem;
    }


    /* -----------------------------------------------------
       GALERÍA
       ----------------------------------------------------- */

    .nosotros-galeria {
        padding:
            35px
            7%
            50px;
    }


    /* -----------------------------------------------------
       FILAS
       ----------------------------------------------------- */

    .nosotros-fila {
        gap:
            25px
            15px;

        margin-bottom: 50px;
    }


    /* -----------------------------------------------------
       IMÁGENES
       ----------------------------------------------------- */

    .nosotros-imagen-item img {
        max-width: 125px;
    }


    /* -----------------------------------------------------
       TÍTULOS + REFLEJO
       ----------------------------------------------------- */

    .nosotros-imagen-item h3 {
        font-size: 0.75rem;

        -webkit-box-reflect:
            below 2px
            linear-gradient(
                transparent 0%,

                rgba(97, 163, 240, 0.10) 30%,

                transparent 70%
            );
    }


    /* -----------------------------------------------------
       DESTELLO
       ----------------------------------------------------- */

    .nosotros-linea {
        top: 34%;
    }
}