/* ============================================================
   HERO — QUIÉNES SOMOS
============================================================ */

.qs-hero {

    position: relative;

    min-height: 680px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--sp-verde-dark);
}


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

.qs-hero-bg {

    position: absolute;

    inset: 0;

    background-image:
        url("../../assets/img/hero/nosotros.png");

    background-size: cover;

    background-position: center;

    transform: scale(1.03);

    animation:
        heroZoom 12s ease-out forwards;

}


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

.qs-hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,

            rgba(0, 77, 37, 0.96) 0%,

            rgba(0, 77, 37, 0.88) 32%,

            rgba(0, 77, 37, 0.55) 58%,

            rgba(0, 77, 37, 0.12) 100%
        );

}


/* ============================================================
   ANIMACIÓN DE LA FOTO
============================================================ */

@keyframes heroZoom {

    from {

        transform: scale(1.03);

    }

    to {

        transform: scale(1);

    }

}


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

.qs-hero .container {

    position: relative;

    z-index: 2;
}


.qs-hero-content {

    max-width: 720px;

}


.qs-hero-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 22px;

    padding: 8px 15px;

    border-radius: 50px;

    background:
        rgba(244, 196, 0, 0.14);

    border: 1px solid
        rgba(244, 196, 0, 0.35);

    color: var(--sp-amarillo);

    font-size: 0.7rem;

    font-weight: 900;

    letter-spacing: 1.2px;
}


.qs-hero-label i {

    font-size: 0.85rem;
}


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

.qs-hero h1 {

    margin: 0 0 25px;

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

    line-height: 1;

    font-weight: 900;

    letter-spacing: -2px;

    color: var(--sp-white);
}


.qs-hero h1 span {

    display: block;

    color: var(--sp-amarillo);
}


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

.qs-hero p {

    max-width: 610px;

    margin: 0 0 32px;

    font-size: 1rem;

    line-height: 1.85;

    color:
        rgba(255, 255, 255, 0.82);
}


/* ============================================================
   BOTÓN
============================================================ */

.qs-hero .btn-sp {

    display: inline-flex;

    align-items: center;

    gap: 12px;

}


.qs-hero .btn-sp i {

    transition:
        transform 0.3s ease;
}


.qs-hero .btn-sp:hover i {

    transform: translateX(4px);

}


/* ============================================================
   INDICADOR
============================================================ */

.qs-hero-scroll {

    position: absolute;

    z-index: 3;

    bottom: 25px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

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

    font-size: 0.65rem;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.qs-hero-scroll i {

    color: var(--sp-amarillo);

    font-size: 0.9rem;

    animation:
        qsScroll 1.5s ease-in-out infinite;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 991px) {

    .qs-hero {

        min-height: 620px;

    }

    .qs-hero-overlay {

        background:

            linear-gradient(
                90deg,

                rgba(0, 77, 37, 0.94) 0%,

                rgba(0, 77, 37, 0.75) 70%,

                rgba(0, 77, 37, 0.35) 100%
            );

    }

}


@media (max-width: 767px) {

    .qs-hero {

        min-height: 650px;

    }


    .qs-hero-bg {

        background-position:
            65% center;

    }


    .qs-hero-overlay {

        background:

            linear-gradient(
                180deg,

                rgba(0, 77, 37, 0.88) 0%,

                rgba(0, 77, 37, 0.82) 100%
            );

    }


    .qs-hero h1 {

        font-size: 3rem;

        letter-spacing: -1px;

    }


    .qs-hero p {

        font-size: 0.9rem;

    }

}


@media (max-width: 575px) {

    .qs-hero {

        min-height: 600px;

    }


    .qs-hero h1 {

        font-size: 2.65rem;

    }

}

/* ============================================================
   HISTORIA
============================================================ */

.qs-historia {

    padding: 110px 0;

    background: var(--sp-white);
}


.qs-history-image {

    position: relative;

    height: 520px;

    border-radius: 28px;

    overflow: hidden;
}


.qs-history-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 60%,
            rgba(0, 77, 37, 0.35)
        );
}


.qs-history-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.8s ease;
}


.qs-history-image:hover img {

    transform: scale(1.04);
}


