/* =========================================================
   🧩 CARDS / VALUE BOX - MBC CONSULTORA
   =========================================================
   ✔ Soporta hover completo (fondo + texto + iconos)
   ✔ Compatible con content-text y content-text2
   ✔ Evita conflictos de colores heredados
   ✔ Reutilizable en múltiples proyectos
   ========================================================= */


/* ===============================
   📦 BASE CARD
   =============================== */
.value-box {
    background-color: var(--color-bg-main); /*fondo en las cards*/
    color: var(--color-primary); /*sub titulos en las cards*/
    text-align: center;
    padding: 60px 30px;
    min-height: 100%;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

    /* ===============================
   🔤 TITULOS EN CARDS
   =============================== */
    .value-box h5 {
        font-size: 1.9rem;
        font-weight: 600;
        margin-bottom: 15px;
    }


/* ===============================
   🎯 ICONOS
   =============================== */
.value-icon {
    max-width: 150px;
    margin: 0 auto 5px;
    transition: transform 0.3s ease, filter 0.3s ease;
}


/* ===============================
   🔥 HOVER GLOBAL (SOLUCIÓN CLAVE)
   =============================== */
/* Aplica a TODO el contenido interno */
.value-box:hover {
    background-color: var(--color-hover-dark);
    color: var(--color-text-light);
}

.value-box:hover h5,
.value-box:hover p,
.value-box:hover .content-text,
.value-box:hover .content-text2 {
    color: var(--color-text-light);
}

/* Animación icono */
.value-box:hover .value-icon {
    transform: scale(1.2);
    filter: invert(1);
}


/* ===============================
   🧠 VARIANTES: NOSOTROS
   =============================== */

/* Contenedor */
#nosotros-full .value-box {
    background-color: var(--color-secondary);
}


/* ===============================
   🚀 MISIÓN
   =============================== */
#nosotros-full .box-mision {
    background-color: var(--color-primary);
    color: var(--color-text-light);
}

/* Asegurar textos correctos */
#nosotros-full .box-mision h5,
#nosotros-full .box-mision p,
#nosotros-full .box-mision .content-text2 {
    color: var(--color-text-light);
}

/* Hover */
#nosotros-full .box-mision:hover {
    background-color: var(--color-bg-main);
    color: var(--color-primary);
}

#nosotros-full .box-mision:hover h5,
#nosotros-full .box-mision:hover p,
#nosotros-full .box-mision:hover .content-text2 {
    color: var(--color-primary);
}


/* ===============================
   🌟 VISIÓN
   =============================== */
#nosotros-full .box-vision {
    background-color: var(--color-bg-main);
    color: var(--color-primary);
}

/* Asegurar textos correctos */
#nosotros-full .box-vision h5,
#nosotros-full .box-vision p,
#nosotros-full .box-vision .content-text2 {
    color: var(--color-primary);
}

/* Hover */
#nosotros-full .box-vision:hover {
    background-color: var(--color-primary);
    color: var(--color-text-light);
}

#nosotros-full .box-vision:hover h5,
#nosotros-full .box-vision:hover p,
#nosotros-full .box-vision:hover .content-text2 {
    color: var(--color-text-light);
}