/* =============================================================
   quienes-somos.css — Página Quiénes somos
   Elicon System WEB 5.0
   ============================================================= */


/* -------------------------------------------------------------
   S1 — Hero / Intro
   ------------------------------------------------------------- */
.qs-hero {
    padding:       80px 0 72px;
    background:    var(--color-bg-soft);
    border-bottom: 1px solid var(--color-border);
}

.qs-hero h1 {
    font-size:     clamp(32px, 5vw, 48px);
    font-weight:   700;
    color:         var(--color-text);
    margin-bottom: 1.25rem;
    line-height:   1.15;
}

.qs-hero__lead {
    font-size:   1.125rem;
    color:       var(--color-text-muted);
    line-height: 1.75;
    max-width:   560px;
    margin:      0;
}

.qs-hero__badge {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    background:      var(--color-brand);
    color:           #ffffff;
    border-radius:   var(--radius-lg);
    padding:         2.5rem 3.5rem;
    text-align:      center;
    min-width:       220px;
}

.qs-hero__num {
    display:     block;
    font-size:   clamp(72px, 10vw, 96px);
    font-weight: 800;
    line-height: 1;
}

.qs-hero__label {
    font-size:   1rem;
    font-weight: 500;
    opacity:     0.85;
    margin-top:  0.5rem;
}


/* -------------------------------------------------------------
   S2 — Historia
   ------------------------------------------------------------- */
.qs-historia {
    padding:    80px 0;
    background: var(--color-bg);
}

.qs-historia__titulo {
    font-size:     clamp(22px, 3.5vw, 30px);
    font-weight:   700;
    color:         var(--color-text);
    margin-bottom: 2.5rem;
    line-height:   1.25;
}

.qs-historia__texto p {
    font-size:     1rem;
    line-height:   1.85;
    color:         var(--color-text-muted);
    margin-bottom: 1.25rem;
}

.qs-historia__texto p:last-child {
    margin-bottom: 0;
}


/* -------------------------------------------------------------
   S3 — Misión + Visión
   ------------------------------------------------------------- */
.qs-mv {
    padding:    80px 0;
    background: #ecf0fb;
}

.qs-mv__card {
    background:    #ffffff;
    border-radius: var(--radius-lg);
    padding:       2.5rem;
    height:        100%;
    box-shadow:    var(--shadow-sm);
}

.qs-mv__icono {
    width:           52px;
    height:          52px;
    background:      var(--color-brand);
    border-radius:   var(--radius-md);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   1.25rem;
    flex-shrink:     0;
}

.qs-mv__icono .bi {
    color:     #ffffff;
    font-size: 1.5rem;
}

.qs-mv__card h3 {
    font-size:     1.25rem;
    font-weight:   700;
    color:         var(--color-text);
    margin-bottom: 1rem;
}

.qs-mv__card p {
    font-size:   0.9375rem;
    line-height: 1.8;
    color:       var(--color-text-muted);
    margin:      0;
}


/* -------------------------------------------------------------
   S4 — Valores
   ------------------------------------------------------------- */
.qs-valores {
    padding:    80px 0;
    background: var(--color-bg);
}

.qs-valores__titulo {
    font-size:     clamp(22px, 3.5vw, 30px);
    font-weight:   700;
    color:         var(--color-text);
    margin-bottom: 0;
    line-height:   1.25;
}

.qs-valor-card {
    background:    var(--color-bg-soft);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding:       2rem 1.75rem;
    height:        100%;
}

.qs-valor-card__icono {
    width:           48px;
    height:          48px;
    background:      var(--color-brand-light);
    border-radius:   var(--radius-md);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   1.25rem;
    flex-shrink:     0;
}

.qs-valor-card__icono .bi {
    color:     var(--color-brand);
    font-size: 1.4rem;
}

.qs-valor-card h4 {
    font-size:     1.05rem;
    font-weight:   700;
    color:         var(--color-text);
    margin-bottom: 0.75rem;
}

.qs-valor-card p {
    font-size:   0.9375rem;
    line-height: 1.8;
    color:       var(--color-text-muted);
    margin:      0;
}


/* -------------------------------------------------------------
   S5 — Ubicación + CTA
   ------------------------------------------------------------- */
.qs-cta {
    padding:    80px 0;
    background: var(--color-bg-dark);
}

.qs-cta__label {
    color:   rgba(255, 255, 255, 0.55) !important;
}

.qs-cta h2 {
    font-size:     clamp(24px, 4vw, 36px);
    font-weight:   700;
    color:         #ffffff;
    margin-bottom: 1rem;
    line-height:   1.2;
}

.qs-cta__texto {
    font-size:     1rem;
    color:         rgba(255, 255, 255, 0.72);
    line-height:   1.75;
    margin-bottom: 2rem;
    max-width:     500px;
}

.qs-cta__acciones {
    display:   flex;
    gap:       1rem;
    flex-wrap: wrap;
}

.qs-cta__info {
    background:    rgba(255, 255, 255, 0.06);
    border:        1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding:       2rem 2.25rem;
}

.qs-cta__lista {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        1.25rem;
}

.qs-cta__lista li {
    display:     flex;
    align-items: center;
    gap:         0.875rem;
    font-size:   0.9375rem;
    color:       rgba(255, 255, 255, 0.72);
}

.qs-cta__lista .bi {
    color:      #7aabff;
    font-size:  1.1rem;
    flex-shrink: 0;
}

.qs-cta__lista a {
    color:           rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition:      color var(--transition);
}

.qs-cta__lista a:hover {
    color: #ffffff;
}


/* -------------------------------------------------------------
   Responsive
   ------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .qs-hero {
        padding: 64px 0 56px;
    }

    .qs-hero__badge {
        min-width: auto;
        width:     100%;
        padding:   2rem;
    }

    .qs-hero__num {
        font-size: 72px;
    }

    .qs-cta__info {
        padding: 1.75rem;
    }
}

@media (max-width: 767.98px) {
    .qs-historia,
    .qs-mv,
    .qs-valores,
    .qs-cta {
        padding: 64px 0;
    }

    .qs-mv__card {
        padding: 2rem 1.5rem;
    }

    .qs-cta__acciones {
        flex-direction: column;
    }

    .qs-cta__acciones .btn {
        width: 100%;
        text-align: center;
    }
}