.qs-history-badge {

    position: absolute;

    z-index: 2;

    left: 25px;
    bottom: 25px;

    display: flex;

    flex-direction: column;

    padding: 16px 20px;

    border-radius: 15px;

    background: var(--sp-amarillo);

    color: var(--sp-verde-dark);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.15);
}


.qs-history-badge strong {

    font-size: 0.72rem;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.qs-history-badge span {

    font-size: 1.1rem;

    font-weight: 900;
}


.qs-title {

    margin: 15px 0 22px;

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

    line-height: 1.15;

    font-weight: 900;

    color: var(--sp-verde-dark);
}


.qs-title span {

    color: var(--sp-verde);
}


.qs-text {

    margin-bottom: 18px;

    font-size: 0.94rem;

    line-height: 1.85;

    color: #687368;
}


.qs-highlight {

    display: flex;

    gap: 15px;

    margin-top: 30px;

    padding: 20px;

    border-left: 4px solid var(--sp-amarillo);

    background: var(--sp-gray);

    border-radius: 0 15px 15px 0;
}


.qs-highlight i {

    color: var(--sp-verde);

    font-size: 1.5rem;
}


.qs-highlight p {

    margin: 0;

    font-size: 0.9rem;

    font-weight: 700;

    line-height: 1.6;

    color: var(--sp-verde-dark);
}


/* ============================================================
   MISIÓN / VISIÓN
============================================================ */

.qs-mision {

    padding: 110px 0;

    background: var(--sp-gray);
}


.qs-identity-card {

    position: relative;

    height: 100%;

    padding: 40px;

    border-radius: 24px;

    background: var(--sp-white);

    border: 1px solid var(--sp-gray-border);

    overflow: hidden;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


.qs-identity-card:hover {

    transform: translateY(-7px);

    box-shadow:
        0 20px 40px rgba(0, 77, 37, 0.10);
}


.qs-card-icon {

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 25px;

    border-radius: 17px;

    background: var(--sp-verde);

    color: var(--sp-white);

    font-size: 1.4rem;
}


.qs-card-yellow .qs-card-icon {

    background: var(--sp-amarillo);

    color: var(--sp-verde-dark);
}


.qs-card-number {

    position: absolute;

    right: 30px;
    top: 25px;

    font-size: 3rem;

    font-weight: 900;

    color:
        rgba(0, 107, 45, 0.07);
}


.qs-identity-card h3 {

    margin-bottom: 15px;

    font-size: 1.45rem;

    font-weight: 900;

    color: var(--sp-verde-dark);
}


.qs-identity-card p {

    margin: 0;

    font-size: 0.9rem;

    line-height: 1.8;

    color: #687368;
}


/* ============================================================
   VALORES
============================================================ */

.qs-valores {

    padding: 110px 0;

    background: var(--sp-white);
}


.qs-value-card {

    height: 100%;

    padding: 30px;

    border-radius: 20px;

    border: 1px solid var(--sp-gray-border);

    background: var(--sp-white);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


.qs-value-card:hover {

    transform: translateY(-6px);

    border-color:
        rgba(0, 107, 45, 0.25);

    box-shadow:
        0 15px 35px rgba(0, 77, 37, 0.08);
}


.qs-value-icon {

    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 14px;

    background:
        rgba(0, 107, 45, 0.08);

    color: var(--sp-verde);

    font-size: 1.2rem;

    transition:
        background 0.35s ease,
        color 0.35s ease;
}


.qs-value-card:hover
.qs-value-icon {

    background: var(--sp-verde);

    color: var(--sp-white);
}


.qs-value-card h3 {

    margin-bottom: 10px;

    font-size: 1.1rem;

    font-weight: 900;

    color: var(--sp-verde-dark);
}


.qs-value-card p {

    margin: 0;

    font-size: 0.83rem;

    line-height: 1.7;

    color: #718071;
}


/* ============================================================
   PROPÓSITO
============================================================ */

.qs-proposito {

    padding: 110px 0;

    background: var(--sp-verde-dark);

    color: var(--sp-white);
}


.qs-proposito h2 {

    margin: 15px 0 20px;

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

    line-height: 1.15;

    font-weight: 900;
}


.qs-proposito h2 span {

    color: var(--sp-amarillo);
}


.qs-proposito > .container > .row > div > p {

    max-width: 520px;

    margin: 0;

    font-size: 0.94rem;

    line-height: 1.85;

    color:
        rgba(255, 255, 255, 0.7);
}


.qs-purpose-grid {

    display: grid;

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

    gap: 15px;
}


.qs-purpose-item {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 22px;

    border: 1px solid
        rgba(255, 255, 255, 0.1);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.04);

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.qs-purpose-item:hover {

    background:
        rgba(255, 255, 255, 0.08);

    transform: translateY(-4px);
}


.qs-purpose-item i {

    flex-shrink: 0;

    font-size: 1.4rem;

    color: var(--sp-amarillo);
}


.qs-purpose-item strong {

    display: block;

    margin-bottom: 4px;

    font-size: 0.85rem;

    color: var(--sp-white);
}


.qs-purpose-item span {

    display: block;

    font-size: 0.72rem;

    line-height: 1.5;

    color:
        rgba(255, 255, 255, 0.55);
}


/* ============================================================
   IDENTIDAD
============================================================ */

.qs-identidad {

    padding: 110px 0;

    background: var(--sp-white);
}


.qs-identity-image {

    position: relative;

    height: 500px;

    border-radius: 28px;

    overflow: hidden;
}


.qs-identity-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.8s ease;
}


.qs-identity-image:hover img {

    transform: scale(1.04);
}


.qs-image-tag {

    position: absolute;

    left: 25px;
    bottom: 25px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px 17px;

    border-radius: 50px;

    background: var(--sp-white);

    color: var(--sp-verde-dark);

    font-size: 0.78rem;

    font-weight: 800;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.15);
}


.qs-image-tag i {

    color: var(--sp-verde);
}


.qs-check-list {

    display: flex;

    flex-direction: column;

    gap: 14px;

    margin-top: 30px;
}


.qs-check-list div {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 0.85rem;

    font-weight: 700;

    color: var(--sp-black);
}


.qs-check-list i {

    color: var(--sp-verde);

    font-size: 1rem;
}


/* ============================================================
   CTA
============================================================ */

.qs-cta {

    padding: 70px 0;

    background: var(--sp-gray);
}


.qs-cta-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    padding: 55px 60px;

    border-radius: 28px;

    background: var(--sp-verde);

    box-shadow:
        0 20px 45px rgba(0, 77, 37, 0.14);
}


