/* ════════════════════════════════════════════════════════════════════════════
   quienes-somos.css — Transotel.Web
   Ubicación: Transotel.Web/wwwroot/css/quienes-somos.css
   ════════════════════════════════════════════════════════════════════════════ */

/* ── HERO ──────────────────────────────────────────────────────────────────── */
.qs-hero {
    position:   relative;
    color:      #fff;
    overflow:   hidden;
    padding:    7rem 0 5.5rem;
}
.qs-hero-bg {
    position:            absolute;
    inset:               0;
    background-image:    url('https://images.unsplash.com/photo-1530521954074-e64f6810b32d?w=1600&auto=format&fit=crop&q=60');
    background-size:     cover;
    background-position: center 40%;
    pointer-events:      none;
}
.qs-hero-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(130deg,rgba(11,31,58,.95) 0%,rgba(11,31,58,.82) 60%,rgba(0,101,86,.70) 100%);
    pointer-events:none;
}
.qs-hero-inner { position:relative; z-index:1; max-width:760px; }
.qs-hero-inner h1 {
    font-size:      clamp(2.2rem,4.5vw,3.4rem);
    font-weight:    800;
    letter-spacing: -.025em;
    line-height:    1.1;
    margin-bottom:  1.2rem;
    color:          #fff;           /* fuerza blanco sobre el hero oscuro */
}
.qs-hero-inner .lead { color:rgba(255,255,255,.82); margin-bottom:2rem; }

.qs-hero-pills { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem; }

/* ── HISTORIA ─────────────────────────────────────────────────────────────── */
.qs-historia-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   3.5rem;
    align-items:           center;
    margin-top:            1rem;
}
@media (min-width:900px) { .qs-historia-grid { grid-template-columns:1fr 1fr; } }

.qs-historia-img img {
    border-radius: 18px;
    width:         100%;
    object-fit:    cover;
    aspect-ratio:  4/3;
    box-shadow:    0 18px 50px rgba(11,31,58,.15);
    border:        3px solid rgba(0,133,114,.2);
}

.qs-historia-text h2 { display:flex; align-items:center; gap:.55rem; margin-bottom:.75rem; }
.qs-historia-text p  { font-size:.95rem; color:#495057; line-height:1.8; margin-bottom:1.1rem; }
.qs-historia-text p:last-of-type { margin-bottom:0; }

.qs-historia-firma {
    display:     flex;
    align-items: center;
    gap:         .6rem;
    margin-top:  1.5rem;
    font-size:   .9rem;
    font-weight: 600;
    color:       #008572;
    font-style:  italic;
}

/* ── VALORES ──────────────────────────────────────────────────────────────── */
.qs-valores-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   1.5rem;
    margin-top:            3rem;
    padding:               0;
}
@media (min-width:576px) { .qs-valores-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:992px) { .qs-valores-grid { grid-template-columns:repeat(3,1fr); } }

.qs-valor-card {
    border-radius: 14px;
    border:        1px solid rgba(11,31,58,.08);
    box-shadow:    0 2px 16px rgba(11,31,58,.06);
    transition:    transform .25s, box-shadow .25s;
    position:      relative;
    overflow:      hidden;
}
.qs-valor-card::before {
    content:''; position:absolute;
    top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,#008572,#dfbb3e);
    opacity:0; transition:opacity .25s;
}
.qs-valor-card:hover { transform:translateY(-5px); box-shadow:0 12px 36px rgba(11,31,58,.12); }
.qs-valor-card:hover::before { opacity:1; }

.qs-valor-icon {
    width:54px; height:54px;
    background:rgba(0,133,114,.10);
    border:1px solid rgba(0,133,114,.2);
    border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; color:#008572;
    margin-bottom:.85rem;
    transition:background .25s, transform .25s;
}
.qs-valor-card:hover .qs-valor-icon { background:rgba(0,133,114,.18); transform:scale(1.08); }

.qs-valor-card h3 { font-size:1rem; font-weight:700; margin-bottom:.45rem; color:#0B1F3A; }
.qs-valor-card p  { font-size:.875rem; color:#6c757d; margin:0; line-height:1.65; }

/* ── NÚMEROS ──────────────────────────────────────────────────────────────── */
.qs-numeros-section {
    position:   relative;
    overflow:   hidden;
    padding:    5rem 0;
}
.qs-numeros-bg {
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg,#0B1F3A 0%,#152d55 60%,#1e4070 100%);
}
.qs-numeros-section .container { position:relative; z-index:1; }
.qs-num-title { color:#fff; text-align:center; font-size:clamp(1.6rem,3vw,2.2rem); }

.qs-numeros-grid {
    display:               grid;
    grid-template-columns: repeat(2,1fr);
    gap:                   2rem;
    margin-top:            3rem;
    padding:               0;
}
@media (min-width:768px) { .qs-numeros-grid { grid-template-columns:repeat(4,1fr); } }

.qs-num-card {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .5rem;
    background:     rgba(255,255,255,.06);
    border:         1px solid rgba(255,255,255,.12);
    border-radius:  14px;
    padding:        2rem 1rem;
}
.qs-num-value {
    font-size:   2.8rem;
    font-weight: 900;
    color:       #dfbb3e;
    line-height: 1;
    letter-spacing:-.03em;
}
.qs-num-label { font-size:.82rem; color:rgba(255,255,255,.65); text-align:center; }

/* ── EQUIPO ───────────────────────────────────────────────────────────────── */
.qs-equipo-content {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   3rem;
    align-items:           center;
    margin-top:            2rem;
}
@media (min-width:900px) { .qs-equipo-content { grid-template-columns:1fr 1fr; } }

.qs-equipo-text p { font-size:.95rem; color:#495057; line-height:1.8; margin-bottom:1rem; }
.qs-equipo-img img {
    border-radius: 16px;
    width:         100%;
    object-fit:    cover;
    aspect-ratio:  4/3;
    box-shadow:    0 14px 40px rgba(11,31,58,.12);
}

/* Datos empresa */
.qs-empresa-data {
    margin-top:    3rem;
    background:    rgba(11,31,58,.04);
    border:        1px solid rgba(11,31,58,.1);
    border-radius: 14px;
    padding:       2rem;
}
.qs-empresa-data h3 {
    font-size:     1rem;
    display:       flex;
    align-items:   center;
    gap:           .5rem;
    margin-bottom: 1.25rem;
    color:         #0B1F3A;
}
.qs-empresa-dl {
    display:               grid;
    grid-template-columns: auto 1fr;
    gap:                   .5rem 1.5rem;
    font-size:             .9rem;
}
.qs-empresa-dl dt { font-weight:600; color:#495057; white-space:nowrap; }
.qs-empresa-dl dd { margin:0; color:#6c757d; }
.qs-empresa-dl a  { color:#008572; }
.qs-empresa-dl a:hover { color:#006658; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width:575px) {
    .qs-numeros-grid { grid-template-columns:repeat(2,1fr); }
    .qs-num-value { font-size:2rem; }
}