/* =========================================
   welcome.css — Estilos exclusivos del inicio
   ========================================= */
:root {
    --inicio-color-fondo: #f5f5f7;
    --inicio-color-primario: #001a33;
    --fondo-banner-accion: var(--inicio-color-primario);
}

/* El hero canopy principal ahora está unificado y regulado por mapa.css */

/* ── HERO: etiqueta sobre el título ── */
.hero-eyebrow {
    display: inline-block;
    background: rgba(236, 201, 75, 0.12);
    color: #ecc94b;
    border: 1px solid rgba(236, 201, 75, 0.35);
    border-radius: 50px;
    padding: 5px 18px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

/* La franja de cifras (.stats-strip) vive en stats-strip.css */

/* ── QUIÉNES SOMOS ── */
.quienes-somos {
    background: #fff;
    padding: 80px 5%;
    text-align: center;
    border-bottom: 1px solid #eef0f4;
}

.qs-inner {
    max-width: 720px;
    margin: 0 auto;
}

.qs-logo {
    height: 72px;
    width: auto;
    object-fit: contain;
    margin-bottom: 20px;
    opacity: 0.8;
}

.qs-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #ecc94b;
    font-weight: 700;
    margin-bottom: 16px;
}

.qs-texto {
    font-size: 1.2rem;
    line-height: 1.85;
    color: #4a5568;
}

.qs-texto strong {
    color: #1a365d;
    font-weight: 700;
}

/* ── IDENTIDAD CORPORATIVA: encabezado + icono ── */
.mv-encabezado {
    text-align: center;
    padding: 60px 5% 10px;
}

.identidad-corporativa .mision-vision-contenedor {
    padding: 30px 5% 60px;
}

.mv-icono {
    margin-bottom: 16px;
}

/* ── VALORES: icono circular + layout flex ── */
.valor-icono {
    width: 56px;
    height: 56px;
    background: rgba(236, 201, 75, 0.08);
    border: 2px solid rgba(236, 201, 75, 0.22);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    transition:
        background 0.3s ease,
        border-color 0.3s ease;
    flex-shrink: 0;
}

.valor-item:hover .valor-icono {
    background: rgba(236, 201, 75, 0.18);
    border-color: #ecc94b;
}

.valores-corporativos .valor-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.valores-corporativos .valor-item strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.valores-corporativos .valor-item span {
    font-size: 0.82rem;
    color: #9ab0c8;
    line-height: 1.55;
    display: block;
}

/* ── SERVICIOS: barra superior animada ── */
.tarjeta-servicio {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.tarjeta-servicio::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1a365d, #ecc94b);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.tarjeta-servicio:hover::before {
    transform: scaleX(1);
}

.tarjeta-servicio .logo-marca {
    height: 80px;
    width: auto;
    margin-bottom: 16px;
    object-fit: contain;
}

/* Logo genérico para carrusel y otras ubicaciones */
.logo-marca {
    object-fit: contain;
}



/* ── BANNER ACCIÓN: overlay más oscuro en inicio ── */
.banner-accion .banner-overlay {
    background: linear-gradient(
        135deg,
        rgba(0, 20, 45, 0.9) 0%,
        rgba(26, 54, 93, 0.82) 100%
    );
}

/* ── LOGOS CON CONTRASTE: para logos oscuros/negros sobre fondos claros ── */
.logo-con-contraste {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15)) brightness(1.05);
}

.tarjeta-servicio .logo-con-contraste {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .qs-texto {
        font-size: 1.05rem;
    }

    .identidad-corporativa .mision-vision-contenedor {
        padding: 20px 5% 40px;
    }
}