.qs-cta h2 {

    margin: 13px 0 10px;

    font-size:
        clamp(1.8rem, 4vw, 2.7rem);

    font-weight: 900;

    color: var(--sp-white);
}


.qs-cta h2 span {

    color: var(--sp-amarillo);
}


.qs-cta p {

    margin: 0;

    font-size: 0.88rem;

    color:
        rgba(255, 255, 255, 0.7);
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 991px) {

    .qs-hero {

        min-height: 560px;
    }


    .qs-historia,
    .qs-mision,
    .qs-valores,
    .qs-proposito,
    .qs-identidad {

        padding: 90px 0;
    }


    .qs-cta-inner {

        padding: 45px;

        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 767px) {

    .qs-hero {

        min-height: 600px;

        background-position: 65% center;
    }


    .qs-hero h1 {

        font-size: 2.8rem;
    }


    .qs-history-image {

        height: 400px;
    }


    .qs-identity-image {

        height: 400px;
    }


    .qs-purpose-grid {

        grid-template-columns: 1fr;
    }


    .qs-identity-card {

        padding: 30px;
    }


    .qs-cta-inner {

        padding: 35px 25px;

        border-radius: 22px;
    }

}


@media (max-width: 575px) {

    .qs-hero {

        min-height: 570px;
    }


    .qs-hero p {

        font-size: 0.92rem;
    }


    .qs-history-image,
    .qs-identity-image {

        height: 330px;

        border-radius: 20px;
    }


    .qs-historia,
    .qs-mision,
    .qs-valores,
    .qs-proposito,
    .qs-identidad {

        padding: 75px 0;
    }


    .qs-value-card {

        padding: 25px;
    }

}